/* Requires: locationhash.js */

/*
function update_tabs() {
    $$('.tab').each(function(tab) {
        if (in_location_hash(tab.id)) {
            dd.slide('hide');
            dd.getParent().getPrevious('dt').removeClass('active');
        }
        else {
            dd.slide('in');
            dd.getParent().getPrevious('dt').addClass('active');
        }
    });
}
*/

window.addEvent('domready', function() {
    //monitor_location_hash('update_tabs', 500);
    $$('.modal-tabs').each(function(modaltabs) {
    
        // load all available tabs assigned to this mootabs-element
        modaltabs.tabElements = modaltabs.getElements('.tab');

        // the first tab should be the active one
        modaltabs.activeTab = modaltabs.tabElements.getElement('.active');

        // Apply some properties to the tabs
        modaltabs.tabElements.each(function(tab) {
            // set the assigned chooser
            tab.modaltabsElement = this;
            
            // on click this tab should be set as active
            tab.addEvent('click', function() {
                if (this != this.modaltabsElement.activeTab) {
                    this.modaltabsElement.setActive(this);
                }
            });
        }.bind(modaltabs));
            
        // Check if there is a tabs container assigned to this chooser
        modaltabsContentsId = modaltabs.get('rel');
        console.log(modaltabsContentsId);
        console.log("");
        
        // Load all available contents in the content container assigned to this tab element
        modaltabs.contentElements = $(modaltabsContentsId).getElements('> .tab-content');

        // apply some properties to the available tabs
        modaltabs.contentElements.each(function(content) {
            // assign the tab that belongs to this content-element 
            // (which has almost the same ID as this content-element,
            // but it ends without the '-content', so we'll remove it)
            content.tab = $(content.get('rel'));
            if (!content.hasClass('active')) {
                content.fade('hide');
            }
        });
        
        modaltabs.setActive = function(tab) {

            // first give all options the same class name
            this.tabElements.removeClass('active');

            // now add the class "active" to the tab that shall be active
            tab.addClass('active');
            this.activeTab = tab;

            this.tabElements.each(function(tab){
                // if the current tab is active, deactivate it
                if (tab.hasClass('active')) {
                    add_to_location_hash(tab.id);
                } else {
                    remove_from_location_hash(tab.id);
                }
            });

            this.contentElements.each(function(content){
                // if the current tab is active, deactivate it
                if (content.hasClass('active')) {
                    content.fade(0);
                    content.removeClass('active');
                }
                
                if (content.tab.id == tab.id) {
                    content.fade(1);
                    content.addClass('active');
                }
            });

            // ha! the active option has changed, so we have to emit a signal (which is an event in JS's case)
            this.fireEvent('tab_changed', tab);
        };

        // Load tabs from location hash
        modaltabs.tabElements.each(function(tab) {
            if(in_location_hash(tab.id)) {
                this.setActive(tab);
            }
        }.bind(modaltabs));
    });
});