Toolbar = Control.subClass({
	
	items: true,
	
	init: function(config) {
		config.css = util.combine(config.css, {
			container: null
		});
		
		this.groups = {};
		this.items = [];
		Control.call(this, config);
	},
	
	getContainerTemplate: function() {
		return $(Toolbar_Template.container.join(""));
	},
	
	createContent: function() {
		var items = this.config.items;
		
		if (!items || !items.length) {
			return;
		}
		
		var group = null;
		var max = items.length;
		
		for (var i = 0; i < max; i++) {
			var item = items[i];
			 
			if (item.group) {
				group = this.getGroup(item.group);
			}
			
			var parent = group || this.container;
			this.createItem(parent, item);
		}
	},
	
	getGroup: function(name) {
		var result = this.groups[name];
		
		if (!result) {
			result = $(Toolbar_Template.group.join(""));
			this.groups[name] = result;
			this.container.append(result);
		}
		
		return result;
	},
	
	createItem: function(parent, option) {
		//1. element
		var button = $(Toolbar_Template.button.join(""));
		button.html(option.caption);
		
		if (option.active === false) {
			button.addClass("btn-unactive");
		}
		else {
			button.addClass("btn-active");
		}
		
		//2. click
		button.click(function() {
			if (option.onClick) {
				option.onClick.call(this);
			}
 		});
		
		//3. append
		parent.append(button);
		return result;		
	}
});


//*************************************
Toolbar_Template = {};

Toolbar_Template.container = [
   '<div class="toolbar"></div>'                   
];

Toolbar_Template.group = [
    '<div class="btn-group">',
    '</div>'   
];

Toolbar_Template.button = [
	'<div class="btn"></div>'
];