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.classHeader = this.classContainer + "Header";
	this.classBody = this.classContainer + "Body";
	this.classFooter = this.classContainer + "Footer";
	
	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()
	{
		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 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;
	},
	
	createHeader : function()
	{
		var oTR = this.util.createEl("TR");
		var oTD = this.util.createEl("TD");
		this.oHeader = oTD;
		oTD.className = this.classHeader + this.style;
		oTD.innerHTML = this.headerText;
		oTR.appendChild(oTD);
		return oTR;
	},
	
	createBody : function()
	{
		var oTR = this.util.createEl("TR");
		// Create img right
		var oTD = this.util.createEl("TD");
		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 oTR = this.util.createEl("TR");
		// Create img right
		var oTD = this.util.createEl("TD");
		oTD.className = this.classFooter + this.style;
		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;
	},
	
	createTagA : function(content, url)
	{
		var o = this.util.createEl("A");
		o.alt = content;
		o.className = this.classItemParent + this.style;
		o.innerHTML = content;
		o.href = url;
		return o;
	},
	
	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.createTagA(item.content, item.url));
		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()
	{
		
	}
};