/**
 * @class Roo.gui.PlanDetailPanel
 * @extends Ext.Panel
 *
 * The PlanDetailPanel is located in the right bar of the page, showing details of a selected plan
 *
 * @author ssmeman
 * @version 1.0
 */

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

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

	,initComponent: function() {
		this.addEvents(
			'highlightFeature'
			,'resetHighlight'
			,'showDocument'
			,'showPlan'
		);

		// hard coded
		var config = {
			title: this.titleText
			,cls: 'locationInfo'
			,layout:'accordion'
			,defaults: {
				autoScroll: true
	    	}
		};

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

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

		this.on({
			'show': function(panel) {
				if(plansStore.getCount() > 0) {
					Ext.getCmp('searchresult-button').show();
				}
				else {
					Ext.getCmp('identifyresult-button').show();
				}
			}
		});
		eventHub.on({
			scope: this
			,'selectedPlan': function(plan) {
				this.renderContent(plan);
				this.plan = plan;
			}
		});
	}	// e/o initComponent
	,renderContent: function(plan) {
		console.log("renderContent called for plan: " + plan.identificatie);

		data = Ext.util.JSON.encode(plan);

		Ext.Ajax.request({
			url: './info/planInfo'
			,method: 'POST'
			,autoAbort: true
			,timeout: 5000
			,scope: this
			,success: function(result, request) {

				var rawPlanInfoElement = Ext.get('raw_plan_info');
				Ext.DomHelper.overwrite(rawPlanInfoElement, result.responseText);

				var newItems = [];

				rawPlanInfoElement.select('div.planContainer').each( function(el, context, index) {
					newItems[index] = Ext.ComponentMgr.create({
						title: el.child('form > input[name=planName]', true).value
						, contentEl: el.dom
						, xtype: 'panel'
						, autoScroll: true
					});
				});

				console.log('Removed all current items');
				this.removeAll();
				for (var i = 0 ;  i < newItems.length ; ++i) {
					this.add(newItems[i]);
				}
				this.doLayout();

				// Clear innerHtml of raw info
				rawPlanInfoElement.dom.innerHTML = null;
			}
			,failure: Ext.emptyFn()
			,params: {
				data: data
			}
		});
	}
	,renderContentOld: function(data) {



		this.removeAll();
		this.add(Ext.ComponentMgr.create({
			title: data.naam
			, html: this.tmpl.apply(data)
			, xtype: 'panel'
			, autoScroll: true
		}));
		this.doLayout();

	}
	,highlightFeature: function(type, property, value, fid) {
		this.fireEvent('highlightFeature', {type: type, property: property, value: value, fid: fid});
	}
	,clearHighlight: function(type, property, value) {
		this.fireEvent('resetHighlight', {type: type, property: property, value: value} );
	}
	,showDocument: function(scope, document) {
		this.fireEvent('showDocument', { document: document });
	}
	,showPlan: function(planId) {
		this.fireEvent('showPlan', planId);
	}
	,showAuthentic: function(param_planId) {
		if (param_planId) {
			plansStore.load({
				params: {
					query: {planId: param_planId, tabFilter: "NONE"}
				}
				,callback: function(records, options, success) {
					if (success) {
						if (records.length == 0) {
							Ext.Msg.alert(messages.msg.titleInfo(), messages.searchNamePanel.zeroPlansFound(options.params.query.planId) );
						} else if (records.length == 1) {
							Ext.getCmp('infoPanel').fireEvent('selectedPlanAuthentic', records[0].json);
						}
					} else {
						Ext.Msg.alert(messages.msg.titleError(), messages.msg.noPlansFound());
					}
				}
			});
		} else {
			Ext.getCmp('infoPanel').fireEvent('selectedPlanAuthentic', this.plan);
		}
	}
});

Ext.reg('planDetailPanel', Roo.gui.PlanDetailPanel);