var CaseStudies = Class.create({
    initialize: function(tabLinks, tabs)
    {
        this.tabLinks = $(tabLinks);
        this.tabLinksChildren = this.tabLinks.childElements();
        this.tabs = $(tabs);
        this.tabsChildren = this.tabs.childElements();

        this.selectedTab = -1;

        var tabLinksCount = this.tabLinksChildren.length;
        var tabsCount = this.tabsChildren.length;

        if (tabLinksCount != tabsCount)
        {
            alert("The number of tabs and the number of case studies are different.");
            return;
        }

        for (i = 0; i < tabLinksCount; i++)
        {
            var tabObject = this.tabLinksChildren[i];
            // Get the "a" tag inside the tab object.
            var tabLink = tabObject.select("a")[0];
            // And create an event handler for it.
            tabLink.observe("click", this.tabClicked(i));
        }

        this.showTab(0);
    },
    // Each link needs to have a different event handler so we know which tab
    // to display. This is done by returning a new anonymous function for each
    // tab index. This avoids the scoping problem we would have if we assigned
    // the same anonymous function to each tab in the for loop above.
    tabClicked: function(index)
    {
        return function(event)
        {
            this.showTab(index);
            // Don't let the default handler scroll to the top of the screen.
            event.stop();
        } .bindAsEventListener(this)
    },
    showTab: function(index)
    {
        if (this.selectedTab > -1)
        {
            this.tabLinksChildren[this.selectedTab].className = ""
            this.tabsChildren[this.selectedTab].hide();
        }

        this.selectedTab = index;

        try
        {
            this.tabLinksChildren[this.selectedTab].className = "selected";
            this.tabsChildren[this.selectedTab].show();
        }
        catch (exception)
        {
        }
    }
});