TabStrip = function(container, title, tabs) {
  this.container = container;
  this.title = title;
  this.ul = document.createElement("ul");
  this.container.appendChild(this.ul);
  for (var i = 0; i < tabs.length; i++) {
    var tab = tabs[i];
    var li = document.createElement("li");
    $(li).attr("tabId", i);
    this.ul.appendChild(li);

    var anchor = document.createElement("a");
    li.appendChild(anchor);
    var title = tab.title;
    $(anchor).attr("href", "#" + title);
    if (tab.accessKey != null && tab.accessKey.length > 0) {
      // title should be assigned before accessKey
      title += " (" + tab.accessKey + ")";
      $(anchor).attr("title", title);
      $(anchor).attr("accessKey", tab.accessKey);
    }
    else
      $(anchor).attr("title", title);
    $(anchor).bind("click", this, this.onTabClick);
    $(anchor).append("<div class='Bg'></div><img class='" + tab.imgClass + "' src='StaticFile.axd/Images/1.gif' alt='" + title + "' border='0' /><em style='display: none;'>" + title + "</em>");

    $(tab.element).hide();
  }
  this.tabs = tabs;
}

TabStrip.prototype = {
  activeTab: null,

  getActiveTab: function() {
    return this.activeTab;
  },

  onToggle: function(data, fn) {
    $(this).bind("toggle", data, fn);
  },

  unToggle: function(fn) {
    $(this).unbind("toggle", fn);
  },

  activateTab: function(index) {
    this.activeTab = index;
    var openedTabs = $(this.ul).find("li[class*=OpenedTab]");
    for (var i = 0; i < openedTabs.length; i++) {
      var li = openedTabs[i];
      $(li).removeClass("OpenedTab");
      var j = parseInt($(li).attr("tabId"));
      $(this.tabs[j].element).hide();
    }
    $(this.ul).find("li[tabId=" + index + "]").addClass("OpenedTab");
    $(this.tabs[index].element).show();
    $(this.title).html(this.tabs[index].title);

    $(this).trigger("toggle", index);
  },

  onTabClick: function(event) {
    var index = $($(event.target).parents("li[tabId]:first")[0]).attr("tabId");
    event.data.activateTab(index);
    event.preventDefault();
  }
}