/******************************************************
Index:
  
1) Tab
1.0) Class
1.1) Instances
******************************************************/
/* --------------------------------------------------------------------------------------------- */
/* 1) Tab
/* --------------------------------------------------------------------------------------------- */
var tab = {
prefix:'_TAB'
};
function Tab(name) {
this.name = name;
}
// 1.0) Class
// .......................................................................
Tab.prototype = {
prefix:'_TAB',
tabTag:'label',
tabActiveClass:'active',
contentTag:'ul'
}
/* ---------------------------------- */
/* Init Tab
/* ---------------------------------- */
Tab.prototype.init = function() {
var tabsContainer = $(this.prefix, this.name, 'tabs');
if(tabsContainer == null)
return;
var tabs = tabsContainer.getElementsByTagName(this.tabTag);
// Select The First Tab
tab.show(tabs[0], true);
};
/* ---------------------------------- */
/* Show Specific Tab
/* ---------------------------------- */
Tab.prototype.showTab = function(specification) {
$(this.prefix, this.name, 'tab', specification).onclick();
}
/* ---------------------------------- */
/* ~CSS FUNCTIONALITY~
/* .................................. */
/* Show Tab Content
/* ---------------------------------- */
Tab.prototype.CSS_showContent = function(label, id) {
// Reset All Content
var contentContainer = $(this.prefix, this.name, 'content');
var content = contentContainer.getElementsByTagName(this.contentTag);
for(var i=0; content[i]; i++) {
var cID = $_REVERSE(content[i]);
if(cID.n == this.prefix && cID.index == this.name && cID.element == 'content')
display(content[i], 'none');
}
// Set Selected Content
display($(this.prefix, this.name, 'content', id.specification), '');
};
/* ---------------------------------- */
/* ~CSS FUNCTIONALITY~
/* .................................. */
/* Emphasize Selected Tag
/* ---------------------------------- */
Tab.prototype.CSS_emphasizeTab = function(label, id) {
// Reset All Tabs
var tabsContainer = $(this.prefix, this.name, 'tabs');
var tabs = tabsContainer.getElementsByTagName(this.tabTag);
for(var i=0; i < tabs.length; i++) {
var tID = $_REVERSE(tabs[i]);
if(tID.n == this.prefix && tID.index == this.name && tID.element == 'tab') {
unsetClass(tabs[i], this.tabActiveClass);
}
}
// Set Selected Tab
setClass(label, this.tabActiveClass);
}
// 1.1) Instances
// .......................................................................
tab['instances'] = {};
/* ---------------------------------- */
/* Create Tab
/* ---------------------------------- */
tab.create = function(name, OPTIONAL_tTag, OPTIONAL_cTag) {
this['instances'][name] = new Tab(name);
// Set Tab Tag Type
if(typeof(OPTIONAL_tTag) == 'string')
this['instances'][name].tabTag = OPTIONAL_tTag;
// Set Content Tag Type
if(typeof(OPTIONAL_cTag) == 'string')
this['instances'][name].contentTag = OPTIONAL_cTag;
// Init
this['instances'][name].init();
};
/* ---------------------------------- */
/* Show Tab
/* ---------------------------------- */
tab.quickShow = function(index, specification) {
this.show($(this.prefix, index, 'tab', specification), true);
}
tab.show = function(label, noClickEvent) {
var id = $_REVERSE(label);
// ~CSS FUNCTIONALITY~
this['instances'][id.index].CSS_emphasizeTab(label, id);
// ~CSS FUNCTIONALITY~
this['instances'][id.index].CSS_showContent(label, id);
};
/* ---------------------------------- */
/* Show Specific Tab
/* ---------------------------------- */
tab.showTab = function(index, specification) {
this['instances'][index].showTab(specification);
}