fp = {
	init:function()
	{
		//alert("test");
		// Check to see if W3C DOM is available - if not terminate script
		// If required objects are available, hide js alert and show update form
		if(!document.getElementById || !document.createTextNode){return;}
		var container = document.getElementById("updatenumberform");
		var container2 = document.getElementById("javascript_alert");
		var container3 = document.getElementById("additional_number");
		//alert("test");
		if(container)
		{
			// If the 'hidden_content' element is availabe (we've got this far , so it must be) - apply a dynamic style
			// to hide it (display:none)
			fp.cssjs('remove', container, "hide_form");
			fp.cssjs('add', container2, "hide_form");
	
			// Add the onclick event behaviour to the dropdown menue
			fp.addEvent(container3, 'change', fp.createAdditionalField, false);
			// Add the onclick event behaviour to the dropdown menue
			fp.addEvent(container, 'submit', fp.checkAdditionalField, false);
		}
	},
	
	// Create additional name fields on booking pages (if users want to make multiple bookings)
	createAdditionalField:function() 
	{
		var container4 = document.getElementById("extra_bookings_header");
		fp.cssjs('remove', container4, "hide_form");
		var container = document.getElementById("update_booking_button");
		fp.cssjs('remove', container, "hide_form");
		
		// Obtain and set parent node (so we know where to place the additional nodes within the doc)
		var parentDiv = document.getElementById('shopping-table');
		var lastRow = parentDiv.rows.length -1;
		//var parentNodeRef = parentDiv.parentNode;
		
		// Get number of additional bookings (needed for a loop that creates each form element)
		var additionalNumber = document.getElementById('additional_number').value;
		
		if (additionalNumber ==0)
		{
			fp.cssjs('add', container, "hide_form");
		}
		// Insert headings for additional bookings section
/*		row.setAttribute("class", "titleCell");
		var row = parentDiv.insertRow(lastRow);
		// Create firstname td node
		var tdElement = document.createElement("td");
		tdElement.setAttribute("class", "titleCellEvents");
		var cellText = document.createTextNode('Firstname');
		tdElement.appendChild(cellText);
		row.appendChild(tdElement);
*/		// Insert headings for additional bookings section


		
		// Loop through inserting number of additional fields
		for (var x = 1; x <= additionalNumber; x++)
		{
			// If the form element doesnt already exist, create it
			if (!document.getElementById("firstname_"+x))
			{
				var row = parentDiv.insertRow(lastRow);
				var trIdName = 'my'+x+'Div';
				// Set id of row
				row.setAttribute('id',trIdName);
				row.setAttribute('class','additionalBookingsCell');
				// You have to put an inline style for the background colour (for IE)
				row.style.backgroundColor = '#F1ECE9';
				//row.style.border  = "1px solid black";

				
				// Create firstname td node
				var tdElement = document.createElement("td");
				tdElement.style.borderBottom  = "1px solid #FFFFFF";
				var formFieldElement = document.createElement("input");
				formFieldElement.setAttribute("id", "firstname_"+x);
				formFieldElement.setAttribute("name", "firstname_"+x);
				tdElement.appendChild(formFieldElement);
				row.appendChild(tdElement);
				// Create firstname td node
				// Create surname td node
				var tdElement = document.createElement("td");
				tdElement.style.borderBottom  = "1px solid #FFFFFF";
				var formFieldElement = document.createElement("input");
				formFieldElement.setAttribute("id", "surname_"+x);
				formFieldElement.setAttribute("name", "surname_"+x);
				tdElement.appendChild(formFieldElement);
				row.appendChild(tdElement);
				// Create surname td node
				// Create email td node
				var tdElement = document.createElement("td");
				tdElement.style.borderBottom  = "1px solid #FFFFFF";
				var formFieldElement = document.createElement("input");
				formFieldElement.setAttribute("id", "email_"+x);
				formFieldElement.setAttribute("name", "email_"+x);
				tdElement.appendChild(formFieldElement);
				row.appendChild(tdElement);
				// Create email td node
				// Create phone td node
				var tdElement = document.createElement("td");
				tdElement.style.borderBottom  = "1px solid #FFFFFF";
				var formFieldElement = document.createElement("input");
				formFieldElement.setAttribute("id", "phone_"+x);
				formFieldElement.setAttribute("name", "phone_"+x);
				tdElement.appendChild(formFieldElement);
				row.appendChild(tdElement);
				// Create phone td node	
				//////////////////////////////////////////////////////////////
				// Create gender td node
				var tdElement = document.createElement("td");
				tdElement.style.borderBottom  = "1px solid #FFFFFF";
					//tdElement.setAttribute("colSpan", "3");
				
//					var tableGenderElement = document.createElement("table");
//					tableGenderElement.setAttribute("border", "1");
//					var tableBodyGenderElement = document.createElement("tbody");
//					var trGenderElement = document.createElement("tr");
//					var tdGenderElement = document.createElement("td");
				
				// IE doesnt support creating a form radio button properly so create it differently
				if(window.ActiveXObject)
				{
					var formradioMaleElement =  document.createElement("<input type='radio' name='gender_"+x+"' id='gender_male_"+x+"' value='male' style='width: 20px;'>");	
				}else
				{
					var formradioMaleElement = document.createElement("input");
					formradioMaleElement.type="radio";
					formradioMaleElement.setAttribute("id", "gender_male_"+x);
					formradioMaleElement.setAttribute("name", "gender_"+x);
					formradioMaleElement.setAttribute("value", "male");
				}
				var gendertext = document.createTextNode('Male');
				tdElement.appendChild(gendertext);
				tdElement.appendChild(formradioMaleElement);
//				tdGenderElement.appendChild(gendertext);
//				tdGenderElement.appendChild(formradioMaleElement);
//				
//				trGenderElement.appendChild(tdGenderElement);
//				tableBodyGenderElement.appendChild(trGenderElement);
//				tableGenderElement.appendChild(tableBodyGenderElement);
//				row.appendChild(tableGenderElement);
//				
//				var trGenderElement = document.createElement("tr");
//				var tdGenderElement = document.createElement("td");
				
				if(window.ActiveXObject)
				{
					var formradioFemaleElement =  document.createElement("<input type='radio' name='gender_"+x+"' id='gender_female_"+x+"' value='female' style='width: 20px;'>");	
				}else
				{
					var formradioFemaleElement = document.createElement("input");
					formradioFemaleElement.type="radio";
					formradioFemaleElement.setAttribute("id", "gender_female_"+x);
					formradioFemaleElement.setAttribute("name", "gender_"+x);
					formradioFemaleElement.setAttribute("value", "female");
				}
				var gendertext = document.createTextNode('Female');
				tdElement.appendChild(gendertext);
				tdElement.appendChild(formradioFemaleElement);
//					tdGenderElement.appendChild(gendertext);
//					tdGenderElement.appendChild(formradioFemaleElement);
//					
//					trGenderElement.appendChild(tdGenderElement);
//					tableBodyGenderElement.appendChild(trGenderElement);
//					tableGenderElement.appendChild(tableBodyGenderElement);
//					row.appendChild(tableGenderElement);
				 row.appendChild(tdElement);
				// Create gender td node
				//////////////////////////////////////////////////////////////
			}
		}
		//alert (x);
		var maximum_number = x;
		// Loop through inserting number of additional fields
		for (var y = maximum_number; y <= 50; y++)
		{
			if (document.getElementById("firstname_"+y))
			{
				var divIdName = 'my'+y+'Div';
				var d = document.getElementById("updatenumberform");
				var olddiv = document.getElementById(divIdName);

				var tbl = document.getElementById('shopping-table');
				var lastRow = tbl.rows.length;
				tbl.deleteRow(lastRow - 2);
			}
		}
	},
	// Check additional name fields are filled in
	checkAdditionalField : function(e) 
	{ 
		missinginfo_firstname = '';
		missinginfo_surname = '';
		missinginfo_gender = '';
		var status = true;
		for (var y = 1; y <= 50; y++)
		{
			if (document.getElementById("firstname_"+y)) 
			{
				if (!document.getElementById("firstname_"+y).value) 
				{
					missinginfo_firstname = 'You must include firstnames\n';
					status = false;
				}
			}
			if (document.getElementById("surname_"+y)) 
			{
				if (!document.getElementById("surname_"+y).value) 
				{
					missinginfo_surname = 'You must include surnames\n';
					status = false;
				}
			}
			if (document.getElementById("gender_female_"+y)) 
			{

				if (!(document.getElementById("gender_female_"+y).checked || document.getElementById("gender_male_"+y).checked)) 
				{
					missinginfo_gender = 'You must select a gender\n';
					status = false;
				}
			}
		}
		if(status)
		{
			return true;
		}
		alert(missinginfo_firstname + missinginfo_surname + missinginfo_gender);
		// VERY IMPORTANT - We need to use the custom cancelClick function to prevent the function from submitting
		// Usually - when using JS inline - we would apply false to the function to tell the browser not to run it
		// We cannot use this with unobtrusive JS so we use the cancelClick function return false
		fp.cancelClick(e);
	},
	/************************************* helper methods ********************************************************/
	addEvent: function(elm, evType, fn, useCapture)
	{
		if (elm.addEventListener) 
		{
			elm.addEventListener(evType, fn, useCapture);
			return true;
		} else if (elm.attachEvent) {
			var r = elm.attachEvent('on' + evType, fn);
			return r;
		} else {
			elm['on' + evType] = fn;
		}
	},
	
	// cssjs mthod that adds, removes or swaps classes
	// see http://www.onlinetools.org/articles/unobtrusivejavascript/cssjsseparation.html
	cssjs:function(a,o,c1,c2)
	{
		switch (a)
		{
			case 'swap':
				o.className=!fp.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
			break;
			case 'add':
				if(!fp.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
			break;
			case 'remove':
				var rep=o.className.match(' '+c1)?' '+c1:c1;
				o.className=o.className.replace(rep,'');
			break;
			case 'check':
				return new RegExp("(^|\\s)" + c1 + "(\\s|$)").test(o.className)
			break;
		}
	},
	// Use cancelClick method to cancel 'event bubbling' and default actions associated to elements
	cancelClick:function(e)
	{
		if (window.event)
		{
			window.event.cancelBubble = true;
			window.event.returnValue = false;
			return;
		}
		if (e)
		{
			e.stopPropagation();
			e.preventDefault();
		}
	}
}
// addEvent is a method used to sort of stack functions up after the page has loaded.
// On this page this method is watching the window and waiting till its loaded.
// After which the fp.init object is initialized
fp.addEvent(window, 'load', fp.init, false);