Ext.apply(Ext.form.VTypes, {
  daterange: function(val, field) {
    var date = field.parseDate(val);
    
    // We need to force the picker to update values to recaluate the disabled dates display
    var dispUpd = function(picker) {
      var ad = picker.activeDate;
      picker.activeDate = null;
      picker.update(ad);
    };
    
    if (field.startDateField) {
      var sd = Ext.getCmp(field.startDateField);
      sd.maxValue = date;
      if (sd.menu && sd.menu.picker) {
        sd.menu.picker.maxDate = date;
        dispUpd(sd.menu.picker);
      }
    } else if (field.endDateField) {
      var ed = Ext.getCmp(field.endDateField);
      ed.minValue = date;
      if (ed.menu && ed.menu.picker) {
        ed.menu.picker.minDate = date;
        dispUpd(ed.menu.picker);
      }
    }
    /* Always return true since we're only using this vtype
     * to set the min/max allowed values (these are tested
     * for after the vtype test)
     */
    return true;
  }
  
});

Ext.onReady(function(){

	Ext.QuickTips.init();

    	Ext.form.Field.prototype.msgTarget = 'side';

	var myDateChooser = new Ext.FormPanel({
    	url: 'includes/save-booking.php',
		frame: true,
		title: 'Booking Form',
		width: 600,
		defaultType: 'textfield',
		items: [{
			fieldLabel: 'Arrival date',
			labelWidth: 200,
			name: 'cStart',
			format: 'd/m/Y',
			id: 'cStart',
			endDateField: 'cEnd',
			allowBlank: false,
			xtype: 'datefield',
			vtype: 'daterange'
		},{
			fieldLabel: 'Departure date',
			labelWidth: 200,
			name: 'cEnd',
			format: 'd/m/Y',
			id: 'cEnd',
			startDateField: 'cStart',
			allowBlank: false,
			xtype: 'datefield',
			vtype: 'daterange'
		}, new Ext.form.ComboBox({
			fieldLabel: 'Apartment',
			store: Ext.aData.apartments,
			labelWidth: 200,
	    	emptyText:'Select an apartment...',
			name: 'cApartment',
			id: 'cApartment',
			width: 200,
			allowBlank: false
		}), new Ext.form.ComboBox({
			fieldLabel: 'Title',
			labelWidth: 200,
			store: [['Mr','Mr'],['Mrs','Mrs'],['Miss','Miss'],['Dr','Dr'],['Rev','Rev']],
	    	emptyText:'Select a title...',
			name: 'cTitle',
			width: 150,
			allowBlank: false
		}), {
			fieldLabel: 'Firstname',
			labelWidth: 200,
			name: 'cFirst',
			allowBlank: false,
			width: 300
		}, {
			fieldLabel: 'Surname',
			labelWidth: 200,
			name: 'cLast',
			allowBlank: false,
			width: 300
		}, {
			fieldLabel: 'Address 1',
			labelWidth: 200,
			name: 'cAdd1',
			allowBlank: false,
			width: 300
		}, {
			fieldLabel: 'Address 2',
			labelWidth: 200,
			name: 'cAdd2',
			width: 300
		}, {
			fieldLabel: 'Address 3',
			labelWidth: 200,
			name: 'cAdd3',
			width: 300
		}, {
			fieldLabel: 'Town/City',
			labelWidth: 200,
			name: 'cTown',
			allowBlank: false,
			width: 300
		}, {
			fieldLabel: 'County',
			labelWidth: 200,
			name: 'cCounty',
			allowBlank: false,
			width: 300
		}, {
			fieldLabel: 'Postcode',
			labelWidth: 200,
			name: 'cPostcode',
			allowBlank: false,
			width: 100
		}, {
			fieldLabel: 'Country',
			labelWidth: 200,
			name: 'cCountry',
			allowBlank: false,
			width: 300
		}, {
			fieldLabel: 'Telephone',
			labelWidth: 200,
			name: 'cTel',
			allowBlank: false,
			width: 300
		}, {
			fieldLabel: 'Email address',
			labelWidth: 200,
			name: 'cEmail',
			allowBlank: true,
			vtype: 'email',
			width: 300
		}],
		buttons: [{
			text: 'Submit',
			handler: function(){
				myDateChooser.form.submit({
					waitMsg:'Processing...',
					success: function(form, action) {
						Ext.MessageBox.alert('Thankyou','Your desired dates are available. You will now be asked to leave a deposit.',
							function() {
								window.location = 'pay-deposit.html';
							});
						myDateChooser.disable();
					},
					failure: function(form, action) {
						Ext.MessageBox.alert('Problem','You have not filled in the required fields or your dates chosen have already been taken.<br /><strong>Please try again.</strong>');
					}
				})
			}
		}]
		
	});

	myDateChooser.render('bookingForm');

});