var findForm;
  
  var bStore;	// Brand Store
  var lStore;	// Line Store
  var mStore;	// Model Store
  var cStore;	// Category Store
  
  var notifyWindow;
  
  function showNotifyWindow(email, product, el, price_change, availability) {
  	if (!notifyWindow) {
      notifyWindow = new Ext.Window({
        cloaseble: true,
		title: 'Product Alerts',
        width: 250,
        closeAction: 'hide',
        height: 270,
        layout: 'fit',
        items: [
		  new Ext.FormPanel({
		  	id: 'form-notify',
            labelWidth: 55,
            labelAlign: 'right',
			waitMsgTarget: true,
            frame: true,
            items: [{
                xtype: 'fieldset',
                title: 'Notifications',
                defaults: {
                  hideLabel: true
                },
                autoHeight: true,
                items: [{
                    xtype: 'checkbox',
					id: 'check-price-change',
					name: 'price_change',
                    boxLabel: 'Notify me about price change'
                  }, {
                    xtype: 'checkbox',
					id: 'check-availability',
					name: 'availability',
                    boxLabel: 'Notify me about availability'
                  }
				]
              }, {
                xtype: 'fieldset',
                checkboxToggle: true,
                title: 'Remind me to view this item',
				layout: 'column',
				checkboxName: 'remind',
                height: 57,
				hideLabel: false,
				defaults: {
				  xtype: 'fieldset',
				  height: 45,
				  border: false,
				  hideLabels: true,
  			      columnWidth: .5				  
				},
                items: [{
					width: 120,
					hideLabels: false,
					labelSeparator: ' ',
					labelWidth: 10,
					items: [{
						fieldLabel: 'in',
                        xtype: 'textfield',
					    name: 'remind_period',
					    width: 70,
						value: '1'
					  }
					] 
                  }, {
				  	items: [{
						id: 'combo-period',
				  		xtype: 'combo',
				  		width: 95,
						hiddenName: 'period_type',
				  		valueField: 'id',
						displayField: 'name',						
				  		store: new Ext.data.SimpleStore({
				  			fields: ['id', 'name'],
				  			data: [['1', 'Day(s)'], ['2', 'Week(s)'], ['3', 'Month(s)']]
				  		}),
						value: 1,
				  		forceSelection: true,
				  		mode: 'local',
				  		triggerAction: 'all'
				  	}]
				  }
				]
              }, {
			  	width: 153,
				id: 'text-email',
                xtype: 'textfield',
                fieldLabel: 'My Email',
				allowBlank: false,
				name: 'email',
				vtype: 'email'
              }, {
			  	xtype: 'hidden',
				id: 'hidden-product',
				name: 'product'
			  }
			],
            buttons: [{
                text: 'Save',
				handler: function() {
				  form = Ext.getCmp('form-notify');
				  form.getForm().submit({
				  	waitMsg: 'Saving...',
					url: '/notifications/create',
					params: {format: 'ext_json'},
					success: function(form, action) {
					  Ext.Msg.show({
					  	title: 'Updated',
						msg: 'Product alerts were updated',
						buttons: Ext.MessageBox.OK,
						icon: Ext.MessageBox.INFO
					  });
					  notifyWindow.hide();
					},
					failure: failureHandler
				  });
				}
              }
			]
          })
		]
      });	  
	}
	
	Ext.getCmp('hidden-product').setValue(product);
	Ext.getCmp('combo-period').setValue(1);
	Ext.getCmp('check-price-change').setValue(price_change);
	Ext.getCmp('check-availability').setValue(availability);
	 
	if (email) {
	  Ext.getCmp('text-email').setValue(email);
	}
	
	notifyWindow.show(el);
  }

  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'		
	  })
	  ]
	});
  });