/********* 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.goRight = $("#goRight", 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 < 0) {
				var marginLeft = header.data("marginLeft");
				marginLeft = marginLeft + 120;
				header.css({"margin-left": marginLeft + "px"});
				header.data("marginLeft", marginLeft);
			}
		});	
			
		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 + headerArea_Width) > (headerParentArea_left + headerParentArea_Width) ) {
				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 || option.title, config.css.itemText);
		
		//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);
			itemBody.attr("name", option.id);
			
			itemBody[0].style.width = "100%";
			itemBody[0].style["background-color"] = "#fff";
			itemBody[0].style["z-index"] = 5;
			itemBody[0].style.position = "absolute";
			
			var bodyFrame = itemBody.bodyFrame = $("#bodyFrame", itemBody);
			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 || option.title);	
		}
		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;
		configItems = this;
		this.showItem(option, isRefresh);
		if (configItems.container.body[0].children.length > 1) {
			$("#firstPage").css('display','none');
		}
	},
	
	setShowListener: function(id, listener) {
		var item = this.getItemBy("id", id);
		if (!item) {
			return;
		}
		item.onShow = listener;
	},
	
	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();
			$(menu_left).hide()
		}
		if(item.itemHeader.nextAll().length < 1) {
			// $(menu_right).empty();
			$(menu_right).hide();
		}
		  
		//获取当前元素
		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_; 
		
		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');
				}
			}
		}
	},
	
	removeItemLeft: function(item) {
		this.setItemSelected(item);
		var prevAll_ = item.itemHeader.prevAll();
		var prevBodyAll_ = item.itemBody.prevAll();
		prevAll_.remove();
		prevBodyAll_.remove();
		configItems.items.splice(0, prevAll_.length);
	},
	
	removeItemRight: function(item) {
		this.setItemSelected(item);
		var prevAll_ = item.itemHeader.prevAll();
		var nextAll_ = item.itemHeader.nextAll();
		var nextBodyAll_ = item.itemBody.nextAll();
		nextAll_.remove();
		nextBodyAll_.remove();
		configItems.items.splice(prevAll_.length+1, nextAll_.length);
	},
	
	removeItemOther: function(id) {
		//获取当前
		var item = this.getItemBy("id", id);
		
		//关闭左侧
		var prevAll_ = item.itemHeader.prevAll();
		var prevBodyAll_ = item.itemBody.prevAll();
		prevAll_.remove();
		prevBodyAll_.remove();
		configItems.items.splice(0, prevAll_.length);
		//关闭右侧
		var nextAll_ = item.itemHeader.nextAll();
		var nextBodyAll_ = item.itemBody.nextAll();
		nextAll_.remove();
		nextBodyAll_.remove();
		configItems.items.splice(1, 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();
			old.itemBody[0].style["z-index"] = 1;
		}
		
		if (item) {
			this.selected = item;
			this.changeItemCss(item, "item-select");
			
			if (item.onShow) {
				item.onShow(item);
			}
			
			// item.itemBody.show();
			item.itemBody[0].style["z-index"] = 5;
			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="goLeft" 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="goRight" 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: 14px"></span>',
		'<span id="headerText" ></span>',
		'<span id="closeBtn" class="closeTab iconfont icon-guanbi" style="font-size: 14px"></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">关闭当前</span>',
    	'</div>',
		'<div id="menu_left" class="div_sub">',
			'<span class="treemenu-A-text">关闭左侧</span>',
		'</div>',
		'<div id="menu_right" class="div_sub">',
			'<span class="treemenu-A-text">关闭右侧</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) {
		if (this.container[0].children.length) {
			var toolbar_width = this.parent[0].scrollWidth;
			
			var length_ = this.container[0].children.length + 1;
			var width_ = this.container[0].children[0].scrollWidth + 1;
			var container_width_ = width_ * length_;
			
			if (container_width_ > toolbar_width) {
				this.parent[0].style.overflow = "hidden";
			}
			
			this.container[0].style.width = container_width_ + "px";
		}
		this.doAddItem(this, this.container, option, 1);
	},
	
	createItem: function(container, option) {
		var config = this.config; var me = this;
		var toolbar_width = this.parent[0].scrollWidth;
		//1. item
		var template = this.getTemplate("Toolbar", "item");
		var item = $(template);
		
		item[0].style.width = (toolbar_width * 0.08) + "px";
		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 || option.title, 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);			
		}		
		
		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>'	                           
];

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();
		
		this.createItems(this, this.container, itemOptions, 1);
	}, */
	
	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 || option.title, 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);
		}
		
		if (option.parent_id) {
			item.parent_id = option.parent_id;
		}
		item.this_id = option.id;
		item.this_name = option.title;
		if(option.icon) {
			item.this_icon = option.icon;
		}
		if(option.icon_open) {
			item.this_icon_open = option.icon_open;
		}
		item.attr("id", option.id);
		
		//6. item click event
		item.body.click(function() {
			me.setItemSelected(item);
			if (me.onSelect) {
				me.onSelect.call(me, item, option);
			}
		});		
		
		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";
		}
	},
	
	setItemSelected2: 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);
				}
			}
		}
	},
	
	
		setItemSelected: function(selected, close_other) {
			if (!selected) { return; }
			var operator = this.getSelectOperator(selected, selected.option);
			
			//1. open branch 
			if ("open" == operator) {
				//已展开的即包含class的则需要收起
				var class_ = selected.body[0].className.split(" ");
				
				if (class_.length) {
					var isclose_ = false;
					class_.map(c=>{
						if (c == "left-menu-active") {
							isclose_ = true;
							return
						}
					})
					if (isclose_) {
						var colseOlds = [];
						colseOlds.push(selected);
						/* this.getAllOld(selected, [], function(colseOlds_) {
							colseOlds = colseOlds_;
						}); */
						
						colseOlds.map(o=>{//关闭
							debug("关闭" + o.this_name);
							if (o.option.children) {
								this.changeItemCss(o, "item-close");
								if (o.parentItem) {
									this.selected.branch = o.parentItem
								}
								else {
									this.selected.branch = null;
								}
								
								if (o.subContainer) {
									o.subContainer.hide();
								}
							}
							else {
								this.changeItemCss(o, "item-unselected");
								this.selected.leaf = null;
							}
							
						})
						
						return
					}
					
				}
				
				debug("展开" + selected.this_name);
				var old = this.selected.branch;
				//var colseOld = !this.isSameOriginal(selected, old);
				
				//如果有上级，获取上级元素
				if(selected.parent_id) {
					var old_l = old;
					if (!old && this.selected.leaf) {
						old_l = this.selected.leaf;
					}
					
					if (old_l && old_l.this_id && selected.parent_id == old_l.this_id) {
						selected.parentItem = old_l;
						debug("获取上级" + selected.this_name + "上级" + old_l.this_name);
					}
					else if (old_l && old_l.parent_id && selected.parent_id == old_l.parent_id) {
						selected.parentItem = old_l.parentItem;
						if (old_l.parentItem) {
							debug("获取上级" + selected.this_name + "上级" + old_l.parentItem.this_name);
						}
					}
					else if(old_l && old_l.parent_id && selected.parent_id != old_l.parent_id) {
						this.getParentItem(selected, old_l, selected.parent_id, function(p_item) {
							if (p_item) {
								selected.parentItem = p_item;
								
								debug("获取上级" + selected.this_name + "上级" + p_item.this_name);
							}
						});
					}
					else {
						debug("展开但没有获取到上级" + selected.this_name);
					}
				}
				
				//之前选择的非叶子时用子节点获取关闭元素
				var old_l = old;
				if(!old && this.selected.leaf) {
					old_l = this.selected.leaf;
				}
				else {
					var old_leaf = this.selected.leaf;
					if (old_leaf) {
						this.changeItemCss(old_leaf, "item-unselected");
						this.selected.leaf = null;
					}
				}
				
				//返回关闭元素组
				var colseOlds = [];
				
				this.getCloseItems(selected, old_l, function(colseOlds_) {
					colseOlds = colseOlds_;
				});
				
				colseOlds.map(o=>{//关闭
					if (o) {
						debug("关闭" + o.this_name);
						if (o.option.children) {
							this.changeItemCss(o, "item-close");
							this.selected.branch = null;
							
							if (o.subContainer) {
								o.subContainer.hide();
							}
						}
						else {
							this.changeItemCss(o, "item-unselected");
							this.selected.leaf = null;
						}
					}
				})
				
				if (selected) {
					this.changeItemCss(selected, "item-open");
					this.selected.branch = selected;
					
					if (selected.subContainer) {
						selected.subContainer.show();
					}
					
					
					if (selected.items && selected.items.length) {
						//selected.items[1].click();
						this.setItemSelected(selected.items[0]);
					}
				}
			}
			
			//2. select leaf
			if ("select" == operator) {
				var old = this.selected.leaf;
				debug("选中" + selected.this_name);
				if (selected == old) {
					return;
				}
				
				//给子菜单添加父元素
				if (selected.parent_id) {
					var old_p = old;
					if(!old_p && this.selected.branch) {
						old_p = this.selected.branch;
					}
					if (old_p && old_p.this_id && selected.parent_id == old_p.this_id) {
						selected.parentItem = old_p;
						debug("获取上级" + selected.this_name + "上级" + old_p.this_name);
					}
					else if (old_p && old_p.parent_id && selected.parent_id == old_p.parent_id) {
						selected.parentItem = old_p.parentItem;
						if (old_p.parentItem) {
							debug("获取上级" + selected.this_name + "上级" + old_p.parentItem.this_name);
						}
					}
					else if(old_p && old_p.parent_id && selected.parent_id != old_p.parent_id) {
						this.getParentItem(selected, old_p, selected.parent_id, function(p_item) {
							selected.parentItem = p_item;
							if (p_item && p_item.this_name) {
								debug("获取上级" + selected.this_name + "上级" + p_item.this_name);
							}
							
						});
					}
				}
				
				//返回关闭元素组
				var colseOlds = [];
				if (old && old != selected) {
					this.changeItemCss(old, "item-unselected");
					this.selected.leaf = null;
				}
				
				if (old && old.parent_id && old.parent_id == selected.parent_id) {
					colseOlds = [];
				}
				else {
					this.getCloseItems(selected, old, function(colseOlds_) {
						colseOlds = colseOlds_;
					});
				}
				
				
				colseOlds.map(o=>{//关闭
					this.changeItemCss(o, "item-close");
					this.selected.branch = null;
					
					if (o && o.subContainer) {
						o.subContainer.hide();
					}
				})
				
				/* if (old) {
					this.changeItemCss(old, "item-unselected");
					this.selected.leaf = null;
				} */
				
				if (selected) {
					
					this.changeItemCss(selected, "item-selected");
					this.selected.leaf = selected;
					
					if (this.onSelect) {
						this.onSelect(selected, selected.option);
					}
				}
			}
		},
		
		isSameOriginal: function(current, old) {
			if (!old || !current) {
				return false;
			}
			
			if (current == old) {
				return true;
			}
			
			if (current.parent_id == old.this_id) {
				return true;
			}
			
			return false;
		},
		
		getParentItem(selected, old, parent_id, callback) {
			if (!old) {
				var aa= "";
				debug("没有获取到上级" + selected.this_name);
			}
			if (selected.parent_id && old && selected.parent_id == old.this_id) {
				callback(old)
			}
			else if(old && old.parent_id) {
				this.getParentItem(selected, old.parentItem, selected.parent_id, callback);
			}
			else {
				callback(old)
			}
		},
		
		getCloseItems: function(current, old, callback) {
			var closeItems = [];
			if (!old || !current) {// || current == old
				callback(closeItems);
				return
			}
			
			if (current.parent_id) {
				if (current.parent_id != old.this_id) {
					//获取
					this.getCloseOlds(current, old, closeItems, callback);
					return
				}
				else {
					callback(closeItems);
					return
				}
			}
			else {
				//返回old所有的父级
				this.getAllOld(old, closeItems, callback);
				return
			}
		},
		
		getAllOld(old, closeItems_, callback) {
			closeItems_.push(old);
			if (old.parent_id) {
				this.getAllOld(old.parentItem, closeItems_, callback);
			}
			else {
				callback(closeItems_)
			}
		},
		
		getCloseOlds(current, old, closeItems_, callback){
			closeItems_.push(old);
			if (old && old.parent_id && current.parent_id != old.parent_id) {
				this.getCloseOlds(current, old.parentItem, closeItems_, callback);
			}
			else {
				callback(closeItems_)
			}
		},
	
	
	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);				
			}
			
			if (item.icon && item.this_icon && item.this_icon_open) {
				item.icon.removeClass(item.this_icon);
				item.icon.addClass(item.this_icon_open);
			}
			
			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);				
			}
			
			if (item.icon && item.this_icon && item.this_icon_open) {
				item.icon.removeClass(item.this_icon_open);
				item.icon.addClass(item.this_icon);
			}
			
			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>',
    '</li>'   
];

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