BandTree = Control.subClass({
	
	items: true,
	
	init: function(config) {
		config.css = util.combine(config.css, {
			container: null
		});
		
		this.firstBand;
		this.selected = {};
		this.buckets = null;
		this.itemIndent = 10;
		
		Control.call(this, config);
	},
	
	getContainerTemplate: function() {
		var template = $(BandTree_Template.container.join(""));
		return template;
	},
	
	load: function(itemOptions) {
		this.clear();
		this.createItems(this, this.container, itemOptions);
		this.onBandSelected(this.firstBand);
	},
	
	createItem: function(container, option) {
		return this.createBucket(container, option);
	},
	
	createBucket: function(container, option) {
		//1. bucket
		var bucket = $(BandTree_Template.bucket.join(""));
		this.buckets.push(bucket);
		bucket.body = $("#body", bucket);
		
		//2. bucket click event
		var me = this;
		bucket.click(function() {
			me.onBacketSelected(bucket);
		});
		
		//3. text
		var text = bucket.text = $("#text", bucket);
		text.html(option.name);
		
		//4. bands
		var bands = option.children;
		
		if (bands && bands.length) {
			var max = bands.length;
			
			for (var i = 0; i < max; i++) {
				var bandOption = bands[i];
				var band = this.createBand(bucket, bandOption, i);
				
				if (!bucket.firstBand) {
					bucket.firstBand = band;
				}
			}
		}
		
		return bucket;
	},
	
	createBand: function(bucket, option, idx) {
		//1. band
		var band = $(BandTree_Template.band.join(""));
		if (this.firstBand == null) {
			this.firstBand = band;
		}
		band.attr("id", "band_" + idx);
		band.header = $("#header", band);
		
		band.body = $("#band_body", band);
		band.body.hide();
		
		//2. band click event
		var me = this;
		band.click(function(e) {
			me.onBandSelected(band);
			e.stopPropagation();
		});		
		
		//3. text
		var text = band.text = $("#text", band);
		text.html(option.name);
		
		//4. fields
		var fields = option.children;
		
		if (fields && fields.length) {
			var max = fields.length;
			
			for (var i = 0; i < max; i++) {
				var field = fields[i];
				this.createField(band.body, field);
			}
		}
		
		bucket.append(band);
		return band;
	},
	
	createField: function(band, option) {
		var field = $(BandTree_Template.field.join(""));
		field.body = $("#body", field);
		
		var text = field.text = $("#text", field);
		text.html(option.name);	
		
		band.append(field);
	},
	
	onBacketSelected: function(bucket) {
		if (!bucket) {
			return;
		}
		
		this.onBandSelected(bucket.firstBand);
	},
	
	onBandSelected: function(band) {
		if (!band || this.selected.band == band) {
			return;
		}
		
		if (this.selected.band) {
			this.changeBandState(this.selected.band, "unselected");
		}
		
		this.changeBandState(band, "selected");
		this.selected.band = band;
	},
	
	onFieldSelected: function(band, field) {
		
	},
	
	changeBandState: function(band, event) {
		if ("selected" == event) {
			band.body.show();
//			band.arrow.addClass(config.css.openItemArrow);				
			return;
		}
		
		if ("unselected" == event) {
			band.body.hide();
//			item.arrow.removeClass(config.css.openItemArrow);
//			item.arrow.addClass(config.css.itemArrow);				
			return;
		}
	},
	
	clear: function() {
		this.container.empty();
		this.selected = {};
		this.buckets = [];
	}
	
});


//*************************************
BandTree_Template = {};

BandTree_Template.container = [
   '<ul class="band-tree"></ul>'                   
];

BandTree_Template.bucket = [
    '<li class="band-tree-bucket">',
		'<div id="body" class="bucket-header">',
			'<i class="icon iconfont icon-bucket"></i>&nbsp;',
			'<span id="text" class="band-tree-text"></span>',
		'</div>',
	'</li>'   
];

BandTree_Template.band = [
    '<li class="band-tree-band">',
		'<div id="header" class="band-header">',
			'<i class="icon iconfont icon-band"></i>&nbsp;',
			'<span id="text" class="band-tree-text"></span>',
			'<i id="arrow" class="band-arrow icon iconfont icon-arrow-down"></i>',
		'</div>',
		'<div id="band_body" class="band-body">',
		'</div>',
	'</li>'   
];

BandTree_Template.field = [
    '<div class="band-tree-field">',
    	'<div id="body" class="field-body">',
			'<i class="icon iconfont icon-field"></i>&nbsp;',
			'<span id="text" class="band-tree-text"></span>',
    	'</div>',
    '</div>'   
];

BandTree_Template.item_arrow = [
  	'<i id="icon" class="band-tree-body-arrow iconfont"></i>&nbsp;'
];