/*******************************************************************************
* Tab Menu.
*
* Terms:
* tab: The link part at the top.
* tabList: The list containing the tabs.
* page: The content part.
* area: The whole thing
******************************************************************************/
//////
//
// Create a tab menu for the given pages. Requires a container div,
// and a div for each page. Links and tabs will be created
// dynamically.
//
// tabAreaId - Div containing the whole area, including all
// pages. Tabs will be added to the top.
//
// objName - The name of this object.
function TabMenu(tabAreaId, objName) {
this.name = objName;
this.tabs = [];
this.tabArea = document.getElementById(tabAreaId);
this.hooks = [];
this.pages = [];
var allDivs = this.tabArea.getElementsByTagName('div');
for (var i = 0; i < allDivs.length; i++) {
if (allDivs[i].className == 'tmActivePage' ||
allDivs[i].className == 'tmInactivePage') {
this.pages.push(allDivs[i]);
}
}
for (var i = 0; i < this.pages.length; i++) {
var pageEl = this.pages[i];
var el = document.createElement('a');
el.id = 'tab_' + pageEl.id;
el.href = 'javascript:' + this.name + '.SelectTab(\'' + el.id + '\')';
if (i == 0) {
el.className = 'tmActiveTab';
} else {
el.className = 'tmInactiveTab';
}
el.appendChild(document.createTextNode(pageEl.title));
this.tabArea.insertBefore(el, this.pages[0]);
this.tabs.push(el);
}
this.SelectTab = function(tabId) {
var tabEl = document.getElementById(tabId);
for (var i = 0; i < this.tabs.length; i++) {
if (this.tabs[i].className == 'tmActiveTab' && this.tabs[i] != tabEl) {
this.tabs[i].className = 'tmInactiveTab';
this.pages[i].className = 'tmInactivePage';
}
}
var pageEl = document.getElementById(tabId.replace('tab_', ''));
tabEl.className = 'tmActiveTab';
pageEl.className = 'tmActivePage';
menuTabEl = document.getElementById('tmMenuTab');
if (menuTabEl) {
menuTabEl.value = pageEl.id;
}
for (var i = 0; i < this.hooks.length; i++) {
h = this.hooks[i];
if (h.tabId == tabId || h.tabId == undefined) {
eval(h.code);
if (h.once) {
this.hooks.splice(i, 1);
}
}
}
}
this.AddHook = function(code, tabId, once) {
var h = {code:code, tabId:tabId, once:once};
this.hooks.push(h);
return h;
}
this.RemoveHook = function(h) {
for (var i = 0; i < this.hooks.length; i++) {
if (this.hooks[i] == h) {
this.hooks.splice(i, 1);
return true;
}
}
return false;
}
}
/******************************************************************************
Example use:
Tab Menu