/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, 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();
	
	var store = new Ext.data.SimpleStore({
        fields: ['abbr', 'state', 'nick'],
        data : Ext.exampledata.findus // from states.js
    });
		var store1 = new Ext.data.SimpleStore({
        fields: ['abbr', 'state1', 'nick'],
        data : Ext.exampledata.long // from states.js
    });

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


    var simple = new Ext.FormPanel({
		labelAlign: 'top',
        standardSubmit: true,
        title: 'Booking Request Form ',		
        width: 600,
        bodyStyle:'padding:5px',
        items: [{
            layout:'column',
            border:false,
            items:[{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{	
					xtype:'textfield',
					fieldLabel: '<font color=#FF0000 ><b>*</b> Mandatory field.</font> <br><br>Guest 1 Full Name<font color=#FF0000 ><b>*</b></font>',
					name: 'guest1',
					allowBlank:false,
					anchor:'95%'
					},
					{	
					xtype:'textfield',
					fieldLabel: 'Guest 2 Full Name',
					name: 'guest2',					
					anchor:'95%'
				},
					{	
					xtype:'textfield',
					fieldLabel: 'Guest 3 Full Name',
					name: 'guest3',					
					anchor:'95%'
				},
					{	
					xtype:'textfield',
					fieldLabel: 'Guest 4 Full Name',
					name: 'guest4',					
					anchor:'95%'
				},
					{	
					xtype:'textfield',
					fieldLabel: 'Guest 5 Full Name',
					name: 'guest5',					
					anchor:'95%'
				},
					{	
					xtype:'textfield',
					fieldLabel: 'Guest 6 Full Name',
					name: 'guest6',					
					anchor:'95%'
				}
				]
            },{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [
				new Ext.form.DateField(
				{
				fieldLabel: ' <br><br> Guest 1 Date of Birth<font color=#FF0000 ><b>*</b></font>',
				name: 'dobguest1',
				format: 'd/m/Y ',
				value:new Date ().add (Date.DAY, -6570),
				maxValue : new Date ().add (Date.DAY, -6570),
				allowBlank:false,
				anchor:'95%'                      
 		        }),
				new Ext.form.DateField(
				{
				fieldLabel: 'Guest 2 Date of Birth',
				name: 'dobguest2',
				maxValue : new Date(),
				format: 'd/m/Y ',
				anchor:'95%'                      
 		        }),
				new Ext.form.DateField(
				{
				fieldLabel: 'Guest 3 Date of Birth',
				name: 'dobguest3',
				maxValue : new Date(),
				format: 'd/m/Y ',
				anchor:'95%'                      
 		        }),
				new Ext.form.DateField(
				{
				fieldLabel: 'Guest 4 Date of Birth',
				name: 'dobguest4',
				maxValue : new Date(),
				format: 'd/m/Y ',
				anchor:'95%'                      
 		        }),
				new Ext.form.DateField(
				{
				fieldLabel: 'Guest 5 Date of Birth',
				name: 'dobguest5',
				maxValue : new Date(),
				format: 'd/m/Y ',
				anchor:'95%'                      
 		        }),
				new Ext.form.DateField(
				{
				fieldLabel: 'Guest 6 Date of Birth',
				name: 'dobguest6',
				maxValue : new Date(),
				format: 'd/m/Y ',
				anchor:'95%'                      
 		        })]				
            }
			
			]
        },{
                columnWidth:1,
                layout: 'form',
                border:false,
				items: [

			{
                xtype: 'radiogroup',
                fieldLabel: 'Sex',
                items: [
                    {boxLabel: 'Male', name: 'rb-sex', inputValue: 1},
                    {boxLabel: 'Female', name: 'rb-sex', inputValue: 2, checked: true}
                ],
				width:150
            },
			{   
				xtype:'textfield',    
				fieldLabel: 'Telephone',
                name: 'telephone',
				width:250
            },
			{   
				xtype:'textfield',   
				fieldLabel: 'Address<font color=#FF0000 ><b>*</b></font>',
                name: 'address',
				allowBlank:false,
				width:250
            },
			{
				xtype:'textfield',   
                fieldLabel: 'Email<font color=#FF0000 ><b>*</b></font>',
                name: 'email',
                vtype:'email',
				allowBlank:false,
				width:250
            },
			new Ext.form.DateField(
			{
				fieldLabel: 'Date of Arrival<font color=#FF0000 ><b>*</b></font>',
				name: 'doa',
				format: 'd/m/Y ',
				minValue : new Date(),
				allowBlank:false,
				width:190                        
            }),
			new Ext.form.DateField(
			{
				fieldLabel: 'Date of Departure<font color=#FF0000 ><b>*</b></font>',
				name: 'dod',
				format: 'd/m/Y ',
				minValue : new Date(),
				allowBlank:false,
				width:190                        
            }),
 
			{
                xtype: 'radiogroup',
                fieldLabel: 'Would you like a supplementary Ayurveda treatment while in Ulpotha?',
                items: [
                    {boxLabel: 'Yes', name: 'rb1-ayurveda', inputValue: 1},
                    {boxLabel: 'No', name: 'rb1-ayurveda', inputValue: 2, checked: true}
                ],
				width:150				
            },
			new Ext.form.ComboBox({
				fieldLabel: '<a href="http://www.ulpotha.com/ayurveda.html" taget="_blank" ><font color=#993300 ><u><b><span style="text-decoration:none;">Learn more about Ayurveda in Ulpotha</span></b></u></font></a><br><br>If ‘Yes’ for how long?',
				store: store1,
				displayField:'state1',
				typeAhead: true,
				name:'long',
				mode: 'local',
				forceSelection: true,
				triggerAction: 'all',
				emptyText:'How long...',
				allowBlank:true,
				selectOnFocus:true
			}),
			{
                xtype: 'radiogroup',
                fieldLabel: 'Have you already reserved flights to Sri Lanka?<br>(For those of you flying from the UK or Europe, we recommend you use our preferred travel agent Paradise Travel in London.  They will be aware of the best flights available at the time of booking.  Please be sure to speak to the Ulpotha account manager, Dash on 0044 (0)20 8434 0411)',
                items: [
                    {boxLabel: 'Yes', name: 'rb-reserved', inputValue: 1},
                    {boxLabel: 'No', name: 'rb-reserved', inputValue: 2, checked: true}
                ],
				width:150				
            },	

		{
			
			

        labelAlign: 'top',
        frame:false,
        title: 'If ‘<b>Yes</b>’ please provide flight details below',
        bodyStyle:'padding:5px 5px 0',
        width: 500,
        items: [{
            layout:'column',
			border:false,
            items:[{
                columnWidth:.5,
                layout: 'form',
				border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: '<b>Arrival:</b><br><br>Flight number',
                    name: 'arr-fnum',
                    anchor:'95%'
                },
				new Ext.form.DateField(
				{
					fieldLabel: 'Date',
					name: 'arr-date',
					minValue : new Date(),
					format: 'd/m/Y ',
					anchor:'95%'               
				}),
				{
                    xtype:'textfield',
                    fieldLabel: 'Time',
                    name: 'arr-time',
                    anchor:'95%'
                }]
            },{
                columnWidth:.5,
                layout: 'form',
				border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: '<b>Departure:</b><br><br>Flight number',
                    name: 'dep-fnum',
                    anchor:'95%'
                },
				new Ext.form.DateField(
				{
					fieldLabel: 'Date',
					name: 'dep-date',
					minValue : new Date(),
					format: 'd/m/Y ',
					anchor:'95%'                 
				}),
				{
                    xtype:'textfield',
                    fieldLabel: 'Time',
                    name: 'dep-time',
                    anchor:'95%'
                }]
            }]
        }]},

        
    
			
			
			
			
			
			
			
			new Ext.form.TextArea(
			{       
				fieldLabel: '<br>If you will be already in Sri Lanka and coming to Ulpotha by any other means, what are they and do you need directions and/or transport?',
				name:'directions',
				width:400
            }),			
			new Ext.form.ComboBox({
				fieldLabel: 'Where did you hear about Ulpotha?<font color=#FF0000 ><b>*</b></font>',
				store: store,
				displayField:'state',
				typeAhead: true,
				name:'findus',
				mode: 'local',
				forceSelection: true,
				triggerAction: 'all',
				emptyText:'How did you find us...',
				allowBlank:false,
				selectOnFocus:true
			}),			
			new Ext.form.TextArea(
			{       
				fieldLabel: 'If you will be in Sri lanka longer than your time at Ulpotha would you like suggestions of other complementary destinations to visit?',
                name: 'hear',
				width:400
            }),
			new Ext.form.TextArea(
			{       
				fieldLabel: 'Are there any further questions you have?',
                name: 'questions',
				width:400
            })
				]

				   
			}],
		
		buttons: [{
            text: 'Submit',
            handler: function() {
		simple.getForm().getEl().dom.action = 'submitbookingform.asp';
	        simple.getForm().getEl().dom.method = 'GET';
                simple.getForm().submit();
            }
        }]


    });
   // simple.render(document.body);
	simple.render('search');


});