function showAirTicketRequestForm(id, airline, type, from, to) {
	var maxLengthOtherRequirements = 1000;
	var validationDelayInMillis = 2000;
	
	if (airline==undefined || airline=='') {
		airline = 'Any';
	}
	
	type = 'Return';
	var return_date_cb_disabled = false;
	if (type == 'One-way') {
		return_date_cb_disabled = true;
	}
	
	var titleStore = new Ext.data.SimpleStore({
	    fields: ['title'],
	    data: [['Mr.'], ['Ms.']]
	});
	
	var typeStore = new Ext.data.SimpleStore({
	    fields: ['type'],
	    data: [['One-way'], ['Return']]
	});
	
	var numberStore = new Ext.data.SimpleStore({
	    fields: ['number'],
	    data: [['1'], ['2'], ['3'], ['4'], ['5'], ['6'], ['7'], ['8'], ['9'], ['10+']]
	});
	
	var classStore = new Ext.data.SimpleStore({
	    fields: ['class'],
	    data: [['Any class'], ['Economy'], ['Business'], ['First']]
	});
	
	var airlineStore = new Ext.data.JsonStore({
    	url: '/CommonServlet?action=getAirlineList',
    	root: 'results',
	    fields: ['id', 'company']
	});
    airlineStore.on('load', function(){
		var AirlineRecord = Ext.data.Record.create([ // creates a subclass of Ext.data.Record
		   'id', 'company'
		]);
		var newAirlineRecord = new AirlineRecord(
		    {
		        id: 'any',
		        company: 'Any airline'
		    }
		);
		airlineStore.insert(0, newAirlineRecord);
    	Ext.getCmp('at-request-form-airline').setValue(airline);
    });	

	//Create error window*****************************************************************************
    var errWindow = new Ext.Window({
        title: 'Invalid input!',
        width: 350,
        height:'auto',
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        closeAction: 'hide',
        html: '',

        buttons: [{
            text: 'Close',
            handler: function(){errWindow.hide()},
            scope: this
        }]
    });
	
	var errMsg = '';
	errWindow.on('show', function(){
		this.body.dom.innerHTML = "<div style='padding:10px;color:red;font: 12px;'>"+errMsg+"</div>";
	});
	
	var additional_info_count_err = false;	
	//handle submit*****************************************************************************************
	 var doSubmit = function(){
    	var isDepartureDateValid = Ext.getCmp('at-request-form-departure-date').isValid();
    	var isReturnDateValid = Ext.getCmp('at-request-form-return-date').isValid();
    	var isNameValid = Ext.getCmp('at-request-form-name').isValid();
    	var isEmailValid = Ext.getCmp('at-request-form-email').isValid();
    	var isPhoneValid = Ext.getCmp('at-request-form-phone').isValid();
    	if (!isDepartureDateValid || !isReturnDateValid || !isNameValid || !isEmailValid || !isPhoneValid) {
    		errMsg = 'Some fields contain errors. Please correct them first.';
    		errWindow.show();
    		return;
    	}
    	
    	if (additional_info_count_err) {
    		Ext.getCmp('at-request-form-other-requirements').markInvalid('Length is too long.');
    		errMsg = 'Some fields contain errors. Please correct them first.';
    		errWindow.show();
    		return;
    	}
    	
		var otherRequirementsCmp = Ext.getCmp('at-request-form-other-requirements');
		if(otherRequirementsCmp.getRawValue() == ''){
			Ext.getCmp('at-request-form-other-requirements').setRawValue('');
		}
		
		Ext.getCmp('submit-btn').disable();
		panel.form.submit({
			waitMsg:'Saving...', 
			timeout:120,
			reset: false, 
			failure: function(form, action) { 
				Ext.getCmp('submit-btn').enable();
				var msg = action.result.msg;
				Ext.Msg.show({
					title: 'Failure', 
					msg: '<span style="color:red">'+msg+'</span>',
					buttons: Ext.Msg.OK,
					minWidth: 400
				});
			}, 
			success: function(windowForm, action) { 
				var msg = action.result.msg;
				Ext.getCmp('at-request-form').destroy();
				Ext.Msg.show({
					title: 'Success', 
					msg: '<span style="color:green">'+msg+'</span>',
					buttons: Ext.Msg.OK,
					minWidth: 400
				});
			} 
		});
	 }
	
	var today = new Date().clearTime();
	var default_departure_date = new Date(today.setDate(today.getDate()+7)).clearTime();
	var default_return_date = new Date(today.setDate(today.getDate()+7)).clearTime(); 
	
	var noOfMonthsAhead = 12;
	var currentDate = new Date();
	var date = new Date();
	//define main view****************************************************************************************
    var panel = new Ext.FormPanel({
    	url:'/HotelServlet',
    	id:'at-request-form-panel',
        autoHeight: true,
        autoScroll: false,
        frame: true,
       	bodyStyle:'font-size:12px;padding:10px;',
        layout: 'column',
        labelAlign:'left',

        items: [
        	{
	        	columnWidth:1,
	        	bodyStyle:'font-size:12px;line-height:18px;',
	        	html:
	        		'<table width="100%" cellspacing="0" cellpadding="0">' +
	        			'<tr valign="top">' +
	        				'<td width="3%"><img src="/shared/sir/images/red-li.gif"/></td>' +
	        				"<td width='97%'>Call booking hotline <span style='color:red;'>(+65) 6438 7478</span> and quote 'Ninelogic' to get the best flight rate</td>" +
	        			'</tr>' +
	        			'<tr valign="top">' +
	        				'<td><img src="/shared/sir/images/red-li.gif"/></td>' +
	        				'<td>Or fill out the online enquiry form below. Our sales representatives will contact you shortly to discuss your requirements.</td>' +
	        			'</tr>' +
	        		'</table>'
        	},
        	{
	        	columnWidth:1,
	        	bodyStyle:'padding:15px 0 10px;font-size:13px;font-weight:bold;color: #385F95;',
	        	html:'Flight Info'
        	},
        	{
	        	columnWidth:1,
	        	html:'<table width="100%" cellpadding="0" cellspacing="0">' +
	        			'<tr>' +
	        				'<td width="17%">From - To:</td>' +
	        				'<td width="80%" style="font-size:13px;color:#A63737;"><b>'+from+' - '+to+'</b></td>' +
	        			'</tr>' +
	        		'</table>'
        	},
        	{
	        	columnWidth:1,
	        	bodyStyle:'padding:15px 0 10px;font-size:13px;font-weight:bold;color: #385F95;',
	        	html:'Your Details'
        	}
            ,{
            	columnWidth:.25,
            	layout:'form',
                items: [{
                    xtype:'combo',
                	width:44,
                	listWidth: 44,
                    fieldLabel: 'Contact name <span style="color:red;">*</span>',
                    store: titleStore,
				    displayField: 'title',
                    valueField: 'title',
				    mode: 'local',
				    editable: false,
				    triggerAction: 'all',
				    tpl: '<tpl for="."><div class="x-combo-list-item combo-list-item-lvl1">{title}</div></tpl>',
                    id: 'at-request-form-title',
                    name: 'at-request-form-title',
                    value: 'Mr.'
                }]
            }
            ,{
            	columnWidth:.27,
            	layout: 'form',
                items: [{
                    xtype:'textfield',
                    width: 104,
                    hideLabel: true,
                    allowBlank: false,
                    id: 'at-request-form-name',
                    name: 'at-request-form-name'
                }]
            }
            ,{
            	columnWidth:.48,
            	id:'contact-phone-no',
            	layout:'form',
                items: [{
                    xtype:'textfield',
                    width: 154,
                    fieldLabel: 'Phone number <span style="color:red;">*</span>',
                    allowBlank: false,
                    maxLength: 32,
                    id: 'at-request-form-phone',
                    name: 'at-request-form-phone'
                }]
            }
            ,{
            	columnWidth:.52,
            	layout: 'form',
                items: [{
                    xtype:'textfield',
                    width: 150,
                    fieldLabel: 'Email <span style="color:red;">*</span>',
                    allowBlank: false,
    				maxLength: 128,
    				validationDelay: validationDelayInMillis,
                    validator: function(value){
						return validateEmail(value);
					},
                    id: 'at-request-form-email',
                    name: 'at-request-form-email'
                }]
            }
            ,{
            	columnWidth:.48,
            	layout: 'form',
                items: [{
                    xtype:'textfield',
                    width: 154,
                    fieldLabel: 'Company',
                    id: 'at-request-form-company',
                    name: 'at-request-form-company'
                }]
            },
        	{
	        	columnWidth:1,
	        	bodyStyle:'padding:15px 0 10px;font-size:13px;font-weight:bold;color: #385F95;',
	        	html:'About Your Flights'
        	},
        	{
            	columnWidth:.52,
            	layout:'column',
            	items:[
		            {
		            	columnWidth:1,
		            	layout:'form',
		                items: [{
		                    xtype:'combo',
		                	width:150,
		                    fieldLabel: 'Type <span style="color:red;">*</span>',
		                    store: typeStore,
						    displayField: 'type',
		                    valueField: 'type',
						    mode: 'local',
						    editable: false,
						    triggerAction: 'all',
						    tpl: '<tpl for="."><div class="x-combo-list-item combo-list-item-lvl1">{type}</div></tpl>',
		                    id: 'at-request-form-type',
		                    name: 'at-request-form-type',
		                    value: type,
		                    listeners:{
		                    	'select': function(combo, rec, index) {
		                    		var value = combo.getValue();
		                    		if (value == 'Return') {
		                    			Ext.getCmp('at-request-form-return-date').enable();
		                    		} else if (value == 'One-way') {
		                    			Ext.getCmp('at-request-form-return-date').disable();
		                    		}
		                    	}
		                    }
		                }]
		            }
		            ,{
		            	columnWidth:1,
		            	layout:'form',
		                items: [{
		                    xtype:'datefield',
		                    fieldLabel: 'Departure date <span style="color:red;">*</span>',
		                    allowBlank: false,
		                    editable:false,
		                    width: 150,
		                    value:default_departure_date,
		                    minValue:currentDate.clearTime(),
		                    maxValue:new Date(date.setMonth(date.getMonth()+noOfMonthsAhead)).clearTime(),
		                    maxText:'It is too far from current date. Call our hotline (65)6699-7071 if you have special requests.',
		                    id: 'at-request-form-departure-date',
		                    name: 'at-request-form-departure-date'
		                    ,listeners:{
		                    	'select':function(df, departure_date) {
							      	var return_date = Ext.getCmp('at-request-form-return-date').getValue();
							      	if (departure_date >= return_date) {
							      		//check_in date is equal or latter than check_out date, adjust check_out date
							      		return_date = new Date(departure_date.getFullYear(), departure_date.getMonth(), departure_date.getDate()+7);
								      	Ext.getCmp('at-request-form-return-date').setValue(return_date);
								    }
		                    	}
		                    }
		                }]
		            }
		            ,{
		            	columnWidth:1,
		            	layout:'form',
		                items: [{
		                    xtype:'datefield',
		                    fieldLabel: 'Return date <span style="color:red;">*</span>',
		                    disabled:return_date_cb_disabled,
		                    allowBlank: false,
		                    editable:false,
		                    width: 150,
		                    value:default_return_date,
		                    minValue:currentDate.clearTime(),
		                    maxValue:new Date(date.setMonth(date.getMonth()+noOfMonthsAhead)).clearTime(),
		                    maxText:'It is too far from current date. Call our hotline (65)6699-7071 if you have special requests.',
		                    id: 'at-request-form-return-date',
		                    name: 'at-request-form-return-date'
		                    ,listeners:{
		                    	'select':function(df, return_date) {
							      	var departure_date = Ext.getCmp('at-request-form-departure-date').getValue();
							      	if (departure_date >= return_date) {
							      		//check_in date is equal or latter than check_out date, adjust check_in date
							      		departure_date = new Date(return_date.getFullYear(), return_date.getMonth(), return_date.getDate()-7);
								      	Ext.getCmp('at-request-form-departure-date').setValue(departure_date);
								    }
		                    	}
		                    }
		                }]
		            }
		            ,{
		            	columnWidth:1,
		            	layout:'form',
		                items: [{
		                    xtype:'combo',
		                	width:150,
		                    fieldLabel: 'Airline <span style="color:red;">*</span>',
		                    store: airlineStore,
						    displayField: 'company',
		                    valueField: 'id',
						    mode: 'local',
						    editable: false,
						    triggerAction: 'all',
						    tpl: '<tpl for="."><div class="x-combo-list-item combo-list-item-lvl1" ext:qtip="{company}">{company}</div></tpl>',
		                    id: 'at-request-form-airline',
		                    name: 'at-request-form-airline',
		                    value: airline
		                }]
		            }
		            ,{
		            	columnWidth:1,
		            	layout:'form',
		                items: [{
		                    xtype:'combo',
		                	width:150,
		                    fieldLabel: 'Class <span style="color:red;">*</span>',
		                    store: classStore,
						    displayField: 'class',
		                    valueField: 'class',
						    mode: 'local',
						    editable: false,
						    triggerAction: 'all',
						    tpl: '<tpl for="."><div class="x-combo-list-item combo-list-item-lvl1">{class}</div></tpl>',
		                    id: 'at-request-form-class',
		                    name: 'at-request-form-class',
		                    value: 'Economy'
		                }]
		            }
		            ,{
		            	columnWidth:1,
		            	layout:'form',
		                items: [{
		                    xtype:'combo',
		                	width:150,
		                    fieldLabel: 'Adults <span style="color:red;">*</span>',
		                    store: numberStore,
						    displayField: 'number',
		                    valueField: 'number',
						    mode: 'local',
						    editable: false,
						    triggerAction: 'all',
						    tpl: '<tpl for="."><div class="x-combo-list-item combo-list-item-lvl1">{number}</div></tpl>',
		                    id: 'at-request-form-number-of-adults',
		                    name: 'at-request-form-number-of-adults',
		                    value: '1'
		                }]
		            }
		            ,{
		            	columnWidth:1,
		            	layout:'form',
		                items: [{
		                    xtype:'combo',
		                	width:150,
		                    fieldLabel: 'Children <span style="color:red;">*</span>',
		                    store: numberStore,
						    displayField: 'number',
		                    valueField: 'number',
						    mode: 'local',
						    editable: false,
						    triggerAction: 'all',
						    tpl: '<tpl for="."><div class="x-combo-list-item combo-list-item-lvl1">{number}</div></tpl>',
		                    id: 'at-request-form-number-of-children',
		                    name: 'at-request-form-number-of-children',
		                    value: '0'
		                }]
		            }
		            ,{
		            	columnWidth:1,
		            	layout:'form',
		                items: [{
		                    xtype:'combo',
		                	width:150,
		                    fieldLabel: 'Infants <span style="color:red;">*</span>',
		                    store: numberStore,
						    displayField: 'number',
		                    valueField: 'number',
						    mode: 'local',
						    editable: false,
						    triggerAction: 'all',
						    tpl: '<tpl for="."><div class="x-combo-list-item combo-list-item-lvl1">{number}</div></tpl>',
		                    id: 'at-request-form-number-of-infants',
		                    name: 'at-request-form-number-of-infants',
		                    value: '0'
		                }]
		            }
            	]
        	}
            ,{
            	columnWidth:.48,
            	layout:'form',
            	labelAlign:'top',
                items: [{
                    xtype:'textarea',
                    border:false,
                    width: 260,
                    height: 184,
                    maxLength: maxLengthOtherRequirements,
                    fieldLabel: 'Additional Info (<span id="charcount">'+maxLengthOtherRequirements+'</span> chars left)',
                    emptyText: '',
                    id: 'at-request-form-other-requirements',
                    name: 'at-request-form-other-requirements',
                    enableKeyEvents:true,
                    value:'',
                    listeners: {
                    	'keyup': function(cmp, e) {
                    		var left = maxLengthOtherRequirements;
                    		var content = cmp.getValue();
                    		var textLength = content.length;
							for (var i=0; i<textLength; i++) {
								if (content.charCodeAt(i) >= 128) {
									left -= 3;
								} else {
									left -= 1;
								}
							}
						                    		
                    		if (left < 0) {
                    			additional_info_count_err = true;
                    			left = '<span style="color:red">'+left+'</span>';
                    		} else {
                    			additional_info_count_err = false;
                    		}
                    		Ext.get('charcount').dom.innerHTML = left;
                    	}
                    }
	                
                }]
            }
            ,{
            	columnWidth:1,
            	items:[
	            	{
		            	xtype:'hidden',
		            	value: 'saveAirTicketRequest',
		            	name: 'action'
	            	}
	            	,{
		            	xtype:'hidden',
		            	value: id,
		            	name: 'air-ticket-id'
	            	}
	            	,{
		            	xtype:'hidden',
		            	value: from,
		            	name: 'at-request-form-from'
	            	}
	            	,{
		            	xtype:'hidden',
		            	value: to,
		            	name: 'at-request-form-to'
	            	}
            	]
            }
            ,{
            	columnWidth:1,
            	height: 5
            }
	    ]
	    ,buttonAlign:'center'
	    ,buttons: [
	    	{
	    		id: 'submit-btn',
	    		minWdith:100,
	    		text: '<b>Submit</b>',
	    		handler: doSubmit
	    	},
	        {
	        	text: '<b>Close</b>',
	    		minWdith:100,
	            handler: function(){Ext.getCmp('at-request-form').destroy()}
	        }
	    ]
    });
    
    panel.on('render', function(){
    	airlineStore.load();
    });
    
	var win = Ext.getCmp('at-request-form');
	if (win) {
		win.show();
		return;
	}
	
	//Create window*****************************************************************************
    var fr_request_form = new Ext.Window({
    	id: 'at-request-form',
        title: '<span style="font-size:12px;">Flight Request Form</span>',
        width: 650,
        height:'auto',
        autoScroll:true,
        border:false,
        buttonAlign:'center',
		items:[
			panel
		]

    });
	fr_request_form.show();
	
	
	//validate email*******************************************************
	function validateEmail() {
		var cmp = Ext.getCmp('at-request-form-email');
		var email = cmp.getValue();
		if (email.length == 0) {
			return true;
		}
		var msg = checkEmail(email);
		if (msg.length != 0) {
			return msg;
		}
		return true;
	}

}