/**
 * @class Roo.gui.PlanGridPanel
 * @extends Ext.grid.GridPanel
 *
 * The PlanGridPanel is located in the right bar of the page, showing results of a search "action"
 *
 * @author ssmeman
 * @version 1.0
 */

/**
 * @constructor
 * @param {Object} config Configuration options
 */
Roo.gui.PlanGridPanel = Ext.extend(Ext.grid.GridPanel,{
	//texts used on elements of this panel
	titleText: messages.planGridPanel.title()

	//soft config (can be changed from outside)
	,border: false
	,width: 300

	,initComponent: function() {
		this.previousIndex = [];
		this.highlightDelay;

		this.textTmpl = new Ext.XTemplate(
			'<b>{naam}</b><span style="margin-left:10px;display:block">',
			'<tpl if="this.isGemeente(gemeente)">',
				'<span>{values.gemeente.naam}</span><br/>',
			'</tpl>',
			'<tpl if="this.isProvincie(provincie)">',
				'<span>{values.provincie.naam}</span><br/>',
			'</tpl>',
			'<span>{typePlan}</span><br/>',
			'<span>{status}</span>&nbsp;<span>{datum}</span></span>',
			{
				isGemeente: function(gemeente) {
					return gemeente != null;
				}
				,isProvincie: function(prov) {
					return prov != null;
				}
			}
		);
		this.authenticTmpl = new Ext.XTemplate(
			'<tpl if="this.isImro2008(versieImro)">',
				'<tpl if="this.isAuthentic(authentic)">',
					'<img src="./extjs/resources/images/default/s.gif" class="x-icon-authentic">',
				'</tpl>',
				'<tpl if="!this.isAuthentic(authentic)">',
					'<img src="./extjs/resources/images/default/s.gif" class="x-icon-notauthentic">',
				'</tpl>',
			'</tpl>',
			'<tpl if="!this.isImro2008(versieImro)">',
				'<img src="./extjs/resources/images/default/s.gif" class="x-icon-authenticunknown">',
			'</tpl>',

			{
				isAuthentic: function(authentic) {
					return authentic;
				}
				,isImro2008: function(versieImro) {
					return versieImro != null && versieImro == 'IMRO2008';
				}
			}
		);

		this.addEvents(
			'highlightFeature'
			,'resetHighlight'
		);

		var config = {
			title: this.titleText
			,enableHdMenu:false
			,hideHeaders:true
			,loadMask: true
			,columns : [{
        		id: 'title'
		        ,header: false
		        ,width: 170
		        ,dataIndex: 'name'
		        ,renderer: this.formatText
		        ,scope: this
		    },{
		    	id: 'authentic'
		    	,header: false
		    	,width: 20
		    	,dataIndex: 'versieImro'
		    	,renderer: this.formatAuthentic
		    	,scope: this
		    }]
			,sm: new Ext.grid.RowSelectionModel({
		        singleSelect:true
		    })
		    ,viewConfig: {
		        forceFit:true
		    }
			,store: plansStore
			,plugins: [ Ext.ux.grid.GridMouseEvents ]
		};

		Ext.apply(this, config);
		Ext.apply(this.initialConfig, config);

		Roo.gui.PlanGridPanel.superclass.initComponent.apply(this, arguments);

		this.on({
			'show': function(panel) {
				console.log('showing planGrid');

				Ext.getCmp('searchresult-button').hide();
				Ext.getCmp('identifyresult-button').hide();
				Ext.getCmp('largemapPanel').enableMapTips(true);
			}
			,'hide': function(panel) {
				if(plansStore.getCount() > 0) {
					Ext.getCmp('searchresult-button').show();
				}
				Ext.getCmp('largemapPanel').enableMapTips(false);
			}
			,'rowmouseenter': function(grid, row, e, rowEl) {
				var record = plansStore.getAt(row);
				if(!this.highlightDelay) {
					this.highlightDelay = new Ext.util.DelayedTask(this.highlightPlan, this, [record.data.id]);
				}
				this.highlightDelay.delay(500, this.highlightPlan, this, [record.data.id]);
			}
			,'rowmouseleave': function(grid, row, e, rowEl) {
				this.highlightDelay.cancel();
				this.fireEvent('resetHighlight', {});
			}
		});

		this.authenticTmpl.compile();
		this.textTmpl.compile();

	}	// e/o initComponent

	,formatText: function(value, p, record) {
		return this.textTmpl.apply(record.json);
	}
	,formatAuthentic: function(value, p, record) {
		return this.authenticTmpl.apply(record.json);
	}

	,highlightPlan: function(planId) {
		console.log('firing highlightFeature');
		this.fireEvent('highlightFeature', {type: 'Plangebied', property: 'plangebied', value: planId, alpha:80});
	}

	,highlightEntries: function(planIds) {

		if(this.previousIndex.length > 0) {
			for(var i=0; i< this.previousIndex.length; i++) {
				Ext.fly(this.getView().getRow(this.previousIndex[i])).removeClass('x-grid3-row-over');
			}
			this.previousIndex = [];
		}

		for(var p=0; p< planIds.length; p++) {
			var index = plansStore.find('id', planIds[p]);

			if (index > -1) {
				//console.log('found %s at %d', planIds[p], index);
				Ext.fly(this.getView().getRow(index)).addClass('x-grid3-row-over');
				this.previousIndex[this.previousIndex.length] = index;
			}
		}
	}
});

Ext.reg('planGridPanel', Roo.gui.PlanGridPanel);