var Grid = new Class({
	
//implements
	Implements: [Options],

//options
	options: {
		source:'',
		width:'',
		height:'',
		table:'',
		columns : [],
		rows: 10
	},
	
//initialization
	initialize: function(el,options) {
//set options
//		$merge(options, {'onLoaded': this._display.bind(this)});
		this.setOptions(options);
		this.grid = $(el);
		if (!this.grid) 
			return;
//		this.grid.set('html',this.options.columns.length);
		var columns = [];
		this.options.columns.each(function(column) {
			if (column.col) columns.combine([column.col]);
		});
		this._show();
		this._fetch(columns,0);
//		alert(JSON.encode(this.page));
	},

	_show: function() {
		this.grid.setStyles({ 'width' : this.options.width , 'height' : this.options.height });
		var divh = new Element ('div', { 'id' : 'divh' });
		var divd = new Element ('div', { 'id' : 'divd' });
		this.jsondata = divd;
		
		var table = new Element ('table');
		var tbody = new Element ('tbody');
		var tr = new Element ('tr');
		this.options.columns.each(function(column) {
			if (column.type != 'none') {
				var td = new Element ('td', {'width' : (column.width ? column.width : 100) } );
				td.set('html',column.label);
				td.inject(tr,'bottom');
			}
		},this);
		tr.inject(tbody,'bottom');
		tbody.inject(table,'bottom');
		table.inject(divh,'bottom');
		
		divh.inject(this.grid,'bottom');
		divd.inject(this.grid,'bottom');
		
	},

//a method that does whatever you want
	_fetch: function(columns,page) {
//		this.grid.set('html',JSON.encode(columns));
//		alert(JSON.encode({"columns" : columns, "rows" : this.options.rows, "page" : page}))
		new Request.JSON({
			url: this.options.source,//+'?command=show',
			secure: true,
			data: 'query='+JSON.encode({"table": this.options.table, "columns" : columns, "rows" : this.options.rows, "page" : page}),
			method: 'post',
			onComplete: function(data) {
//				alert(this.options.rows);
				this._load(data);
//				this.fireEvent('loaded');
			}.bind(this)
		}).send();
	},

	_load: function(data) {
//		var rows = JSON.decode(data,true);
		var table = new Element ('table');
		var tbody = new Element ('tbody');
		data.rows.each(function(row) {
//			alert(JSON.encode(row));
			var tr = new Element ('tr');
			var hash = new Hash(row);
			
//{"id":"1","rand1":"911282438","rand2":"293764440","hash":"bc5d297e36a5429a6ac0e7dc8765fedbb11285a9","disabled":"0","name":"Krzysztof","surname":"Kosz","mail":"krzyko@gmail.com"}
			this.options.columns.each(function(column) {
				if (column.type != 'none') {
					var td = new Element ('td', {'width' : (column.width ? column.width : 100) } );
					if (column.col) {
//					alert(column.col);
						if (hash.has(column.col)) {
//						alert(hash.get(column.col));
							if (column.type == 'bool') {
								chk = new Element ('input', {'type' : 'checkbox', 'checked' : hash.get(column.col) ? false : true } );
								chk.inject(td,'bottom');
							} else {
								td.set('html',hash.get(column.col));
							}
						}
					} else {
					
					}
					td.inject(tr,'bottom');
				}
			});
			tr.inject(tbody,'bottom');
		},this);
//		alert(JSON.encode(data));
		tbody.inject(table,'bottom');
		table.inject(this.jsondata,'bottom');

	}
	
	
});


/*
<div class="nBtn" title="Hide/Show Columns" style="display: none; left: 229px; top: 53px;">
<div class="nDiv" style="margin-bottom: -200px; top: 78px; -moz-user-select: none; height: auto; width: auto; left: 229px; display: none;">
<div class="mDiv">
<div class="tDiv">
<div class="hDiv">
<div class="cDrag" style="top: 54px;">
<div class="bDiv" style="height: 200px;">
<div class="iDiv" style="display: none;"/>
<div class="sDiv" style="display: none;">
<div class="pDiv">
<div class="vGrip">
<div class="hGrip" style="height: 310px;">
*/