// gTabs
// tab jscript by Ganesha
// www.ganeshaproduccions.com
//

// constructor:
//
// @param 	gTabMenu:string 					Identificador del elemento html que contiene las pestañas
// @param 	gTabMenuSelCSSClassName:string 		Clase CSS con el estilo de la pestaña activa
// @param	gTabBlockCSSClassName:string		Clase CSS que se aplicará (si existe) a la capa padre de las pestañas
// @param	gTabBlockActive						Tab inicialmente activo
//
// @method	switchTab(tab:number)				Activa el tab con el índice especificado (0...)
//
// @attrib	selectedCSS:string					Clase CSS con el estilo de la pestaña activa
// @attrib	tabs:array							Referencias a las pestañas (enlaces)
// @attrib	blocks:array						Referencias a los bloques de contenido
// @attrib	currentTab:number					Índice del tab activo
// @attrib	tabsContainer:htmlElement			Referencia al contenedor de los blocks
//

var gTabsContainer = new Array ();

function gTabs (gTabMenu, gTabMenuSelCSSClassName, gTabBlockCSSClassName, gTabBlockActive) {
	if (!gTabBlockActive) gTabBlockActive = 0;
	var self = this;
	this.isPlaying = false;
	this.selectedCSS = gTabMenuSelCSSClassName;
	this.tabs = new Array ();
	this.blocks = new Array ();
	this.switchTab = function (tab) {
		if (isNaN(tab)) {
			for (var a in this.tabs) {
				if (this.tabs[a] == tab) var tabIndex = a;
			}
		} else {
			var tabIndex = tab;
		}
		if (tabIndex != this.currentTab && !this.isPlaying) {
			for (var a in this.tabs) {
				this.tabs[a].className = '';
			}
			this.tabs[tabIndex].className = this.selectedCSS;
			if (isNaN(this.currentTab)) {
				for (var a in this.blocks) {
					this.blocks[a].style.opacity = 0;
					this.blocks[a].style.display = 'none';
				}
				this.blocks[tabIndex].style.opacity = 1;
				this.blocks[tabIndex].style.display = 'block';
				this.tabsContainer.style.height = this.blocks[tabIndex].offsetHeight + 'px';
				this.currentTab = tabIndex;
			} else {
				gTabsTransition (tabIndex,self);
			}
		}
		this.tabs[tabIndex].blur();
	}
	this.tabsContainer = document.createElement('div');
	this.tabsContainer.id = 'gTabsBlockContainer' + gTabsContainer.length;
	this.tabsContainer.style.position = 'relative';
	this.tabsContainer.style.overflow = 'hidden';
	if (gTabBlockCSSClassName) this.tabsContainer.className = gTabBlockCSSClassName;
	for (var a in document.getElementById(gTabMenu).getElementsByTagName('a')) {
		if (!isNaN(a)) {
			this.tabs.push(document.getElementById(gTabMenu).getElementsByTagName('a')[a]);
			this.blocks.push(document.getElementById(this.tabs[a].href.split('#')[1]));
			if (a == 0) this.blocks[0].parentNode.insertBefore(this.tabsContainer,this.blocks[0]);
			this.tabsContainer.appendChild (this.blocks[a]);
			this.blocks[a].style.position = 'absolute';
			this.blocks[a].style.left = '0';
			this.blocks[a].style.top = '0';
			this.tabs[a].onclick = function () {
				self.switchTab(this);
				return false;
			}
		}
	}
	this.switchTab(gTabBlockActive);
	gTabsContainer.push(this);
}

function gTabsTransition (newTab,tabs) {
	tabs.isPlaying = true;
	tabs.blocks[newTab].style.display = 'block';
	if (tabs.blocks[newTab].style.opacity >= 1) {
		tabs.blocks[newTab].style.opacity = 1;
		tabs.blocks[tabs.currentTab].style.opacity = 0;
		tabs.blocks[tabs.currentTab].style.display = 'none';
		tabs.tabsContainer.style.height = tabs.blocks[newTab].offsetHeight + 'px';
		tabs.currentTab = newTab;
		tabs.isPlaying = false;
	} else {
		tabs.blocks[newTab].style.opacity = Number(tabs.blocks[newTab].style.opacity) + 1;
		tabs.blocks[tabs.currentTab].style.opacity = Number(tabs.blocks[tabs.currentTab].style.opacity) - 1;
		tabs.tabsContainer.style.height = Number(tabs.tabsContainer.offsetHeight) +  Number(tabs.blocks[newTab].style.opacity) * (tabs.blocks[newTab].offsetHeight - tabs.tabsContainer.offsetHeight) + 'px';
		setTimeout (function () {gTabsTransition(newTab,tabs)},10);
	}
}