/**
 * @class GebruiksmogelijkhedenPanel
 * @extends Ext.form.FormPanel
 *
 * The DesignSelectPanel is located in the left bar of the page, allowing to show/hide "ontwerp" plannen
 *
 * @author ssmeman
 * @version 1.0
 */

/**
 * @constructor
 * @param {Object} config Configuration options
 */
Roo.gui.GebruiksmogelijkhedenPanel = Ext.extend(Ext.form.FormPanel, {
	//soft config (can be changed from outside)
	id: 'gebruiksmogelijkhedenPanel'

	,initComponent: function() {
		this.tabChanged = false;

		this.addEvents(
            /**
             * @event collapsedGebruiksmogelijkhedenPanel
             * Fires when this panel is collapsed
             * @param {Array} array of layers
             */
			'collapsedGebruiksmogelijkhedenPanel'
            /**
             * @event expandedGebruiksmogelijkhedenPanel
             * Fires when this panel is expanded
             * @param {Array} array of layers
             */
			,'expandedGebruiksmogelijkhedenPanel'
            /**
             * @event checkedGebruiksmogelijkheid
             * Fires when a checkBox on this panel is checked.
             * @param {Object} with config of checkbox
             */
			,'checkedGebruiksmogelijkheid'
		);

		// hard coded (cannot be changed from outside)
		var config = {
			layout: 'fit'
			,items: [{
				type: 'panel'
				,autoScroll: true
		    }]
		};

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

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

		// after parent code here, e.g. install event handlers
		var gebruiksmogelijkhedenStore = new Ext.data.Store({
			proxy: new Ext.ux.data.DwrProxy({
				api: {read: SearchService.findGebruiksMogelijkheden}
				,listeners: {
					'beforeload': function(dataProxy, params) {
						params[dataProxy.loadArgsKey] = [ Roo.currentTabFilter.name ];
					}
				}
			})
			,reader: new Ext.data.JsonReader({}, Ext.data.Record.create([
				{name: 'naam', mapping:'naam' }
				,{name: 'titel', mapping: 'titel'}
				,{name: 'type', mapping: 'type'}

			]))
		});

		// Register onload function
		gebruiksmogelijkhedenStore.on('load', this.onLoad, this);
		gebruiksmogelijkhedenStore.load();

	} // e/o function initComponent

	,onLoad: function(store, records) {
		var items;

		this.getComponent(0).add(new Ext.form.Checkbox({
			boxLabel: 'Alle onderdelen tonen'
			,itemType: 'All'
			,checked: true
			,listeners: {
				scope:this
				,'check': function(checkbox, value) {
					var boxes = this.getComponent(0).findByType('checkbox');

					// from index=1, as [0] is this checkbox
					for(var b=1; b<boxes.length; b++) {
						boxes[b].setValue(value);
					}
				}
			}
		}));

		this.getComponent(0).add(new Ext.form.Label({
			text:'Enkelbestemmingen'
			,style: 'font-weight: bold;'
		}));

		items = store.query('type', 'Enkelbestemming');

		items.each(function(record, index, length) {
				var item = new Ext.form.Checkbox({
					boxLabel: record.json.titel
					,itemType: record.json.type
					,checked: true
					,layerName: record.json.naam
				});
				item.on('check', this.onCheckboxChecked, this);
				this.getComponent(0).add(item);
			}
			, this
		);

		this.getComponent(0).add(new Ext.form.Label({
			text:'Dubbelbestemmingen'
			,style: 'font-weight: bold;'
		}));

		items = store.query('type', 'Dubbelbestemming');
		items.each(function(record, index, length) {
				var item = new Ext.form.Checkbox({
					boxLabel: record.json.titel
					,itemType: record.json.type
					,checked: true
					,layerName: record.json.naam
				});
				item.on('check', this.onCheckboxChecked, this);
				this.getComponent(0).add(item);
			}
			, this
		);

		this.on('beforedestroy', this.onPanelCollapse, this);
		this.on('afterlayout', this.onPanelExpand, this);

		this.doLayout();
	}
  ,onCheckboxChecked: function(checkbox, value) {
	  this.fireEvent('checkedGebruiksmogelijkheid', {itemType: checkbox.itemType, value: value, title: checkbox.boxLabel});
  }
  ,onPanelCollapse: function(panel) {
  	this.tabChanged = false;
	this.fireEvent('collapsedGebruiksmogelijkhedenPanel', this.getLayers());
  }

  ,onPanelExpand: function(panel) {
	this.fireEvent('expandedGebruiksmogelijkhedenPanel', this.getLayers());
  }

  ,getLayers: function() {
	  var layers = [];

	  for (var i = 0; i < this.getComponent(0).items.length; ++i) {
		  checkbox = this.getComponent(0).items.itemAt(i);
		  if (checkbox.itemType) {
			  layers[layers.length] = {itemType: checkbox.itemType, value: checkbox.checked, layerName: checkbox.layerName};
		  }
	  }
	  return layers;
  }

});	// e/o extend

Roo.gui.GebruiksmogelijkhedenWindow = Ext.extend(Ext.Window, {
	titleText: messages.gebruiksmogelijkhedenPanel.title()
	,id: 'gebruiksmogelijkhedenWindow'

	,initComponent: function() {
		var config = {
			title: this.titleText
			,height: 500
			,width: 230
			,x: 30
			,y: 220
			,layout: 'fit'
			,items: [{
				xtype: 'gebruiksmogelijkhedenPanel'
				,border: false
				,header: false
			}]
		};

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

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

		this.gmPanel = this.items.itemAt(0);

		eventHub.relayEvents(this.gmPanel, ['collapsedGebruiksmogelijkhedenPanel', 'expandedGebruiksmogelijkhedenPanel', 'checkedGebruiksmogelijkheid']);
		eventHub.on({
			scope: this
			,'changedFilter': function(parameters) {
				var filter = parameters.filter;
				this.tabChanged = true;

				this.close();
			}
		});
	}
});

// register xtypes
Ext.reg('gebruiksmogelijkhedenPanel', Roo.gui.GebruiksmogelijkhedenPanel);
Ext.reg('gebruiksmogelijkhedenWindow', Roo.gui.GebruiksmogelijkhedenWindow);