Tabs = function() {
};

Tabs.prototype = {

    init:function(params) {
        this.params = params;
        this.params['inactive_tab_classname'] = 
                "." + this.params['inactive_tab_class'];
        this.params['active_tab_classname'] =
                 "." + this.params['active_tab_class'];
        
        this.addListeners();
        this.showDivFromURL(); 
    },
    
    addListeners:function() {
        this.tabs().each(
                function(div) {
                    Event.observe(div, 'click', 
                            this.handleClick.bindAsEventListener(this));
                }, this 
            );
    },
    
    showDivFromURL:function() {
    
        if (this.params['show_url_param']) {
        
            var tabId = window.location.search.toQueryParams()[this.params['show_url_param']];
            
            if (tabId && tabId != '' && $(tabId) != null) {
                this.showTab(tabId); 
            }
        }
    },
    
    handleClick:function(e) {
    
        this.showTab(this.getTab(Event.element(e)).id); 
        Event.stop(e);
    },
    
    getTab:function(element) {
    
        var parentTab = element.up([this.params['inactive_tab_classname'],
                 this.params['active_tab_classname']]);

        if (parentTab) {
            return parentTab; 
        } else {
            return element;
        } 
    },
    
    showTab:function(tabId) {
        this.tabs().each(
            function(tab) {
                var bodyDiv = $(tab.down('a').readAttribute('href').sub('#', ''));
                
                if (tab.id == tabId) {
                    tab.addClassName(this.params['active_tab_class']);
                    tab.removeClassName(this.params['inactive_tab_class']);
                    bodyDiv.removeClassName(this.params['hidden_body_class']);
                    bodyDiv.addClassName(this.params['show_body_class']);
                } else {
                    tab.removeClassName(this.params['active_tab_class']);
                    tab.addClassName(this.params['inactive_tab_class']);
                    bodyDiv.removeClassName(this.params['show_body_class']);
                    bodyDiv.addClassName(this.params['hidden_body_class']);
                }
            } 
            ,
            this
        );
        tabId = null;
    },
    
    tabs:function() {
        return $$(this.params['inactive_tab_classname'],
                 this.params['active_tab_classname']);
    }
};