///////////////////////////////////////////////////////////////////////////////////////////////////////////
// Grid Form
$.ui.form.subclass('ui.grid_form', {
	_init: function() {
		var grid = this.grid = this.options.grid;
	}, 
	callGrid: function(method, params) {
		if (this.grid && this.options.grid_widget) return $.plugin(this.grid, this.options.grid_widget, method, params);
		else return false;
	}, 
	createHeader: function() {
		this._super();
		this.formHeader.corners('8px no-native top');
	}, 
	createFooter: function() {
		this._super();
		this.formFooter.corners('8px no-native bottom');
	}, 
	submitHandler: function(responce) {
		this._super(responce);
		if (responce) {
			if (responce.result) this.close();
			if (responce.html && responce.html.dataset_content)	{
				this.callGrid('recreateDataSet', [responce.html.dataset_content]);
			}
		}
	}
});
$.ui.grid_form.defaults.extend({});
///////////////////////////////////////////////////////////////////////////////////////////////////////////
$.ui.component.subclass('ui.grid', {
	// Init
	_init: function() {
		var self = this, 
			options = this.options, 
			grid = this.grid = self.element, 
			gridHeader = this.gridHeader = grid.find('.' + options.headerClass), 
			gridBody = this.gridBody = grid.find('.' + options.bodyClass), 
			gridDataSet = this.gridDataSet = gridBody.find('.' + options.dataSetClass), 
			gridFooter = this.gridFooter = grid.find('.' + options.footerClass);
		this.create();
	}, 
	// Grid
	getBodyObject: function(selector) {
		return this.gridBody.find(selector);
	}, 
	create: function() {
		this.createBody();
		this.createHeader();
	}, 
	destroy: function() {
		this.destroyHeader();
		this.destroyBody();
	}, 
	// Header
	createHeader: function() {
		var self = this;
		this.gridHeader.find('.' + this.options.addButtonClass).each(function() {
			$(this).bind('click', function() {
				self.add();
			});
		});
	}, 
	destroyHeader: function() {
		this.gridHeader.find('.' + this.options.addButtonClass).each(function() {$(this).unbind('click');});
	}, 
	// Body
	createBody: function() {
		this.createViewPanel();
		this.createAddForm();
		this.createEditForm();
		this.createDataSet();
	}, 
	destroyBody: function() {
		this.destroyViewPanel();
		this.destroyAddForm();
		this.destroyEditForm();
		this.destroyDataSet();
	}, 
	// View Panel
	callViewPanel: function(method, params) {
		return $.plugin(this.getBodyObject('.' + this.options.viewPanel.widgetClass), this.options.viewPanel.widget, method, params);
	}, 
	destroyViewPanel: function() {
		this.callViewPanel('destroy');
	}, 
	createViewPanel: function() {
		this.viewPanel = this.callViewPanel();
		this.callViewPanel('hide');
	}, 
	// Add Form
	callAddForm: function(method, params) {
		return $.plugin(this.getBodyObject('.' + this.options.addForm.widgetClass), this.options.addForm.widget, method, params);
	}, 
	destroyAddForm: function() {
		this.callAddForm('destroy');
	}, 
	createAddForm: function() {
		this.addForm = this.callAddForm({grid: this.grid, grid_widget: this.options.widget});
		this.callAddForm('hide');
	}, 
	// Edit Form
	callEditForm: function(method, params) {
		return $.plugin(this.getBodyObject('.' + this.options.editForm.widgetClass), this.options.editForm.widget, method, params);
	}, 
	destroyEditForm: function() {
		this.callEditForm('destroy');
	}, 
	createEditForm: function() {
		this.editForm = this.callEditForm({grid: this.grid, grid_widget: this.options.widget});
		this.callEditForm('hide');
	}, 
	// DataSet
	getDataSetContent: function() {
		return this.gridDataSet.find('.' + this.options.dataSetContentClass);
	}, 
	createDataSet: function() {
		this.createColumnSet();
		this.createRecordSet();
		var self = this;
		this.gridDataSet.find('.' + this.options.pageButtonClass).each(function() {
			$(this).unbind('click');
			$(this).bind('click', function() {
				self.page($(this).attr('key'));
			});
		});
		this.gridDataSet.find('.' + this.options.messagerClass).each(function() {
			$(this).corners('8px transparent no-native');
			$(this).find('.message-set').corners('6px no-native');
			$(this).unbind('click');
			$(this).bind('click', function() {
				$(this).fadeOut(1000);	
			});
		});
	}, 
	destroyDataSet: function() {
		this.destroyRecordSet();
		this.destroyColumnSet();
		this.gridDataSet.find('.' + this.options.pageButtonClass).each(function() {$(this).unbind('click');});
		this.gridDataSet.find('.' + this.options.messagerClass).each(function() {$(this).unbind();});
	}, 
	recreateDataSet: function(content) {
		this.destroyDataSet();
		this.gridDataSet.html(content);
		this.createDataSet();
	}, 
	// ColumnSet
	createColumnSet: function() {
		var self = this;
		this.getDataSetContent().find('.' + this.options.sortButtonClass).each(function() {
			$(this).unbind('click');
			$(this).bind('click', function() {
				self.sort($(this).attr('column'), $(this).attr('dir_'));
			});
		});
	}, 
	destroyColumnSet: function() {
		this.getDataSetContent().find('.' + this.options.sortButtonClass).each(function() {$(this).unbind('click');});
	}, 
	// RecordSet
	createRecordSet: function() {
		var self = this;
		this.getDataSetContent().find('.' + this.options.viewButtonClass).each(function() {
			$(this).unbind('click');
			$(this).bind('click', function() {
				self.view($(this).attr('key'));
			});
		});
		this.getDataSetContent().find('.' + this.options.editButtonClass).each(function() {
			$(this).unbind('click');
			$(this).bind('click', function() {
				self.edit($(this).attr('key'));
			});
		});
		this.getDataSetContent().find('.' + this.options.deleteButtonClass).each(function() {
			$(this).unbind('click');
			$(this).bind('click', function() {
				self.delete_($(this).attr('key'), $(this).attr('message'));
			});
		});
	}, 
	destroyRecordSet: function() {
		this.getDataSetContent().find('.' + this.options.viewButtonClass).each(function() {$(this).unbind('click');});
		this.getDataSetContent().find('.' + this.options.editButtonClass).each(function() {$(this).unbind('click');});
		this.getDataSetContent().find('.' + this.options.deleteButtonClass).each(function() {$(this).unbind('click');});
	}, 
	
	hideControls: function() {
		this.callAddForm('hide');
		this.callEditForm('hide');
		this.callViewPanel('hide');
	}, 

	getURL: function() {return this.grid.attr('url');}, 
	getId: function() {return this.grid.attr('id');}, 
	
	cmdViewHandler: function(responce, arguments) {
		if (responce.html) {
			this.callViewPanel('recreateFieldSet', [responce.html.fieldset_content]);
			this.callViewPanel('show');
		}
	}, 
	
	cmdAddHandler: function(responce, arguments) {
		if (responce.html) {
			this.callAddForm('recreateFieldSet', [responce.html.fieldset_content]);
			this.callAddForm('show');
		}
	}, 
	
	cmdEditHandler: function(responce, arguments) {
		if (responce.html) {
			this.callEditForm('recreateFieldSet', [responce.html.fieldset_content]);
			this.callEditForm('show');
		}
	}, 
	
	cmdCustomHandler: function(responce, arguments) {
		
	}, 	
	
	cmdHandler: function(responce, arguments) {
		if (arguments.cmd) {
			if (arguments.cmd == 'view') this.cmdViewHandler(responce, arguments);
			if (arguments.cmd == 'add') this.cmdAddHandler(responce, arguments);
			if (arguments.cmd == 'edit') this.cmdEditHandler(responce, arguments);
			this.cmdCustomHandler();
			if (responce.html && responce.html.dataset_content) {
				this.recreateDataSet(responce.html.dataset_content);
			}
		}
	}, 
	cmd: function(cmd, query) {
		var url = this.getURL() + '&cmd=' + cmd;
		if (query) url += '&' + query;
		$.request({url: url, scope: this, func: this.cmdHandler, container: this.gridDataSet.find('.grid-dataset-content'), arguments: {cmd: cmd, query: query}});
	}, 
	sort: function(column, dir) {this.cmd('sort', 'column=' + column + '&dir=' + dir);}, 
	page: function(page, dir) {this.cmd('page', 'page=' + page);}, 
	view: function(id) {this.hideControls(); this.cmd('view', 'id=' + id);}, 
	add: function() {this.hideControls(); this.cmd('add');}, 
	edit: function(id) {this.hideControls(); this.cmd('edit', 'id=' + id);}, 
	delete_: function(id, message) {
		if (confirm(message)) {
			this.cmd('delete', 'id=' + id);
		}
	}
});
$.ui.grid.defaults.extend(
	{
		widget: 'grid', 
		headerClass: 'grid-header', 
		addButtonClass: 'add', 
		editButtonClass: 'edit', 
		viewButtonClass: 'view', 
		deleteButtonClass: 'delete', 
		messagerClass: 'messager', 
		bodyClass: 'grid-body', 
		dataSetClass: 'grid-dataset', 
		dataSetContentClass: 'grid-dataset-content', 
		sortButtonClass: 'sort', 
		pageButtonClass: 'page', 
		footerClass: 'grid-footer', 
		viewPanel: {widget: 'panel', widgetClass: 'view-panel'}, 
		addForm: {widget: 'grid_form', widgetClass: 'add-form'}, 
		editForm: {widget: 'grid_form', widgetClass: 'edit-form'}
	}
);