TreeMenu = $.fm.TreeMenu = Control.subClass({
	
	items: true,
	
	init: function(config) {
		config.css = $.fm.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);
	},
	
	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);
			}
		});		
		
		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>',
    '</li>'   
];

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