Ext.onReady(function(){ 
	Ext.QuickTips.init();
	Ext.apply(Ext.QuickTips.getQuickTip(), { showDelay: 0, trackMouse: true });
	
		var countyStore=new Ext.data.Store({ url: 'requests/county.php', autoLoad:true, reader: new Ext.data.XmlReader({ record:'item' }, ['id', 'name']) });


		new Ext.FormPanel({ id:'enquiryForm', renderTo:'formDiv', url:'requests/tech_support.php', waitMsgTarget: true, autoHeight:true, 
			border:false, bodyStyle:'background:transparent;', width: 650, buttonAlign:'left',
			reader : new Ext.data.XmlReader({ record : 'contact', success: '@success' }), errorReader: new Ext.form.XmlErrorReader(), 
			layout: 'column', 
			items:[
				{ width: 330, bodyStyle:'background:transparent;', autoHeight:true, border:false, layout: 'form',
					defaultType: 'textfield', defaults:{ width: 180, msgTarget:'side', style:'margin-bottom:3px;' }, labelWidth: 100, items:[
					{ fieldLabel: 'First Name', name: 'name', id:'name', allowBlank:false }, 
					{ fieldLabel: 'Last Name', name: 'surname', allowBlank:false }, 
					{ fieldLabel: 'Email', name: 'email', id:'email', allowBlank:false, vtype:'email' },
					{ fieldLabel: 'Mobile number', name: 'mobile', id:'mobile', allowBlank:false },
					{ fieldLabel: 'Profession', xtype:'combo', hiddenName: 'profession', mode:'local', triggerAction:'all', editable:false, 
						emptyText:'Please select', allowBlank:false,
						store:['Architect','Consulting Engineer','Contractor','Developer','Student','Other'] 
					}
				]},
				{ width: 320, bodyStyle:'background:transparent;', autoHeight:true, border:false, layout: 'form',
					defaultType: 'textfield', defaults:{ width: 180, msgTarget:'side', style:'margin-bottom:3px;' }, labelWidth: 100, items:[
					{ fieldLabel: 'Company Name', name: 'sname', allowBlank:false },
					{ fieldLabel: 'Address Line 1', name: 'address1', allowBlank:false }, 
					{ fieldLabel: 'Address Line 2', name: 'address2', allowBlank:false }, 
					{ fieldLabel: 'Address Line 3', name: 'address3' }, 
					{ fieldLabel: 'County', xtype:'combo', hiddenName: 'county', emptyText:'Please select', store:countyStore, displayField:'name', valueField:'id', mode:'local', triggerAction:'all', editable:false, allowBlank:false }
				]},
				{ layout:'form', id:'enquiryText', border:false, bodyStyle:'background:transparent;', width: 650, items: [
					{ fieldLabel:'Your enquiry', name:'enquiry', xtype:'textarea', width: 510, allowBlank: false, msgTarget:'side' },
					{ xtype:'checkbox', labelSeparator:'', boxLabel: 'Tick here if you do not want to receive future Ecocem emails', name: 'nospam', id:'nospam', ctCls:'form-checkbox', width:'100%' }
				]},
				{ xtype:'label', text:'Your Enquiry has been sent. Thank you.', id:'infoLabel', style:'font-size:10pt; font-weight:bold; display:none;' }
			],
			buttons:[ { text:' Send Enquiry', id:'btnSubmit', handler: formSubmit }	]
		});

});



function formSubmit(){
	Ext.getCmp('enquiryForm').getForm().submit({
		waitMsg:'Sending details...', 
		success: function(){ 
			Ext.getCmp('enquiryForm').getForm().reset();
			var cols=Ext.getCmp('enquiryForm').items.items;
			for (var i=0; i<cols.length-1; i++) cols[i].getEl().fadeOut({ easing:'easeOut', useDisplay:true });
			Ext.get('enquiryText').fadeOut({ easing:'easeOut', useDisplay:true });
			Ext.get('btnSubmit').fadeOut({ easing:'easeOut', useDisplay:true, callback:function(){ Ext.get('infoLabel').fadeIn({ easing:'easeIn' }); }});
		}
	});
}


// A reusable error reader class for XML forms
Ext.form.XmlErrorReader = function(){ Ext.form.XmlErrorReader.superclass.constructor.call(this, { record : 'field', success: '@success' }, ['id', 'msg' ] ); };
Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);