var Signup = function() {
	return {
		
		init: function() {
			//Set the global form properties
			Ext.QuickTips.init();
			Ext.form.Field.prototype.msgTarget = 'under';

			//Prevent copy/paste keyboard commands
			var keyCommands = [
										{key:'c', ctrl:true, shift:false, stopEvent:true, fn:this.preventCopyPaste},
										{key:'v', ctrl:true, shift:false, stopEvent:true, fn:this.preventCopyPaste}
									];
			new Ext.KeyMap(Ext.get(document), keyCommands);
			//Prevent context menu
			Ext.fly(document.body).on('contextmenu', function(e){ e.preventDefault(); });

			//Create a 'password' validation type
			Ext.apply(Ext.form.VTypes, {
					password: function(val, field) {
						if (field.initialPassField) {
						  var pwd = Ext.getCmp(field.initialPassField);
						  return (val == pwd.getValue());
						}
						return true;
					 },					 
					 passwordText: 'Passwords do not match',
					 
					//Create a 'confirm email' validation type
					confirmEmail: function(val, field) {
						if (field.initialEmailField) {
						  var eml = Ext.getCmp(field.initialEmailField);
						  return (val == eml.getValue());
						}
						return true;
					 },
					 
					 confirmEmailText: 'Email does not match'
					 
				  });

			//Set up a store to hold the state names
			this.states = new Ext.data.SimpleStore({
										fields: ['code', 'name'],
										data: [
												 ['ACT', 'Australian Capital Territory'],
												 ['NSW', 'New South Wales'],
												 ['NT', 'Northern Territory'],
												 ['QLD', 'Queensland'],
												 ['SA', 'South Australia'],
												 ['TAS', 'Tasmania'],
												 ['WA', 'Western Australia'],
												 ['VIC', 'Victoria']
												]
									});

			//Edit entry form
			this.form = new Ext.form.FormPanel({
				id: 'formEdit',
				renderTo: 'signup',
				layout: 'form',
				baseCls: 'signup',
				
				//form
				labelAlign: 'right',
				
				//layout
				deferredRender: false,
				bodyStyle: 'padding: 7px;',
				
				//panel 
				url: SolidCMS.site.root + 'components/wishbox/data/signup.php',
				method: 'post',
				fileUpload: false,
				waitMsgTarget: true,
				
				items: [{
					xtype: 'fieldset',
					title: 'Account Details',
					autoHeight: true,
					
					labelWidth: 140,
					defaults: {layout: 'form', baseCls: 'signup'},

					items: [{
						layout: 'column',
						border: false,
						defaults: {border: false, layout: 'form', baseCls: 'signup'},

						items: [{
							width: 550,
							border: false,
							defaults: {border: false, layout: 'form'},

							items: [{					
								xtype: 'textfield',
								allowBlank: false,
								fieldLabel: 'Username',
								id: 'signup_username',
								name: 'signup_username',
								width: 100,
								minLength: 6,
								maxLength: 30,
								maskRe: /[a-z0-9_]/,
								plugins:[Ext.ux.plugins.RemoteValidator]
									,rvOptions: {
										url: SolidCMS.site.root + 'components/wishbox/data/signup.php',
										params: {task: 'validate'}
									}
							},{
								xtype: 'textfield',
								allowBlank: false,
								fieldLabel: 'Password',
								id: 'signup_password',
								name: 'signup_password',
								inputType: 'password',
								minLength: 6,
								width: 85,
								maxLength: 40
							},{
								xtype: 'textfield',
								allowBlank: false,
								fieldLabel: 'Confirm Password',
								id: 'signup_password2',
								name: 'signup_password2',
								inputType: 'password',
								minLength: 6,
								width: 85,
								vtype: 'password',
								initialPassField: 'signup_password',
								maxLength: 40
							},{
								xtype: 'textfield',
								allowBlank: false,
								fieldLabel: 'Email',
								id: 'signup_email',
								name: 'signup_email',
								width: 250,
								maxLength: 50,
								vtype: 'email'
							},{
								xtype: 'textfield',
								allowBlank: false,
								fieldLabel: 'Confirm Email',
								id: 'signup_email2',
								name: 'signup_email2',
								width: 250,
								maxLength: 50,
								initialEmailField: 'signup_email',
								vtype: 'confirmEmail'
							}]
						},{
							width: 180,
							border: false,
							defaults: {border: false, layout: 'form', baseCls: 'signup'},
							
							items: [{
								xtype: 'panel',
								contentEl: 'account_image',
								autoShow: true,
								width: 180,
								height: 100
							}]
							
						}]
					}]
				},{
					xtype: 'fieldset',
					title: 'Personal Details',
					autoHeight: true,
					
					layout: 'form',
					labelWidth: 140,
					labelAlign: 'right',
					defaults: {baseCls: 'signup'},

					items: [{
						layout: 'column',
						border: false,
						defaults: {border: false, layout: 'form', baseCls: 'signup'},

						items: [{
							width: 350,
							border: false,
							defaults: {border: false, layout: 'form'},

							items: [{
								xtype: 'textfield',
								fieldLabel: 'First Name',
								name: 'signup_name_first',
								width: 175,
								maxLength: 50,
								allowBlank: false
							},{
								xtype: 'textfield',
								fieldLabel: 'Last Name',
								name: 'signup_name_last',
								width: 175,
								maxLength: 50,
								allowBlank: false
							}]
						},{
							width: 350,
							border: false,
							defaults: {border: false, layout: 'form'},
							labelWidth: 160,

							items: [{
								xtype: 'textfield',
								fieldLabel: "Spouse's First Name",
								name: 'signup_name_first2',
								width: 175,
								maxLength: 50,
								allowBlank: false
							},{
								xtype: 'textfield',
								fieldLabel: "Spouse's Last Name",
								name: 'signup_name_last2',
								width: 175,
								maxLength: 50,
								allowBlank: false
							}]
						}]
					},{
						xtype: 'datefield',
						fieldLabel: 'Date of Birth',
						name: 'signup_dob',
						format: 'd/m/Y',
						altFormats: 'j/n/Y|d/n/Y',
						allowBlank: false,
						listeners: {
							focus: {
								fn: this.onDateFocus
							},
							scope: this
						}
					},{
						xtype: 'textfield',
						fieldLabel: 'Home Number',
						name: 'signup_contact_home',
						width: 100,
						maxLength: 12,
						allowBlank: false						
					},{
						xtype: 'textfield',
						fieldLabel: 'Mobile Number',
						name: 'signup_contact_mobile',
						width: 100,
						maxLength: 12,
						allowBlank: false
					},{
						xtype: 'textfield',
						fieldLabel: 'Fax',
						name: 'signup_contact_fax',
						width: 100,
						maxLength: 12,
						allowBlank: true
					},{
						layout: 'column',
						border: false,
						defaults: {border: false, layout: 'form', baseCls: 'signup'},
						
						items: [{
							width: 355,
							bodyStyle: 'padding: 8px;',
							defaults: {labelWidth: 120},
							items: [{
								xtype: 'fieldset',
								autoHeight: true,
								title: 'Residential Address',
								defaults: {layout: 'form'},

								items: [{
									xtype: 'textfield',
									fieldLabel: 'Street Address',
									name: 'signup_residential_street',
									width: 180,
									maxLength: 100,
									allowBlank: false
								},{
									xtype: 'textfield',
									fieldLabel: 'Suburb',
									name: 'signup_residential_suburb',
									width: 180,
									maxLength: 50,
									allowBlank: false
								},{
									xtype: 'combo',
									fieldLabel: 'State',
									hiddenName: 'signup_residential_state',
									
									fieldLabel: 'State',
									name: 'signup_residential_statedisplay',

									typeAhead: true,
									forceSelection: true,
									triggerAction: 'all',
									emptyText:'< Select >',
									selectOnFocus:true,
									
									mode: 'local',
									store: this.states,
									valueField: 'code',
									displayField: 'name',
									width: 175,
									allowBlank: false
								},{
									xtype: 'textfield',
									fieldLabel: 'Postcode',
									name: 'signup_residential_postcode',
									width: 80,
									maxLength: 4,
									allowBlank: false
								}]
							}]
						},{
							width: 15,
							items: [{
								xtype: 'fieldset',
								width: 15,
								border: false
							}]
						},{
							width: 355,
							defaults: {labelWidth: 120},
							bodyStyle: 'padding: 8px;',
							items: [{
								xtype: 'fieldset',
								autoHeight: true,
								title: 'Delivery Address (if different)',
								defaults: {layout: 'form'},

								items: [{
									xtype: 'textfield',
									fieldLabel: 'Street Address',
									name: 'signup_shipping_street',
									width: 180,
									maxLength: 100
								},{
									xtype: 'textfield',
									fieldLabel: 'Suburb',
									name: 'signup_shipping_suburb',
									width: 180,
									maxLength: 50
								},{
									xtype: 'combo',
									fieldLabel: 'State',
									hiddenName: 'signup_shipping_state',
									
									fieldLabel: 'State',
									name: 'signup_shipping_statedisplay',

									typeAhead: true,
									forceSelection: true,
									triggerAction: 'all',
									emptyText:'< Select >',
									selectOnFocus:true,
									
									mode: 'local',
									store: this.states,
									valueField: 'code',
									displayField: 'name',
									width: 175
								},{
									xtype: 'textfield',
									fieldLabel: 'Postcode',
									name: 'signup_shipping_postcode',
									width: 80,
									maxLength: 4
								}]
							}]
						}]
					}]
				},{
					xtype: 'fieldset',
					title: 'How did you hear about us?',
					autoHeight: true,
					bodyStyle: 'padding: 8px;',
					defaults: {baseCls: 'signup'},
					
					items: [{
						layout: 'column',
						autoHeight: true,
						defaults: {hideLabel: false, baseCls: 'signup'},
						
						items: [{
							width: 180,
							border: false,
							defaults: {width: 150, hideLabel: false},
							items: [{
								xtype: 'checkbox',
								name: 'referral[searchengine]',
								boxLabel: 'Search Engine',
								inputValue: 1
							},{
								xtype: 'checkbox',
								name: 'referral[otherwebsite]',
								boxLabel: 'Other Website',
								inputValue: 1
							}]
						},{
							width: 180,
							defaults: {width: 150, hideLabel: true},
							items: [{
								xtype: 'checkbox',
								name: 'referral[magazine]',
								boxLabel: 'Magazine',
								inputValue: 1
							},{
								xtype: 'checkbox',
								name: 'referral[radio]',
								boxLabel: 'Radio',
								inputValue: 1
							}]
						},{
							width: 180,
							defaults: {width: 150, hideLabel: true},
							items: [{
								xtype: 'checkbox',
								name: 'referral[tv]',
								boxLabel: 'TV',
								inputValue: 1
							},{
								xtype: 'checkbox',
								name: 'referral[exhibition]',
								boxLabel: 'Exhibition',
								inputValue: 1
							}]
						},{
							width: 180,
							defaults: {width: 150, hideLabel: true},
							items: [{
								xtype: 'checkbox',
								name: 'referral[directmail]',
								boxLabel: 'Direct Mail',
								inputValue: 1
							},{
								xtype: 'checkbox',
								id: 'referral[other]',
								name: 'referral[other]',
								boxLabel: 'Other',
								inputValue: 1								
							},{
								xtype: 'textfield',
								name: 'signup_referral_other',
								enableKeyEvents: true,
								listeners: {
									'keyup': function(txt, e) {
										var chk = Ext.getCmp('referral[other]');
										chk.setValue(txt.getValue() != '');
									},
									scope: this
								}
							}]
						}]
					}]
				},{
					xtype: 'fieldset',
					title: 'Event Details',
					autoHeight: true,

					labelWidth: 220,
					labelAlign: 'right',
					defaults: {layout: 'form'},

					items: [{
						xtype: 'textfield',
						fieldLabel: 'Occasion being celebrated',
						name: 'signup_event_occasion',
						width: 300,
						maxLength: 200,
						allowBlank: false
					},{
						xtype: 'numberfield',
						fieldLabel: 'Number of guests (approx)',
						name: 'signup_event_guests',
						width: 50,
						maxLength: 10,
						allowBlank: false
					},{
						xtype: 'datefield',
						fieldLabel: 'Date of the occasion',
						name: 'signup_event_date',
						format: 'd/m/Y',
						altFormats: 'j/n/Y|d/n/Y',
						allowBlank: false,
						listeners: {
							focus: {
								fn: this.onDateFocus
							},
							scope: this
						}
					},{
						xtype: 'textfield',
						fieldLabel: 'Location of the event',
						name: 'signup_event_location',
						width: 300,
						maxLength: 200,
						allowBlank: false
					},{
						/*
						xtype: 'datefield',
						fieldLabel: 'Last Date for Contributions',
						name: 'signup_account_end',
						format: 'd/m/Y',
						altFormats: 'j/n/Y|d/n/Y',
						allowBlank: false
					},{
						*/
						xtype: 'checkbox',
						id: 'tandc',
						fieldLabel: '',
						labelSeparator: '',
						fieldLabel: 'I agree to the <a href="/page/view/terms-and-conditions-14" target="_blank">Terms and Conditions</a>',
						name: 'agree_tandc',
						allowBlank: false
					}]
				}]
			
			});

			//Fill the form for testing
			//this.fillForm();

			//Build the terms and conditions dialog
			this.terms = new Ext.Window({
				 contentEl: 'terms',
				 title: 'Terms and Conditions',
				 layout:'fit',
				 width:500,
				 height:300,
				 bodyStyle: 'padding: 7px;',
				 closeAction:'hide',
				 plain: true,
				 resizable: true,
				 autoScroll: true,
				 modal: true,
				 
				 buttons: [{
						text: 'Close',
					  handler: function(){
							Signup.terms.hide();
					  }
				 }]
			});
			this.form.render();
			
			//Set the date fields to the format string
			this.form.form.findField('signup_dob').setRawValue('dd/mm/yyyy');
			this.form.form.findField('signup_event_date').setRawValue('dd/mm/yyyy');			
		},

		preventCopyPaste: function() {
			return false;
		},
		
		submit: function(form, action) {

			var frm = this.form.getForm();
			frm.clearInvalid();

			//Verify that one of the 'How Did You Find Us' checkboxes has been selected
			var referralSelected = false;
			if (frm.findField('signup_referral_other').getValue() != '') {
				referralSelected = true;
			} else {
				var items = frm.items.items;
				for(var i=0; i<items.length; i++) {
					var item = items[i];
					if (item.name.substr(0, 9) == 'referral[') {
						if (item.checked == true) {
							referralSelected = true;
							break;
						}
					}
				}
			}

			if (referralSelected == false) {
				frm.markInvalid({signup_referral_other: 'Please select how you found us'});
				alert('Please select how you found us');
			} else {				
				var tandc = Ext.getCmp('tandc');
				if (tandc.checked == false) {
					Ext.MessageBox.alert('Terms and Conditions', 'You must agree to the terms and conditions before you can create your account.');
				} else {
					this.form.getForm().submit({
						params: {task: 'register'},
						success: this.onSubmit,
						failure: this.onSubmit,
						scope: this,
						clientValidation: true
					});
				}
			}
		},
		onSubmit: function(form, action) {
			//Check the form response
			if (SolidCMS.Utilities.data.formResponse(action)) {
				//Navigate to the 'thankyou' page
				window.location = SolidCMS.site.root + 'wishbox/signup/thankyou';
			}
		},
		
		onDateFocus: function(fld) {
			if (fld.getRawValue() == 'dd/mm/yyyy') {
				fld.setRawValue('');				
			}
		},
		
		showTerms: function() {			
			this.terms.show();
			return false;
		},
	  
	  fillForm: function() {
		
			if (window.location.host == 'wishbox') {
				var data = {
				}
				
				var frm = this.form.getForm();
				for (var fieldId in data) {
					var fld = frm.findField('signup_' + fieldId);
					if (fld) {
						fld.setValue(data[fieldId]);
					}
				}
			}
		
	  }
		
	};
}();

//Start when document ready
Ext.onReady(
	function() {
		//Set the blank image
		Ext.BLANK_IMAGE_URL = SolidCMS.site.root + 'admin/images/spacer.gif';
		//Load the component
		Signup.init();
	}, Signup, true
);