myterra.TabBar = myterra.extend(myterra.Observable, {

    el: null,
    tabs: null,
    value: null,
    at: null,

    constructor: function(el, list, delim) {
        myterra.inherited(this);
        this.el = $(el);
        this.tabs = [];
        this.delim = delim || "";
        if (list) {
            this.suspendEvents();
            this.add(list);
            this.resumeEvents();
        }
    },

    add: function(list) {
        if (!myterra.isArray(list)) list = [list];
        if (this.fireEvent("beforeadd", this, list) === false) return;
        var self = this;
        for (var i = 0; i < list.length; i++) {
(function   (t) {
                if (self.tabs.length > 0) {
                    self.el.appendText(self.delim);
                }
                var a = $("<a/>");
                if (t.opts && t.opts.tabClazz) {
                    a.addClass(t.opts.tabClazz);
                }
                a.attr("href", "#");
                a.text(t.title);
                a.click(function(e) {
                    self.setActive(t);
                    return false;
                });
                a.appendTo(self.el);
                a.panel = t;
                t.tab = a;
                self.tabs.push(t);
            })(list[i]);
        }
        this.fireEvent("add", this, list);
    },

    setActive: function(t, forceEvent) {
        var index;
        if (myterra.isNumber(t)) {
            t = this.tabs[index = t];
            if (!t) return;
        } else {
            index = this.tabs.indexOf(t);
            if (t == -1) return;
        }
        if (t != this.at || forceEvent === true) {

            if (this.fireEvent("beforechange", this, t, index) === false)
                return;

            if (t != this.at) {
                var a;
                if (this.at) {
                    a = this.at.tab;
                    a.removeClass("active");
                    a.attr("href", "#");
                    this.at.el.addClass("hidden");
                }
                a = t.tab;
                a.addClass("active");
                a.removeAttr("href");
                (this.at = t).el.removeClass("hidden");
            }

            this.fireEvent("change", this, t, index);

        }
        return t;
    },

    getActive: function() {
        return this.at;
    },

    getTabIndex: function() {
        return this.tabs.indexOf(this.at);
    }

});