var filterForm;
  var partNumberForm;
  
  var dStore;	// Device Store
  var bStore;	// Brand Store
  var lStore;	// Line Store
  var mStore;	// Model Store
  var cStore;	// Category Store  
  
  Ext.onReady(function() {
  	
	partNumberForm = new Ext.FormPanel({
	  width: 220,
	  standardSubmit: true,
	  title: 'Part Number Search',
	  labelWidth: 63,
	  frame: true,
	  items: [{
	  	  id: 'part-number',
	  	  xtype: 'textfield',
		  name: 'part_number',
		  fieldLabel: 'Enter P/N'
	    }, new Ext.form.Hidden({
  		  name: 'search',
	  	  value: 'true'		
	  	})
	  ],
	  buttons: [{
	  	  text: 'Search',
		  handler: function() {
		  	partNumberForm.getForm().el.dom.action = '/catalogue';
		  	partNumberForm.getForm().submit();
		  }
	    }
	  ]
	});
	

	var reader = new Ext.data.JsonReader({
	  root: 'records', totalProperty: 'results', id: 'permalink'
	}, ['permalink', 'name']);

	var proxy = new Ext.data.HttpProxy({url: '/brands/update_select?format=ext_json'});
	
	dStore = new Ext.data.SimpleStore({fields: ['id', 'name']});
	bStore = new Ext.data.Store({reader: reader, proxy: proxy});	
	lStore = new Ext.data.Store({reader: reader, proxy: proxy});
	mStore = new Ext.data.Store({reader: reader, proxy: proxy});
	cStore = new Ext.data.Store({reader: reader});
	
	var dataChangeListener = function(store){
	  Ext.getCmp('model-filter-form').getForm().el.unmask();	  
	}
	var exceptionListener = function() {
	  Ext.Msg.show({
	  	title: 'Error',
		msg: 'There were problems contacting remote server.',
		buttons: Ext.Msg.OK,
		icon: Ext.Msg.ERROR
	  })
	  Ext.getCmp('model-filter-form').getForm().el.unmask();
	}
	
	lStore.on('datachanged', dataChangeListener);
	mStore.on('datachanged', dataChangeListener);
	bStore.on('datachanged', dataChangeListener);
	lStore.on('loadexception', exceptionListener);
	mStore.on('loadexception', exceptionListener);
	bStore.on('loadexception', exceptionListener);
		
	filterForm = new Ext.FormPanel({
		
	  id: 'model-filter-form',
	  frame: true,
	  title: 'Product Filter',
	  waitMsgTarget: true,
	  width: 220,
	  method: 'GET',
	  standardSubmit: true,
	  labelWidth: 50,
	  labelAlign: 'left',  
	  defaults: {
	  	xtype: 'fieldset',
		autoHeight: true,
		defaults: {
	  		width: 130,
	  		valueField: 'permalink',
	  		displayField: 'name',
	  		forceSelection: true,
	  		mode: 'local',
	  		triggerAction: 'all',
	  		xtype: 'combo'			
		}
	  },
	  items: [
	  {
		title: 'Device Type',
		items: [{
			hiddenName: 'device_id',
			fieldLabel: 'Device',
			id: 'device-combo',
			store: dStore,
			valueField: 'id',
			displayField: 'name',
			editable: false,
			listeners: {
				select: {
					fn: function(combo, value) {
						filterForm.getForm().el.mask('Loading Brands', 'x-mask-loading');
						Ext.getCmp('brand-combo').clearValue();
						Ext.getCmp('line-combo').clearValue();
						Ext.getCmp('model-combo').clearValue();
						Ext.getCmp('line-combo').store.removeAll();
						Ext.getCmp('model-combo').store.removeAll();
						bStore.load({
							params: {
								device_id: combo.getValue()
							}
						});
					}
				}
			}
		}]	  	
	  }, {
	  	title: 'Select System',
	  	items: [{
	  		hiddenName: 'brand',
	  		fieldLabel: 'Brand',
			id: 'brand-combo',
	  		store: bStore,
	  		emptyText: 'Select brand...',
	  		listeners: {
	  			select: {
	  				fn: function(combo, value){
	  					filterForm.getForm().el.mask('Loading ' + combo.getRawValue() + ' Lines', 'x-mask-loading');
	  					Ext.getCmp('line-combo').clearValue();
	  					Ext.getCmp('model-combo').clearValue();
	  					Ext.getCmp('model-combo').store.removeAll();
	  					lStore.load({
	  						params: {
	  							brand_id: combo.getValue(),
								device_id: Ext.getCmp('device-combo').getValue()
	  						}
	  					});
	  				}
	  			}
	  		}
	  	}, {
	  		hiddenName: 'line',
	  		fieldLabel: 'Line',
	  		id: 'line-combo',
	  		store: lStore,
	  		emptyText: 'Select Line...',
	  		listeners: {
	  			select: {
	  				fn: function(combo, value){
	  					filterForm.getForm().el.mask('Loading ' + combo.getRawValue() + ' Models', 'x-mask-loading');
	  					Ext.getCmp('model-combo').clearValue();
	  					mStore.load({
	  						params: {
	  							line_id: combo.getValue(),
								device_id: Ext.getCmp('device-combo').getValue()
	  						}
	  					});
	  				}
	  			}
	  		}
	  	}, {
	  		hiddenName: 'model',
	  		store: mStore,
	  		id: 'model-combo',
	  		fieldLabel: 'Model',
	  		emptyText: 'Select Model...'
	  	} 
		]
	  }, {
		title: 'Select Category',
		items: [{
		  	fieldLabel: 'Category',
			id: 'category-combo',
			store: cStore,
			hiddenName: 'category',
			listWidth: 150,
			valueField: 'permalink',
			displayField: 'name',
			emptyText: 'Select Category...'
	  	  }
		]
	  }, new Ext.form.Hidden({
  		  name: 'search',
	  	  value: 'true'		
	  })
	  ],
	  buttons: [{
		  text:'Apply',
		  handler: function() {
		  	
			var path = '/catalogue';
			
			cmbCategory = Ext.getCmp('category-combo');
			if (cmbCategory && cmbCategory.getValue()) {
			  path += '/' + cmbCategory.getValue();
			}
			
		  	filterForm.getForm().el.dom.action = path;
		  	filterForm.getForm().submit();
		  }
		}
	  ]
	});	
  });