/**
 * @class Ext.grid.TableGrid
 * @extends Ext.grid.Grid
 * A Grid which creates itself from an existing HTML table element.
 * @constructor
 * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created - 
 * The table MUST have some type of size defined for the grid to fill. The container will be 
 * automatically set to position relative if it isn't already.
 * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
 * properties: fields and columns which allow for customizing data fields and columns for this grid.
 * @history
 * 2007-03-01 Original version by Nige "Animal" White
 * 2007-03-10 jvs Slightly refactored to reuse existing classes
 * 2008-04-07 ayh adapted config-objec via json en aanroep vanuit PHP
 */
Ext.grid.TableGrid = function(table, config ) {

	var scrWidth = 0, scrHeight = 0;
	var autoHeight=true, autoWidth=false;
	if( typeof( window.innerWidth ) == 'number' )
	{
		scrWidth = window.innerWidth; scrHeight = window.innerHeight;
	}
	else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) )
	{
		scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight;
	}
	else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
	{
		scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight;
	}
	if(navigator.userAgent.toLowerCase().indexOf( 'safari' ) != -1 && scrHeight==0)
	{
		scrWidth=window.outerWidth;
		scrHeight=window.outerHeight-100;
	}

	Ext.QuickTips.init();
	config = config || {};
	var config_object = eval( '(' + config + ')' );
	caption = config_object.caption || 'Resultaat';
	var cf = config_object.fields || [], ch = config_object.columns || [];
	var expanded = config_object.expanded || false;
	var panelHeightPerc=0;
	var panelHeightPx=0;
	var panelHeight = config_object.panelheight || false;
	var panelWidthPerc=0;
	var panelWidthPx=0;
	var panelWidth = config_object.panelwidth || false;
	var objtbar=false;
	var dWidthAdjust=expanded? .95 : 1 ;
	if (panelHeight)
	{
		if (isNaN(panelHeight))
		{
			var perc = panelHeight.indexOf('%');
			if (perc>-1)
			{
				panelHeightPerc=panelHeight.substr(0,perc);
				myHeight=scrHeight*panelHeightPerc/100;
				autoHeight=false;
			}
			else
			{
				panelHeightPx=panelHeight;
				myHeight = panelHeightPx;
				autoHeight=false;
			}
		}
		else
		{
			panelHeightPx=parseInt(panelHeight);
			myHeight = panelHeightPx;
			autoHeight=false;
		}
	}
	else
	{
		myHeight = scrHeight;
	}
	if (panelWidth)
	{
		if (isNaN(panelWidth))
		{
			var perc = panelWidth.indexOf('%');
			if (perc>-1)
			{
				panelWidthPerc=panelWidth.substr(0,perc);
				myWidth=scrWidth*panelWidthPerc/100;
				autoWidth=false;
			}
			else
			{
				panelWidthPx=panelWidth;
				myWidth=panelWidthPx;
				autoWidth=false;
			}
		}
		else
		{
			panelWidthPx=parseInt(panelWidth);
			myWidth=panelWidthPx;
			autoWidth=false;
		}
	}
	else
	{
		myWidth = scrWidth;
	}
	try
	{
		table = Ext.get(table);
		var ct = table.insertSibling();
		var fields = [], cols = [];
		var headers = table.query("thead th");

		if (expanded)
		{
			var expander = new Ext.grid.RowExpander({
				tpl : new Ext.Template(
					expanded['template']
				)
			});
			cols.push(expander);
			if (config_object.toggleall[0])
			{
				objtbar=[{text:config_object.toggleall['expand']['text'] || functions_expand_all,
					tooltip:config_object.toggleall['expand']['tooltip'] || functions_expand_all,
					iconCls:'rowexpander-expand-all',
					handler: expandAll
					},'-', {
					text:config_object.toggleall['collapse']['text'] || functions_collapse_all,
					tooltip:config_object.toggleall['collapse']['tooltip'] || functions_collapse_all,
					iconCls:'rowexpander-collapse-all',
					handler: collapseAll
				}];
			}
			else
			{
				objtbar=[{text:config_object.toggleall['expand']['text'] || functions_expand_all,
					tooltip:config_object.toggleall['expand']['tooltip'] || functions_expand_all,
					iconCls:'rowexpander-expand-all',
					disabled:true
					},'-', {
					text:config_object.toggleall['collapse']['text'] || functions_collapse_all,
					tooltip:config_object.toggleall['collapse']['tooltip'] || functions_collapse_all,
					iconCls:'rowexpander-collapse-all',
					disabled:true
				}];
			}
		}
		
		var tableWidth = 0;
		for (var i = 0, h; h = headers[i]; i++) {
			var text = h.innerHTML;
			var cellWidth = h.offsetWidth;
			var name = 'tcol-'+i;
			fields.push(Ext.applyIf(cf[i] || {}, {
				name: name,
				mapping: 'td:nth('+(i+1)+')/@innerHTML'
			}));
			sortable = (h.title=='') ? false : true;
			hidden = (h.title=='hidden')? true: false;
			cols.push(Ext.applyIf(ch[i] || {}, {
				'header': text,
				'dataIndex': name,
				'width': cellWidth,
				'tooltip': h.title,
				'sortable': sortable,
				'hidden':hidden
			}));
		}

		var ds  = new Ext.data.Store({
			reader: new Ext.data.XmlReader({
				record:'tbody tr'
			}, fields)
		});

		ds.loadData(table.dom);
		var cm = new Ext.grid.ColumnModel(cols);

		if(config_object.width || config_object.height){
			ct.setSize(config_object.width || 'auto', config_object.height || 'auto');
		} else {
			if ( autoWidth )
			{
				ct.setWidth(table.getWidth());
			}
			else
			{
				ct.setWidth(myWidth);
			}
		}
		
		if(config.remove !== false){
			table.remove();
		}

		Ext.applyIf(this, {
			'ds': ds,
			'cm': cm,
			viewConfig: {forceFit: true},
			'sm': new Ext.grid.RowSelectionModel(),
			plugins: expander,
			frame:true,
			tbar: objtbar,
			title: caption,
			height: myHeight,
			autoHeight: autoHeight,
			autoWidth: autoWidth
		});
		Ext.grid.TableGrid.superclass.constructor.call(this, ct, {});
	}
	catch (e)
	{
	}
};

Ext.extend(Ext.grid.TableGrid, Ext.grid.GridPanel);

function expandAll()
{
	for(var i=0; i<grid.store.getCount(); i++)
	{
		grid.plugins.expandRow(i);
	}
}
function collapseAll()
{
	for(var i=0; i<grid.store.getCount(); i++)
	{
		grid.plugins.collapseRow(i);
	}
}