Site.Widgets.Tabs = Class.create
(
    Site.Base,
    {
        initialize: function($super, tabs, panels, options)
        {
            this.tabs = tabs;
            this.panels = panels;
            
            this.setOptions
            (
                options,
                {
                    activeTabClassName: "active",
                    tabTag: "a"
                }
            );
            
            this.addObservers("tabOnClick");

            $super();
            
            this.activePanel = this.panels.find(function(panel) { return panel.visible(); } );
            this.activeTab = this.tabs.find(function(tab) { return tab.hasClassName(this.options.activeTabClassName); }, this);
            
            this.tabs.each
            (
                function(tab)
                {
                    addEvent(tab, "click", this.observers.tabOnClick);
                },
                this
            );

        },
        
        destroy: function($super)
        {
            this.tabs.each
            (
                function(tab)
                {
                    removeEvent(tab, "click", this.observers.tabOnClick);
                },
                this
            );
            
            $super();
        },
        
        tabOnClick: function(event)
        {
            var element = Event.element(event);
            var tab = element.matchUp(this.options.tabTag);
            
            if (tab != this.activeTab)
            {
                var index = this.tabs.indexOf(tab);
                var panel = this.panels[index];
            
                this.activeTab.removeClassName(this.options.activeTabClassName);
                
                this.activeTab = tab;
                tab.addClassName(this.options.activeTabClassName);
                
                if (this.activePanel)
                    this.activePanel.hide();
                
                this.activePanel = panel;
                
                panel.show();
                
                if (element.blur)
                    element.blur();
            }
            
            Event.stop(event);
        }
    }
    
)