Ext.define('Abel.BookingForm', 
{
	initComponent: function () 
	{	
		var submitImage = new Image();
		submitImage.src = "/images-shared/book-now.png";
		
		var submitImageOn = new Image();
		submitImage.src = "/images-shared/book-now-on.png";					
		
		var iPickupDate = new Date(new Date().getTime() + 86400000);
		var iDropoffDate = new Date(new Date().getTime() + (2*86400000));				
		
		Ext.regModel('Locations', {
			fields: [
				{type: 'string', name: 'id'},
				{type: 'string', name: 'displayText'}
			]
		});
		
		var strLocations = Ext.create('Ext.data.Store', 
		{ //create handle to store
			model: 'Locations',
			proxy: {
					type: 'ajax',
					url: 'services/store_locations.php',
					reader: {
						type: 'json',
						root: 'rows'
					}
			},
			autoLoad: true
			//data: states
		});
		
		Ext.regModel('Vehicles', {
			fields: [
				{type: 'string', name: 'id'},
				{type: 'string', name: 'displayText'}
			]
		});
		
		var strVehicles = Ext.create('Ext.data.Store', 
		{ //create handle to store
			model: 'Vehicles',
			proxy: {
					type: 'ajax',
					url: 'services/vehicles.php',
					reader: {
						type: 'json',
						root: 'rows'
					}
			},
			autoLoad: true
			//data: states
		});
			
		//BEGIN FORM CONTROLS
		var lblPersonalInfo = new Ext.form.field.Display({
			fieldLabel: '',
			height: 20,
			value: '<img src="/images-shared/personal-information2.png" border="0">'
		});
		
		var txtName = new Ext.form.field.Text({
			allowBlank: true,
			emptyText: 'Name',
			blankText: "Please enter your name",
			listeners: {
				'afterrender': function(thisField)
				{
					thisField.setValue(unescape(this.ownerCt.gup('renter_name')));
				}
			}
		});
		
		var txtPhone = new Ext.form.field.Text({
			allowBlank: true,
			emptyText: 'Phone #',
			blankText: "Please enter your name",
			listeners: {
				'afterrender': function(thisField)
				{
					thisField.setValue(unescape(this.ownerCt.gup('renter_phone')));
				}
			}
		});
		
		var txtEmail = new Ext.form.field.Text({
			allowBlank: true,
			emptyText: 'Email',
			blankText: "Please enter your name",
			listeners: {
				'afterrender': function(thisField)
				{
					thisField.setValue(unescape(this.ownerCt.gup('email')));
				}
			}
		});
		
		/*
		var lblSelectLocation = new Ext.form.field.Display({
			fieldLabel: '',
			padding: '0px',
			value: '<div style="background:url(\'/images-shared/booking-widget-select-location.png\');height:40px; width:203px;"></div>'
		});
		*/
		
		/*
		var lblVehicle = new Ext.form.field.Display({
			fieldLabel: '',
			padding: '0px',
			value: '<div style="background:url(\'/images-shared/booking-widget-vehicle.png\');height:27px; width:50px;"></div>'
		});
		
		var cmbVehicles = new Ext.form.field.ComboBox({
			emptyText: 'Select Vehicle...',
			forceSelection: true,
			hideLabel: true,
			queryMode: 'remote',
			store: strVehicles,
			valueField: 'id',
			displayField: 'displayText',
			padding: '0px 0px 0px 30px',
			listeners:{
				 scope: this,
				 'select': function ()
				 {
					this.vehicle_class = this.cmbVehicles.value;
				 }
			}
		});
		*/
		
		var lblPickupInfo = new Ext.form.field.Display({
			fieldLabel: '',
			padding: '20px 0px 0px 0px',
			//value: '<img src="/images-shared/booking-widget-pickup-location.png" border="0">'
			value: '<div style="background:url(\'/images-shared/booking-widget-pickup-location.png\');height:30px; width:125px;"></div>'
		});
		
		var cmbPickupLocation = new Ext.form.field.ComboBox({
			emptyText: 'Select Pickup Location...',
			forceSelection: true,
			hideLabel: true,
			queryMode: 'remote',
			store: strLocations,
			valueField: 'id',
			displayField: 'displayText',
			padding: '0px 0px 0px 30px',
			listeners:{
				 scope: this,
				 'select': function ()
				 {
					this.pickup_loc = this.cmbPickupLocation.value;
					this.return_loc = this.cmbPickupLocation.value;
					
					this.cmbDropoffLocation.setRawValue(this.cmbPickupLocation.getRawValue());
					
					//Ext Query to get time
					Ext.Ajax.request({
						url : 'services/services.php' , 
						params : { service : 'GET_STORE_TIMES', store_code: this.pickup_loc },
						method: 'POST',
						success: function ( result, request ) { 
							var data = result.responseText.split(";");
							var timeArr = [];
							
							for (var i = 0; i < data.length; i++)
							{
								if (data[i].length > 0)
								{
									var tmpData = data[i].split(",");
									var frmBook = Ext.getCmp('frmBook');									
									
									if (frmBook) //is not undefined
									{										 
										frmBook.cmbPickupTime.setMaxValue(frmBook.convertMilitarytoDatestring(tmpData[1]));
										frmBook.cmbPickupTime.setMinValue(frmBook.convertMilitarytoDatestring(tmpData[0]));
										
										frmBook.cmbDropoffTime.setMaxValue(frmBook.convertMilitarytoDatestring(tmpData[1]));
										frmBook.cmbDropoffTime.setMinValue(frmBook.convertMilitarytoDatestring(tmpData[0]));
									}
								}
							}
							
							
							
						},
						failure: function ( result, request) { 
							Ext.MessageBox.alert('Load Failed', 'You are leaving the page before it has finished loading... <br>Please wait...'); 
						} 
					});
				 }
			}

		});				

		var dtePickup = new Abel.MultiMonthCalendar(
		{
			value: iPickupDate,
			format: 'd/m/Y',
			emptyText: 'Select Pickup Time...',
			allowBlank: false,
			fieldLabel: '',
			name: 'startdt',
			id: 'startdt',
			padding: '0px 0px 0px 30px',
			listeners:
			{
				select: function(thisField, thisValue)
				{
					var dateArr = thisField.getSubmitValue().split('/');
					this.ownerCt.pickup_day = dateArr[0];
					this.ownerCt.pickup_month = dateArr[1];
					this.ownerCt.pickup_year = dateArr[2];
					dteDropoff.setMinValue(thisValue);					
				}
			}
		});
		
		var cmbPickupTime = new Ext.form.field.Time({
			emptyText: 'Select Pickup Time...',
			allowBlank: false,
			fieldLabel: '',
			minValue: '7:00 AM',			
			maxValue: '7:00 PM',
			value: "12:00 PM",
			increment: 30,
			padding: '0px 0px 0px 30px',
			listeners:{
				 scope: this,
				 'select': function ()
				 {
					if (!this.cmbPickupTime.getSubmitValue())
						return;
						
					var timeArr = this.cmbPickupTime.getSubmitValue().split(":");
					var tmpTime = timeArr[1].split(" ");
					timeArr[1] = tmpTime[0];   
					timeArr[2] = tmpTime[1];
					//[0] = hours, [1] = mins, [2] = am/pm; convert to 24 hr
					
					if ((timeArr[2] == "PM") && (timeArr[0] != '12'))
						timeArr[0] = parseInt(timeArr[0]) + 12;
					else if ((timeArr[2] == "AM") && (parseInt(timeArr[0]) < 10))
						timeArr[0] = '0' + timeArr[0];
						
					this.pickup_time = timeArr[0] + ":" + timeArr[1];
				 }
			}
		});
		
		var lblDropoffInfo = new Ext.form.field.Display({
			fieldLabel: '',
			padding: '15px 0px 0px 0px',
			//value: '<img src="/images-shared/booking-widget-dropoff-location.png" border="0">'
			value: '<div style="background:url(\'/images-shared/booking-widget-dropoff-location.png\');height:30px; width:130px;"></div>'
		});
		
		var cmbDropoffLocation = new Ext.form.field.ComboBox({
			emptyText: 'Select Dropoff Location...',
			forceSelection: true,
			hideLabel: true,
			queryMode: 'remote',
			store: strLocations,
			valueField: 'id',
			displayField: 'displayText',
			padding: '0px 0px 0px 30px',
			listeners:{
				 scope: this,
				 'select': function ()
				 {
					this.return_loc = this.cmbDropoffLocation.value;
					
					//Ext Query to get time
					Ext.Ajax.request({
						url : 'services/services.php' , 
						params : { service : 'GET_STORE_TIMES', store_code: this.return_loc },
						method: 'POST',
						success: function ( result, request ) { 
							var data = result.responseText.split(";");
							var timeArr = [];
							
							for (var i = 0; i < data.length; i++)
							{
								if (data[i].length > 0)
								{
									var tmpData = data[i].split(",");
									var frmBook = Ext.getCmp('frmBook');									
									
									if (frmBook) //is not undefined
									{										 
										frmBook.cmbDropoffTime.setMaxValue(frmBook.convertMilitarytoDatestring(tmpData[1]));
										frmBook.cmbDropoffTime.setMinValue(frmBook.convertMilitarytoDatestring(tmpData[0]));
									}
								}
							}
							
							
							
						},
						failure: function ( result, request) { 
							Ext.MessageBox.alert('Load Failed', 'You are leaving the page before it has finished loading... <br>Please wait...'); 
						} 
					});
				 }
			}
		});				
		
		var dteDropoff = new Abel.MultiMonthCalendar(
		{
			value: iDropoffDate,
			format: 'd/m/Y',
			emptyText: 'Select Pickup Time...',
			allowBlank: false,
			fieldLabel: '',
			id: 'enddt',
			name: 'enddt',
			padding: '0px 0px 0px 30px',
			listeners:
			{
				select: function(thisField, thisValue)
				{	
					var dateArr = thisField.getSubmitValue().split('/');
					this.ownerCt.return_day = dateArr[0];
					this.ownerCt.return_month = dateArr[1];
					this.ownerCt.return_year = dateArr[2];
					dtePickup.setMaxValue(thisValue);
				}
			}
		});
		
		var cmbDropoffTime = new Ext.form.field.Time({
			emptyText: 'Select Dropoff Time...',
			allowBlank: false,
			fieldLabel: '',
			minValue: '7:00 AM',			
			maxValue: '7:00 PM',
			value: "12:00 PM",
			increment: 30,
			height: 30,
			padding: '0px 0px 0px 30px',
			listeners:{
				 scope: this,
				 'select': function ()
				 {
					if (!this.cmbDropoffTime.getSubmitValue())
						return;
						
					var timeArr = this.cmbDropoffTime.getSubmitValue().split(":");
					var tmpTime = timeArr[1].split(" ");
					timeArr[1] = tmpTime[0];   
					timeArr[2] = tmpTime[1];
					//[0] = hours, [1] = mins, [2] = am/pm; convert to 24 hr
					
					if ((timeArr[2] == "PM") && (timeArr[0] != '12'))
						timeArr[0] = parseInt(timeArr[0]) + 12;
					else if ((timeArr[2] == "AM") && (parseInt(timeArr[0]) < 10))
						timeArr[0] = '0' + timeArr[0];
						
					this.return_time = timeArr[0] + ":" + timeArr[1];
				 }
			}
		});
		
		var lblYourAge = new Ext.form.field.Display({
			fieldLabel: '',
			padding: '10px 0px 0px 0px',
			//value: '<img src="/images-shared/booking-widget-your-age.png" border="0">'
			value: '<div style="background:url(\'/images-shared/booking-widget-your-age.png\');height:30px; width:90px;"></div>'
		});
		
		var rdgAge = new Ext.form.FieldContainer(
		{		
			fieldLabel : '',//'Age',
			width: 170,
			labelWidth: 30,
			padding: '0px 0px 0px 35px',
			defaultType: 'radiofield',
			defaults: {
				flex: 1
			},
			layout: 'hbox',
			items: [
				{
					boxLabel  : '21-24',
					name      : 'age',
					inputValue: '21|24',
					id        : 'rdoYoung',
					value	  : false
				}, {
					boxLabel  : '25-75',
					name      : 'age',
					inputValue: '25|75',
					id        : 'rdoOld',
					value	  : true,
					checked: true,
					listeners: {
						'change': function(thisField, newValue, oldValue)
						{
							if (newValue)
								this.ownerCt.ownerCt.renter_age_range = "25|75";
							else
								this.ownerCt.ownerCt.renter_age_range = "21|24";
						}
					}
				}
			]
		});
		
		var btnSubmit = new Ext.button.Button({	
			cls : 'submit-button-image',
			overCls: 'submit-button-image-over',
			height: 38,
			style: 'margin-left: 30px;',
			width: 150,
			listeners: {
				click: function() {
					var url = 'pickup_loc=' + this.ownerCt.pickup_loc + '&pickup_day=' + this.ownerCt.pickup_day + '&pickup_month=' + this.ownerCt.pickup_month + '&pickup_year=' + this.ownerCt.pickup_year + '&pickup_time=' + this.ownerCt.pickup_time + '&return_loc=' + this.ownerCt.return_loc + '&return_day=' + this.ownerCt.return_day + '&return_month=' + this.ownerCt.return_month + '&return_year=' + this.ownerCt.return_year + '&return_time=' + this.ownerCt.return_time + '&renter_age_range=' + this.ownerCt.renter_age_range;
					
					if (this.ownerCt.vehicle_class)
						url += '&vehicle_class=' + this.ownerCt.vehicle_class;
					
					//if (this.ownerCt.corp_rate_id)
					//	url += '&corp_rate_id=' + this.ownerCt.corp_rate_id;
			
					//check name/phone/email
					//window.location = this.ownerCt.getBaseURL() + 'reservations.php?' + url;					
					window.location = 'https://www.abel.com.au/reservations.php?' + url;					
				}
			}
		});
		
		var lblPrivacyPage = new Ext.form.field.Display({
			fieldLabel: '',
			width: 200,
			height: 25,
			labelStyle: 'color: red;',
			value: '<div onMouseOver="this.style.cursor=\'pointer\'" onMouseOut="this.style.cursor=\'auto\'" onClick="window.open(\'http://www.abel.com.au/privacy-policy.php\');">Privacy Policy</div>'
		});
		
		var config = {		
			//initial Values
			storeInfo: [],			
			vehicle_class: 'CCAR',
			//cmbVehicles: cmbVehicles,
			pickup_loc: '000400',						
			pickup_day: ('0' + iPickupDate.getDate()).slice(-2),//format day properly
			pickup_month: ('0' + (iPickupDate.getMonth() + 1)).slice(-2),
			pickup_year: iPickupDate.getFullYear(),
			pickup_time: '12:00',
			return_loc: '000400',
			return_day: ('0' + iDropoffDate.getDate()).slice(-2),
			return_month: ('0' + (iDropoffDate.getMonth() + 1)).slice(-2),
			return_year: iDropoffDate.getFullYear(),
			return_time: '12:00',
			renter_age_range: '25|75',
			cmbPickupLocation: cmbPickupLocation,  //create extra handle to these functions
			cmbDropoffLocation: cmbDropoffLocation,
			cmbPickupTime: cmbPickupTime,
			cmbDropoffTime: cmbDropoffTime,
			rdgAge: rdgAge,
			dteDropoff: dteDropoff,
			dtePickup: dtePickup,
			//items: [lblSelectLocation, lblPickupInfo, cmbPickupLocation, dtePickup, cmbPickupTime, lblDropoffInfo, cmbDropoffLocation, dteDropoff, cmbDropoffTime, lblYourAge, rdgAge, btnSubmit]
			items: [lblPickupInfo, cmbPickupLocation, dtePickup, cmbPickupTime, lblDropoffInfo, cmbDropoffLocation, dteDropoff, cmbDropoffTime, lblYourAge, rdgAge, btnSubmit]
		};					
		
		Ext.apply(this, Ext.apply(this.initialConfig, config));
		Abel.BookingForm.superclass.initComponent.apply(this, arguments);	
		
		//load default vals
		this.loadDefaults();
	},
	extend: 'Ext.form.Panel',
	alias: 'widget.bookingform',
	
	//form specific config
	frame       : false,
	bodyBorder	: false,
	border		: false,
	//bodyStyle	: 'background-color: #e1f4fa; background-image: url(images/quote-person.png); background-repeat: no-repeat;	background-position: right bottom;',
	//bodyStyle	: 'background-color: #FFFFFF;',
	title: '',
	id: 'frmBook',
	autoScroll: false,
	fieldDefaults: {
		width: 150,
		labelAlign: 'left',
		labelWidth: 0//,
		//anchor: '100%'
	},
	//Custom Functions
	loadDefaults: function()
	{
		if (this.gup('corp_rate_id'))
			this.corp_rate_id = this.gup('corp_rate_id');
		
		if (this.gup('vehicle_class'))
			this.vehicle_class = this.gup('vehicle_class');
		
		if ((this.getAllUrlParams() && !this.corp_rate_id) || (this.corp_rate_id && (this.getAllUrlParams().length > 50)))
		{
			this.pickup_loc = this.gup('pickup_loc');
			this.pickup_day = this.gup('pickup_day');
			this.pickup_month = this.gup('pickup_month');
			this.pickup_year = this.gup('pickup_year');
			this.pickup_time = this.gup('pickup_time');
			this.return_loc = this.gup('return_loc');
			this.return_day = this.gup('return_day');
			this.return_month = this.gup('return_month');
			this.return_year = this.gup('return_year');
			this.return_time = this.gup('return_time');			
			this.renter_age_range = this.gup('renter_age_range');							
			
			this.dtePickup.setValue(this.pickup_day + '/' + this.pickup_month + '/' + this.pickup_year);
			this.dteDropoff.setValue(this.return_day + '/' + this.return_month + '/' + this.return_year);
			
			this.cmbPickupTime.setValue(this.convert24Hto12(this.pickup_time));
			this.cmbDropoffTime.setValue(this.convert24Hto12(this.return_time));
			
			
			if (this.renter_age_range == "25|75")
			{
				ageCmp = Ext.getCmp('rdoOld');
				ageCmp.setValue(true);
			}else
			{
				ageCmp = Ext.getCmp('rdoYoung');
				ageCmp.setValue(true);
			}
			
			//load store_code to store_name array
			//fill in the store data
			Ext.Ajax.request({
				url : 'services/services.php' , 
				params : { service : 'GET_STORE_LIST' },
				method: 'POST',
				scope: this,
				success: function ( result, request ) { 
					var data = result.responseText.split(";");
					
					for (var i = 0; i < data.length; i++)
					{				
						if (data[i].length > 0)
						{
							var tmpData = data[i].split(",");
							this.storeInfo.push([tmpData[1], tmpData[0]]);						
						}
					}
					
					this.cmbPickupLocation.setRawValue(this.convertStoreCodeToStoreName(this.pickup_loc));
					this.cmbDropoffLocation.setRawValue(this.convertStoreCodeToStoreName(this.return_loc));
				},
				failure: function ( result, request) { 
					Ext.MessageBox.alert('Load Failed', 'You are leaving the page before it has finished loading... <br>Please wait...'); 
				} 
			});
		}else
		{
			this.cmbPickupLocation.setRawValue('Brisbane Airport');
			this.cmbDropoffLocation.setRawValue('Brisbane Airport');
			//this.cmbVehicles.setRawValue('Small Car - Getz');
		}
		
		
	},
	getAllUrlParams: function()
	{
		var url = window.location.href;
		return url.split("?", 2)[1];  //return everything after ? in url
	},
	gup: function(name)
	{
		name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
		var regexS = "[\\?&]"+name+"=([^&#]*)";
		var regex = new RegExp( regexS );
		var results = regex.exec( window.location.href );
		if( results == null )
			return "";
		else
			return results[1];
	},
	convert24Hto12: function(time)
	{
		var timeArr = time.split(":");
		var timeSuffix = '';
		
		if (parseInt(timeArr[0]) > 12)
		{
			timeArr[0] = parseInt(timeArr[0]) - 12;
			timeSuffix = ' PM';
		}else if (parseInt(timeArr[0]) < 12)
			timeSuffix = ' AM';
		else
			timeSuffix = ' PM';
			
		return timeArr[0] + ':' + timeArr[1] + timeSuffix;
	},
	convertStoreCodeToStoreName: function(store_code)
	{
		for (var i = 0; i < this.storeInfo.length; i++)
		{
			if (this.storeInfo[i][0] == store_code)
				return this.storeInfo[i][1];
		}		
	},
	convertMilitarytoDatestring: function(time)
	{
		var hour = time[0] + time[1];
		var minute = time[2] + time[3];
		var dateString = " am";
		if (parseInt(hour) > 12)
		{
			hour = parseInt(hour) - 12;
			dateString = " pm";
		}
		
		return hour + ":" + minute + dateString;
	},
	showVehicle: function(vehicle_id, vehicle_image, vehicle_title)
	{
		strHTML = '<div style="height:10px;"></div><div id="veh-choice" style="width:275px;"><span class="veh-choice-header">Your chosen vehicle - ' + vehicle_title + '</span><center><img src="http://www.abel.com.au/images/' + vehicle_image + '"></center></div>';
		var lblAddedVehicle = Ext.getCmp('lblAddedVehicle');
		if (lblAddedVehicle)
		{
			lblAddedVehicle.setValue(strHTML);
		}else
		{
			this.add([
				{	
					xtype: 'displayfield',
					fieldLabel: '',
					id: 'lblAddedVehicle',
					value: strHTML
				}
			]);
			
			this.setHeight(580);
			document.getElementById("booking-widget-box").style.height = '580px';		
		}
		
		this.vehicle_class = vehicle_id;
	},
	getBaseURL: function()
	{
		var url = location.href;  // entire url including querystring - also: window.location.href;
		var baseURL = url.substring(0, url.indexOf('/', 14));

		if (baseURL.indexOf('http://localhost') != -1) {
			// Base Url for localhost
			var url = location.href;  // window.location.href;
			var pathname = location.pathname;  // window.location.pathname;
			var index1 = url.indexOf(pathname);
			var index2 = url.indexOf("/", index1 + 1);
			var baseLocalUrl = url.substr(0, index2);

			return baseLocalUrl + "/";
		}
		else {
			// Root Url for domain name
			return baseURL + "/";
		}
	}
});