/* Tab Widget Class */
var TabWidget = Class.create({
    initialize: function(divTabWidget) {
        this.divTabWidget = divTabWidget;
        this.tabBtns = this.divTabWidget.select("ul.tab_btns > li a");
        this.tabSections = this.divTabWidget.select("ul.tab_sections > li");
        
        // The user has JavaScript... hide the redundant headings for each tab section
        this.divTabWidget.select("ul.tab_sections li h3.for_no_js").invoke('hide');
        
        // Show the first one
        this.showTabSection(this.tabSections[0]);
        
        // Make the tab buttons work by attaching click events to each of their links
        for(var i=0; i < this.tabBtns.length; i++) {
            this.tabBtns[i].observe("click", this.showTabSection.bindAsEventListener(this, this.tabSections[i]));
        }
    },
    
    showTabSection: function(sectionId) {
        // If there are two arguments, then it's a click event
        if (arguments.length > 1) {
            arguments[0].stop();
            sectionId = arguments[1];
        }
        
        // Hide all of the tab sections and tab turn off all of the tab buttons' "on states"
        this.hideAllTabSections();
        this.turnOffAllTabBtns();
        
        
        // Show the tab section with the sectionId and turn the corresponding tab button on
        $(sectionId).show();
        $("tab_"+sectionId.identify()).down("a").addClassName("on");
    },
    
    turnOffAllTabBtns: function() {
        for(var i=0; i < this.tabBtns.length; i++) {
            this.tabBtns[i].removeClassName("on");
        }
    },
    
    hideAllTabSections: function() {
        this.tabSections.invoke('hide');
    }
});



document.observe("dom:loaded", function() {

    var divTabWidgets = $$("div.tab_widget");
    var tabWidgetArr = new Array(divTabWidgets.length);
    
    for(var i=0; i < divTabWidgets.length; i++) {
        tabWidgetArr[i] = new TabWidget(divTabWidgets[i]);
    }
    
});