var configItems;

Tab = $.fm.Tab = Control.subClass({
	
	items: true,
	
	init: function(config) {
		config.css = $.fm.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);
		});
		
		//2. text
		var text = itemHeader.text = $("#headerText", itemHeader);
		this.setText(text, option.text, 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() {
			//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);
			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);
		
		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) {
		//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);
	},
	
	open: function(option) {
		configItems = this;
		this.showItem(option);
		if (configItems.container.body[0].children.length > 1) {
			$("#firstPage").css('display','none');
		}
	},
	
	setItemSelected: function(item) {
		var old = this.selected;
		
		if (item == old) {
			return;
		}
		
		if (old) {
			this.changeItemCss(old, "item-unselect");
			old.itemBody.hide();
		}
		
		if (item) {
			this.selected = item;
			this.changeItemCss(item, "item-select");
			item.itemBody.show();
		}
	},
	
	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: 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>'                   
];