Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';// reference local blank image
Ext.onReady(function(){
	Ext.QuickTips.init();
	
	var val=Ext.get('qf_product').dom.innerHTML; Ext.get('qf_product').update('');
	var productCombo = new Ext.form.ComboBox({ renderTo: 'qf_product', width: 280, hiddenName:'product',
		editable: false, triggerAction: 'all', emptyText:'Please select', value: val, 
		store:['Readymix', 'Blocks', 'Bags'],		
		listeners: { 
			render: function(){ Ext.get('qf_product').removeClass('txt'); },
			select: function(f){
				var pI=Ext.get('productImage'), val=f.getValue();
				pI.fadeOut({duration: 0.2, callback:function(){
					pI.dom.className=val;
					supStore.load({params:{ type: val }});
					pI.fadeIn({duration: 0.3 });
					if (val=='Readymix') Ext.get('quantity').update('m<sup>3</sup>'); else Ext.get('quantity').update(''); 
				}}) 
			}
		} 
	});

	new Ext.form.ComboBox({ renderTo: 'qf_perc', width: 49, hiddenName:'percEcocem',
		editable: false, triggerAction: 'all', value:'50', store:['30', '40', '50', '60', '70'],		
		listeners: { render: function(){ Ext.get('qf_perc').removeClass('txt txt-small') }} 
	});
	
	var supStore=new Ext.data.Store({ url: 'requests/quote.php', baseParams: { action: 'getSuppliers' }, 
		reader: new Ext.data.XmlReader({ record:'item' }, ['name', 'email', 'county', 'idemail' ]),
		listeners: { load: function(){ suppliersCombo.setValue() }} 
	});
	var suppliersCombo = new Ext.form.ComboBox({ renderTo: 'qf_supplier', width: 280, listWidth: 400, hiddenName:'supplier', 
		editable: false, triggerAction: 'all', emptyText:'Please select', mode:'local',
		store: supStore, displayField:'name', valueField:'idemail',
		tpl: new Ext.XTemplate('<tpl for="."><div class="x-combo-list-item suppliers-combo"><em>{county}</em><span>{name}</span><span class="email">{email}</span></div></tpl>'),		
		listeners: { render: function(){ Ext.get('qf_supplier').removeClass('txt') }} 
	});
	
	var additionalInfoText = new Ext.form.TextArea({ renderTo:'additionalInfoText', autoShow: true, name:'additionalInfoText', width: 600, height: 60, grow: true, growMin: 60, growMax: 200,
		emptyText:'Please ask any questions here and/or include items like the grade of concrete, durability requirements, etc.' 
	})
	Ext.get('additionalInfo').on({click:function(e,el){ Ext.get('additionalInfoText').setDisplayed(el.checked) }})

	tooltipInit();	

	if (val=='Readymix') Ext.get('quantity').update('m<sup>3</sup>'); else Ext.get('quantity').update(''); 
	supStore.load({params:{ type: val }});	
})


Quote={}
Quote.error={}
function quoteFormSubmit(){
	var fe=Ext.get('quoteForm').dom.elements, el, extEl, target, errors=0;
	
	el=fe['name']; extEl=Ext.get(el); target=extEl.dom.id;
	if (!el.value.length) { extEl.addClass('invalid'); addErrorTip(target,'Name cannot be empty'); errors++; }
	else { extEl.removeClass('invalid'); removeErrorTip(target);  }

	el=fe['email']; extEl=Ext.get(el); target=extEl.dom.id;
	if (!el.value.length) { extEl.addClass('invalid'); addErrorTip(target,'Email cannot be empty'); errors++;  }
	else if (!/^[\w\.-]{2,}@[\w\.-]+\.[a-z]{2,5}$/i.test(el.value)){ extEl.addClass('invalid'); addErrorTip(target,'Email must be in a format username@domain.com'); errors++;  }
	else { extEl.removeClass('invalid'); removeErrorTip(target);  }
	
	el=fe['product']; extEl=Ext.get('product').next('.x-form-text'); target=extEl.dom.id;
	if (!el.value.length) { extEl.addClass('invalid'); addErrorTip(target,'Please select a product'); errors++; }
	else { extEl.removeClass('invalid'); removeErrorTip(target);  }
	
	el=fe['quantity']; extEl=Ext.get(el); target=extEl.dom.id;
	if (!el.value.length) { extEl.addClass('invalid'); addErrorTip(target,'Quantity cannot be empty'); errors++; }
	else { extEl.removeClass('invalid'); removeErrorTip(target);  }
	
	el=fe['phone']; extEl=Ext.get(el); target=extEl.dom.id;
	if (!el.value.length) { extEl.addClass('invalid'); addErrorTip(target,'Phone cannot be empty'); errors++; }
	else { extEl.removeClass('invalid'); removeErrorTip(target);  }
	
	el=fe['address']; extEl=Ext.get(el); target=extEl.dom.id;
	if (!el.value.length) { extEl.addClass('invalid'); addErrorTip(target,'Address cannot be empty'); errors++; }
	else { extEl.removeClass('invalid'); removeErrorTip(target);  }
	
	el=fe['supplier']; extEl=Ext.get('supplier').next('.x-form-text'); target=extEl.dom.id;
	if (!el.value.length || el.value=='undefined') { extEl.addClass('invalid'); addErrorTip(target,'Please select a supplier'); errors++; }
	else { extEl.removeClass('invalid'); removeErrorTip(target);  }
	
	if (errors>0) return false;
	Ext.Ajax.request({ url: 'requests/quote.php', form: 'quoteForm', params: { action: 'formSent' }, success: function(){quoteConfirm()}	})
}

function removeErrorTip(target){ if (!Quote.error[target]) return; Ext.getCmp(Quote.error[target]).destroy(); Quote.error[target]=null; }
function addErrorTip(target, txt){
	if (Quote.error[target]) return;  
	var tt=new Ext.ToolTip ({ html:txt, target:target, trackMouse:true, mouseOffset: [3,-22], hideDelay: 0, dismissDelay:0, showDelay:0, cls:' x-form-invalid-tip' })
	Quote.error[target]=Ext.id(tt);
}


function quoteConfirmClose(){ Ext.getCmp('quoteFormConfirmationWindow').close() }
function quoteConfirm(){
	new Ext.Window({ id: 'quoteFormConfirmationWindow', title:'Confirmation',
		html: '<b>Your request has been submitted.</b> <br /><br />You can submit another <b><a href="#" onclick="quoteConfirmClose();return false">Quote</a></b> to a different Supplier<br />or return to the <b><a href="index.html">Home</a></b> Page.',
		animEl: 'additional-info', draggable: false, border: false, modal: true, bodyStyle: 'background:#CCD8E7;padding:10px 20px 15px; font-size: 12px;'
	}).show();
}


function tooltipInit(){
	var tooltips=Ext.getBody().query(".EXTtooltip");
	Ext.each(tooltips,function(o){
		new Ext.ToolTip ({ html:o.title, title:o.name||false, anchor:'left', mouseOffset: [5,-2], target:Ext.get(Ext.id(o)), trackMouse:false, hideDelay: 0, dismissDelay:0, showDelay:200 });
		o.title='';
	},this);
}