/********* tab *************/

var configItems;

Tab = Control.subClass({
	
	items: true,
	
	init: function(config) {
		config.css = util.combine(config.css, {
			headerArea: null,
			bodyArea: null,
			itemHeader: null,
			itemBody: null,
			selectedItemHeader: "tab-A-item-selectedHeader",
			itemText: null,
			itemImage: null,
			itemIcon: null,
			itemCloseBtn: null
		});
		
		this.selected = null;
		
		Control.call(this, config);
	},
	
	getContainerTemplate: function() {
		var template = this.getTemplate("Tab", "container");
		return template;
	},
	
	onCreateContainer: function(container) {
		container.headerOuter = $("#headerOuter", container);
		
		var header = container.header = $("#headerArea", container);
		this.addClass(header, this.config.css.headerArea);
		header.data("marginLeft", 0);
		
		header.goLeft = $("#goLeft", container);
		header.goLeft.click(function() {
			let headerParentArea = header.parent();
			let headerParentArea_left = headerParentArea[0].offsetLeft;
			let headerParentArea_Width = headerParentArea[0].clientWidth;
			
			let headerArea_left = header[0].offsetLeft;
			let headerArea_Width = header[0].clientWidth;
			
			if ((headerArea_left + headerArea_Width) > (headerParentArea_left + headerParentArea_Width) ) {
				var marginLeft = header.data("marginLeft");
				marginLeft = marginLeft - 120;
				header.css({"margin-left": marginLeft + "px"});
				header.data("marginLeft", marginLeft);
			}
		});
		
		header.goRight = $("#goRight", container);
		header.goRight.click(function() {
			/* let headerParentArea = header.parent();
			let headerParentArea_left = headerParentArea[0].offsetLeft;
			let headerParentArea_Width = headerParentArea[0].clientWidth;
			 */
			let headerArea_left = header[0].offsetLeft;
			//let headerArea_Width = header[0].clientWidth;
			
			if (headerArea_left < 0) {
				var marginLeft = header.data("marginLeft");
				marginLeft = marginLeft + 120;
				header.css({"margin-left": marginLeft + "px"});
				header.data("marginLeft", marginLeft);
			}
		});		
		
		var body = container.body = $("#bodyArea", container);
		this.addClass(body, this.config.css.bodyArea);
	},
	
	createItem: function(container, option) {
		var me = this, config = this.config;
		
		//0. item
		var item = {
			subItems: []
		};
		item.id = option.id;
		
		//1. item header
		var itemHeader = item.itemHeader = $(this.getTemplate("Tab", "item_header"));
		this.addClass(itemHeader, config.css.itemHeader);
		
		/* itemHeader.click(function() {
			me.setItemSelected(item);
		}); */
		itemHeader.unbind("mousedown").bind("contextmenu", function (e) {
			e.preventDefault();
			return false;
		});
		itemHeader.unbind("mousedown").bind("mousedown", function (event) {
			if (event.which == 3) {
				//alert("我单击了右键");
				//选中界面
				me.setItemSelected(item);
				//右键显示小菜单
				me.shouTabMenu(item);
			}else if(event.which == 1){
				//alert("我单击了左键");
				me.setItemSelected(item);
			} 
		});
		
		//2. text
		var text = itemHeader.text = $("#headerText", itemHeader);
		this.setText(text, option.text, config.css.itemText);
		if (option.title) {
			this.setTitle(text, option.title);
		}
		
		//2. image and icon
		if (option.icon) {
			var icon = itemHeader.image = $("#headerIcon", itemHeader);
			this.setIcon(icon, option.icon, config.css.itemIcon);
			itemHeader.prepend(icon);
		}
		
		//3. item close button
		var closeBtn = itemHeader.closeBtn = $("#closeBtn", itemHeader);
		this.addClass(closeBtn, config.css.itemCloseBtn);
		closeBtn.click(function() {
			me.removeItem(item); 
			//this.deleteItem(item);
			/* let container = item.itemHeader.parent();
			item.itemHeader.remove();
			let children = container.children();
			let w_ = children[0] ? children[0].offsetWidth + 5 : 0;
			let width_ = children.length * w_;
			container.css({"width": width_ + "px"});
			
			//内容的最左，最右
			//边框的最左，最右
			let container_left = container[0].offsetLeft;
			let container_right = container_left + width_;
			
			let range = container.parent()
			let range_left = range[0].offsetLeft;
			let range_right = range_left + range[0].clientWidth;
			
			//判断内容的最右侧是否<右边框
			if (container_right < (range_right - 24)) {//小于
				//判断内容最左侧是否<左边框
				if (container_left < 0) {//小于
					//内容向右移动一格
					var marginLeft = container.data("marginLeft");
					marginLeft = marginLeft + 120;
					container.css({"margin-left": marginLeft + "px"});
					container.data("marginLeft", marginLeft);
				}
			}
			
			item.itemBody.remove();
    		for (var i = 0; i < configItems.items.length; i++) {
    			var itemA = configItems.items[i];
    			if (itemA.id == item.id) {
        			if (i == 0 && i < configItems.items.length) {
        				configItems.setItemSelected(configItems.items[i+1])
        			} else if (i != 0) {
        				configItems.setItemSelected(configItems.items[i-1])
        			}

        			configItems.items.splice(i, 1);
        			
        			if (configItems.items.length == 0) {
        				$("#firstPage").css('display','block');
        			}
    			}
    		} */
		});
		
		//4. body
		if (option.url) {
			var itemBody = item.itemBody = $(this.getTemplate("Tab", "item_iframeBody"));
			
			
			this.addClass(itemBody, config.css.itemBody);
			
			var bodyFrame = itemBody.bodyFrame = $("#bodyFrame", itemBody);

			if (option.minwidth) {
				itemBody[0].style.overflowX = "auto";
				itemBody[0].style.overflowY = "hidden";
				bodyFrame[0].style.minWidth = option.minwidth;
			}
			
			util.pageTo(bodyFrame, option.url);
		}
		else if (option.element) {
			var itemBody = item.itemBody = $(this.getTemplate("Tab", "item_divBody"));
			this.addClass(itemBody, config.css.itemBody);
			itemBody.append(option.element);
		}
		else if (option.contentText) {
			var itemBody = item.itemBody = $(this.getTemplate("Tab", "item_divBody"));
			this.addClass(itemBody, config.css.itemBody);
			itemBody.html(option.text);	
		}
		else {
			var itemBody = item.itemBody = $(this.getTemplate("Tab", "item_divBody"));
			this.addClass(itemBody, config.css.itemBody);
		}
		
		return item;
	},
	
	createSubItem: function(option) {
		var item = this.selected;
		
		if (!item) { return; }
		
		var subItem = {};
		/* var itemBody = item.itemBody = $(this.getTemplate("Tab", "item_iframeBody"));
		this.addClass(itemBody, config.css.itemBody);
		
		var bodyFrame = itemBody.bodyFrame = $("#bodyFrame", itemBody);
		pageTo(bodyFrame, option.url); */
		
		
		var subbody = subItem.body = $(this.getTemplate("Tab", "item_iframeSubbody"));
//		this.addClass(body, config.css.itemBody);
		var subbodyFrame = subbody.bodyFrame = $("#bodyFrame", subbody);
		
		util.pageTo(subbodyFrame, option.url);
		item.itemBody.append(subbody);
		subbodyFrame.animate({"margin-left": 0});
		
		item.subItems.push(subItem);
	},
	
	showSubItem: function(option) {
		this.createSubItem(option);
	},
	
	deleteSubItem: function() {
		var item = this.selected;
		
		if (!item) { return; }
		
		var subItems = item.subItems;
		if (!subItems.length) { return; }
		
		var subItem = subItems[subItems.length - 1];
		
		subItem.body.animate({"margin-left": "-100%"}, {
			complete: function() {
				subItem.body.remove();
				subItems.splice(subItems.length - 1, 1);
			}
		});
	},
	
	hideSubItem: function() {
		this.deleteSubItem();
	},
	
	attachItem: function(container, item) {
		//1.1 attach header
		container.header.append(item.itemHeader);
		let w_ = item.itemHeader[0].offsetWidth + 5;
		let children = container.header.children();
		
		let width_ = children.length * w_;
		container.header.css({"width": width_ + "px"});
		container.body.append(item.itemBody);
		
		//1.2 attach body
//		var overflow = container.header.width() > container.headerOuter.width();
//		$.fm.setVisible(container.header.goLeft, overflow);
//		$.fm.setVisible(container.header.goRight, overflow);
	},
	
	deleteItem: function(item) {
		item.header.remove();
		item.body.remove();
	},
	
	showItem: function(option, isRefresh) {
		//1. get item
		if (!option.id) {
			option.id = this.createSequenceValue("Tab");
		}
		
		var item = this.getItemBy("id", option.id);
		
		if (!item) {
			item = this.doAddItem(this, this.container, option);
		}
		
		//2. select
		this.setItemSelected(item, isRefresh);
	},
	
	open: function(option, isRefresh) {
		let me = this;
		me.pageCode = option.page_code;
		configItems = this;
		this.showItem(option, isRefresh);
		if (configItems.container.body[0].children.length > 1) {
			$("#firstPage").css('display','none');
		}
	},
	
	shouTabMenu: function(item) {
		var me = this;
		var isF = false;
		var menu_this_ = $(".tab-A-item_menu", $("#content"));
		if (menu_this_) {
			menu_this_.remove();
		}
		//创建右键菜单并设置显示位置
		var item_menu = item.item_menu = $(this.getTemplate("Tab", "item_menu"));
		
		var menu_this = $("#menu_this", $(item_menu));
		var menu_left = $("#menu_left", $(item_menu));
		var menu_right = $("#menu_right", $(item_menu));
		
		if(item.itemHeader.prevAll().length < 1) {
			$(menu_left).empty();
		}
		if(item.itemHeader.nextAll().length < 1) {
			$(menu_right).empty();
		}
		  
		//获取当前元素
		var this_sub = item.itemHeader[0];
		menu_this.click(function() {
			me.removeItem(item);
			item_menu.remove();
		});
		//获取同级之前的元素
		menu_left.click(function() {
			me.removeItemLeft(item);
			item_menu.remove();
		});
		//获取同级之后的元素
		menu_right.click(function() {
			me.removeItemRight(item);
			item_menu.remove();
		});
		
		var h_ =  this_sub.offsetHeight;
		var w_ =  this_sub.offsetWidth;
		
		var top_ =  this_sub.offsetTop + h_; 
		var left_ = this_sub.offsetLeft + w_; 
		
		var pw_ = document.documentElement.clientWidth / 2;
		if (left_ > pw_) {
			left_ = this_sub.offsetLeft; 
		}
		
		item_menu.css('position','absolute');
		item_menu.css('top', top_ + "px");
		item_menu.css('left', left_ + "px");
		item_menu.css('z-index','100');
		
		$("#content").append(item_menu);
		
		setTimeout(function() {
			if(!isF) {
				item_menu.remove();
			}
		},"5000");
	},
	
	removeItem: function(item) {
		let container = item.itemHeader.parent();
		item.itemHeader.remove();
		let children = container.children();
		let w_ = children[0] ? children[0].offsetWidth + 5 : 0;
		let width_ = children.length * w_;
		container.css({"width": width_ + "px"});
		
		//内容的最左，最右
		//边框的最左，最右
		let container_left = container[0].offsetLeft;
		let container_right = container_left + width_;
		
		let range = container.parent()
		let range_left = range[0].offsetLeft;
		let range_right = range_left + range[0].clientWidth;
		
		//判断内容的最右侧是否<右边框
		if (container_right < (range_right - 24)) {//小于
			//判断内容最左侧是否<左边框
			if (container_left < 0) {//小于
				//内容向右移动一格
				var marginLeft = container.data("marginLeft");
				marginLeft = marginLeft + 120;
				container.css({"margin-left": marginLeft + "px"});
				container.data("marginLeft", marginLeft);
			}
		}
		
		item.itemBody.remove();
		for (var i = 0; i < configItems.items.length; i++) {
			var itemA = configItems.items[i];
			if (itemA.id == item.id) {
				if (i == 0 && i < configItems.items.length) {
					configItems.setItemSelected(configItems.items[i+1])
				} else if (i != 0) {
					configItems.setItemSelected(configItems.items[i-1])
				}
		
				configItems.items.splice(i, 1);
				
				if (configItems.items.length == 0) {
					$("#firstPage").css('display','block');
				}
			}
		}
		
		if(item.option.closecallback) {
			item.option.closecallback()
		}
		
	},
	
	removeItemLeft: function(item) {
		this.setItemSelected(item);
		var prevAll_ = item.itemHeader.prevAll();
		prevAll_.remove();
		configItems.items.splice(0, prevAll_.length);
	},
	
	removeItemRight: function(item) {
		this.setItemSelected(item);
		var nextAll_ = item.itemHeader.nextAll();
		nextAll_.remove();
		configItems.items.splice(configItems.items.length - nextAll_.length, nextAll_.length);
	},
	
	setItemSelected: function(item, isRefresh) {
		var old = this.selected;
		
		if (item == old) {
			if (isRefresh) {
				item.itemBody.bodyFrame[0].contentWindow.location.reload(true);
			}
			return;
		}
		
		if (old) {
			this.changeItemCss(old, "item-unselect");
			old.itemBody.hide();
			if (old.option.isrefresh) {
				item.itemBody.bodyFrame[0].contentWindow.location.reload(true);
			}
			
		}
		
		if (item) {
			this.selected = item;
			this.changeItemCss(item, "item-select");
			item.itemBody.show();
			if (isRefresh) {
				item.itemBody.bodyFrame[0].contentWindow.location.reload(true);
			}
			
		}
	},
	
	changeItemCss: function(item, event) {
		var config = this.config, header = item.itemHeader;
		
		if ("item-select" == event) {
			this.removeClass(header, config.css.itemHeader);
			this.addClass(header, config.css.selectedItemHeader);
		}
		else if ("item-unselect" == event) {
			this.removeClass(header, config.css.selectedItemHeader);
			this.addClass(header, config.css.itemHeader);
		}
	}

});


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

Tab_TemplateA = {};
Tab_TemplateB = {};


Tab_TemplateA.container = [
	'<div class="tab-A">',
		'<div id="headerOuter" class="tab-A-headerOuter">',
			'<div id="goRight" class="tab-A-goleft el-icon-arrow-left" style= "line-height: 22px"></div>',
			'<div class="tab-A-header">',
				'<div id="headerArea" class="tab-A-header-inner"></div>',
			'</div>',
			'<div id="goLeft" class="tab-A-goright el-icon-arrow-right" style= "line-height: 22px"></div>',
		'</div>',
		'<div id="bodyArea" class="tab-A-body"></div>',
	'</div>'                   
];

Tab_TemplateA.item_header = [
	'<div class="tab-A-item-header">',
		'<span id="headerIcon" class="tab-A-item-headerImg iconfont" style="font-size: 12px"></span>',
		'<span id="headerText" ></span>',
		'<span id="closeBtn" class="closeTab iconfont icon-circleclose" style="font-size: 12px"></span>',
	'</div>'                   
];

Tab_TemplateA.item_iframeBody = [
	'<div style="height: 100%;">',
		'<iframe id="bodyFrame" class="tab-A-item-iframe"></iframe>',
	'</div>'
];

Tab_TemplateA.item_iframeSubbody = [
	'<div style="height: 100%; width: 100%; top: 0; position: fixed; background-color: #a0a0a036;">',
		'<iframe id="bodyFrame" class="tab-A-subitem-iframe"></iframe>',
	'</div>'
];

Tab_TemplateA.item_divBody = [
	'<div class="tab-A-item-div"></div>'                   
];

Tab_TemplateA.item_menu = [
    '<div class="tab-A-item_menu">',
    	'<div id="menu_this" class="div_sub">',
			'<span class="treemenu-A-text-mini">关闭当前</span>',
    	'</div>',
		'<div id="menu_left" class="div_sub">',
			'<span class="treemenu-A-text-mini">关闭左侧</span>',
		'</div>',
		'<div id="menu_right" class="div_sub">',
			'<span class="treemenu-A-text-mini">关闭右侧</span>',
		'</div>',
    '</div>'   
];



/********* toolbar *************/

Toolbar = Control.subClass({
	
	items: true,
	
	init: function(config) {
		this.selectable = config.selectable;
		this.selectedItem = null;
		
		config.css = util.combine(config.css, {
			container: null,
			item: null,
			itemSelected: null,
			itemImage: null,
			itemIcon: null,
			itemText: null,
			itemDown: null
		});
		
		Control.call(this, config);
	},
	
	getContainerTemplate: function() {
		var template = this.getTemplate("Toolbar", "container");
		return template;
	},
	
	beforeCreateItems: function(config) {
		
	},
	
	addItem: function(option) {
		this.doAddItem(this, this.container, option, 1);
	},
	
	createItem: function(container, option) {
		var config = this.config; var me = this;
		
		//1. item
		var template = this.getTemplate("Toolbar", "item");
		var item = $(template);
		
		item.body = $("#body", item);
		if (!item.body.length) {
			item.body = item;
		}
		
		this.addClass(item.body, config.css.item);
		
		//2. text
		var text = item.text = $("#text", item);
		this.setText(text, option.text, config.css.itemText);
		
		//3. image and icon
		var image = item.image = $("#image", item);
		this.setImage(image, option.image, config.css.itemImage);
		
		var icon = item.icon = $("#icon", item);
		this.setIcon(icon, option.icon, config.css.itemIcon);
		
		//4. click
		item.click(function() {
			if (me.selectable) {
				me.focusItem(item);
			}
			
			if (option.action) {
				var onGet = config.onGet;
				if (!onGet) {
					return;
				}
				
				Action.exec({
					operator: option.action,
					dataName: onGet("dataname"),
					record: onGet("record"),
					observer: onGet("observer")
				});
			}
			
			if (option.onSelect) {
				option.onSelect.call(this, item, option);
			}
		});
		
		//5. link
		if (option.menu) {
			this.addDownButton(item);
			var menu = new PopMenu(option.menu);
			this.linkControl(item, menu, option.menu);
		}
		else if (option.tree) {
			this.addDownButton(item);
			var tree = new Tree(option.tree);
			this.linkControl(item, tree, option.menu);			
		}
		else if (option.panel) {
			this.addDownButton(item);
			var panel = new Panel(option.panel);
			this.linkControl(item, panel, option.menu);			
		}		
		
		//6标记
		if(option.z_badge) {
			var badge = item.badge = $("#badge", item);
			if (option.id) {
				badge.attr("id", "badge_" + option.id);
			}
			
			this.setBadge(badge, option.z_badge, config.css.itemText);
		}
		
		return item;
	},
	
	addDownButton: function(item) {
		var config = this.config;
		
		var template = this.getTemplate("Toolbar", "item_down");
		var down = item.down = $(template);
		this.addClass(down, config.css.itemDown);
		item.append(down);
	},
	
	linkControl: function(item, childCtrl) {
		var trigger = this.config.trigger || "hover";
		
		if ("hover" == trigger) {
			item.mouseenter(function() {
				childCtrl.setVisible(true);
			});
			item.mouseleave(function() {
				childCtrl.setVisible(false);
			});	
		}
		else {
			item.click(function() {
				childCtrl.changeVisible();
			});			
		}
		
		item.append(childCtrl.container);
	},
	
	focusItem: function(item) {
		if (item.selected) {
			return;
		}
		
		if (this.selectedItem) {
			this.selectedItem.removeClass(this.config.css.itemSelected);
		}
		
		this.selectedItem = item;
		item.addClass(this.config.css.itemSelected);
	},
	
	focusByIndex: function(idx) {
		var item = this.items[idx];
		
		if (!item) {
			return;
		}
		
		this.focusItem(item);
	},
	
	selectItem: function(item) {
		item.click();
	},
	
	selectByIndex: function(idx) {
		var item = this.items[idx];
		this.selectItem(item);
	}
	
});


//*************************************
Toolbar_TemplateA = {};
Toolbar_TemplateB = {};
Toolbar_TemplateC = {};


Toolbar_TemplateA.container = [
   '<div class="toolbar-A">',
   '</div>'                   
];

Toolbar_TemplateA.director = [
	'<div class="toolbar-A-director"><div>'                         
];

Toolbar_TemplateA.item = [
	'<a href="#" class="toolbar-A-btn-outer">',
		'<span id="body" class="toolbar-A-btn">',
			'<span id="icon" class="toolbar-A-btn-icon iconfont"></span>',
			'<span id="text" class="toolbar-A-btn-content"></span>',
		'</span>',
	'</a>'   
];

//*************************************
Toolbar_TemplateB.container = [
   '<div id="container" class="toolbar-B">'                            
];

Toolbar_TemplateB.item = [
	'<div class="toolbar-B-btn" style="left: 0px; width: 110px" >',
		'<span id="icon" class="iconfont"></span>',
		'<span id="text" class="toolbar-B-btn-text"></span>',
	'</div>'	                           
];

Toolbar_TemplateB.item_down = [
	'<img class="photo-preview">',
];

//*************************************
Toolbar_TemplateC.container = [
   '<div id="container" class="toolbar-C">'                            
];

Toolbar_TemplateC.item = [
	'<div class="toolbar-C-btn">',
		'<div id="icon" class="toolbar-C-btn-icon iconfont"></div>',
		'<div id="text" class="toolbar-C-btn-text"></div>',
		'<div id="badge" class="toolbar-C-btn-badge" style="display: none;"></div>',
	'</div>'	                           
];

Toolbar_TemplateC.item_down = [
	'<img class="photo-preview">',
];


/********* treemenu *************/


TreeMenu = Control.subClass({
	
	items: true,
	
	init: function(config) {
		config.css = util.combine(config.css, {
			container: null,
			item: null,
			openItem: null,
			selectedItem: "treemenu-A-itemBody",
			itemArrow : "icon-jiantouarrow486",
			openItemArrow: "icon-jiantou",
			icon: null,
			selectedItemIcon: null
		});
		
		this.selected = {};
		this.itemIndent = 15;
		
		Control.call(this, config);
		
		if (config.itemIndex !== undefined) {
			this.setItemSelected(this.items[0]);
		}
	},
	
	getContainerTemplate: function() {
		var template = this.getTemplate("TreeMenu", "container");
		return template;
	},
	
	load: function(itemOptions) {
		this.container.empty();
		var item_ = "";//返回收首个菜单元素
		
		item_ = this.createItems(this, this.container, itemOptions, 1, item_);
		return item_;
	},
	
	createItem: function(container, option, level) {
		var me = this, config = this.config;
		
		//1. item
		var template = this.getTemplate("TreeMenu", "item");
		var item = $(template);
		
		item.body = $("#body", item);
		item.body.css({"padding-left": level * this.itemIndent + "px"});
		this.addClass(item.body, config.css.item);
		
		//2. text
		var text = item.text = $("#text", item);
		this.setText(text, option.text, config.css.itemText);
		
		//3. image
		var image = item.image = $("#image", item);
		this.setImage(image, option.image, config.css.itemImage);
		
		//4. icon
		var icon = item.icon = $("#icon", item);
		this.setIcon(icon, option.icon, config.css.itemIcon);
		
		//5. sub tree
		if (option.children) {
			this.addSubTree(option, item, option.children, level + 1);
		}
		
		//6. item click event
		item.body.click(function() {
			me.setItemSelected(item);
			if (me.onSelect) {
				me.onSelect.call(me, item, option);
			}
		});		
		
		//7标记
		if(option.z_badge) {
			var badge = item.badge = $("#badge", item);
			if (option.id) {
				badge.attr("id", "badge_menu_" + option.id);
			}
			this.setBadge(badge, option.z_badge, config.css.itemText);
		}
		
		return item;
	},
	
	addSubTree: function(option, item, children, level) {
		var config = this.config;
		
		//1. arrow icon
		var arrow = item.arrow = $(this.getTemplate("TreeMenu", "item_arrow"));
		arrow.addClass(config.css.itemArrow);
		item.body.append(arrow);
		
		//2. sub tree
		var container = item.subContainer = this.createContainer(false);
		this.createItems(item, container, children, level + 1);
		item.append(container);
	},
	
	setSelectIndex: function(idx) {
		var item = this.items[idx];
		this.setItemSelected(item);
	},
	
	getSelectOperator: function(item, option) {
		//1. type
		if ("leaf" == option.nodetype) {
			return "select";
		}
		else if ("branch" == option.nodetype) {
			return "open";
		}
		
		//2. URL
		if (option.url) {
			return "select";
		}
		else {
			return "open";
		}
	},
	
	setItemSelected: function(selected) {
		if (!selected) { return; }
		var operator = this.getSelectOperator(selected, selected.option);
		
		//1. open branch 
		if ("open" == operator) {
			var old = this.selected.branch;
			
			if (selected == old) {
				return;
			}
			
			if (old) {
				this.changeItemCss(old, "item-close");
				this.selected.branch = null;
				
				if (old.subContainer) {
					old.subContainer.hide();
				}
			}
			
			if (selected) {
				this.changeItemCss(selected, "item-open");
				this.selected.branch = selected;
				
				if (selected.subContainer) {
					selected.subContainer.show();
				}
			}
		}
		
		//2. select leaf
		if ("select" == operator) {
			var old = this.selected.leaf;
			
			if (selected == old) {
				return;
			}
			
			if (old) {
				this.changeItemCss(old, "item-unselected");
				this.selected.leaf = null;
			}
			
			if (selected) {
				this.changeItemCss(selected, "item-selected");
				this.selected.leaf = selected;
				
				if (this.onItemSelected) {
					this.onItemSelected(selected, selected.option);
				}
			}
		}
	},
	
	changeItemCss: function(item, event) {
		var config = this.config;
		
		//1. branch event
		if ("item-open" == event && item) {
			item.body.addClass(config.css.openItem);
			
			if (item.arrow) {
				item.arrow.removeClass(config.css.itemArrow);
				item.arrow.addClass(config.css.openItemArrow);				
			}
			
			return;
		}
		
		if ("item-close" == event && item) {
			item.body.removeClass(config.css.openItem);
			
			if (item.arrow) {
				item.arrow.removeClass(config.css.openItemArrow);
				item.arrow.addClass(config.css.itemArrow);				
			}
			
			return;
		}
		
		//2. leaf event
		if ("item-select" == event && item) {
			item.body.addClass(config.css.selectedItem);
			
			item.arrow.removeClass(config.css.itemArrow);
			item.arrow.addClass(config.css.activeItemArrow);
			
			return;
		}
		
		if ("item-unselect" == event && item) {
			item.body.removeClass(config.css.selectedItem);
			
			item.arrow.removeClass(config.css.activeItemArrow);
			item.arrow.addClass(config.css.itemArrow);
			
			return;
		}
		if ("item-selected" == event && item) {
			item.addClass(config.css.selectedItem);
			
			return;
		}
		
		if ("item-unselected" == event && item) {
			item.removeClass(config.css.selectedItem);
			
			return;
		}
	}
	
});


//*************************************
TreeMenu_TemplateA = {};

TreeMenu_TemplateA.container = [
   '<ul class="treemenu-A"></ul>'                   
];

TreeMenu_TemplateA.item = [
    '<li class="treemenu-A-item">',
    	'<div id="body">',
			'<i id="icon" class="iconfont"></i>&nbsp;',
			'<span id="text" class="treemenu-A-text"></span>',
    	'</div>',
		'<div id="badge" class="treemenu-A-btn-badge" style="display: none;"></div>',
    '</li>'   
];

TreeMenu_TemplateA.item_arrow = [
  	'<i id="icon" class="treemenu-A-body-arrow iconfont"></i>&nbsp;',
];