var Tab = Class.create({
    _styles: {
        activeTab: "ActiveTab",
        activePanel: "ActivePanel",
        hoverTab: "HoverTab"
    },
    initialize: function(tabId, panelId, tabSet){
        this._tab = $(tabId);
        this._panel = $(panelId);
        this._tabSet = tabSet;
        
        this._tab.observe('mouseover', this._onMouseOver.bindAsEventListener(this));
        this._tab.observe('mouseout', this._onMouseOut.bindAsEventListener(this));
        this._tab.observe('click', this._onClick.bindAsEventListener(this));
    },
    isActive: function(){
        return this._panel.visible();
    },
    setActive: function(){
        this._tab.addClassName(this._styles.activeTab);
        this._panel.addClassName(this._styles.activePanel).show();
    },
    setInactive: function(){
        this._tab.removeClassName(this._styles.activeTab);
        this._panel.removeClassName(this._styles.activePanel).hide();
    },
    _onMouseOver: function(event){
        this._tab.addClassName(this._styles.hoverTab);
    },
    _onMouseOut: function(event){
        this._tab.removeClassName(this._styles.hoverTab);
    },
    _onClick: function(event){
        this._tabSet.setActive(this);
    }
});
var TabSet = Class.create({
    initialize: function(tabs){
        // Create instances for all tab/panel pairs
        this._pairs = tabs.inject($([]), function(tabs, tab){
            var t = tab.split('|')[0];
            var p = tab.split('|')[1];
            tabs.push(new Tab(t, p, this));
            return tabs;
        }.bind(this));
        
        // Figure out which tab/panel pair is currently active
        this._active = this._pairs.find(function(tab){
            return tab.isActive();
        });
		this._active.setActive();
    },
    
    setActive: function(tab){
        this._active.setInactive();
        this._active = tab;
        this._active.setActive();
    }
});