function CatItem(id, content, url, hasAttribute, urlIcon, checked, level, isChild, listChild)
{
	this.id = id;
	this.content = content;
	this.url = url;
	this.hasAttribute = false;
	this.urlIcon = "";
	this.checked = false;
	this.level = 0;
	this.isChild = true;
	this.parent = null;
	this.listChild = [];
	this.elTarget = null;
	
	if (typeof(hasAttribute) != "undefined") this.hasAttribute = hasAttribute;
	if (typeof(urlIcon) != "undefined") this.urlIcon = urlIcon;
	if (typeof(checked) != "undefined") this.checked = checked;
	if (typeof(level) != "undefined") this.level = level;
	if (typeof(isChild) != "undefined") this.isChild = isChild;
	if (typeof(listChild) != "undefined") this.listChild = listChild;
	
	this.addChild = function(item)
	{
		if(item.isAncestor(this)) return;
		var parent = item.parent;
		if (parent != null)
		{
			parent.removeChild(item);
		}
		item.parent = this;
		item.increaseLevel(this.level);
		this.isChild = false;
		this.listChild[this.listChild.length] = item;
	};
	
	this.removeChild = function(item)
	{
		for (var i = 0; i < this.listChild.length; i++)
		{
			if (item == this.listChild[i])
			{
				this.listChild.splice(i, 1);
				break;
			}
		}
		if (this.listChild.length == 0) this.isChild = true;
	};
	
	this.increaseLevel = function(level)
	{
		this.level = level + 1;
		if (this.isChild) return;
		for (var i = 0; i < this.listChild.length; i++)
		{
			this.listChild[i].increaseLevel(this.level);
		}
	};
	
	this.isAncestor = function(item)
	{
		if (this == item) return true;
		if (this.isChild) return false;
		var chk = false;
		for (var i = 0; i < this.listChild.length; i++)
		{
			chk = this.listChild[i].isAncestor(item);
			if(chk) break;
		}
		return chk;
	};
	
	this.getRoot = function()
	{
		var item = this;
		while (item.parent != null)
		{
			item = item.parent;
		}
		return item;
	};
	
	this.getItemIsChecked = function()
	{
		if (this.parent == null) return;
		if (this.checked) return this;
		for (var i = 0; i < this.parent.listChild.length; i++)
		{
			if (this.parent.listChild[i].checked) return this.parent.listChild[i];
		}
		return null;
	};
};

/*
 * Create Object Category
 */
function TreeView$BTD(util, pathImgSpacer, myName, headerText, listItems, style, cssClassName)
{
	this.charSep = "*";
	this.util = util;
	this.myName = myName;
	this.style = style;
	this.headerText = headerText;
	this.listItems = listItems;
	this.isMapLink = true;
	this.objDownParent = null;
	this.objDownChild = null;
	this.itemSelected = null;
	this.pathImgSpacer = pathImgSpacer;
	this.disableCaptureKeyPress = false;
	
	this.listEvent = new Array();
	this.oMenu = null;

/*****************************************************************************
								ID Start
*****************************************************************************/
	this.idItem = this.myName + "Item_";
	this.idChildContainer = this.myName + "ChildContainer_";
	this.idImgArrow = this.myName + "ImgArrow_";
	this.idDivSeparate = this.myName + "DivSeparate_";
	this.idRootTree = this.myName + "RootTree";
/*****************************************************************************
								ID End
*****************************************************************************/
	
/*****************************************************************************
								CssClass Start
*****************************************************************************/

	this.classContainer = cssClassName;
	this.classHeaderL = this.classContainer + "Header_L";
	this.classHeaderC = this.classContainer + "Header_C";
	this.classHeaderR = this.classContainer + "Header_R";
	this.classBody = this.classContainer + "Body";
	this.classFooterL = this.classContainer + "Footer_L";
	this.classFooterC = this.classContainer + "Footer_C";
	this.classFooterR = this.classContainer + "Footer_R";
	
	this.classItemParent = this.classContainer + "ItemParent";
	this.classItemChild = this.classContainer + "ItemChild";
	this.classArrowParent = this.classContainer + "ImgArrowParent";
	this.classArrowParentDown = this.classArrowParent + "_down";
	this.classArrowParentOver = this.classArrowParent + "_over";
	this.classArrowChild = this.classContainer + "ImgArrowChild";
	this.classArrowChildOver = this.classArrowChild + "_over";
	this.classLine = this.classContainer + "Line";
	
	this.classItemParentDown = this.classItemParent + "_down";
	this.classItemParentOver = this.classItemParent + "_over";
	this.classItemChildDown = this.classItemChild + "_down";
	this.classItemChildOver = this.classItemChild + "_over";

/*****************************************************************************
								CssClass End
*****************************************************************************/

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

	this.captureKeyPress();
	
/*****************************************************************************
								Capture Event End
*****************************************************************************/
};

TreeView$BTD.prototype =
{
	/*****************************************************************************
	Capture Event Start
	*****************************************************************************/

	captureKeyPress: function() {
		var doc = this.util.isIE ? document.body : document;
		var eventName = this.util.isIE ? "keydown" : "keypress";
		var self = this;

		this.util.addEvent(doc, eventName, function(e) {
			if (self.disableCaptureKeyPress || self.itemSelected == null) return;
			switch (e.keyCode) {
				case 38: // Go Up
					var previousEl = self.itemSelected.elTarget.previousSibling;
					while (previousEl != null) {
						if (previousEl.item != null) {
							self.clickItem(previousEl, e);
							break;
						}
						previousEl = previousEl.previousSibling;
					}
					break;
				case 40: // Go Down
					var nextEl = self.itemSelected.elTarget.nextSibling;
					while (nextEl != null) {
						if (nextEl.item != null) {
							self.clickItem(nextEl, e);
							break;
						}
						nextEl = nextEl.nextSibling;
					}
					break;
				case 37: // Go Left
					var parentItem = self.itemSelected.parent;
					if (parentItem != null) {
						self.clickItem(parentItem.elTarget, e);
					}
					break;
				case 39: // Go Right 
					var listChild = self.itemSelected.listChild;
					if (listChild.length > 0) {
						self.clickItem(listChild[0].elTarget, e);
					}
					break;
			}
		});
	},

	captureMouseDown: function() {
		var doc = this.util.isIE ? document.body : document;
		var self = this;

		this.util.addEvent(doc, "mousedown", function(e) {
			// Hide Context Menu
			self.hideContextMenu(e);

			// Show Context Menu
			if ((self.util.isFF && e.which > 1)
				|| (self.util.isIE && e.button > 1)
				|| (self.util.isMaxthon && e.button == 0)) {
				self.showContextMenu(e);
				return;
			}
		});
	},

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

	/*****************************************************************************
	ContextMenu Methods Start
	*****************************************************************************/

	createContextMenu: function(oMenu) {
		this.oMenu = oMenu;
		this.oMenu.isAutoChange = false;
		this.captureMouseDown();
	},

	showContextMenu: function(e) {
		var oTarget = this.util.getTargetElement();
		if (this.oMenu != null && oTarget.item != null) {
			this.oMenu.createRoot(e);
		}
	},

	hideContextMenu: function(e) {
		if (this.oMenu != null) {
			this.oMenu.hideAll(e);
		}
	},

	/*****************************************************************************
	ContextMenu Methods End
	*****************************************************************************/

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

	addEvent: function(eventName, func) {
		if (this.listEvent[eventName] == null) {
			this.listEvent[eventName] = [];
		}
		this.listEvent[eventName].push(func);
	},

	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;
			}
		}
	},

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

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

	/*****************************************************************************
	Public Methods Start
	*****************************************************************************/

	createMainOnlyBody: function() {
		var oTable = this.util.createEl("TABLE");
		oTable.id = this.myName;
		oTable.className = this.classContainer + this.style;
		oTable.cellPadding = 0;
		oTable.cellSpacing = 0;
		oTable.border = 0;
		var oTbody = this.util.createEl("TBODY");
		// Create body
		oTbody.appendChild(this.createBody());
		oTable.appendChild(oTbody);
		this.oOut = oTable;
		return oTable;
	},

	createMain: function(w) {
		var oTable = this.util.createEl("TABLE");
		oTable.id = this.myName;
		oTable.className = this.classContainer + this.style;
		oTable.cellPadding = 0;
		oTable.cellSpacing = 0;
		oTable.border = 0;
		oTable.style.width = w + "px";
		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;
	},

	//
	// Add New Item to current item selected
	//
	addNewItem: function(itemName, e) {
		var result = false;
		var newItem = null;
		if (this.itemSelected != null) {
			var oContainer = this.getChildContainer(this.itemSelected.elTarget);
			var id = this.itemSelected.id + this.charSep + (this.itemSelected.listChild.length + 1);
			newItem = new CatItem(id, itemName);
			this.itemSelected.addChild(newItem);
			this.createBlockItem(oContainer, newItem, true);
			result = true;
			// Change Css and Reset value
			this.objDownParent = this.itemSelected.elTarget;
			this.objDownChild = null;
			this.expandItemParent(this.objDownParent);
		}
		// Create event
		this.util.createAttribute(e, "treeViewItem", newItem);
		this.executeEvent(e, "createItemEvent");
		return result;
	},

	//
	// Remove current item selected
	//
	removeItem: function(e) {
		var result = false;
		var itemParent = this.itemSelected.parent;
		if (this.itemSelected != null && itemParent != null) {
			// Change Css and Reset value
			if (itemParent.listChild.length == 1) {
				this.objDownChild = itemParent.elTarget;
				if (itemParent.parent != null) {
					this.objDownParent = itemParent.parent.elTarget;
				}
				this.changeCssItemChildDown(itemParent.elTarget);
			}
			else {
				this.objDownChild = null;
			}

			// Delete Element HTML
			var elTarget = this.itemSelected.elTarget;
			var elParent = elTarget.parentNode;
			elParent.removeChild(this.getChildContainer(elTarget));
			var elSep = this.getElSeparate(elTarget);
			if (elSep != null) elParent.removeChild(elSep);
			elParent.removeChild(elTarget);

			// Delete in List Item
			itemParent.removeChild(this.itemSelected);
			this.itemSelected = itemParent;

			result = true;
		}
		// Create event
		this.executeEvent(e, "deleteItemEvent");
		return result;
	},

	//
	// Get name current item selected
	//
	getNameItemToCurrent: function() {
		var result = "";
		if (this.itemSelected != null) {
			result = this.itemSelected.content;
		}
		return result;
	},

	//
	// Get Current Path of Item Selected
	//
	getCurrentPathItem: function() {
		return this.getPathItem(this.itemSelected);
	},

	//
	// Get Path of Item Tree View
	//
	getPathItem: function(item) {
		var path = "";
		while (item != null) {
			if (path == "") {
				path = item.content + "/";
			}
			else {
				path = item.content + "/" + path;
			}
			item = item.parent;
		}
		return path;
	},

	//
	// Check exist child by name item
	//
	isExistChild: function(name) {
		var result = false;
		for (var i = 0; i < this.itemSelected.listChild.length; i++) {
			if (this.itemSelected.listChild[i].content == name) {
				result = true;
				break;
			}
		}
		return result;
	},

	/*****************************************************************************
	Public Methods End
	*****************************************************************************/

	/* ***************************** Create Map Link *************************************/
	createMapLink: function(item) {
		if (typeof (MapLink) == "undefined") return;
		if (this.isMapLink) {
			MapLink.resetList();
			while (item != null) {
				MapLink.addNode(item.content, item.url);
				item = item.parent;
			}
			MapLink.addNode("Sản phẩm", "callDefaultProductsPage_Click();");
			MapLink.addNode("Trang chủ", "otherLink_Click('#Home', false);");
			MapLink.buildMapLink();
		}
		else {
			MapLink.hide();
		}
	},
	/* ***************************** Create Map Link *************************************/

	changeStyleNow: function(style) {
		if (this.style == style) return;
		this.util.changeStyleAll(this.oOut, this.style, style, "category");
		this.style = style;
	},

	createHeaderContent: function() {
		var oTable = this.util.createEl("TABLE");
		oTable.cellPadding = 0;
		oTable.cellSpacing = 0;
		oTable.border = 0;
		oTable.style.width = "100%";
		var oTR = oTable.insertRow(0);
		var oTD = oTR.insertCell(0);
		var oDiv = this.util.createEl("DIV");
		oDiv.className = this.classHeaderL + this.style;
		oTD.appendChild(oDiv);
		oTR.appendChild(oTD);

		oTD = oTR.insertCell(1);
		oTD.className = this.classHeaderC + this.style;
		oTD.innerHTML = this.headerText;
		oTR.appendChild(oTD);

		oTD = oTR.insertCell(2);
		oDiv = this.util.createEl("DIV");
		oDiv.className = this.classHeaderR + this.style;
		oTD.appendChild(oDiv);
		oTR.appendChild(oTD);

		return oTable;
	},

	createHeader: function() {
		var oTR = this.util.createEl("TR");
		var oTD = this.util.createEl("TD");
		this.oHeader = oTD;
		oTD.colSpan = 3;
		oTD.appendChild(this.createHeaderContent());
		oTR.appendChild(oTD);
		return oTR;
	},

	createBody: function() {
		var oTR = this.util.createEl("TR");
		// Create img right
		var oTD = this.util.createEl("TD");
		oTD.colSpan = 3;
		oTD.className = this.classBody + this.style;
		var o = this.util.createEl("DIV");
		o.id = this.idRootTree;
		this.createBodyContent(o, this.listItems);
		oTD.appendChild(o);
		oTR.appendChild(oTD);
		return oTR;
	},

	createFooter: function() {

		var oTD = this.util.createEl("TD");
		oTD.colSpan = 3;
		oTD.style.fontSize = "1px";
		var oDivC = this.util.createEl("DIV");
		oDivC.className = this.classFooterC + this.style;
		oTD.appendChild(oDivC);

		var oDivL = this.util.createEl("DIV");
		oDivL.className = this.classFooterL + this.style;
		oDivC.appendChild(oDivL);

		var oDivR = this.util.createEl("DIV");
		oDivR.className = this.classFooterR + this.style;
		oDivL.appendChild(oDivR);

		var oTR = this.util.createEl("TR");
		oTR.appendChild(oTD);
		return oTR;
	},

	// Add Item to Body
	createBodyContent: function(o, list) {
		for (var i = 0; i < list.length; i++) {
			var item = list[i];
			var createSep = false;

			if (o.id == this.idRootTree) {
				if (i != 0) createSep = true;
			}
			else {
				createSep = true;
			}

			// Create Block Item
			var oChild = this.createBlockItem(o, item, createSep);

			if (!item.isChild && item.listChild.length > 0) {
				this.createBodyContent(oChild, item.listChild);
			}
		}
	},

	/*****************************************************************************
	Private Methods Start
	*****************************************************************************/

	createBlockItem: function(oParent, item, createSep) {
		if (createSep) oParent.appendChild(this.createSeparateItem(item.id));
		oParent.appendChild(this.createItem(item));
		// Create Child Container
		var oChildContainer = this.createChildContainer(item.id);
		oParent.appendChild(oChildContainer);
		return oChildContainer;
	},

	createChildContainer: function(id) {
		var oChild = this.util.createEl("DIV");
		oChild.id = this.idChildContainer + id;
		oChild.style.display = "none";
		return oChild;
	},

	createItem: function(item) {
		var o = this.util.createEl("DIV");
		o.id = this.idItem + item.id;
		o.className = this.classItemParent + this.style;
		this.util.createAttribute(o, "level", item.level);
		this.util.createAttribute(o, "item", item);
		o.appendChild(this.createImgSpacer(item.level * 15));
		if (item.isChild) {
			o.appendChild(this.createImgArrowChild(item.id));
		}
		else {
			o.appendChild(this.createImgArrowParent(item.id));
		}
		o.appendChild(this.util.createElText(item.content));
		var self = this;
		this.util.addEvent(o, "mouseover", function(e) {
			self.mouseOverItem(o, e);
		});
		this.util.addEvent(o, "mouseout", function(e) {
			self.mouseOutItem(o, e);
		});
		this.util.addEvent(o, "click", function(e) {
			self.isLoadWebPage = false;
			self.clickItem(o, e);
		});
		this.util.addEvent(o, "mousedown", function(e) {
			self.mouseDownItem(o, e);
		});
		item.elTarget = o;
		return o;
	},

	createImgSpacer: function(width) {
		var o = this.util.createEl("IMG");
		o.src = this.pathImgSpacer;
		o.width = width;
		o.height = 1;
		return o;
	},

	createImgArrowParent: function(id) {
		var o = this.util.createEl("IMG");
		o.id = this.idImgArrow + id;
		o.src = this.pathImgSpacer;
		o.className = this.classArrowParent + this.style;
		return o;
	},

	createImgArrowChild: function(id) {
		var o = this.util.createEl("IMG");
		o.id = this.idImgArrow + id;
		o.src = this.pathImgSpacer;
		o.className = this.classArrowChild + this.style;
		return o;
	},

	createSeparateItem: function(id) {
		var o = this.util.createEl("DIV");
		o.id = this.idDivSeparate + id;
		o.className = this.classLine + this.style;
		return o;
	},

	equalsLevel: function(lvlComp) {
		if (this.objDownParent == null) return;
		while (parseInt(lvlComp) <= parseInt(this.objDownParent.level)) {
			this.collapseItemParent(this.objDownParent);
			if (this.objDownParent.item.parent != null) {
				this.objDownParent = this.objDownParent.item.parent.elTarget;
			}
			else {
				break;
			}
		}
	},

	findTargetChildEl: function(id, e) {
		var p = id.split(this.charSep);
		var list, item;
		var tempID = "";
		this.isLoadWebPage = true;
		for (var i = 0; i < p.length; i++) {
			if (i == 0) {
				tempID = p[i];
				item = this.selectAChild(this.listItems, tempID, e);
			}
			else {
				tempID += this.charSep + p[i];
				if (item != null) {
					item = this.selectAChild(item.listChild, tempID, e);
				}
			}
		}
		this.isLoadWebPage = false;
	},

	selectAChild: function(list, id, e) {
		for (var i = 0; i < list.length; i++) {
			var item = list[i];
			if (item.id == id) {
				this.clickItem(item.elTarget, e);
				return item;
			}
		}
		return null;
	},
	/*****************************************************************************
	Private Methods End
	*****************************************************************************/

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

	mouseDownItem: function(obj, e) {
		this.itemSelected = obj.item;
		this.util.createAttribute(e, "treeViewItem", obj.item);
		this.executeEvent(e, "mouseDownItemEvent");
	},

	clickItem: function(obj, e) {
		if (obj.item == null) return;
		var item = obj.item;
		this.createMapLink(item);
		// Collapse Child is Parent Node
		this.equalsLevel(obj.level);

		if (item.isChild) {
			this.mouseClickItemChild(obj);
		}
		else {
			this.mouseClickItemParent(obj);
		}
		this.itemSelected = item;
		if (!this.isLoadWebPage) eval(item.url);
		if (item.parent == null) {
			this.expandItemParent(item.elTarget);
		}
		this.util.createAttribute(e, "treeViewItem", obj.item);
		this.executeEvent(e, "clickItemEvent");
	},

	mouseOverItem: function(obj, e) {
		if (obj.item != null && obj.item.isChild) {
			this.mouseOverItemChild(obj);
		}
		else {
			this.mouseOverItemParent(obj);
		}
		this.util.createAttribute(e, "treeViewItem", obj.item);
		this.executeEvent(e, "mouseOverItemEvent");
	},

	mouseOutItem: function(obj, e) {
		if (obj.item != null && obj.item.isChild) {
			this.mouseOutItemChild(obj);
		}
		else {
			this.mouseOutItemParent(obj);
		}
		this.util.createAttribute(e, "treeViewItem", obj.item);
		this.executeEvent(e, "mouseOutItemEvent");
	},

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

	/*****************************************************************************
	Methods Support Event Change Css Item Start
	*****************************************************************************/

	//------------------------------------------------------------------
	mouseClickItemChild: function(obj) {
		if (this.objDownChild != null) {
			if (this.objDownChild == obj) return;
			this.changeCssItemChildNormal(this.objDownChild);
		}

		this.changeCssItemChildDown(obj);

		this.objDownChild = obj;
	},

	//------------------------------------------------------------------
	mouseClickItemParent: function(obj) {
		if (this.objDownChild != null) {
			this.changeCssItemChildNormal(this.objDownChild);
			this.objDownChild = null;
		}
		if (this.objDownParent != null && this.objDownParent == obj) // Same
		{
			return;
		}

		var oContainer = this.getChildContainer(obj);
		if (oContainer.style.display == "") {
			this.collapseItemParent(obj);
		}
		else {
			this.expandItemParent(obj);
		}
		this.objDownParent = obj;
	},

	//------------------------------------------------------------------
	mouseOverItemChild: function(obj) {
		if (obj.className == this.classItemChildDown + this.style) return;
		this.changeCssImgArrow(obj, this.classArrowChildOver + this.style);
		obj.className = this.classItemChildOver + this.style;
	},

	//-----------------------------Parent-------------------------------------
	mouseOverItemParent: function(obj) {
		if (obj.className == this.classItemParentDown + this.style) return;
		this.changeCssImgArrow(obj, this.classArrowParentOver + this.style);
		obj.className = this.classItemParentOver + this.style;
	},

	//------------------------------------------------------------------
	mouseOutItemChild: function(obj) {
		if (obj.className == this.classItemChildDown + this.style) return;
		this.changeCssItemChildNormal(obj);
	},

	//------------------------------Parent------------------------------------
	mouseOutItemParent: function(obj) {
		if (obj.className == this.classItemParentDown + this.style) return;
		this.changeCssImgArrow(obj, this.classArrowParent + this.style);
		obj.className = this.classItemParent + this.style;
	},

	//------------------------------------------------------------------
	changeCssItemChildDown: function(obj) {
		this.changeCssImgArrow(obj, this.classArrowChildOver + this.style);
		obj.className = this.classItemChildDown + this.style;
	},

	//------------------------------------------------------------------
	changeCssItemChildNormal: function(obj) {
		this.changeCssImgArrow(obj, this.classArrowChild + this.style);
		obj.className = this.classItemChild + this.style;
	},

	//---------------------------------Parent---------------------------------
	collapseItemParent: function(obj) {
		obj.className = this.classItemParent + this.style;
		this.getChildContainer(obj).style.display = "none";
		this.changeCssImgArrow(obj, this.classArrowParent + this.style);
	},

	//---------------------------------Parent---------------------------------
	expandItemParent: function(obj) {
		obj.className = this.classItemParentDown + this.style;
		this.getChildContainer(obj).style.display = "";
		this.changeCssImgArrow(obj, this.classArrowParentDown + this.style);
	},

	/*****************************************************************************
	Methods Support Event End
	*****************************************************************************/

	getChildContainer: function(obj) {
		var temp = obj.id.split("_");
		return this.util.getElById(this.idChildContainer + temp[1]);
	},

	getElSeparate: function(obj) {
		var temp = obj.id.split("_");
		return this.util.getElById(this.idDivSeparate + temp[1]);
	},

	changeCssImgArrow: function(obj, className) {
		var temp = obj.id.split("_");
		this.util.getElById(this.idImgArrow + temp[1]).className = className;
	},

	resetAllStyle: function() {

	}
};