TabControl = {
    tabs: [],
    currentTab: null,
    
    register: function(tab) {
        tab.deactivate();
        if (!this.tabs.length)
            tab.activate();
            
        this.tabs.push(tab);    
    },
    
    notify: function(tab) {
        cTab = this.currentTab;
        if (cTab)
            cTab.deactivate();
        
        this.currentTab = tab;
    }
};

Tab = Class.create({
    tab: null,
    classOn: null,
    classOff: null,
    tabContent: null,
    controller: null,

    initialize: function(tab, tabContent, classOn, classOff) {
        this.tab = $(tab);
        this.tabContent = $(tabContent);
        this.classOn = classOn;
        this.classOff = classOff;
        
        TabControl.register(this);
        
        Event.observe(this.tab, 'click', this.activate.bindAsEventListener(this));
    
    },
    
    activate: function() {
        TabControl.notify(this);
        this.tab.removeClassName(this.classOff);
        this.tab.addClassName(this.classOn);
        this.tabContent.show();
    },
    
    deactivate: function() {
        this.tab.removeClassName(this.classOn)
        this.tab.addClassName(this.classOff);
        this.tabContent.hide();
    }
});

document.observe("dom:loaded", 
    function() {
        if ($('tab-one')) {
            new Tab('tab-one','tab-one-content', 'tab-one-on', 'tab-one-off');
        }
        if ($('tab-two')) {
            new Tab('tab-two','tab-two-content', 'tab-two-on', 'tab-two-off');        
        }
        if ($('tab-three')) {
            new Tab('tab-three','tab-three-content', 'tab-three-on', 'tab-three-off');        
        }
    }
);