//Requires ajax object
include('ajax.js');
include('xml.js');

function orderFormOB() {
	this.state = new Object;
	this.state.XML = null;
	this.restoreState = function() {
		//Restore state
		var orderFormXML = document.getElementById('orderFormXML');
		if(orderFormXML.value == "") {
			//No xmlz, Create a new document
			
			this.state.XML = XML.newDocument();

			var element					= this.state.XML.createElement('grid');
			this.state.grid				= this.state.XML.createTextNode('');
			element.appendChild(this.state.grid);
			this.state.XML.documentElement.appendChild(element);
			
			var element					= this.state.XML.createElement('package');
			this.state.package			= this.state.XML.createTextNode('');
			element.appendChild(this.state.package);
			this.state.XML.documentElement.appendChild(element);
			
			this.state.regions			= this.state.XML.createElement('regions');
			this.state.XML.documentElement.appendChild(this.state.regions);

			var element					= this.state.XML.createElement('avatar');
			this.state.avatar			= this.state.XML.createTextNode('');
			element.appendChild(this.state.avatar);
			this.state.XML.documentElement.appendChild(element);

			var element					= this.state.XML.createElement('joinContinent');
			this.state.joinContinent	= this.state.XML.createTextNode('0');
			element.appendChild(this.state.joinContinent);
			this.state.XML.documentElement.appendChild(element);
		
			var element					= this.state.XML.createElement('localAssets');
			this.state.localAssets		= this.state.XML.createTextNode('0');
			element.appendChild(this.state.localAssets);
			this.state.XML.documentElement.appendChild(element);
			
			var element					= this.state.XML.createElement('experimental');
			this.state.experimental		= this.state.XML.createTextNode('0');
			element.appendChild(this.state.experimental);
			this.state.XML.documentElement.appendChild(element);
			
			var element					= this.state.XML.createElement('promotional');
			this.state.promotional		= this.state.XML.createTextNode('');
			element.appendChild(this.state.promotional);
			this.state.XML.documentElement.appendChild(element);
			
			var element					= this.state.XML.createElement('special');
			this.state.special			= this.state.XML.createTextNode('');
			element.appendChild(this.state.special);
			this.state.XML.documentElement.appendChild(element);
		
			//alert((new XMLSerializer()).serializeToString(this.state.XML));
			
		} else {
			//Parse the xml document
			
			var xmlData = unescape(orderFormXML.value);
			
			this.state.XML = XML.parse(xmlData);

			for(var i = 0; i < this.state.XML.documentElement.childNodes.length; i++) {
				var node = this.state.XML.documentElement.childNodes[i];

				switch(node.tagName) {
					case('grid'):
						this.state.grid 	= node.childNodes[0];
						break;
					case('package'):
						this.state.package 	= node.childNodes[0];
						break;
					case('regions'):
						this.state.regions	= node;
						break;
					case('joinContinent'):
						this.state.joinContinent = node.childNodes[0];
						break;
					case('localAssets'):
						this.state.localAssets = node.childNodes[0];
						break;
					case('experimental'):
						this.state.experimental = node.childNodes[0];
						break;
					case('promotional'):
						this.state.promotional	= node.childNodes[0];
						break;
					case('special'):
						this.state.special		= node.childNodes[0];
						break;
					case('avatar'):
						this.state.avatar		= node.childNodes[0];
						break;
				}
			}
			
			if(this.state.grid == undefined) {
				var element				= this.state.XML.createElement('grid');
				this.state.grid			= this.state.XML.createTextNode('');
				element.appendChild(this.state.grid);
				this.state.XML.documentElement.appendChild(element);
			}
			
			if(this.state.package == undefined) {
				var element				= this.state.XML.createElement('package');
				this.state.package		= this.state.XML.createTextNode('');
				element.appendChild(this.state.package);
				this.state.XML.documentElement.appendChild(element);
			}
			
			if(this.state.joinContinent == undefined) {
				var element					= this.state.XML.createElement('joinContinent');
				this.state.joinContinent	= this.state.XML.createTextNode('0');
				element.appendChild(this.state.package);
				this.state.XML.documentElement.appendChild(element);
			}
		
			if(this.state.localAssets == undefined) {
				var element					= this.state.XML.createElement('localAssets');
				this.state.localAssets		= this.state.XML.createTextNode('0');
				element.appendChild(this.state.package);
				this.state.XML.documentElement.appendChild(element);
			}
			
			if(this.state.experimental == undefined) {
				var element					= this.state.XML.createElement('experimental');
				this.state.experimental		= this.state.XML.createTextNode('0');
				element.appendChild(this.state.package);
				this.state.XML.documentElement.appendChild(element);
			}
			
			if(this.state.promotional == undefined) {
				var element					= this.state.XML.createElement('promotional');
				this.state.promotional		= this.state.XML.createTextNode('');
				element.appendChild(this.state.promotional);
				this.state.XML.documentElement.appendChild(element);
			}
			
			if(this.state.special == undefined) {
				var element					= this.state.XML.createElement('special');
				this.state.special			= this.state.XML.createTextNode('');
				element.appendChild(this.state.special);
				this.state.XML.documentElement.appendChild(element);
			}
			
			if(this.state.avatar == undefined) {
				var element					= this.state.XML.createElement('avatar');
				this.state.avatar			= this.state.XML.createTextNode('');
				element.appendChild(this.state.avatar);
				this.state.XML.documentElement.appendChild(element);
			}
		}
	}
	this.saveState = function() {
		var xmlData = XML.serialize(this.state.XML);
		
		var orderFormXML = document.getElementById('orderFormXML');
		orderFormXML.value = escape(xmlData);
	}
	this.stateGetGrid = function() {
		if(!this.state.grid) {
			return null;
		} else {
			return this.state.grid.nodeValue;
		}
	}
	this.stateSetGrid = function(id) {
		this.state.grid.nodeValue = id;

		this.saveState();
	}
	this.stateGetPackage = function() {
		if(!this.state.package) {
			return null;
		} else {
			return this.state.package.nodeValue;
		}
	}
	this.stateSetPackage = function(id) {
		this.state.package.nodeValue = id;
		
		this.saveState();
	}
	this.stateSetjoinContinent = function(flag) {
		var value = '';
		if(flag) {
			value = '1';
		} else {
			value = '0';
		}
		
		this.state.joinContinent.nodeValue = value;
		
		this.saveState();
	}
	this.stateSetlocalAssets = function(flag) {
		var value = '';
		if(flag) {
			value = '1';
		} else {
			value = '0';
		}
		
		this.state.localAssets.nodeValue = value;
		
		this.saveState();
	}
	this.stateSetExperimental = function(flag) {
		var value = '';
		if(flag) {
			value = '1';
		} else {
			value = '0';
		}
		
		this.state.experimental.nodeValue = value;
		
		this.saveState();
	}
	this.stateSetPromotional = function(value) {
		this.state.promotional.nodeValue = value;
		
		this.saveState();
	}
	this.stateSetSpecial = function(value) {
		this.state.special.nodeValue = value;
		
		this.saveState();
	}
	this.stateSetAvatar = function(value) {
		this.state.avatar.nodeValue = value;
		
		this.saveState();
	}
	
	this.grids 		= null;
	this.packages 	= null;
	
	this.regions			= new Array;
	this.regionsAllowed		= 0;
	
	this.onload = function() {

		this.restoreState();
		
		// Set grid/package from query string if it hasn't been set in the XML.  
		var queryData = window.location.toString().toQueryParams();

		if (queryData.grid != undefined && this.stateGetGrid() != null)
			this.stateSetGrid(queryData.grid);
		if (queryData.package != undefined && this.stateGetPackage() != null)
			this.stateSetPackage(queryData.package);

		//Get the data to the client
		var ajaxOBJ = new ajaxObject;
		
		var reference = function(data) {
			orderForm.build(data);
		}
		
		ajaxOBJ.send('/orderinline/dataXML', reference);
		
		//Attach the add region button
		document.getElementById('orderFormAddRegionButton').onclick = function() {
			orderForm.addRegion();
		}
		
		//Attach the checkboxes
		document.getElementById('orderFormjoinContinent').onclick = function() {
			orderForm.stateSetjoinContinent(this.checked);
		}
		document.getElementById('orderFormlocalAssets').onclick = function() {
			orderForm.stateSetlocalAssets(this.checked);
		}
		document.getElementById('orderFormExperimental').onclick = function() {
			orderForm.stateSetExperimental(this.checked);
		}
		
		//Attach the promotional code thing
		document.getElementById('orderFormPromotional').onchange = function() {
			orderForm.stateSetPromotional(this.value);
		}
		document.getElementById('orderFormSpecial').onchange = function() {
			orderForm.stateSetSpecial(this.value);
		}
		document.getElementById('orderFormAVName').onchange = function() {
			orderForm.stateSetAvatar(this.value);
		}

	}

	this.build = function(data) {

		var documentData = null;

		for(var index = 0; index < data.childNodes.length; index++) {
			var node = data.childNodes[index];
			if(node.tagName == 'xml') {
				documentData = node;
			}
		}

		if(documentData == null) {
			return;
		}
		
		for(var index = 0; index < documentData.childNodes.length; index++) {
			var node = documentData.childNodes[index];
			if(node.tagName != undefined) {
				switch(node.tagName) {
					case('grids'):
						this.grids = node;
						break;
					case('packages'):
						this.packages = node;
						break;
					default:
						break;
 				}
			}
		}

		this.draw();
	}
	
	this.draw = function() {
		//Figure out which grid is currently selected and then select it
		var selectedGrid = this.stateGetGrid();

		this.chooseGrid(selectedGrid);
		
		//Figure out which package is currently selected and then select it
		var selectedPackage = this.stateGetPackage();
		
		this.choosePackage(selectedPackage);
		
		//Fix all the globals
		if(this.state.joinContinent.nodeValue == 1) {
			document.getElementById('orderFormjoinContinent').checked = true;
		}
	
		if(this.state.localAssets.nodeValue == 1) {
			document.getElementById('orderFormlocalAssets').checked = true;
		}
		
		if(this.state.experimental.nodeValue == 1) {
			document.getElementById('orderFormExperimental').checked = true;
		}
		
		document.getElementById('orderFormPromotional').value		= this.state.promotional.nodeValue;
		document.getElementById('orderFormSpecial').value			= this.state.special.nodeValue;
		document.getElementById('orderFormAVName').value			= this.state.avatar.nodeValue;
	}

	/* Grids List */
	this.drawGrids = function() {
		var list = document.getElementById('orderFormGridsOptions');

		if(list == null) {
			return;
		}
		//Delete all nodes
		for(var i = list.childNodes.length - 1; i >= 0; i--) {
			list.removeChild(list.childNodes[i]);
		}
		
		//Render list header
		this.addHeaderToGridList();
		
		var grid_alt = false;
		
		for(var i = 0; i < this.grids.childNodes.length; i++) {
			var grid = this.grids.childNodes[i];
			if(grid.tagName == 'child') {
				this.addGrid(grid, grid_alt);
				grid_alt = !grid_alt;
			}
		}
	}
	this.addGrid = function(grid, grid_alt) {
		//Get Parameters
		var id, featured, name, desc, url, setupCharge, monthlyCharge, packages;
		for(var j = 0; j < grid.childNodes.length; j++) {
			var value = null;
			if(this.browser.isIE) {
				value = grid.childNodes[j].text;
			} else {
				value = grid.childNodes[j].textContent;
			}

			switch(grid.childNodes[j].tagName) {
				case('id'):
					id = value;
					break;
				case('featured'):
					featured = (value == "1");
					break;
				case('name'):
					name = value;
					break;
				case('desc'):
					desc = value;
					break;
				case('url'):
					url = value;
					break;
				case('region_setup_charge'):
					setupCharge = value;
					break;
				case('region_monthly_charge'):
					monthlyCharge = value;
					break;
				case('packages'):
					packages = grid.childNodes[j];
					break;
				default:
					break;
			}

		}

		this.addGridToList(id, name, monthlyCharge, setupCharge, desc, grid_alt);
	}
	this.addHeaderToGridList = function() {
		var list = document.getElementById('orderFormGridsOptions');
		
		if(list == null) {
			return;
		}
		
		var row = document.createElement('div');
		row.className = 'orderFormDivisionOptionsHeader';
		
		//Fields
		{
			var nameContainer = document.createElement('div');
			nameContainer.className = 'orderFormDivisionOptionsField orderFormDivisionOptionsFieldName';
			nameContainer.innerHTML = 'Grid';
			row.appendChild(nameContainer);
			
			var setupContainer = document.createElement('div');
			setupContainer.className = 'orderFormDivisionOptionsField orderFormDivisionOptionsFieldSetup';
			setupContainer.innerHTML = 'Setup';
			row.appendChild(setupContainer);
			
			var monthlyContainer= document.createElement('div');
			monthlyContainer.className = 'orderFormDivisionOptionsField orderFormDivisionOptionsFieldMonthly';
			monthlyContainer.innerHTML = 'Monthly';
			row.appendChild(monthlyContainer);
			
			var clear = document.createElement('div');
			clear.className = 'clear';
			row.appendChild(clear);
			
			}
		
		list.appendChild(row);
	}
	this.addGridToList = function(id, name, monthly, setup, desc, grid_alt) {
		var list = document.getElementById('orderFormGridsOptions');
		
		//Render list header
		var selectedGrid = this.stateGetGrid();

		if(list == null) {
			return;
		}
		
		var className = 'orderFormDivisionOptionsOption';
		if(grid_alt) {
			className = 'orderFormDivisionOptionsOption orderFormDivisionOptionsOptionAlt';
		}
		
		var row = document.createElement('div');
		row.className = className;
		
		
		//Fields
		{
			var radioContainer = document.createElement('div');
			radioContainer.className = 'orderFormDivisionOptionsField orderFormDivisionOptionsFieldRadio';
			{
				var checked = '';
				if(id == selectedGrid) {
					checked = "checked";
				}
				
				try{
					var radioInput = document.createElement('<input type="radio" name="grid" ' + checked + ' />');
				} catch(e) {
					var radioInput = document.createElement('input');
					radioInput.name = 'grid';
					radioInput.type = 'radio';
				}
				
				radioInput.value = id;
				
				radioInput = radioContainer.appendChild(radioInput);
				
				if(id == selectedGrid) {
					radioInput.checked = true;
				}
			}
			row.appendChild(radioContainer);
			
			var nameContainer = document.createElement('div');
			nameContainer.className = 'orderFormDivisionOptionsField orderFormDivisionOptionsFieldName';
			nameContainer.innerHTML = name;
			row.appendChild(nameContainer);
			
			var setupContainer = document.createElement('div');
			setupContainer.className = 'orderFormDivisionOptionsField orderFormDivisionOptionsFieldSetup';
			setupContainer.innerHTML = setup;
			row.appendChild(setupContainer);
			
			var monthlyContainer= document.createElement('div');
			monthlyContainer.className = 'orderFormDivisionOptionsField orderFormDivisionOptionsFieldMonthly';
			monthlyContainer.innerHTML = monthly;
			row.appendChild(monthlyContainer);
			
			var clear = document.createElement('div');
			clear.className = 'clear';
			row.appendChild(clear);
			
		}
		
		row.onclick = function() {
			orderForm.chooseGrid(id);
		}
		
		row.onmouseover = function() {
			row.className = className + ' orderFormDivisionOptionsOptionHover';
		}
		row.onmouseout = function() {
			row.className = className;
		}
		
		list.appendChild(row);
	}
	this.chooseGrid = function(id) {
		//change which grid is currently selected
		this.stateSetGrid(id);

		this.drawGrids();
		this.drawPackages();
	}
	this.getGridPackages = function() {
		for(var i = 0; i < this.grids.childNodes.length; i++) {
			var grid = this.grids.childNodes[i];
			if(grid.tagName == 'child') {
				//Get Parameters
				var id, featured, name, desc, url, setupCharge, monthlyCharge, packages;
				for(var j = 0; j < grid.childNodes.length; j++) {
					var value = null;
					if(this.browser.isIE) {
						value = grid.childNodes[j].text;
					} else {
						value = grid.childNodes[j].textContent;
					}

					switch(grid.childNodes[j].tagName) {
						case('id'):
							id = value;
							break;
						case('packages'):
							packages = grid.childNodes[j];
							break;
						default:
							break;
					}

				}
				if(id == this.stateGetGrid()) {
					return packages;
				}
			}
		}
		return null;
	}
	
	/* Packages List */
	this.drawPackages = function() {
		var list = document.getElementById('orderFormPackagesOptions');

		if(list == null) {
			return;
		}
		
		//Delete all nodes
		for(var i = list.childNodes.length - 1; i >= 0; i--) {
			list.removeChild(list.childNodes[i]);
		}
		
		//Render list header
		this.addHeaderToPackagesList();
		
		var package_alt = false;
		
		for(var i = 0; i < this.packages.childNodes.length; i++) {
			var package = this.packages.childNodes[i];
			if(package.tagName == 'child') {
				if(!this.addPackage(package, package_alt)) {
					return;
				}
				package_alt = !package_alt;
			}
		}
	}
	this.addPackage = function(package, package_alt) {
		//Get Parameters
		var id, name, desc, setupCharge, monthlyCharge, regions, users;
		for(var j = 0; j < package.childNodes.length; j++) {
			var value = null;
			if(this.browser.isIE) {
				value = package.childNodes[j].text;
			} else {
				value = package.childNodes[j].textContent;
			}

			switch(package.childNodes[j].tagName) {
				case('id'):
					id = value;
					break;
				case('name'):
					name = value;
					break;
				case('desc'):
					desc = value;
					break;
				case('setup_charge'):
					setupCharge = value;
					break;
				case('monthly_charge'):
					monthlyCharge = value;
					break;
				case('max_regions'):
					regions = value;
					break;
				case('max_users'):
					users = value;
				default:
					break;
			}

		}
		
		var enabledPackages = this.getGridPackages();
		
		var packageEnabledForGrid = false;
		if(enabledPackages != null) {
			for(var i = 0; i < enabledPackages.childNodes.length; i++) {
				var node = enabledPackages.childNodes[i];
				if(node.tagName == 'child') {
					if(this.browser.isIE) {
						var value = node.text;
					} else {
						var value = node.textContent;
					}

					if(value == id) {
						packageEnabledForGrid = true;
					}

					//console.log("id: " + id + " value: " + value + " enabled: " + packageEnabledForGrid);

					if(packageEnabledForGrid) {
						break;
					}
				}
			}	
		}
		
		if(!packageEnabledForGrid && id == this.stateGetPackage()) {
			this.choosePackage('');
			return false;
		}
		
		this.addPackageToList(id, name, monthlyCharge, setupCharge, desc, packageEnabledForGrid, package_alt);
		return true;
	}
	this.addHeaderToPackagesList = function() {
		var list = document.getElementById('orderFormPackagesOptions');
		
		if(list == null) {
			return;
		}
		
		var row = document.createElement('div');
		row.className = 'orderFormDivisionOptionsHeader';
		
		//Fields
		{
			var nameContainer = document.createElement('div');
			nameContainer.className = 'orderFormDivisionOptionsField orderFormDivisionOptionsFieldName';
			nameContainer.innerHTML = 'Package';
			row.appendChild(nameContainer);
			
			var setupContainer = document.createElement('div');
			setupContainer.className = 'orderFormDivisionOptionsField orderFormDivisionOptionsFieldSetup';
			setupContainer.innerHTML = 'Setup';
			row.appendChild(setupContainer);
			
			var monthlyContainer= document.createElement('div');
			monthlyContainer.className = 'orderFormDivisionOptionsField orderFormDivisionOptionsFieldMonthly';
			monthlyContainer.innerHTML = 'Monthly';
			row.appendChild(monthlyContainer);
			
			var clear = document.createElement('div');
			clear.className = 'clear';
			row.appendChild(clear);
			
			}
		
		list.appendChild(row);
	}
	this.addPackageToList = function(id, name, monthly, setup, desc, packageEnabledForGrid, package_alt) {
		var list = document.getElementById('orderFormPackagesOptions');
		
		if(list == null) {
			return;
		}
		
		var className = 'orderFormDivisionOptionsOption';
		if(package_alt) {
			className = 'orderFormDivisionOptionsOption orderFormDivisionOptionsOptionAlt';
		}
		
		var row = document.createElement('div');
		row.className = className;
		if(!packageEnabledForGrid) {
			row.className = className + ' orderFormDivisionOptionsOptionDisabled';
		}
		
		//Fields
		{
			var radioContainer = document.createElement('div');
			radioContainer.className = 'orderFormDivisionOptionsField orderFormDivisionOptionsFieldRadio';
			{
				var checked = '';
				if(packageEnabledForGrid) {
					if(id == this.stateGetPackage()) {
						checked = "checked";
					}
				}

				try{
					var radioInput = document.createElement('<input type="radio" name="package" ' + checked + ' />');
				} catch(e) {
					var radioInput = document.createElement('input');
					radioInput.name = 'package';
					radioInput.type = 'radio';
				}
				radioInput.value = id;
				if(!packageEnabledForGrid) {
					radioInput.disabled = true;
				} else {
					if(id == this.stateGetPackage()) {
						radioInput.checked = true;
					}
				}
				/*
				radioInput.onclick = function() {
					
				}
				*/
				radioContainer.appendChild(radioInput);
			}

			row.appendChild(radioContainer);
			
			var nameContainer = document.createElement('div');
			nameContainer.className = 'orderFormDivisionOptionsField orderFormDivisionOptionsFieldName';
			nameContainer.innerHTML = name;
			row.appendChild(nameContainer);
			
			var setupContainer = document.createElement('div');
			setupContainer.className = 'orderFormDivisionOptionsField orderFormDivisionOptionsFieldSetup';
			setupContainer.innerHTML = setup;
			row.appendChild(setupContainer);
			
			var monthlyContainer= document.createElement('div');
			monthlyContainer.className = 'orderFormDivisionOptionsField orderFormDivisionOptionsFieldMonthly';
			monthlyContainer.innerHTML = monthly;
			row.appendChild(monthlyContainer);
			
			var clear = document.createElement('div');
			clear.className = 'clear';
			row.appendChild(clear);
			
		}
		if(packageEnabledForGrid) {
			row.onclick = function() {
				orderForm.choosePackage(id);
			}
			row.onmouseover = function() {
				row.className = className + ' orderFormDivisionOptionsOptionHover';
			}
			row.onmouseout = function() {
				row.className = className;
			}
		}
		
		list.appendChild(row);
	}
	this.choosePackage = function(id) {
		//change which grid is currently selected
		this.stateSetPackage(id);
		
		this.regionsAllowed = 0;
		
		for(var i = 0; i < this.packages.childNodes.length; i++) {
			var package = this.packages.childNodes[i];
			if(package.tagName == 'child') {
				//Get Parameters
				var package_id, regions;
				for(var j = 0; j < package.childNodes.length; j++) {
					var value = null;
					if(this.browser.isIE) {
						value = package.childNodes[j].text;
					} else {
						value = package.childNodes[j].textContent;
					}

					switch(package.childNodes[j].tagName) {
						case('id'):
							package_id = value;
							break;
						case('max_regions'):
							regions = value;
							break;
						case('max_users'):
						default:
							break;
					}

				}
				if(id == package_id) {
					var enabledPackages = this.getGridPackages();

					var packageEnabledForGrid = false;
					if(enabledPackages != null) {
						for(var j = 0; j < enabledPackages.childNodes.length; j++) {
							var node = enabledPackages.childNodes[j];
							if(node.tagName == 'child') {
								if(this.browser.isIE) {
									var value = node.text;
								} else {
									var value = node.textContent;
								}

								if(value == id) {
									this.regionsAllowed = regions;
									
									if(this.regions.length == 0) {
										this.addRegion();
									}
									
									break;
								}
							}
						}	
					}
				}
			}
		}
		
		this.drawPackages();
		
		this.restoreRegionState();
	}
	
	/* Regions */
	this.updateRegionHeader = function() {
		var number = document.getElementById('orderFormAddRegionText');
		
		var button = document.getElementById('orderFormAddRegionButton');

		var numLeft = this.regionsAllowed - this.regions.length;
		if(numLeft <= 0) {
			numLeft = 0;
			button.disabled = true;
			number.innerHTML = 'Select a larger package to include more regions.';
		} else {
			button.disabled = false;
			number.innerHTML = 'You can add another ' + numLeft + ' region(s) to this package.';
		}
		
		
	}
	this.addRegion = function(name, x, y, auto, dontSaveState) {
		if(name == undefined) {
			var name = '';
		}
		if(x == undefined) {
			var x = '';
		}
		if(y == undefined) {
			var y = '';
		}
		if(auto == undefined) {
			var auto = true;
		}
		
		//Allowed to make this region?
		var numLeft = this.regionsAllowed - this.regions.length;
		if(numLeft <= 0) {
			//alert('Please select a different package to add more regions.');
			return;
		}
		
		var regionOB = new Object();
		
		var interation = this.regions.length;
		//var titleBar = 'Region ' + (interation + 1);
                var titleBar = countingNames[interation+1].capitalize() + ' Region';
		
		var regions = document.getElementById('orderFormRegions');
		
		if(regions == null) {
			return;
		}
		
		var region = document.createElement('div');
		region.className = 'orderFormDivisionOptions';
		
		//Header
		var header = document.createElement('div');
		header.className = 'orderFormDivisionOptionsHeader';
		header.innerHTML = titleBar;
		region.appendChild(header);
		
		var nameRow = document.createElement('div');
		nameRow.className = 'orderFormDivisionOptionsRow';
		{
			var nameLabel = document.createElement('div');
			nameLabel.className = 'orderFormInputLabel';
			nameLabel.innerHTML = 'Name:';
			nameRow.appendChild(nameLabel);
			
			var nameField = document.createElement('div');
			nameField.className = 'orderFormInput';
			{
				var nameFieldInput = document.createElement('input');
				nameFieldInput.type = 'text';
				regionOB.name = nameFieldInput;
				nameFieldInput.onchange = function() {
					orderForm.saveRegionState();
				}
				nameFieldInput.value = name;
				nameField.appendChild(nameFieldInput);
			}
			nameRow.appendChild(nameField);
			
			var clear = document.createElement('div');
			clear.className = 'clear';
			nameRow.appendChild(clear);
		}
		region.appendChild(nameRow);
		
		var autoAssignRow = document.createElement('div');
		autoAssignRow.className = 'orderFormDivisionOptionsRow';
		{
			var label = document.createElement('div');
			label.className = 'orderFormInputLabel';
			label.innerHTML = 'Automagically Position:';
			autoAssignRow.appendChild(label);
			
			var field = document.createElement('div');
			field.className = 'orderFormInput';
			{
				var checked = '';
				if(auto) {
					checked = 'checked';
				}
				
				try {
					var fieldInput = document.createElement('<input type="checkbox" ' + checked + '>');
				} catch(e) {
					var fieldInput = document.createElement('input');
				}
				fieldInput.type = 'checkbox';
				regionOB.autoAssign = fieldInput;
				fieldInput.onclick = function() {
					orderForm.saveRegionState();
					
					if(this.checked) {
						coordinatesRow.className = 'orderFormDivisionOptionsRow orderFormDivisionOptionsRowHidden';
					} else {
						coordinatesRow.className = 'orderFormDivisionOptionsRow';
					}
					
				}
				fieldInput.checked = auto;
				field.appendChild(fieldInput);
			}
			autoAssignRow.appendChild(field);
			
			var clear = document.createElement('div');
			clear.className = 'clear';
			autoAssignRow.appendChild(clear);
		}
		region.appendChild(autoAssignRow);
		
		var coordinatesRow = document.createElement('div');
		coordinatesRow.className = 'orderFormDivisionOptionsRow';
		if(auto != false) {
			coordinatesRow.className = 'orderFormDivisionOptionsRow orderFormDivisionOptionsRowHidden';
		}
		{
			var label = document.createElement('div');
			label.className = 'orderFormInputLabel nofloat';
			label.innerHTML = 'Coordinates:';
			coordinatesRow.appendChild(label);
			
			var field = document.createElement('div');
			field.className = 'orderFormInput nofloat padleft';
			{
 				field.innerHTML += '<tt>X:</tt>';
				var fieldInputX = document.createElement('input');
				fieldInputX.type = 'text';
				fieldInputX.className = 'orderFormCord';
				fieldInputX.size = '5';
				fieldInputX.onchange = function() {
					orderForm.saveRegionState();
				}
				fieldInputX.value = x;
				field.appendChild(fieldInputX);
				regionOB.x = fieldInputX;
			}
			coordinatesRow.appendChild(field);
			
			var field = document.createElement('div');
			field.className = 'orderFormInput nofloat padleft';
			{
				field.innerHTML += '<br /><tt>Y:</tt>';
				
				var fieldInputY = document.createElement('input');
				fieldInputY.type = 'text';
				fieldInputY.className = 'orderFormCord';
   				fieldInputY.size = '5';
				fieldInputY.onchange = function() {
					orderForm.saveRegionState();
				}
				fieldInputY.value = y;
				field.appendChild(fieldInputY);
				regionOB.y = fieldInputY;
			}
			coordinatesRow.appendChild(field);
			
			var clear = document.createElement('div');
			clear.className = 'clear';
			coordinatesRow.appendChild(clear);
		}
		region.appendChild(coordinatesRow);

		regions.appendChild(region);
		
		this.regions.push(regionOB);
		
		if(dontSaveState != true) {
			this.saveRegionState();
		}
		
		this.updateRegionHeader();
	}
	this.saveRegionState = function() {
		//Remove all regions from the state
		for(var i = this.state.regions.childNodes.length - 1; i >= 0; i--) {
			var node = this.state.regions.childNodes[i];
			this.state.regions.removeChild(node);
		}
		
		//Readd all regions to state
		for(var i = 0; i < this.regions.length; i++) {
			var region = this.regions[i];
			/*
			console.log(region.name.value);
			console.log(region.autoAssign.value);
			console.log(region.x.value);
			console.log(region.y.value);
			*/
		
			var XMLRegion = this.state.XML.createElement('child');

			var element				= this.state.XML.createElement('order');
			var value				= this.state.XML.createTextNode(i);
			element.appendChild(value);
			XMLRegion.appendChild(element);

			var element				= this.state.XML.createElement('name');
			var value				= this.state.XML.createTextNode(region.name.value);
			element.appendChild(value);
			XMLRegion.appendChild(element);
			
			var element				= this.state.XML.createElement('auto');
			var nodeValue = "0";
			if(region.autoAssign.checked) {
				nodeValue = "1";
			}
			var value				= this.state.XML.createTextNode(nodeValue);
			element.appendChild(value);
			XMLRegion.appendChild(element);
			
			var element				= this.state.XML.createElement('x');
			var value				= this.state.XML.createTextNode(region.x.value);
			element.appendChild(value);
			XMLRegion.appendChild(element);
			
			var element				= this.state.XML.createElement('y');
			var value				= this.state.XML.createTextNode(region.y.value);
			element.appendChild(value);
			XMLRegion.appendChild(element);

			this.state.regions.appendChild(XMLRegion);
		}
		
		this.saveState();
	}
	this.restoreRegionState = function() {
		//Dump the regions data
		this.regions = Array();
		
		//Dump the html document elements
		var regions = document.getElementById('orderFormRegions');
		for(var i = regions.childNodes.length - 1; i >= 0; i--) {
			regions.removeChild(regions.childNodes[i]);
		}
		
		//Restore the nodes to the internal state / html
		for(var i = 0; i < this.state.regions.childNodes.length; i++) {
			var region = this.state.regions.childNodes[i];
			
			if(region.tagName != 'child') {
				continue;
			}
			
			//Don't append more regions than we are allowed to.
			if(this.regions.length >= this.regionsAllowed) {
				break;
			}
			
			var name, x, y, auto;
			for(var j = 0; j < region.childNodes.length; j++) {
				var node = region.childNodes[j];
				
				var value = null;
				if(this.browser.isIE) {
					value = node.text;
				} else {
					value = node.textContent;
				}

				switch(node.tagName) {
					case('name'):
						name = value;
						break;
					case('auto'):
						auto = (value == "1");
						break;
					case('x'):
						x = value;
						break;
					case('y'):
						y = value;
						break;
				}
			}
			
			//Post data to the state
			this.addRegion(name, x, y, auto, true);
		}
		
		this.updateRegionHeader();
	}

}

orderFormOB.prototype = new layoutClass;

orderForm = new orderFormOB;

window.onload = function() {
	orderForm.onload();
}