/**
 * Tab Ajax
 * 
 * @author     banhthidiem <banhthidiem@gmail.com>
 * @copyright  2007 Bach Khoa Computer Inc.
 * @version    $Id: TabAjax.js, v2.0 2007/10/3
 */

/*
 * Tab item Constructor
 */
function TabItem(name, pos, isDown, content, pathContent, isReload)
{
	this.name = name;
	this.pos = pos;
	this.isDown = isDown;
	this.isReload = false;
	this.isActive = false;
	if (content != null && typeof(content) == "string")
	{
		this.content = utilObj.createEl("DIV");
		this.content.innerHTML = content;
	}
	else
	{
		this.content = content;
		if (this.content != null) this.content.style.display = "none";
	}
	this.pathContent = pathContent;
	if (typeof(isReload) != "undefined") this.isReload = isReload;
};

/*
 * Constructor
 */
function TabAjax$BTD(myName, pathImgSpacer, listTabItems, style, util)
{
	this.myName = myName;
	this.style = style;
	this.pathImgSpacer = pathImgSpacer;
	this.idContent = "_content";
	this.oContent = null;
	this.oContainerTabs = null;
	this.idContainerTabs = this.myName + "_container_tabs";
	this.oTabDown = null;
	this.tabItemDown = null;
	this.listTabItems = listTabItems;
	this.childElChoose = null;
	this.listEvent = new Array();
	
	// Create Loader
	this.elLoader = utilObj.createEl("DIV");
	this.elLoader.innerHTML = "Loading...";

	this.util = util;
	this.d = util.d;
	
};

/*****************************************************************************
								Event Start
*****************************************************************************/

TabAjax$BTD.prototype.executeEvent = function(e, eventName)
{
	if (this.listEvent[eventName] != null)
	{
		for (var i = 0; i < this.listEvent[eventName].length; i++)
		{
			this.listEvent[eventName][i](e);
		}
	}
};

TabAjax$BTD.prototype.addEvent = function(eventName, func)
{
	if(this.listEvent[eventName] == null)
	{
		this.listEvent[eventName] = [];
	}
	this.listEvent[eventName].push(func);
};

TabAjax$BTD.prototype.removeEvent = function(eventName, func)
{
	if(this.listEvent[eventName] == null)
	{
		return;
	}
	for (var i = 0; i < this.listEvent[eventName].length; i++)
	{
		if (func == this.listEvent[eventName][i])
		{
			this.listEvent[eventName].splice(i, 1);
			break;
		}
	}
};

/*****************************************************************************
								Event End
*****************************************************************************/

TabAjax$BTD.prototype.changeStyleTab = function()
{
	this.classNameTabDown = "tab_sub_down" + this.style;
	this.classNameTabDownL = "tab_sub_down_L" + this.style;
	this.classNameTabDownC = "tab_sub_down_C" + this.style + " titleBlock";
	this.classNameTabDownR = "tab_sub_down_R" + this.style;
	this.classNameTab = "tab_sub" + this.style;
	this.classNameTabL = "tab_sub_L" + this.style;
	this.classNameTabC = "tab_sub_C" + this.style;
	this.classNameTabR = "tab_sub_R" + this.style;
};

/*
 * Create content Main
 */
TabAjax$BTD.prototype.createMain = function()
{
	this.changeStyleTab();
	var oTable = this.util.createEl("TABLE");
	oTable.id = this.myName;
	oTable.className = "tab_content" + this.style;
	oTable.cellPadding = 0;
	oTable.cellSpacing = 0;
	oTable.border = 0;
	var oTbody = this.util.createEl("TBODY");
	// Create header
	oTbody.appendChild(this.createHeader());
	// Create body
	oTbody.appendChild(this.createBody());
	// Create footer
	oTbody.appendChild(this.createFooter());
	oTable.appendChild(oTbody);
	this.oOut = oTable;
	return oTable;
};

/*
 * Change style all
 */
TabAjax$BTD.prototype.changeStyleNow = function(style)
{
	if (this.style == style) return;
	this.util.changeStyleAll(this.oOut, this.style, style, "tab");
	this.style = style;
	this.changeStyleTab();
};

/*
 * Add new Tab
 */
TabAjax$BTD.prototype.addTab = function(tabItem, e)
{
	if (this.listTabItems[this.myName + "_" + tabItem.pos] == null)
	{
		this.listTabItems[this.myName + "_" + tabItem.pos] = tabItem;
	}
	var oTab = null;
	if (tabItem.isDown)
	{
		this.tabItemDown = tabItem;
		oTab = this.createTabDown(tabItem.name, tabItem.pos);
	}
	else
		oTab = this.createTab(tabItem.name, tabItem.pos);
	tabItem.oTab = oTab;
	this.oContainerTabs.appendChild(oTab);
	this.executeEvent(e, "addTab");
};

/*
 * Remove Tab
 */
TabAjax$BTD.prototype.removeTab = function(pos, e)
{
	if (this.listTabItems[this.myName + "_" + pos] == null) return;
	delete this.listTabItems[this.myName + "_" + pos];
	this.oContainerTabs.removeChild(this.util.getElById(this.myName + "_" + pos));
	this.executeEvent(e, "removeTab");
};

/*
 * Create a Tab when mouse down
 */
TabAjax$BTD.prototype.createTabDown = function(name, pos)
{
	var idParent = pos;
	var self = this;
	
	var oParent = this.createTagDIV(idParent, "", this.classNameTabDown, function(e)
	{
		self.changeContentTab(oParent, e);
	});
	this.util.createAttribute(oParent, "positionTab", pos);
	oParent.appendChild(this.createTagDIV(idParent + "_L", null, this.classNameTabDownL, null));
	oParent.appendChild(this.createTagDIV(idParent + "_C", name, this.classNameTabDownC, null));
	oParent.appendChild(this.createTagDIV(idParent + "_R", null, this.classNameTabDownR, null));
	return oParent;
};

/*
 * Create a Tab
 */
TabAjax$BTD.prototype.createTab = function(name, pos)
{
	var idParent = pos;
	var self = this;
	var oParent = this.createTagDIV(idParent, "", this.classNameTab, function(e)
	{
		self.changeContentTab(oParent, e);
	});
	this.util.createAttribute(oParent, "positionTab", pos);
	oParent.appendChild(this.createTagDIV(idParent + "_L", null, this.classNameTabL, null));
	oParent.appendChild(this.createTagDIV(idParent + "_C", name, this.classNameTabC, null));
	oParent.appendChild(this.createTagDIV(idParent + "_R", null, this.classNameTabR, null));
	return oParent;
};

/*
 * Change style tab down 
 */
TabAjax$BTD.prototype.changeStyleTabDown = function(obj)
{
	var tabItem = this.listTabItems[obj.id];
	var idParent = this.myName + "_" + tabItem.pos;
	this.util.getElById(idParent + "_L").className = this.classNameTabDownL;
	this.util.getElById(idParent + "_C").className = this.classNameTabDownC;
	this.util.getElById(idParent + "_R").className = this.classNameTabDownR;
	obj.className = this.classNameTabDown;
};

/*
 * Change style tab normal
 */
TabAjax$BTD.prototype.changeStyleTabNormal = function(idParent)
{
	this.util.getElById(idParent + "_L").className = this.classNameTabL;
	this.util.getElById(idParent + "_C").className = this.classNameTabC;
	this.util.getElById(idParent + "_R").className = this.classNameTabR;
	this.util.getElById(idParent).className = this.classNameTab;
};

/*
 * Change content By URL (Call Out Class)
 */
TabAjax$BTD.prototype.changeContentRedirectByURL = function(url)
{
	var result = this.util.analyseURL(url);
	this.makeAjax(result.page, result.paramater);
	this.setContent(this.oContent, this.elLoader);
};

/*
 * Change content
 */
TabAjax$BTD.prototype.changeContentTab = function(oClick, e)
{
	var idParent = this.myName + "_" + this.tabItemDown.pos;
	if (oClick.id == idParent) return;
	this.changeStyleTabDown(oClick);
	this.changeStyleTabNormal(idParent);
	if (this.tabItemDown.content != null) this.tabItemDown.content.style.display = "none";
	this.tabItemDown = this.listTabItems[oClick.id];
	this.setContent(this.oContent, this.getContentTabDown());
	this.executeEvent(e, "clickTab");
};

/*
 * Reload content tab down
 */
TabAjax$BTD.prototype.reloadContentTabDown = function()
{
	try { this.oContent.removeChild(this.tabItemDown.content); } catch(e) { }
	this.tabItemDown.content = null;
	this.setContent(this.oContent, this.getContentTabDown());
};

/*
 * Get content tab selected
 */
TabAjax$BTD.prototype.getContentTabDown = function()
{
	if (this.tabItemDown.isReload)
	{
		this.tabItemDown.content = null;
	}
	if (this.tabItemDown.content == null)
	{
		var result = this.util.analyseURL(this.tabItemDown.pathContent);
		this.makeAjax(result.page, result.paramater);
		this.elLoader.style.display = "";
		return this.elLoader;
	}
	else
	{
		return this.tabItemDown.content;
	}
};

/*
 * Show data get from ajax page
 */
TabAjax$BTD.prototype.showData = function(data)
{
	if (data != "Error")
	{
		this.elLoader.style.display = "none";
		this.tabItemDown.isActive = false;
		try { this.oContent.removeChild(this.tabItemDown.content); } catch(e) { }
		var elDiv = utilObj.createEl("DIV");
		elDiv.innerHTML = data;
		this.tabItemDown.content = elDiv;
		this.setContent(this.oContent, elDiv);
	}
	this.executeEvent(null, "loadCompleteDataTab");
};

/*
 * Create Ajax
 */
TabAjax$BTD.prototype.makeAjax = function(url, fields)
{
	try
	{
		var ajax = new XMLAjax(this, false);
		ajax.ajaxDo(url, fields);
	}
	catch (e)
	{
		alert(e.error);
	}
};

/*
 * Create Header
 */
TabAjax$BTD.prototype.createHeader = function()
{
	var oTR = this.util.createEl("TR");
	// Create img right
	var oTD = this.util.createEl("TD");
	var oDiv = this.util.createEl("div");
	oDiv.className = "tab_header_L" + this.style;
	oTD.appendChild(oDiv);
	oTR.appendChild(oTD);
	// Create tab
	this.oContainerTabs = this.util.createEl("TD");
	this.oHeader = this.oContainerTabs;
	this.oContainerTabs.id = this.idContainerTabs;
	this.oContainerTabs.className = "tab_header_C" + this.style;
	
	for (var tab in this.listTabItems)
	{
		if (tab == "extend") continue;
		this.addTab(this.listTabItems[tab], null);
	}
	oTR.appendChild(this.oContainerTabs);
	// Create img right
	oTD = this.util.createEl("TD");
	oDiv = this.util.createEl("div");
	oDiv.className = "tab_header_R" + this.style;
	oTD.appendChild(oDiv);
	oTR.appendChild(oTD);
	return oTR;
};

/*
 * Create Body
 */
TabAjax$BTD.prototype.createBody = function()
{
	var oTR = this.util.createEl("TR");
	var oTD = this.util.createEl("TD");
	oTD.className = "tab_body" + this.style;
	oTD.colSpan = "3";
	this.oContent = this.createTagDIV(this.idContent, this.getContentTabDown(), "tab_body_C" + this.style, null);
	oTD.appendChild(this.oContent);
	oTR.appendChild(oTD);
	return oTR;
};

/*
 * Create Footer
 */
TabAjax$BTD.prototype.createFooter = function()
{
	var oTR = this.util.createEl("TR");
	oTR.className = "tab_footer" + this.style;
	var oTD = this.util.createEl("TD");
	oTD.className = "tab_footer_L" + this.style;
	oTR.appendChild(oTD);
	oTD = this.util.createEl("TD");
	oTR.appendChild(oTD);
	oTD = this.util.createEl("TD");
	oTD.className = "tab_footer_R" + this.style;
	oTR.appendChild(oTD);
	return oTR;
};

/*
 * Create Tag DIV
 */
TabAjax$BTD.prototype.createTagDIV = function(id, content, className, fnEventOnclick)
{
	var o = this.util.createEl("DIV");
	o.id = this.myName + "_" + id;
	o.className = className;
	if (content != null && typeof(content) == "object")
	{
		this.setContent(o, content);
	}
	else if (content != null)
	{
		o.innerHTML = content;
	}
	if (fnEventOnclick != null) this.util.addEvent(o, "click", fnEventOnclick);
	return o;
};

TabAjax$BTD.prototype.setContent = function(o, v)
{
	this.elLoader.style.display = "none";
	v.style.display = "";
	if (!this.tabItemDown.isActive)
	{
		o.appendChild(v);
		this.tabItemDown.isActive = true;
	}
};

TabAjax$BTD.prototype.loadItemChild = function(id, funcAjax)
{
	if (this.tabItemDown.listTabItemsChild == null)
		this.tabItemDown.listTabItemsChild = [];
	if (this.tabItemDown.listTabItemsChild[id] == null)
		this.tabItemDown.listTabItemsChild[id] = funcAjax(id);
	return this.tabItemDown.listTabItemsChild[id];
};

TabAjax$BTD.prototype.loadData = function(o, id, funcAjax, idTitle, idImg, idDes)
{
	var p = this.loadItemChild(id, funcAjax);
	this.util.getElById(idTitle).innerHTML = p.title;
	this.util.getElById(idImg).src = p.urlImg;
	this.util.getElById(idDes).innerHTML = p.description;
	if (this.childElChoose != null) this.childElChoose.className = "tabItemChild";
	o.className = "tabItemChild_down";
	this.childElChoose = o;
};