ÿþ/**

 * Tab Ajax

 * 

 * @author     banhthidiem <banhthidiem@gmail.com>

 * @copyright  2007 Bach Khoa Computer Inc.

 * @version    $Id: TabAjax.js, v2.0 2007/10/3

 */



var EventNameTab = {

	addTab: "addTab",

	removeTab: "removeTab",

	changeTab: "changeTab"

};



function SlideListImage(idSlide, wContainer) {

	if (idSlide == null) return;

	this.elSlide = idSlide;

	this.width = wContainer;

	this.startPoint = 0;

	this.isRun = false;

	this.isNext = true;

	this.isBTD = true;

	this.countSin = 0.0;



}

SlideListImage.prototype = {



	callEffect: function() {

		var me = this;

		setTimeout(function() { me.effect(); }, 10);

	},



	effect: function() {

		var max = Math.PI / 2;

		if (this.countSin > max) {

			this.countSin = 0.0;

			this.isRun = false;

			if (this.isNext) {

				this.startPoint -= this.width;

			}

			else {

				this.startPoint += this.width;

			}

			this.elSlide.style.left = this.startPoint + "px";

			return;

		}

		this.countSin += 0.03;

		var left = Math.sin(this.countSin) * this.width;

		left = this.isNext ? this.startPoint - left : this.startPoint + left;

		this.elSlide.style.left = left + "px";

		this.callEffect();

	},



	preview: function() {

		if (this.startPoint >= 0 || this.isRun) return;

		this.isNext = false;

		this.isRun = true;

		this.callEffect();

	},



	next: function() {

		var w = utilObj.getElementSize(this.elSlide).width;

		if (this.width >= w || (w + this.startPoint <= this.width)

			|| this.isRun) return;

		this.isNext = true;

		this.isRun = true;

		this.callEffect();

	},



	auto: function() {

		var w = utilObj.getElementSize(this.elSlide).width;

		if (w < -this.startPoint) {

			this.preview();

		}

		else {

			this.next();

		}

	},



	createElSlide: function() {

		if (typeof (this.elSlide) == "string") {

			this.elSlide = document.getElementById(this.elSlide);

		}

	},



	init: function() {

		this.createElSlide();

		this.elSlide.style.position = "absolute";

	}

};



/*

 * Constructor

 */

function TabBTD(elContainer, configData, style) {

	if (elContainer == null) return;

	this.style = style != null ? style : "";

	this.elContainer = elContainer;

	this.elContainerContent = null;

	this.elContainerBtn = null;

	this.itemActive = null;

	this.configData = configData;

	this.listEvent = new Array();

	this.oSlide = null;

	

	// Create Loader

	this.elLoader = utilObj.createEl("DIV");

	this.elLoader.innerHTML = "Loading...";

};



/*****************************************************************************

								Event Start

*****************************************************************************/



TabBTD.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);

		}

	}

};



TabBTD.prototype.addEvent = function(eventName, func)

{

	if(this.listEvent[eventName] == null)

	{

		this.listEvent[eventName] = [];

	}

	this.listEvent[eventName].push(func);

};



TabBTD.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

*****************************************************************************/



/*

* Create header

*/

TabBTD.prototype.createOneContainer = function(elContainer, css, eventClick, eventMouseOver, eventMouseOut) {

	var elSubContainer = utilObj.createEl("DIV");

	elSubContainer.className = css;

	if (eventClick != null) {

		utilObj.addEvent(elSubContainer, "click", eventClick);

	}

	if (eventMouseOver != null) {

		utilObj.addEvent(elSubContainer, "mouseover", eventMouseOver);

	}

	if (eventMouseOut != null) {

		utilObj.addEvent(elSubContainer, "mouseout", eventMouseOut);

	}



	elContainer.appendChild(elSubContainer);



	var elLeft = utilObj.createEl("DIV");

	elLeft.className = "L";

	elSubContainer.appendChild(elLeft);



	var elRight = utilObj.createEl("DIV");

	elRight.className = "R";

	elLeft.appendChild(elRight);



	var elCenter = utilObj.createEl("DIV");

	elCenter.className = "C";

	elRight.appendChild(elCenter);

	elSubContainer.elCenter = elCenter;

	

	return elSubContainer;

};



TabBTD.prototype.getPositionView = function() {

	return utilObj.getElementPositionView(this.elContainerTab);

};



TabBTD.prototype.getSize = function() {

	return utilObj.getElementSize(this.elContainerTab);

};



/*

* Create container

*/

TabBTD.prototype.createContainer = function() {

	if (typeof (this.elContainer) == "string") {

		this.elContainer = utilObj.getElById(this.elContainer);

	}

	var elContainerTab = utilObj.createEl("DIV");

	elContainerTab.className = "tabBTD" + this.style;

	this.elContainer.appendChild(elContainerTab);

	this.elContainerTab = elContainerTab;

};



/*

* Set item active

*/

TabBTD.prototype.changeStyle = function(newCss) {

	this.elContainerTab.className = "tabBTD" + newCss;

};



/*

* Set item active

*/

TabBTD.prototype.getCssItem = function(item) {

	return item.isActive ? "btn active" : "btn";

};



/*

* Set item active

*/

TabBTD.prototype.setActiveItem = function(item) {

	if (this.itemActive != null) {

		this.itemActive.isActive = false;

		this.itemActive.elBtn.className = this.getCssItem(this.itemActive);

		this.itemActive.elContent.style.display = "none";

	}

	this.itemActive = item;

	this.itemActive.isActive = true;

};



/*

* Create content of tab

*/

TabBTD.prototype.createContentItem = function(item) {

	if (item.elContent == null) {

		item.elContent = utilObj.createEl("DIV");

		this.elContainerContent.appendChild(item.elContent);

		if (item[this.configData.mapField.isElementContent]) {

			var el = item[this.configData.mapField.content];

			if (typeof el == "string") {

				el = document.getElementById(el);

			}

			el.style.display = "";

			item.elContent.appendChild(el);

		}

		else {

			item.elContent.innerHTML = item[this.configData.mapField.content];

		}

	}

	item.elContent.style.display = "table-cell";

};



/*

* Load content of tab

*/

TabBTD.prototype.loadContentItem = function(item) {

	if (item == this.itemActive) return;

	this.setActiveItem(item);

	item.elBtn.className = this.getCssItem(item);

	this.createContentItem(item);

	item.elContent.style.display = "table-cell";

	var ev = new Object();

	ev.item = item;

	this.executeEvent(ev, EventNameTab.changeTab);

};



/*

* Add Tab

*/

TabBTD.prototype.addTab = function(item) {

	var me = this;

	item.elBtn = this.createOneContainer(this.elContainerBtn.elContainer, "btn", function(e) {

		me.loadContentItem(item);

	}, function(e) {

		item.elBtn.className = me.getCssItem(item) + " over";

	}, function(e) {

		item.elBtn.className = me.getCssItem(item);

	});

	item.elBtn.elCenter.innerHTML = item[this.configData.mapField.text];

	// Load content item is active

	this.createContentItem(item);

	item.elContent.style.display = "none";

	if (this.itemActive == null && item[this.configData.mapField.active]) {

		this.loadContentItem(item);

	}



	var ev = new Object();

	ev.item = item;

	this.executeEvent(ev, EventNameTab.addTab);

};



/*

* Add new Tab

*/

TabBTD.prototype.addNewTab = function(item) {

	this.configData.data.push(item);

	this.addTab(item);

	this.activeBtnSlide();

};



/*

* Remove Tab

*/

TabBTD.prototype.removeTab = function(v) {

	if (this.configData.data.length == 1) return;

	for (var i = 0; i < this.configData.data.length; i++) {

		var item = this.configData.data[i];

		if (item[this.configData.mapField.value] == v) {

			if (item == this.itemActive) {

				this.itemActive = null;

			}

			this.elContainerBtn.elContainer.removeChild(item.elBtn);

			if (item.elContent != null) {

				this.elContainerContent.removeChild(item.elContent);

			}

			this.configData.data.splice(i, 1);

			this.activeBtnSlide();

			var ev = new Object();

			ev.item = item;

			this.executeEvent(ev, EventNameTab.removeTab);

			break;

		}

	}

};



/*

* Active Tab

*/

TabBTD.prototype.activeTab = function(v) {

	if (this.configData.data.length == 0) return;

	for (var i = 0; i < this.configData.data.length; i++) {

		var item = this.configData.data[i];

		if (item[this.configData.mapField.value] == v) {

			this.loadContentItem(item);

			break;

		}

	}

};



TabBTD.prototype.activeBtnSlide = function() {

	if (this.wContainer < utilObj.getElementSize(this.elContainerBtn.elContainer).width) {

		this.elContainerBtn.elNext.style.display = this.elContainerBtn.elPre.style.display = "";

	}

	else {

		this.elContainerBtn.elNext.style.display = this.elContainerBtn.elPre.style.display = "none";

	}

	this.oSlide.auto();

};



/*

* Load list item

*/

TabBTD.prototype.loadListItem = function() {

	var me = this;

	this.wContainer = utilObj.getElementSize(this.elContainerBtn).width - 28;

	// Nút Preview

	var elPre = utilObj.createEl("DIV");

	elPre.className = "btnPre";

	utilObj.addEvent(elPre, "click", function(e) { me.oSlide.preview(); });

	this.elContainerBtn.appendChild(elPre);

	this.elContainerBtn.elPre = elPre;

	// Bao chùm nút

	var elContainerAll = utilObj.createEl("DIV");

	elContainerAll.style.width = this.wContainer + "px";

	elContainerAll.className = "containerBtn";

	this.elContainerBtn.appendChild(elContainerAll);

	// Chéa DS nút

	var elContainer = utilObj.createEl("DIV");

	elContainer.className = "list";

	elContainerAll.appendChild(elContainer);

	this.elContainerBtn.elContainer = elContainer;

	// Nút Next

	var elNext = utilObj.createEl("DIV");

	elNext.className = "btnNext";

	utilObj.addEvent(elNext, "click", function(e) { me.oSlide.next(); });

	this.elContainerBtn.appendChild(elNext);

	this.elContainerBtn.elNext = elNext;

	// Load list item

	for (var i = 0; i < this.configData.data.length; i++) {

		this.addTab(this.configData.data[i]);

	}

	// T¡o slide

	this.oSlide = new SlideListImage(elContainer, this.wContainer);

	this.oSlide.init();

	this.activeBtnSlide();

};



/*

 * Init

 */

TabBTD.prototype.init = function() {

	this.createContainer();

	// Create header

	this.elContainerBtn = this.createOneContainer(this.elContainerTab, "header").elCenter;

	// Create body

	this.elContainerContent = this.createOneContainer(this.elContainerTab, "body").elCenter;

	// Create footer

	this.createOneContainer(this.elContainerTab, "footer");



	this.loadListItem();

};