var Tabs = new SuperClass;

(function($){

Tabs.include({
  init: function(element){
    this.element = $(element);
    this.element.delegate("li", "click", this.proxy(this.click));
    this.activate(this.tabs(":first"));
  },

  tabs: function(sel){
    this.element.find("li" + (sel || ""));
  },

  click: function(e){
    this.activate($(e.target));
  },

  activate: function(tab){
    this.tabs().removeClass("active");
    tab.addClass("active");
    this.element.change();
  }
});

$.fn.tabs = function(){
  new Tabs(this);
  return this;
};

})(jQuery);


var HistoryTabs = new SuperClass(Tabs);

(function($){

HistoryTabs.include({
  init: function(element){
    this._super(element);
    $(window).bind("hashchange", this.proxy(this.hashChange));
  },

  activate: function(tab){
    this._super(tab);
    window.location.hash = tab.attr("data-name");
  },

  tabByName: function(name){
    return(this.tabs("[data-name='" + name + "']"));
  },

  hashChange: function(){
    var tabName = window.location.hash.match(/#(\w+)/)[1];
    var tab = this.tabByName(tabName);
    if (tab[0]) this.activate(tab);
  }
});

$.fn.tabs = function(){
  new HistoryTabs(this);
  return this;
};

})(jQuery);