/**
 * @author George
 */
Ext.ns('Regs');
// create pre-configured window class
Regs.NewForm = Ext.extend(Ext.Panel, {

	 initComponent:function() {
	 	
this.form = new Ext.form.FormPanel({
		url : 'includes/add_new_registration.php',
		baseCls: 'x-plain',
  		bodyStyle: 'padding: 5px;',
			items: [{
				xtype: 'fieldset',
				defaultType: 'textfield',
				layout: 'form',
				labelAlign: 'top',
				title: 'Personal Details',
				autoHeight: true,
				items: [{
			fieldLabel: 'Title',
			hiddenName: 'title',
			xtype: 'combo',
			allowBlank: false,
			anchor: '20%',
			valueField: 'title',
			triggerAction:'all',
			displayField:'title',
			store: new Ext.data.SimpleStore({
				fields: ['title'],
				data: [
				['Mr'],['Mrs'],['Ms'],['Miss'],['Dr']
				]
			}),
			mode: 'local'
		},{
		xtype: 'panel',
		baseCls: 'x-plain',
		layout: 'column',
		items: [{
		columnWidth: .5,
		baseCls: 'x-plain',
		labelAlign: 'top',
		layout: 'form',
		items: [{
			xtype: 'textfield',
			fieldLabel: 'First Name',
			name: 'fname',
			allowBlank: false,
			anchor: '95%'
		}]
		},{
		columnWidth: .5,
		baseCls: 'x-plain',
		labelAlign: 'top',
		layout: 'form',
		items: [{
			xtype: 'textfield',
			fieldLabel: 'Surname',
			name: 'sname',
			allowBlank: false,
			anchor: '100%'
		}]
		}]
		},{
			fieldLabel: 'Email Address',
			name: 'email',
			allowBlank: false,
			anchor: '100%',
			vtype: 'email',
			listeners: {
				'change': {
					fn: function(f, nv, ov){
						if(nv !== ''){
							this.checkField(f,nv);
						}
					},
					scope: this
				}
			}
		},{
			fieldLabel: 'Address Line 1',
			name: 'add1',
			allowBlank: false,
			anchor: '100%'
		},{
			fieldLabel: 'Address Line 2 (optional)',
			name: 'add2',
			anchor: '100%'
		},{
		xtype: 'panel',
		baseCls: 'x-plain',
		layout: 'column',
		items: [{
		columnWidth: .7,
		baseCls: 'x-plain',
		labelAlign: 'top',
		layout: 'form',
			items: [{
				xtype: 'textfield',
			fieldLabel: 'Town/City',
			name: 'town',
			allowBlank: false,
			anchor: '95%'
		}]
		},{
		columnWidth: .3,
		baseCls: 'x-plain',
		labelAlign: 'top',
		layout: 'form',
			items: [{
				xtype: 'textfield',
			fieldLabel: 'Postcode',
			name: 'postcode',
			allowBlank: false,
			anchor: '100%'
		}]
		}]
		},{
			fieldLabel: 'Telephone',
			name: 'tel',
			allowBlank: false,
			anchor: '70%'
		},{
			fieldLabel: 'Mobile (optional)',
			name: 'mobile',
			anchor: '70%'
		},{
			fieldLabel: 'Date of Birth',
			name: 'dob',
			xtype: 'datefield',
			format: 'd-m-Y',
			allowBlank: false,
			anchor: '50%'
		},{
			fieldLabel: 'Sector',
			hiddenName: 'sector',
			xtype: 'combo',
			allowBlank: false,
			anchor: '50%',
			valueField: 'value',
			triggerAction:'all',
			displayField:'value',
			store: new Ext.data.SimpleStore({
				fields: ['value'],
				data: [
				['Construction'],['Education'],['Engineering'],['Financial'],['IT'],['Medical'],['Social'],['Transport'],['Other']
				]
			}),
			mode: 'local'
		},{
			fieldLabel: 'Nationality',
			name: 'nationality',
			allowBlank: false,
			anchor: '70%'
		}]
		}],
		buttons: [{
			text: 'Submit Registration',
			tooltip: 'Submit your registration',
			handler: this.onFormSubmit,
            scope: this
		},{
			text: 'Clear Form',
			tooltip: 'Clear the form',
			handler: function(){
				this.form.getForm().reset();
			},
			scope:this
		}]
});		
	

Ext.apply(this, {
		iconCls: 'icon-reg-add',
		width: 370	,
		baseCls: 'x-plain',
		renderTo: 'form',
		items: this.form
    });

// call parent
		Regs.NewForm.superclass.initComponent.apply(this, arguments);
},
		 onFormSubmit: function() {
		 	
	if (this.form.form.isValid()) {
				
				this.form.form.submit({
					waitMsg: 'Saving details...',
					scope: this,
					params: {
							action: 'submit'
							},
						success: this.showSuccess,
						failure: function(form, action){
						Ext.Msg.alert('Form Error', action.result.msg);
								}
							});
						}
						else {
							Ext.Msg.alert('Form Error', 'Please correct the indicated errors');
						}			
    },
	showSuccess: function(form, action){						
				
				Ext.Msg.show({
					title: 'New Registration',
					width: 300,
					msg: 'Thank you for your registration, one of our agents will be contacting you shortly',
					icon: Ext.Msg.INFO,
					buttons: Ext.Msg.OK
				});
				form.reset();
				
	},
	checkField : function(f, nV){
		var name = f.getName();
		var url = 'includes/check_email.php';
		Ext.Ajax.request({
					url: url,
					waitMsg: 'Saving Data...',
					params: {
						type: name,
						value: nV
					},
					success: function(response, options){
						var res = Ext.decode(response.responseText);
						if(res.msg == 'No'){
							f.markInvalid('The '+name+' '+nV+' is already taken, choose another');
						}
					}
				});
	},
	clearVals : function(){
		this.form.form.reset();//the reg form
	}
});

// register component
Ext.reg('registrationform', Regs.NewForm);