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,
    tabContent: null,
    controller: null,

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

document.observe("dom:loaded", 
    function() {
        if ($('tab-1')) {
            new Tab('tab-1','tab-1-content');
        }
        if ($('tab-2')) {
            new Tab('tab-2','tab-2-content');        
        }
        if ($('tab-3')) {
            new Tab('tab-3','tab-3-content');        
        }
        if ($('tab-4')) {
            new Tab('tab-4','tab-4-content');        
        }
        if ($('tab-5')) {
            new Tab('tab-5','tab-5-content');        
        }
    }
);