(function ($) {
	
	$.fm.Grid = Control.subClass({
		template: [
  	      	'<div id="grid-body" class="grid-body_min">',
				'<table id="tab_self" cellpadding=0 cellspacing=0 class="tab_self_min">',
					'<thead id="table_header" class="tab_self_header_min">',
						'<tr id="header-row" class="grid-header"></tr>',
						'<tr id="header-row1" class="grid-header"></tr>',
					'</thead>',	
					'<tbody id="table_body" class="tab_self_body_min">',
					'</tbody>',
				'</table>',
			'</div>',
		],
		template_footer: [
	  		'<div class="grid-bar" id="grid-toolbar">',
				'<div class="grid-bar-placeholder" id="grid-toolbar-placehoder">',
					'<label id="grid-bar_message"></label>',
				'</div>',
				'<div class="grid-bar-area">',
				    '<div class="grid-bar-group">',
			    		'<div class="grid-button-outer" id="grid-first-outer">',
			    			'<span class="grid-button grid-btn-first" id="grid-first"></span>', 
			    		'</div>',
			    		'<div class="grid-button-outer" id="grid-prior-outer">',
		    				'<span class="grid-button grid-btn-prior" id="grid-prior"></span>',		    		
			    		'</div>',
			    		'<div class="grid-button-outer" id="grid-next-outer">',
	    					'<span class="grid-button grid-btn-next" id="grid-next"></span>',		    		
			    		'</div>',
			    		'<div class="grid-button-outer" id="grid-last-outer">',
							'<span class="grid-button grid-btn-last" id="grid-last"></span>',		    		
			    		'</div>',
			    	'</div>',		 
			   	
				   	'<div class="grid-bar-group">',
				   		'<input type="text" class="grid-bar-edit" id="currentPage" value="0"/>',	
			    		'/',			   		
		    			'<label class="grid-bar-label" id="totalPage">0</label>',			    	
			    	'</div>',
		    		
			       	'<div class="grid-bar-group">',
			    		'<div class="grid-button-outer" id="grid-load-outer">',
							'<span class="grid-button grid-btn-load" id="grid-load"></span>',		    		
			    		'</div>',
			       	'</div>',
				'</div>',
		     '</div>'		                  
		],
		
		template_header_indicator: [
		    '<td class="grid-indicator">',
		    	'<div id="header-indicator" class="grid-hd-indicator-inner"></div>',
		    '</td>'
		],
		
		template_header_cell: [
			'<td class="grid-hd-cell">',
				'<div id="header-cell" class="grid-hd-cell-inner"></div>',
			'</td>'
		],
		
		template_body_indicator: [
		    '<td class="grid-cell">',
				'<div id="indicator-body" class="grid-cell-inner grid-indicator-unselected" />',
			'</td>'
		],	
		
		init: function(options) {
    		this.headerHeight = 32;
    		this.footerHeight = 31;
    		this.limit = 15;
    		this.colunmUnitWidth = 100;
    		this.indicatorWidth = 30;
			this.rowHeight = 23.4;
			this.editable = false;
			this.editors = {};
			this.usedWidth = 0;
			this.showPage = false;
			this.hasSubTitle = false;
			this.showIndicator = true;
			this.showToolBar = true;
			this.multiSelect = false;
			this.singleSelect = true;
			this.enableAllSelect = false;
			this.selected = null;
			this.selectedArray = [];
			this.dataObject = [];
			this.rows = [];
			this.headerFixed = false;  //表头是否固定
							 
    		Control.call(this, options);
    		
    		this.createElements();
    		this.refresh();
    	},
    	
    	createElements: function() {
    		var me = this;
    		//1.
    		this.canvas.addClass("grid");
    		this.bodyHeight = this.rowHeight * this.limit;
    		this.height = this.headerHeight + this.bodyHeight;
    		
    		//2.
    		this.element = $(this.template.join(""));
    		this.element.tab_self = $("#tab_self", this.element);
    		this.element.table_header = $("#table_header", this.element);
    		this.element.table_body = $("#table_body", this.element);
    		
    		this.setGridType(this.headerFixed);
    		
    		this.canvas.append(this.element);
    		
    		this.createHeader(this.canvas);
    		this.createBody(this.canvas);
    		
    		if (this.showToolBar) {
    			if (this.customFooter) {
    				this.customFooter = this.getEl(this.customFooter);
                	this.createCustomFooter(this.canvas);
        		}
    			else {
    				this.createDefaultFooter(this.canvas);
    			}
    		} else {
    			if (this.customFooter) {
    				this.customFooter = this.getEl(this.customFooter);
    				this.customFooter.hide();
    			}
    		}
    		
    		this.tableBody.scroll(function() {
    			var left = $(this).scrollLeft();
				me.table_header.scrollLeft(left);
    		});
    	},
    	
    	setGridType: function(headerFixed) {
    		if (headerFixed) {
    			this.element.attr("class", "grid-body");
    			this.element.tab_self.attr("class", "tab_self");
    			this.element.table_header.attr("class", "tab_self_header");
    			this.element.table_body.attr("class", "tab_self_body");
    		}
    	},
    	
    	createHeader: function(area) {
    		var columns = this.columns, me = this, rowspan = 1;
    		if (!columns) return;
    		
    		var header = $('.grid-header', area);
    		header.height(this.headerHeight);
    		header.css("line-height", this.headerHeight + "px");
    		
    		var row = $('#header-row', area);
    		var row1 = $('#header-row1', area);
    		
    		if (this.titleClass) {
    			row.attr("class", this.titleClass);
    			row1.attr("class", this.titleClass);
    		}
    		
    		
    		this.table_header = $('#table_header', area);
    		
    		if(!this.hasSubTitle) {
    			row1.hide();
    		}
    		else{
    			rowspan = 2;
    		}
    		
			//1.
    		if (this.showIndicator) {
    			var template = $(this.template_header_indicator.join(""));
    			template.attr("rowspan", rowspan);
    			
    			var indicator = this.headerIndicator = $('#header-indicator', template);
    			
    			if (this.enableAllSelect) {
    				indicator.addClass("grid-indicator-unselected");
    				indicator.click(function() {
    					me.setAllSelect();
    				});
    			}
    			
    			indicator.width(this.indicatorWidth);
    			row.append(template);
    		}
			
			//2.
    		var flag = false, m = 0, colspan, pcolumn;
        	for (var i = 0; i < columns.length; i++) {
        		var column = columns[i];
        		this.usedWidth = this.usedWidth + column.width;
        		var cell = null;
        		
        		if(column.parent) {
        			flag = true, m++;
        			
        			if(column.colspan) {
        				colspan = column.colspan;
        				pcolumn = column;
        			}
        			
        			cell = $(this.template_header_cell.join(""));
        			
            		cell.body = $('#header-cell', cell);
            		cell.body.width(column.width);
            		cell.body.html(column.caption),
            		
            		row1.append(cell);
        		}
        		else{
        			cell = $(this.template_header_cell.join(""));
        			cell.attr("rowspan", rowspan);
        			
            		cell.body = $('#header-cell', cell);
            		cell.body.width(column.width);
            		cell.body.html(column.caption),
            		
            		row.append(cell);
        		}
        		
        		if(flag && m % colspan == 0) {
        			row.append("<td colspan='" + colspan + "' align='center' style='border-bottom: 1px solid #A3C0E8; border-right: 1px solid #A3C0E8'>" + pcolumn.parent + "</td>");
        			flag = false;
        			m = 0;
        		}
        	}
    	},
    	
    	createBody: function(element, columns) {
    		this.body = $('#grid-body', element);
    		this.body.height(this.height);
    		
    		this.tableBody = $('#table_body', element);
    	},
    	
    	createDefaultFooter: function(element) {
    		var me = this;
    		var footer = $(this.template_footer.join(""));
    		var toolbar = element.toolbar = $('#grid-toolbar', element);
    		
    		var placeholder =  $('#grid-toolbar-placehoder', footer);
    		placeholder.width(200);
    		
    		var btn_first = toolbar.btn_first = $('#grid-first', footer);
    		var btn_prior = toolbar.btn_prior = $('#grid-prior', footer);
    		var btn_next = toolbar.btn_next = $('#grid-next', footer);
    		var btn_last = toolbar.btn_last = $('#grid-last', footer);
    		var btn_load = toolbar.btn_load = $('#grid-load', footer);
    		btn_load.active = true;
    		
    		var currentPage = toolbar.currentPage = $('#currentPage', footer);
    		var totalPage = toolbar.totalPage = $('#totalPage', footer);    		
    		var information = toolbar.information = $('#grid-bar_message', footer);
    		
    		me.initButton(btn_first, me.firstPage);
    		me.initButton(btn_prior, me.priorPage);
    		me.initButton(btn_next, me.nextPage);
    		me.initButton(btn_last, me.lastPage);    		
    		me.initButton(btn_load, me.refresh);
    		
    		information.html("没有数据");
    		element.append(footer);
    	},
    	
    	createCustomFooter: function(canvas, array) {
    		this.customFooter.remove();
    		this.canvas.append(this.customFooter);
    		this.customFooter.show();
    	},
    	
    	setURL: function(url) {
    		this.url = url;
    		this.refresh();
    	},
    	
    	refresh: function() {
			this.tableBody.empty();
    		var me = this;
    		this.selected = null; this.selectedArray = [];
    		
    		if (!this.url) {
    			return;
    		}
    		
    		Server.getData(this.url, function(data, page) {
    			Loading.hide();
    			
				if (me.onGetData) {
					data = me.onGetData(data);
				}
				me.loadData(data, page);
			});			
		},
		
		fireDataChange: function() {
			if (this.onDataChagne) {
				this.onDataChagne();
			} 
		},
		
		loadData: function(array, page) {
			this.tableBody.empty();
			this.rows = [];
			this.dataObject = [];
		
			if (!array || !array.length){
				return;
			}
			
			$('#grid-bar_message', this.canvas).html("总共 " + array.length + " 条记录");
        	
        	for (var m = 0; m < array.length; m++) {
        		var data = array[m];
        		var row = this.loadLine(data, m);
        		
        		this.tableBody.append(row.element);
        		this.rows.push(row);
        		this.dataObject.push(row.data);
        	}
        	
        	if (this.showPage && page) {
        		this.loadPage(page);
        	}
        	
        	if (this.afterLoad){
        		this.afterLoad(array, this.selected);
        	}
        	
        	if (this.defaultSelectedIdx) {
        		this.select(this.defaultSelectedIdx - 1);
        	}
        	
        	if (this.columnsAverage) {
        		this.columnsAverage(this.rows);
        	}
        	
        	this.bodyIndicator = $("#indicator-body", this.canvas);
		},
		
		loadLine: function(data, index) {
			var me = this; var columns = this.columns;
			
        	var row = {"index": index};
       		
        	var rowEl = $('<tr class="l-grid-row"></tr>');
    		rowEl.data('row', row);
    		
    		if (!me.doubleClickSelect) {
        		rowEl.click(function() {
        			if(me.singleSelect)
        				me.setRowSelected.call(me, $(this).data('row'));
        		});
    		}
    		else {
        		rowEl.dblclick(function() {
        			if(me.singleSelect)
        				me.setRowSelected.call(me, $(this).data('row'));
        		});
    		}
    		
    		rowEl.hover(
    			function() {
    				$(this).addClass("grid-row-over");
    			},
    			function() {
    				$(this).removeClass("grid-row-over");
    			}
    		);
    		
    		row['element'] = rowEl;
    		var dataObject = new DataObject(data);
    		dataObject.onDataChange = function() {
    			me.refreshLine(row, rowEl);
    		}
    		row['data'] = dataObject;
    		
    		
    		if (this.onLineRender) {
    			this.onLineRender(row, data);
    		}
    		
    		var cells = me.loadLineCells(row, data, columns);
    		row['cells'] = cells;

    		if (row.select) {
    			row.select = false;
    			this.setRowSelected(row);
    		}
    		
    		return row;
		},
		
		loadLineCells: function(row, data, columns) {
			var cells = new Array(length);

			//1.
			if (this.showIndicator) {
				var indicator = $(this.template_body_indicator.join(""));
				row.indicator = $("#indicator-body", indicator);
				
				row.indicator.width(this.indicatorWidth);
				row.element.append(indicator);
				
			}
			
			//2.
        	for (var i = 0; i < columns.length; i++) {
        		var column = columns[i];
        		
        		var cell = new $.fm.Grid.Cell({
        			grid: this,
        			column: column,
        			row: row,
        			value: data[column.field]
        		});
        		row.element.append(cell.element);
        		
        		cells[i] = cell;
        	}	
        	
        	return cells;
		},
		
		refreshLine: function(row, rowEl) {
			var cells = row.cells;
			
			for (var i = 0; i < cells.length; i++) {
				var cell = cells[i];
				cell.refresh();
			}
			
		},
		
		loadPage: function(page) {
			this.page = page; var bar = this.canvas.toolbar;
			
			bar.currentPage.val(page.pageno);
			bar.totalPage.text(page.pagecount);
			
			var message = '没有数据';
			if (page.pagecount > 0) {
				message = '[ 显示' + page.beginrecordno + '-' + page.endrecordno + ' / ' + page.recordcount + '条 ]';				
			}
			
			bar.information.html(message);	
			
			this.setButtonActive(bar.btn_first, page.pageno > 1);
			this.setButtonActive(bar.btn_prior, page.pageno > 1);
			this.setButtonActive(bar.btn_next, page.pageno < page.pagecount);			
			this.setButtonActive(bar.btn_last, page.pageno < page.pagecount);	
		},

		pageTo: function(pageNo) {
			var start = this.url.indexOf('pageno');
			var end = this.url.indexOf('&', start);
			var replaceStr = this.url.substring(start, end);
			this.url = this.url.replace(replaceStr, 'pageno=' + pageNo);
			
			this.refresh();
		},
		
		firstPage: function() {
			this.pageTo(1);
		},
		
		priorPage: function() {
			this.pageTo(this.page.pageno - 1);
		},
		
		nextPage: function() {
			this.pageTo(this.page.pageno + 1);
		},
		
		lastPage: function() {
			this.pageTo(this.page.pagecount);
		},
		
		setRowSelected: function(row) {
			if (this.enableAllSelect && this.allSelect) {
				this.clearAllSelected();
			}
			
			if ($.isNumeric(row)) {
				row = this.rows[row];
			}
			
			if (!row.select) {
				if (this.selected) {
					this.doSetRowUnselected(this.selected);
				}
				
				this.doSetRowSelected(row);
			}
			else {
				this.doSetRowUnselected(row);
				this.allSelect = false;
			}
			
			if (this.onSelect) {
				this.onSelect(this.allSelect, this);
			}
		},
		
		toggleAllSelected: function() {
			if (!this.multiSelect) {
				return;
			}
			
			//1. clear single selected
			if (this.selected) {
				this.doSetRowUnselected(this.selected);
			}

			//2. set select
			var select = this.allSelect = !this.allSelect;
			
			var rows = this.rows;
			for (var i = 0; i < rows.length; i++) {
				rows[i].select = select;
			}
			
			//3. toggle class
			if (select) {
				this.headerIndicator.removeClass("grid-indicator-unselected");
				this.headerIndicator.addClass("grid-indicator-selected");
				
				this.bodyIndicator.removeClass("grid-indicator-unselected");
				this.bodyIndicator.addClass("grid-indicator-selected");
			}
			else {
				this.headerIndicator.removeClass("grid-indicator-selected");
				this.headerIndicator.addClass("grid-indicator-unselected");	
				
				this.bodyIndicator.removeClass("grid-indicator-selected");
				this.bodyIndicator.addClass("grid-indicator-unselected");
			}
			
			//4. fire event				
			if (this.onSelect) {
				this.onSelect(this.allSelect, this);
			}
		},		
		
		doSetRowSelected: function(row) {
			//1. add to selected
			row.select = true;
			if (!this.multiSelect) {
				this.selected = row;
			}
			
			//2. set selected class
			if (row.indicator) {
				row.indicator.removeClass("grid-indicator-unselected");
				row.indicator.addClass("grid-indicator-selected");
			}
			row.element.addClass("grid-row-selected");
			
			//3. fire event
			if (this.onRowSelected) {
				this.onRowSelected(row);
			}
		},
		
		doSetRowUnselected: function(row) {
			//1. set selected null
			row.select = false;
			this.selected = null;
			
			//2. remove selected class
			if (row.indicator) {
				row.indicator.removeClass("grid-indicator-selected");
				row.indicator.addClass("grid-indicator-unselected");
			}
			row.element.removeClass("grid-row-selected");
		},
		
		getSelectedRow: function() {
			//1. single select
			if (!this.multiSelect) {
				return this.selected ? this.selected : null;
			}
			
			//2. multiple select
			var result = [], rows = this.rows;
			for (var i = 0; i < rows.length; i++) {
				var row = rows[i];
				if (row.select) {
					result.push(row);
				}
			}
			return result;
		},
		
		getSelected: function() {
			//1. single select
			if (!this.multiSelect) {
				return this.selected ? this.selected.data : null;
			}
			
			//2. multiple select
			var result = [], rows = this.rows;
			for (var i = 0; i < rows.length; i++) {
				var row = rows[i];
				if (row.select) {
					result.push(row.data);
				}
			}
			return result;
		},
		
    	initButton: function(button, handler) {
			var me = this;
			
			button.hover(
				function(){			
					if (button.active) {
						button.addClass('grid-button-over');
					}
				}, function(){
					button.removeClass('grid-button-over');    			
				}
			); 
			
			button.click(function() {
				if (button.active) {
					handler.call(me);
				}
    		});
    	},
    	
		setButtonActive: function(button, active) {
			button.active = active;
			
			if (active) {
				button.removeClass("grid-btn-disable");
			}
			else {
				button.addClass("grid-btn-disable");
			}
		},
		
		editCell: function (cell, e) {
			/*if (this.activeCell == cell) {
				return;
			}*/
			
			var me = this;
			
//			var submitResult = me.submitCell();
//			if (!submitResult) return;
			
			me.activeCell = cell;
			
            var column = cell.column;
            var editor = me.editors[column.type];
            
      //      if (!editor) {
      //      	editor = ControlCreator.create(column); 
            	editor = $("#input", ControlCreator.create(column).editor);
            	editor.height(this.rowHeight);
            	
            	editor.on("blur", function() {
            		return me.submitCell();
            	});
            	
            	this.canvas.append(editor);
            	me.editors[column.type] = editor;
      //      }
            	
            var offset = cell.element.offset();
            var parentOffset = me.canvas.offset();
            
            editor.val(cell.value);
            editor.css({
                position: 'absolute',
            	left: offset.left - parentOffset.left,
            	width: column.width - 2,
            	top: offset.top - parentOffset.top + 1
            });
            
//        	RootParent.registerActiveEditor(editor);
            editor.focus();
            
            me.activeEditor = editor;
		},
		
        submitCell: function () {
			var success = false;
			
			var activeEditor = this.activeEditor;
			
			if (!this.activeCell || !activeEditor) return true;
			
			var value = activeEditor.val();
			var text = activeEditor.getText ? activeEditor.getText() : null;
			
			var eventResult = this.fire('setValue', this.activeCell, value, text);
			
			if (eventResult == undefined || eventResult == null || eventResult) {
				this.activeCell.setValue(value, text);
				this.activeEditor.hide();
				this.fireDataChange();
				
				this.activeCell = null;
				this.activeEditor = null;
				
				success = true;
			}
			
			return success;
        },
        
        callRowFunction: function(eventFunc, internalRowFunc, record, index) {
        	var me = this;
        	
        	if (eventFunc) {
        		eventFunc(record, function() {
        			internalRowFunc.call(me, record, index);
        		});
        	}
        	else {
        		internalRowFunc.call(me, record, index);
        	}
        	
        	this.fireDataChange(record);
        },
        
        appendRow: function(record) {
        	this.callRowFunction(this.onAddRow, this.doAppendRow, record, 0);
        },
        
        doAppendRow: function(record) {
        	var index = this.rows.length;
        	var row = this.loadLine(record, index);
        	
        	this.tableBody.append(row.element);
    		this.rows.push(row);
    		this.dataObject.push(row.data);
    		
    		this.setRowSelected(row);
    		
    		if (this.rows.length > this.limit) {
    			this.deleteRow(0);
    		}
        },
        
        insertRow: function(record, index) {
        	this.callRowFunction(this.onAddRow, this.doInsertRow, record, index);
        },
        
        doInsertRow: function(record, index) {
        	var index = this.rows.length;
        	var row = this.loadLine(data, index);
        	var baseRow = this.rows[index];
        	
        	baseRow.element.prepend(row.element);
        	this.rows.splice(index, 0, row);
        	this.dataObject.splice(index, 0, row.data);
    		
    		this.setRowSelected(row);
    		
    		if (this.rows.length > this.limit) {
    			this.deleteLastRow();
    		}    		
        },
        
        deleteRow: function(index) {
        	this.callRowFunction(this.onDeleteRow, this.doDeleteRow, null, index);
        },
        
        doDeleteRow: function(me, index) {
        	var row = this.rows[index];
        	
        	this.rows.splice(index, 1);
        	this.dataObject.splice(index, 1);
        	row.element.remove();
        },
        
        deleteLastRow: function() {
        	this.callRowFunction(this.onDeleteRow, this.doDeleteLastRow, null, 0);
        },
        
        doDeleteLastRow: function() {
        	var row = this.rows.pop(); 
        	this.dataObject.pop(); 
        	row.element.remove();
        },
        
        empty: function() {
    		if (this.customFooter) {
    			this.customFooter.hide();
    			this.customFooter.remove();
    			$("body").append(this.customFooter);
    		}
    		
    		this.data = null;
    		this.dataObject = [];
    		this.rows = [];
    		this.canvas.empty();
    	},
    	
    	getData: function() {
    		return this.dataObject;
    	}
	});
	
    
    $.fm.Grid.Cell = Control.subClass({
		template: [
		    '<td class="grid-cell">',
		    	'<div class="grid-cell-inner" />',
		    '</td>'
		],    	
		
    	init: function(options) {
			Control.call(this, options); 
			this.width = this.column.width;
			
			this.createElement();
    	},
    	
    	createElement: function() {
    		var me = this, column = this.column; 
    		
    		var element = $(me.template.join("")); me.element = element;
    		
			element.body = $('div', element);
			element.body.width(column.width);
			element.body.attr("align", column.align || "center");
			
			this.renderValue();
			
			if (me.grid.editable || me.column.editable) {
				if (me.grid.quickEdit) {
					element.click(function() {
						me.grid.editCell(me);
					});				
				}
				else {
					element.dblclick(function() {
						me.grid.editCell(me);
					});					
				}				
			}
    	},
    	
    	renderValue: function() {
    		var element = this.element; var column = this.column;
    		
			if (column.render) {
				column.render(element.body, this.value, this.row, this.grid);
			}
			else {
				if(column.field.substring(0, 8) == 'constant'){
					element.body.html(column.field.substring(8));
				}
				else{
					element.body.html(this.value);
				}
			}
    	},
    	
    	refresh: function() {
    		var fieldName = this.column.field;
    		var dataObject = this.row.data;
    		
    		this.value = dataObject.getValue(fieldName);
    		this.renderValue();
    	},
    	
    	setValue: function(value, text) {
    		var fieldName = this.column.field;
    		var dataObject = this.row.data;
    		
    		this.value = value;
    		this.text = text;
    		dataObject.setValue(fieldName, value);
    		
    		this.element.body.html(this.text || this.value);
    	},
    	
    	setControl: function(control) {
    		this.addChild(control);
    	}
    });
		
})(jQuery);