/**
 * tabs class for sliding doors css implementation
 * when pre-selecting by default, HTML must initially have class="selected"
 */
var Tabs = Class.create({
    initialize: function(container, options) {
        
        this.options = Object.extend({
            selectedClass: 'selected',
            defaultTab: 0
        }, options || {});
        
        this.container = $(container);
        this.tabs = this.container.select('li');
        this.currentIndex = this.options.defaultTab;
        this.targetPanels = [];
        var k = 0;
        
        this.container.select('li a').each(function(el) {
            var hrefText = el.href.split('#');
            this.targetPanels[k++] = hrefText[1];
            el.observe('click', function(event) {
                var tabIndex = this.getTabIndex($(Event.element(event)).up('li'));
                this.selectTab(tabIndex);
                Event.stop(event);
            }.bindAsEventListener(this));
        }.bind(this));
        
        this.selectTab(this.currentIndex);
    },
    
    selectTab: function(tabIndex) {
        if (tabIndex >= 0) {
            this.tabs[this.currentIndex].removeClassName(this.options.selectedClass);
            this.tabs[tabIndex].addClassName(this.options.selectedClass);
            this.showPanel(tabIndex);
            this.currentIndex = tabIndex;
        }
    },
    
    getTabIndex: function(tab) {
        for (var i = 0; i < this.tabs.length; i++) {
            if (this.tabs[i] == tab) return i;
        }
        return -1;
    },
    
    showPanel: function(tabIndex) {
        if ($(this.targetPanels[this.currentIndex]) && $(this.targetPanels[tabIndex])) {
            $(this.targetPanels[this.currentIndex]).hide();
            $(this.targetPanels[tabIndex]).show();
        }
    }
});