var findForm;
  
  var bStore;	// Brand Store
  var lStore;	// Line Store
  var mStore;	// Model Store
  var cStore;	// Category Store
  
  Ext.onReady(function() {
  	
	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'});
	
	bStore = new Ext.data.Store({reader: reader});	
	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);
	lStore.on('loadexception', exceptionListener);
	mStore.on('loadexception', exceptionListener);
		
	findForm = new Ext.FormPanel({
		
	  id: 'model-filter-form',
	  frame: true,
	  waitMsgTarget: true,
	  width: 725,
	  height: 35,
	  method: 'GET',
	  layout: 'column',
	  standardSubmit: true,
	  labelAlign: 'left',  
	  defaults: {
	  	xtype: 'fieldset',
		width: 160,
		columnWidth: .22,
	    border: false,
		labelWidth: 1,
		labelSeparator: ' ',
		height: 42,
	    defaults: {
	  	  width: 150,
	  	  valueField: 'permalink',
	  	  displayField: 'name',
	  	  forceSelection: true,
	  	  mode: 'local',
	  	  triggerAction: 'all',
	  	  xtype: 'combo'
		}
	  },
	  items: [{
	  	items: [{
		    id: 'category-combo',
		    store: cStore,
		    hiddenName: 'category',
		    valueField: 'permalink',
		    displayField: 'name',
		    emptyText: 'Select Category...'
	  	  }			
	  	]
	  }, {
	  	items: [{
	  		hiddenName: 'brand',
			id: 'brand-combo',
	  		store: bStore,
	  		emptyText: 'Select brand...',
	  		listeners: {
	  		  select: {
	  			fn: function(combo, value){
	  			  findForm.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()}
	  			  });
	  		    }
	  		  }
	  	    }
	  	  }
		]
	  } , {
	  	items: [{
	  		hiddenName: 'line',
	  		id: 'line-combo',
	  		store: lStore,
	  		emptyText: 'Select Line...',
	  		listeners: {
	  		  select: {
	  			fn: function(combo, value){
	  			  findForm.getForm().el.mask('Loading ' + combo.getRawValue() + ' Models', 'x-mask-loading');
	  			  Ext.getCmp('model-combo').clearValue();
	  			  mStore.load({
	  				params: {
	  				  line_id: combo.getValue()
	  				}
	  			  });
	  			}
	  		  }
	  		}
	  	  }		
		]
	  }, {
		columnWidth: .24,
	  	items: [{
	  		hiddenName: 'model',
	  		store: mStore,
	  		id: 'model-combo',
	  		emptyText: 'Select Model...'
	  	  }		
		]
	  }, {
	  	columnWidth: .1,
		width: 90,
	  	items: [{
		    xtype: 'button',
		    text: 'Find Part',
		    handler: function() {
		  	
		      var path = '/catalogue';
			
			  cmbCategory = Ext.getCmp('category-combo');
			  if (cmbCategory && cmbCategory.getValue()) {
			    path += '/' + cmbCategory.getValue();
			  }
			
		  	  findForm.getForm().el.dom.action = path;
		  	  findForm.getForm().submit();
		    }
		  }
		]
	  }, new Ext.form.Hidden({
  		  name: 'search',
	  	  value: 'true'		
	  })
	  ]
	});
  });