/*
 * Ext JS Library 2.2.1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){

    Ext.QuickTips.init();
	
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
   // bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});


    var simple = new Ext.FormPanel({
        
		renderTo : 'formclass',
		labelWidth: 100, // label settings here cascade unless overridden
        //url:'submitform.php',
		method: 'POST',
        frame:true,
		width:	410,
		title: '',
        bodyStyle:'padding:5px 5px 0',
        //width: 400,
        defaults: {width: 370},
        //defaultType: 'textfield',

        items: [{
				xtype: 'textfield',
                width: 250,
				fieldLabel: 'Full Name',
                name: 'fullname',
				id: 'fullname',
                allowBlank:false
            },{
				xtype: 'textfield',
				width: 150,
				maxLength:	13,
                fieldLabel: 'Phone Number',
                name: 'phonenumber',
				id: 'phonenumber'
            },{
				xtype: 'textfield',
				width: 250,
                fieldLabel: 'Email',
                name: 'email',
				id: 'email',
				vtype:	'email'
			},{
				xtype:'fieldset',
            	checkboxToggle:true,
            	title: 'I\'m bringing my boat',
            	autoHeight:true,
            	defaults: {width: 300},
            	defaultType: 'textfield',
				items : [{
							xtype: 'textfield',
							width: 220,
							fieldLabel: 'Boat Name',
                			name: 'boatname',
							id: 'boatname'
						 },{
							xtype: 'textfield',
							width: 220,
							fieldLabel: 'Boat Type',
                			name: 'boatt',
							id: 'boatt'
						 },{
							xtype: 'textfield',
							width: 60,
							fieldLabel: 'Boat Length',
                			name: 'boatlength',
							id: 'boatlength'
						 },{
							xtype: 'textfield',
							width: 200,
							fieldLabel: 'Country of Origin',
                			name: 'origincountry',
							id: 'origincountry'
						},{
							xtype: 'numberfield',
							width: 60,
							fieldLabel: 'Number of people on your crew?',
                			name: 'crewnum',
							id: 'crewnum'							
						},{
						xtype:'fieldset',
            				checkboxToggle:true,
            				title: 'I need dock facilities',
            				autoHeight:true,
            				defaults: {width: 140},
            				defaultType: 'textfield',
							items : [{
										xtype: 'datefield',
										width:	140,
										fieldLabel: 'Date of arrival',
										name: 'arrivaldate',
										id: 'arrivaldate'
									 },new Ext.form.TimeField({
                					 	fieldLabel: 'Estimated time of arrival',
                					 	name: 'time'
            						})
						 			,{
										xtype: 'datefield',
										width:	140,
										fieldLabel: 'Date of departure',
										name: 'departuredate',
										id: 'departuredate'
									}]
						}]
			},{
				xtype: 'fieldset',
      			title: 'Will you like to rent a boat?',
				autoHeight:true,
            	defaults: {width: 200},
      			items: [
        			{xtype: 'radio', hideLabel:	'true', boxLabel: 'Yes', name: 'rentboat', id: 'rentboat', inputValue: 'true'},
        			{xtype: 'radio', hideLabel:	'true', boxLabel: 'No', name: 'rentboat', inputValue: 'false'}
      			]
				
			},{
				xtype:'fieldset',
				checkboxToggle:true,
            	title: 'I will need hotel accomodation',
            	autoHeight:true,
            	defaults: {width: 375},
            	defaultType: 'textfield',
				items : [{
							xtype: 'numberfield',
							width:	60,
							fieldLabel: 'How many people',
							id: 'pplhotel',
							name: 'pplhotel'							
						}]
			
			},{
				xtype:'fieldset',
            	checkboxToggle:true,
            	title: 'I would like to make a restaurant reservation',
            	autoHeight:true,
            	defaults: {width: 140},
            	defaultType: 'textfield',
				items : [{
							xtype: 'datefield',
							width:	140,
							fieldLabel: 'Date',
							name: 'rest_date',
							id: 'rest_date'
						 },
						 	new Ext.form.TimeField({
                					 	fieldLabel: 'Hour',
                					 	name: 'rest_time',
										id: 'rest_time',
                					 	increment: 60
                		 })
						 ,{
							xtype: 'numberfield',
							width: 60,
							fieldLabel: 'Number of people in your party',
                			name: 'rest_people',
							id: 'rest_people'
						}]
			},{
                xtype: 'textarea',
				width: 265,
				higth:	50,
				fieldLabel: 'Special Request',
                name: 'special_req',
				id: 'special_req'
			}
        ],
		
		buttons: [{
                    text     : 'Submit',
                    handler  : function(){
                        var fullname_msg = Ext.get('fullname');
						var phonenumber_msg = Ext.get('phonenumber');
						var email_msg = Ext.get('email');
						var boatname_msg = Ext.get('boatname');
						var boatt_msg = Ext.get('boatt');
						var boatlength_msg = Ext.get('boatlength');
						var origincountry_msg = Ext.get('origincountry');
						var crewnum_msg = Ext.get('crewnum');
						var arrivaldate_msg = Ext.get('arrivaldate');
						var departuredate_msg = Ext.get('departuredate');
						var rentboat_msg = Ext.get('rentboat');
						var pplhotel_msg = Ext.get('pplhotel');
						var rest_date_msg = Ext.get('rest_date');
						var rest_time_msg = Ext.get('rest_time');
						var rest_people_msg = Ext.get('rest_people');
						var special_req_msg = Ext.get('special_req');
						
                        Ext.Ajax.request({
                            url : 'resultado.php', 
                            params : { fullname : fullname_msg.dom.value, phonenumber : phonenumber_msg.dom.value, email : email_msg.dom.value, boatname : boatname_msg.dom.value,
									   boatt : boatt_msg.dom.value, 
									   boatlength : boatlength_msg.dom.value, origincountry : origincountry_msg.dom.value, crewnum : crewnum_msg.dom.value,
									   arrivaldate : arrivaldate_msg.dom.value, departuredate : departuredate_msg.dom.value, rentboat : rentboat_msg.dom.value, 
									   pplhotel : pplhotel_msg.dom.value,
									   rest_date : rest_date_msg.dom.value, rest_time : rest_time_msg.dom.value, rest_people : rest_people_msg.dom.value, special_req : special_req_msg.dom.value
									   },
                            method: 'GET',
                            success: function ( result, request ) { 
                                //Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText);
								Ext.MessageBox.alert('Important', result.responseText);
                            },
                            failure: function ( result, request) { 
                                Ext.MessageBox.alert('Failed', 'Please, verify your information.'); 
                            } 
                        });
                        //win.hide();
                    }
                },{
                    text     : 'Clear',
                    handler  : function(){ simple.reset; }
                }]
    });

    //simple.renderTO("formclass");
});