Sheet = Control.subClass({
	
	items: true,
	
	init: function(config) {
		config.css = util.combine(config.css, {
			container: null
		});
		
		this.columns = {};
		this.selectedColum;
		
		Control.call(this, config);
	},
	
	getContainerTemplate: function() {
		return $(Sheet_Template.container.join(""));
	},
	
	createContent: function() {
		this.body = $("#sheet_body", this.container);
		
		var columnOptions = this.config.columns;
		
		//1. create indicator column
		this.createIndicatorColumn();
		
		//2. create index column
		this.createIndexColumn();
		
		//2. create columns
		var max = columnOptions.length;
		for (var i = 0; i < max; i++) {
			var columnOption = columnOptions[i];
			this.createDataColumn(columnOption);
		}
	},
	
	clearColumns: function() {
		for (var name in this.columns) {
			var column = this.columns[name];
			column.el.remove();
		}
		
		this.columns = {};
	},
	
	loadColumns: function(columnOptions) {
		//1. clear
		this.clearColumns();
		
		//2. create columns
		var max = columnOptions.length;
		for (var i = 0; i < max; i++) {
			var columnOption = columnOptions[i];
			this.createDataColumn(columnOption);
		}
	},
	
	createIndicatorColumn: function() {
		//1. column
		var column = $(Sheet_Template.indicatorColumn.join(""));
		
		//2. root indicator
		var indicator = $(Sheet_Template.top.join(""));
		column.append(indicator);
		
		//3. left indicator
		var lineNum = this.config.lineNum;
		for (var i = 0; i < lineNum; i++) {
			var indicator = $(Sheet_Template.indicator.join(""));
			column.append(indicator);
		}
		
		//4. append to container
		this.container.append(column);
	},
	
	createIndexColumn: function() {
		//1. column
		var column = {
			cells: []
		};
		var el = $(Sheet_Template.indexColumn.join(""));
		
		//1. indicator
		var indicator = $(Sheet_Template.top.join(""));
		el.append(indicator);
		
		//2. title
		var title = el.title = $(Sheet_Template.title.join(""));
		title.html("序号");
		el.append(title);
		
		//4. cell
		var lineNum = this.config.lineNum; var cells = column.cells;
		
		for (var i = 1; i <= lineNum; i++) {
			var cell = $(Sheet_Template.cell.join(""));
			cell.html(i);
			cell.addClass("align-center");
			
			cells.push({
				parent: column,
				el: cell
			});
			
			el.append(cell);
		}
		
		this.container.append(el);
	},
	
	createDataColumn: function(columnOption) {
		//1. column
		var column = {
			option: columnOption,
			cells: []
		};
		
		var el = column.el = $(Sheet_Template.dataColumn.join(""));
		this.columns[columnOption.code] = column;
		
		column.formatter = this.getColumnFormatter(columnOption.formatter);
		
		var alignClass = this.getColumnAlignClass(columnOption.align);
		el.addClass(alignClass);
		
		var widthClass = this.getColumnWidthClass(columnOption.width);
		el.addClass(widthClass);		
		
		var me = this;
		var onClick = function() {
			me.selectColum(column);
			if (me.config.onColumnSelected) {
				me.config.onColumnSelected.call(me, column);
			}
		};
		
		//2. top indicator
		var indicator = $(Sheet_Template.top.join(""));
		el.append(indicator);
		indicator.click(onClick);
		
		//3. title
		var title = el.title = $(Sheet_Template.title.join(""));
		title.html(columnOption.name);
		el.append(title);
		title.click(onClick);
		
		//4. cell
		var lineNum = this.config.lineNum; var cells = column.cells;
		
		for (var i = 0; i < lineNum; i++) {
			var cell = $(Sheet_Template.cell.join(""));
			
			cells.push({
				parent: column,
				el: cell
			});
			
			el.append(cell);
		}
		
		//5. append to container
		this.body.append(el);
	},
	
	loadData: function(dataList) {
		//1. clear
		this.clearCells();
		
		//2. load
		if (!dataList || !dataList.length) {
			return;
		}
		
		var first = dataList[0]; var max =  dataList.length;
		
		for (var prop in first) {
			var column = this.columns[prop];
			
			if (!column) {
				continue;
			}
			
			var formatter = column.formatter;
			
			for (var i = 0; i < max; i++) {
				var line = dataList[i];
				var value = line[prop];
				var cell = column.cells[i];
				cell.el.html(formatter(value));
			}
		}
	},
	
	clearCells: function() {
		for (var prop in  this.columns) {
			var column = this.columns[prop];
			var cells = column.cells;
			
			if (!cells || !cells.length) {
				return;
			}
			
			var max = cells.length;
			for (var i = 0; i < cells; i++) {
				cells[i].empty();
			}
		}
	},
	
	selectColum: function(column) {
		if (!column || column == this.selectedColumn) {
			return;
		}
		
		if (this.selectedColumn) {
			this.selectedColumn.el.title.removeClass("title-selected");
			this.selectedColumn.el.title.addClass("title-unselected");
		}
		
		column.el.title.removeClass("title-unselected");
		column.el.title.addClass("title-selected");
		
		this.selectedColumn = column;
	},
	
	textFormatter: function(value) {
		return value;
	},
	
	moneyFormatter: function(value) {
		if (!value || isNaN(value)) {
			return "￥0";
		}
		
		var num = typeof value == 'string' ? parseFloat(value) : value;
		num = num.toFixed(0); 
		num = '￥' + num;

		return num;
	},
	
	percentFormatter: function(value) {
		if (value) {
			var num = typeof value == 'string' ? parseFloat(value) : value;
			num = num.toFixed(0);
			return num + '%';
		}
		return "0%";		
	},
	
	getColumnFormatter: function(formatter) {
		if (!formatter) {
			return this.textFormatter;
		}
		else if ("money" == formatter) {
			return this.moneyFormatter;
		}
		else if ("percent" == formatter) {
			return this.percentFormatter;
		}
		else {
			return this.textFormatter;
		}
	},
	
	getColumnAlignClass: function(align) {
		if ("left" == align) {
			return "column-left";
		}
		else if ("right" == align) {
			return "column-right";
		}
		else {
			return "column-center";
		}
	},
	
	getColumnWidthClass: function(width) {
		width = "" + width;
		
		if ("0.6" == width) {
			return "column-width-06";
		}
		else if ("1" == width) {
			return "column-width-10";
		}
		else if ("1.5" == width) {
			return "column-width-15";
		}
		else if ("2.5" == width) {
			return "column-width-25";
		}			
		else {
			return "column-width-10";
		}
	}
});


//*************************************
Sheet_Template = {};

Sheet_Template.container = [
	'<div class="sheet">',
		'<div class="sheet-body">',
			'<div id="sheet_body" class="sheet-body-inner"></div>',
		'</div>',
	'</div>'                   
];

Sheet_Template.indicatorColumn = [
    '<div class="column-indicator">',
    '</div>'   
];

Sheet_Template.indexColumn = [
    '<div class="column-index">',
    '</div>'   
];

Sheet_Template.dataColumn = [
    '<div class="column-data">',
    '</div>'   
];

Sheet_Template.indicator = [
    '<div class="cell-indicator">',
    '</div>'   
];

Sheet_Template.top = [
    '<div class="cell-top">',
    '</div>'   
];

Sheet_Template.title = [
    '<div class="cell-title title-unselected">',
    '</div>'   
];

Sheet_Template.cell = [
    '<div class="cell-data">',
    '</div>'   
];