// JavaScript Document
Ext.onReady(function(){
	 Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
		   var form = new Ext.form.FormPanel({
		frame: true,
        bodyStyle:'padding:5px',
        labelAlign: 'top',
		waitMsgTarget: true,
		height: 280,
		autoWidth: true,
        url:'includes/contact_process.php',
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'Your Name',
            name: 'name',
            anchor:'50%',
			allowBlank: false  // anchor width by percentage
        }, {
		fieldLabel: 'Email Address',
            name: 'email',
            anchor: '50%',
			vtype: 'email',
			allowBlank: false // anchor width by percentage and height by raw adjustment
        },{
			xtype: 'textarea',
			name: 'message',
			allowBlank: false,
			fieldLabel: 'Your Message',
			anchor: '100%',
			height: 100
		}],
		        buttons: [{
            text: 'Send',
			handler: function(){
				if(form.form.isValid()){
					Ext.MessageBox.show({
           msg: 'Sending your request, please wait...',
           progressText: 'Sending...',
           width:310,
           wait:true,
           waitConfig: {interval:200},
           icon:'ext-mb-email'
       });
			form.form.submit({
				params:{
					action:'submit'
					},
					success:function(form, action){
						  
            //This simulates a long-running operation like a database save or XHR call.
            //In real code, this would be in a callback function.
            Ext.MessageBox.hide();
			Ext.MessageBox.show({
           title: 'Contact Enquiry',
		   msg: 'Email sent successful, one of our agents will respond as soon as possible',
           width:300,
		   buttons: Ext.MessageBox.OK,
           icon:'ext-mb-email'
       });
        
			form.reset();
					//
					    },
					failure:function(form, action){
						if(action.result.msg.length > 0){
						 Ext.MessageBox.show({
           title: 'Form Error',
		   msg: action.result.msg,
           width:300,
		   buttons: Ext.MessageBox.OK,
           icon: 'ext-mb-warning'
       });
						}
					}
			});
		}else{
			Ext.MessageBox.show({
           title: 'Form Error',
		   msg: 'Please correct the indicated errors',
           width:300,
		   buttons: Ext.MessageBox.OK,
           icon: 'ext-mb-warning'
       });
		}
        }
		},{
            text: 'Cancel',
			handler: function(){
			form.form.reset();
			}
        }]
    });
 var win = new Ext.Window({
 	title: 'PAYEright Contact Form',
	items: form,
	renderTo: 'form',
	 width:580
        ,id:'agwin'
        ,height:300
        ,layout:'fit'
        ,border:false
		,plain:true
        ,closable:false
 });
 win.show();
});