(function ($) {

	Toolbar = $.fm.Toolbar = Control.subClass({
		
		items: true,
		
		init: function(config) {
			this.selectable = config.selectable;
			this.selectedItem = null;
			
			config.css = $.fm.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 $.fm.PopMenu(option.menu);
				this.linkControl(item, menu, option.menu);
			}
			else if (option.tree) {
				this.addDownButton(item);
				var tree = new $.fm.Tree(option.tree);
				this.linkControl(item, tree, option.menu);			
			}
			else if (option.panel) {
				this.addDownButton(item);
				var panel = new $.fm.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">',
	];

})(jQuery);