/**
 * @class Roo.gui.LocationDetailPanel
 * @extends Ext.Panel
 *
 * The LocationDetailPanel is located in the right bar of the page, showing details of an identify "action"
 *
 * @author ssmeman
 * @version 1.0
 */

/**
 * @constructor
 * @param {Object} config Configuration options
 */
Roo.gui.LocationDetailPanel = Ext.extend(Ext.Panel,{
	activePanelId : null
	, activeInfo : {}
	, titleText: messages.locationDetailPanel.title()

	// soft config (can be changed from outside)
	,width: 300
	,border: true
	,initComponent: function() {

		// hard coded (cannot be changed from outside)
		var config = {
			title: this.titleText,
			layout:'accordion',
			cls: 'locationInfo',
		    defaults: {
				autoScroll: true
		    },
		    layoutConfig: {
		    	animate: false,
		        titleCollapse: true,
		        activeOnTop: false
		    }
		};

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

		// call parent
		Roo.gui.LocationDetailPanel.superclass.initComponent.apply(this, arguments);

		// after parent code here, e.g. install event handlers
		eventHub.on({
			scope:this
			,'receivedIdentifyResult' : this.renderIdentifyResult
			,'receivedTreenodeDetails' : this.renderTreeDetails
		});

	}	// e/o initComponent

	//~ Methods ----------------------------------------------------------------
	,toggleDiv: function(link, elementId) {
		console.log('toggle div: ' + link + ", " + elementId);
		console.log('link: ' + link.innerHTML);

		var e = Ext.get(elementId);
		e.setVisibilityMode(Ext.Element.DISPLAY);
		if (e.isVisible()) {
			e.hide();
			link.innerHTML = 'tonen';
		} else {
			e.show();
			link.innerHTML = 'verbergen';
		}

		console.log('link: ' + link.innerHTML);

		this.activeInfo[elementId] = e.isVisible();

	}
	,registerActivePlanId : function(planPanelId) {
		this.activePanelId= planPanelId;
	}
	,getLastActivePlanId: function() {
		return this.activePanelId;
	}
	,restoreStateofDivsBasedOnActiveInfo : function () {
		Ext.iterate(this.activeInfo, function(key, value) {
			if (value) {
				var href = Ext.getDom('href_' + key)
				if (href) {
					this.toggleDiv(href, key);
				}
			}
		}, this);
	}
	,renderIdentifyResult: function(data) {
		Roo.parentVVPPath = '';

		Ext.Ajax.request({
			url: './info/locationInfo'
			,method: 'POST'
			,autoAbort: true
			,timeout: 8000
			,scope: this
			,success: this.renderData
			,failure: Ext.emptyFn()
			,params: {
				data: data
			}
		});
	}
	,renderTreeDetails: function(data) {
		Ext.Ajax.request({
			url: './info/treenodeInfo'
			,method: 'GET'
			,autoAbort: true
			,timeout: 8000
			,scope: this
			,success: this.renderData
			,failure: Ext.emptyFn()
			,params: {
				featureid: data.featureId
				,featuretype: data.featureType
				,planid: data.planId
			}
		});
	}

	,renderData: function(result, request) {
		var rawLocationInfoElement = Ext.get('raw_location_info');
		Ext.DomHelper.overwrite(rawLocationInfoElement, result.responseText);

		var newItems = [];

		rawLocationInfoElement.select('div.planContainer').each( function(el, context, index) {

			newItems[index] = Ext.ComponentMgr.create({
				title: el.child('form > input[name=planName]', true).value
				, id:  "p_" + el.child('form > input[name=planIdentificatie]', true).value
				, contentEl: el.dom
				, xtype: 'panel'
				, autoScroll: true
				, listeners: {
					'beforeexpand': {
						fn: function(panel) {
							this.registerActivePlanId(panel.id);
						}
						, scope: this
					}
				}
			});
		}, this);

		var otherPlans = rawLocationInfoElement.select('div.otherplans').first();
		if (otherPlans) {
			newItems[newItems.length] = Ext.ComponentMgr.create({
				title: 'Andere plannen op deze locatie'
				, contentEl: otherPlans
				, xtype:'panel'
			});
		}

		this.removeAll();


		for (var i = 0 ;  i < newItems.length ; ++i) {
			this.add(newItems[i]);
		}
		this.doLayout();

		var p = Ext.getCmp(this.getLastActivePlanId());
		if (p) {
			console.log('Found previous active plan');
			p.expand();
		}

		this.restoreStateofDivsBasedOnActiveInfo();

		// Clear innerHtml of raw info
		rawLocationInfoElement.dom.innerHTML = null;
	}

});

Ext.reg('locationDetailPanel', Roo.gui.LocationDetailPanel);