// FIXME: handle tab changes during animation
// FIXME: disable tabber for print version


/* Tabber
----------------------------------------------------------------------------*/

var Tab = Class.create();
Tab.prototype = {
    initialize: function (tabber, number, container) {
        this.tabber = tabber;
        this.number = number;
        this.container = $(container);
        
        var heading = this.container.down("h2");
        this.name = heading.innerHTML;
        heading.addClassName("hidden");
        
        this.id = "tabber"+ this.number +"-trigger"+ this.tabCount;
        
        this.listItem = null;
        this.height = this.container.getHeight();
    },
    
    show: function (height) {
        if (height > 0) this.container.setStyle({height: height + "px"});
        this.container.setOpacity(0.0).removeClassName("hidden");
        this.selectorListItem().addClassName("tabbertab-active")
        this.container.morph("height: "+ this.height + "px", {
            duration: 0.8,
            afterFinish: (function () {
                Effect.Appear(this.container);
            }).bind(this)
        });
    },
    
    hide: function () {
        this.container.addClassName("hidden");
        this.selectorListItem().removeClassName("tabbertab-active")
    },
    
    selectorListItem: function () {
        if (!this.listItem) this.listItem = $(this.id).up("li");
        return this.listItem;
    }
};


var Tabber = Class.create();

Tabber.tabberCount = 0;

Tabber.setup = function (container) {
    return new Tabber(container);
};

Tabber.prototype = {
    initialize: function (container) {
        this.container = $(container);
        
        new Insertion.Top(this.container, '<div class="tabbertab-container"></div>')
        this.tabContainer = this.container.down(".tabbertab-container");
        
        this.number = Tabber.tabberCount;
        Tabber.tabberCount++;
        
        this.tabCount = 0;
        this.tabs = $A();
        
        this.container.getElementsBySelector(".tabbertab").each(this.setupTab.bind(this));
        
        var html = '<ul class="tabber-nav">';
        
        this.tabs.each(function (tab) {
            html += '<li><a href="#" id="'+ tab.id +'">'+ tab.name +'</a></li>';
        });
        
        html += "</ul>";
        
        new Insertion.Top(this.container, html);
        
        this.tabs.each(function (tab) {
            var anchor = $(tab.id);
            anchor.title = anchor.innerHTML.stripTags();
            anchor.observe("click", function (event) {
                Event.stop(event);
                tab.tabber.show(tab.number);
            });
        });
        
        this.currentTab = -1;
        this.tabs.each(function (tab) {tab.hide()});
        this.show(0);
    },
    
    setupTab: function (element) {
        this.tabContainer.appendChild(element.remove());
        this.tabs.push(new Tab(this, this.tabCount, element));        
        this.tabCount++;
    },
    
    show: function (num) {
        num = num || 0;
        
        if (num == this.currentTab) {
            return;
        }
        
        var newTab = this.tabs[num];
        if (this.currentTab >= 0) {
            var oldTab = this.tabs[this.currentTab];
            oldTab.hide();
            newTab.show(oldTab.height);
        } else {
            newTab.show();
        }
        
        this.currentTab = num;
    }
};

Element.observe(window, "load", function (event) {
    $$("div.tabber").each(Tabber.setup);
});