var Tabbar = Class.create();
Tabbar.prototype = {
    initialize: function(obj)
    {
        this.elem = obj;
        this.tabitems = $A(this.elem.getElementsByTagName("li"));
        this.tabitems2 = $A();
        this.tabitems.each(function(tabitem)
        {
            new Tabitem(tabitem, this);
        }.bind(this));
        this.tabitems2[0].activate();
    },
    clearCanvas: function()
    {
        this.tabitems2.each(function(tabitem)
        {
            tabitem.deactivate();
        }.bind(this));
    }
}

var Tabitem = Class.create();
Tabitem.prototype = {
    initialize: function(obj, parent)
    {
        this.elem = obj;
        this.parent = parent;
        parent.tabitems2.push(this);
        this.href = this.elem.getElementsByTagName("a")[0].href;
        this.tabcontent = $(this.href.substring(this.href.indexOf("#")+1));
        this.deactivate();
        Event.observe(this.elem, "click", this.activate.bindAsEventListener(this), false);
    },
    activate: function(e)
    {
        if (e) Event.stop(e);
        this.parent.clearCanvas();
        Effect.Appear(this.tabcontent);
        Element.addClassName(this.elem, "selected");
    },
    deactivate: function()
    {
        this.tabcontent.hide();
        Element.removeClassName(this.elem, "selected");
        return false;
    }
}

function initTabbar()
{
    var tabbar = $("faqs");
    if (!tabbar) return false;
    new Tabbar(tabbar);
}

Event.observe(window, 'load', initTabbar, false);