var ImagePath = "images/";

		var TargetStorage;
		var QuoteItems;
		var QuoteDetails;
		var ClientDetails;
		var ItemGroupSelector;
		var ConfigurationSelector;
		var UnitSelector;

		function SpareRoom_Init() {
			DragDropTargets = ["TargetContainer", "bin"];
			ClearQuote();
			
			var NewItem;
			ItemGroupSelector = xbGetElementById("ItemGroupSelect");
			if (ItemGroupSelector != null) {
				for (var i = 0; i < ItemGroups.length; i++) {
					NewItem = document.createElement("option");
					NewItem.text = ItemGroups[i];
					ItemGroupSelector.options.add(NewItem);
				}
				SetSource(ItemGroupSelector);
			}

			ConfigurationSelector = xbGetElementById("ConfigurationGroupSelect");
			if (ConfigurationSelector != null) {
				for (var i = 0; i < ConfigurationGroups.length; i++) {
					NewItem = document.createElement("option");
					NewItem.text = ConfigurationGroups[i];
					ConfigurationSelector.options.add(NewItem);
				}
				SetSource(ConfigurationSelector);
			}

			UnitSelector = xbGetElementById("UnitSelect");
			if (UnitSelector != null) {
				NewItem = document.createElement("option");
				NewItem.text = "Click to Select...";
				NewItem.value = -1;
				UnitSelector.options.add(NewItem);
				for (var i = 0; i < Storage.length; i++) {
					NewItem = document.createElement("option");
					NewItem.text = Storage[i].Name;
					NewItem.value = i;
					UnitSelector.options.add(NewItem);
				}
			}

			CalculateStorage();
		}
		
//		function ItemHTML(ID, Item, PreText, SetAsDragDrop) {
//			var HTML = "<table class='ItemContainer'><tr valign='middle'>";
//			if (PreText != null)
//				HTML += "<td>" + PreText + "</td>";
//			HTML += "<td align='center'><img id='" + ID + "' src='" + ImagePath + Item.Image + "'" + (SetAsDragDrop ? "DragDropSource='true' class='ItemImage DragDropSource'" : "class='ItemImage'") + "><br>" + Item.Name + "</td>";
//			return HTML;
//		}

		function ItemHTML(ID, Item, PreText, PostText, SetAsDragDrop) {
			var HTML = "<div class='Item'>";
			if (PreText != null)
				HTML += PreText + "&nbsp;";
			HTML += "<img id='" + ID + "' src='" + ImagePath + Item.Image + "'" + (SetAsDragDrop ? "DragDropSource='true' class='ItemImage DragDropSource'" : "class='ItemImage'") + ">" + PostText + "</div>";
			return HTML;
		}
		
		function TableWrapper(Body) {
			return "<table>" + Body + "</table>";
		}

		function TableRowHTML(Label, Value) {
			var HTML = "<tr valign='top'>";
//			HTML += "<td align='right'>" + Label + "</td><td align='left'>" + Value + "</td>";
			HTML += "<td align='center'><b>" + Label + "</b><br>" + Value + "</td>";
			HTML += "</tr>";
			return HTML;
		}
		
		function SetSource(SelectElement) {
			switch (SelectElement.id) {
			
				case "ItemGroupSelect":
					var HTML = "";
					var TargetGroup = SelectElement.options[SelectElement.selectedIndex].text;
					if (TargetGroup != null) {
						DragDropSources = new Array();
						var SourceObj = xbGetElementById("ItemsContainer");
						if (SourceObj != null) {
							for (var i = 0; i < Items.length; i++) {
								if (Items[i].Group == TargetGroup) {
									DragDropSources.push("Item." + i);
									HTML += ItemHTML("Item." + i, Items[i], "", "<br>" + Items[i].Name);
								}
							}
						}
						SourceObj.innerHTML = HTML + "<div class='clear_left'></td>";
					}
					break;
					
				case "ConfigurationGroupSelect":
					var HTML = "<div style='background-color: blue; display: inline; margin: 0px auto'>";
					var TargetGroup = SelectElement.options[SelectElement.selectedIndex].text;
					if (TargetGroup != null) {
						DragDropSources = new Array();
						var SourceObj = xbGetElementById("ItemsContainer");
						if (SourceObj != null) {
							for (var i = 0; i < Configurations.length; i++) {
								if (Configurations[i].Group == TargetGroup) {
									DragDropSources.push("Configuration." + i);
									HTML += ItemHTML("Configuration." + i, Configurations[i], "", "<br>" + Configurations[i].Name);
								}
							}
						}
						SourceObj.innerHTML = HTML + "<div class='clear_left'></div></div>";
					}
					break;
					
				case "UnitSelect":
					QuoteItems = new Array();
					var TargetUnit = parseInt(SelectElement.options[SelectElement.selectedIndex].value);
					QuoteItems[TargetUnit] = {'Item': Storage[TargetUnit], 'Count': 1};
					CalculateStorage();
					break;
			}
			window.setTimeout("DragDropInit()", 100);
		}
	
		function ProcessDragDrop(Source, Target) {
			var Item;
			Source = Source.id.split(".");
			var SourceID = parseInt(Source[1]);
			switch (Source[0]) {
				case "Item":
					Item = Items[SourceID];
					break;
				
				case "Configuration":
					Item = Configurations[SourceID];
					break;
				
				case "Unit":
					Item = Storage[SourceID];
					break;
			}

			if (Target.id == "bin") {
				if (QuoteItems[SourceID] != null)
					QuoteItems[SourceID].Count--;
			}
			
			if ((Target.id == "TargetContainer") && (Source[0] != "Quote")) {
				if (QuoteItems[SourceID] == null)
					QuoteItems[SourceID] = {'Item': Item, 'Count': 0};
					
				QuoteItems[SourceID].Count++;
			}
			CalculateStorage();
		}
		
		
		function CalculateStorage() {
			var Items = "";
			var ItemVolume = 0;
			var TargetContainer = xbGetElementById("TargetContainer");
			if (TargetContainer != null) {
				if (QuoteItems.length > 0) {
					for (var i = 0; i < QuoteItems.length; i++) {
						if ((QuoteItems[i] != null) && (QuoteItems[i].Count > 0)) {
							Items += ItemHTML("Quote." + i, QuoteItems[i].Item, "", "<br>" + QuoteItems[i].Count + " x " + QuoteItems[i].Item.Name, true);
							ItemVolume += QuoteItems[i].Count * QuoteItems[i].Item.Volume;
						}
					}
				}

				TargetContainer.innerHTML = "<strong>Spare Room Unit</strong><br><div align='center'>" + (Items != "" ? Items : "<br><br><br><br>") + "<div class='clear_left'></div></div>";
				
				for (var i = 0; i < Storage.length; i++) {
					if (Storage[i].Volume >= ItemVolume) {
						TargetStorage = i;
						break;
					}
				}
				SetStorage(Math.ceil(ItemVolume * 100)/100);
			}
		}
		
		function SetStorage(ItemVolume) {
			var DimensionsText = "";
			var DimensionsContainer = xbGetElementById("DimensionsContainer");
			if (DimensionsContainer != null) {
				if (ItemVolume != null)
					DimensionsText += TableRowHTML("Item Volume: ", ItemVolume + " m3");
				DimensionsText += TableRowHTML("Available Storage: ", "".merge("<br>", StorageDetails(TargetStorage - 1), StorageDetails(TargetStorage), StorageDetails(TargetStorage + 1)));
				DimensionsContainer.innerHTML = TableWrapper(DimensionsText);
			}
			RefreshTargets();
		}
		
		function StorageDetails(iStore) {
			if ((iStore >= 0) && (iStore < Storage.length))
				return Storage[iStore].Name + " (Volume - " + Storage[iStore].Volume + " m3)";
			else
				return "";
		}

		function ClearQuote() {
			SetCookie(window.document, "Quote", "");
			ClientDetails = {};
			QuoteItems = [];
			TargetStorage = 0;
		}
		
		function StoreQuote() {
			var Quote = { 'Client': ClientDetails,  'Items': QuoteItems, 'TargetStorage': TargetStorage };
			SetCookie(window.document, "Quote", Quote.ToJSON());
		}
		
		function RetrieveQuote() {
			var Quote = eval("(" + GetCookie(window.document, "Quote", "{}") + ")");
			ClientDetails = (((Quote != null) && (Quote.Client != null)) ? Quote.Client : {});
			QuoteItems = (((Quote != null) && (Quote.Items != null)) ? Quote.Items : []);
			TargetStorage = (((Quote != null) && (Quote.TargetStorage != null)) ? Quote.TargetStorage : 0);
		}
		

		function ClientDetailsInit(Submitted) {

			with (CreateTable("tabQuoteItems", "Orientation='Vertical' Width='540' Border='0' CellPadding='3' CellSpacing='1' Align='center' BorderStyle='solid'", "valign='top'")) {
				AddRow("Header", "Top", "Your Quote", "Align='left' Value='Your Quote' Class='heading-bg text-head'");
		
				with (AddColumn("Items", "")) {
					SetHeader("Header='Items:' Align='right'");
					AddField("Items", "Items", "TextArea", false, "rows='3'");
				}
			}
		
			with (CreateTable("tabQuoteDetails", "Orientation='Horizontal' Width='540' Border='0' CellPadding='3' CellSpacing='1' Align='center' BorderStyle='solid'", "valign='top'")) {
				with (AddColumn("Units", "")) {
					SetHeader("Header='Unit' Align='center'");
					AddField("Units", "Unit", "TextArea", false, "rows='3'");
				}
		
				with (AddColumn("Cost", "Align='center' Visible='" + (Global.CurrentDiscount > 0 ? "true" : "false") + "'")) {
					SetHeader("Header='Cost' Align='center'");
					AddField("Cost", "Cost", "Money", false, "");
				}
		
				with (AddColumn("Discount", "Align='center' Visible='" + (Global.CurrentDiscount > 0 ? "true" : "false") + "'")) {
					SetHeader("Header='Discount' Align='center'");
					if (Submitted)
						AddField("Discount", "Discount", "Money", false, "Align='center' style='color: red'");
					else
						AddField("Question", "??", "Label", false, "Align='center' style='color: red'");
				}
		
				with (AddColumn("Total", "Align='center' ")) {
					SetHeader("Header='Monthy Total' Align='center'");
					if (Submitted)
						AddField("Total", "Total", "Money", false, "Align='center' style='font-weight: bold'");
					else
						AddField("Question", "??", "Label", false, "Align='center' style='color: red'");
				}
			}

			with (CreateTable("tabClientDetails", "Orientation='Vertical' Width='540' Border='0' CellPadding='3' CellSpacing='1' Align='center' BorderStyle='solid'", "valign='top'")) {
				AddRow("Header", "Top", "Your Details", "Align='left' Value='Your Details' Class='heading-bg text-head'");
		
				with (AddColumn("Name", "")) {
					SetHeader("Header='Name:' Align='right'");
					AddField("Name", "Name", "Text", true, "IsRequired='true'");
				}
		
				with (AddColumn("Address", "")) {
					SetHeader("Header='Address:' Align='right'");
					AddField("Address", "Address", "TextArea", true, "IsRequired='true' rows='3'");
				}
		
				with (AddColumn("Suburb", "")) {
					SetHeader("Header='Suburb:' Align='right'");
					AddField("Suburb", "Suburb", "Text", true, "IsRequired='true'");
				}
		
				with (AddColumn("Postcode", "")) {
					SetHeader("Header='Postcode:' Align='right'");
					AddField("Postcode", "Postcode", "Text", true, "IsRequired='true'");
				}
		
				with (AddColumn("State", "")) {
					SetHeader("Header='State:' Align='right'");
					AddField("State", "State", "List", true, "IsRequired='true'").SetListItems("NSW||Act||NT||Qld||SA||Tas||Vic||WA");
				}
		
				with (AddColumn("Phone", "")) {
					SetHeader("Header='Phone:' Align='right'");
					AddField("Phone", "Phone", "Text", true, "IsRequired='true'");
				}
		
				with (AddColumn("Email", "")) {
					SetHeader("Header='Email:' Align='right'");
					AddField("Email", "Email", "Text", true, "IsRequired='true'");
				}
		
			}
			
			RetrieveQuote();

			QuoteDetails = {"Items": "", "Details": []};
			
			for (var i = 0; i < QuoteItems.length; i++) {
				if (QuoteItems[i] != null)
					QuoteDetails.Items += (QuoteDetails.Items != "" ? "<br>" : "") + QuoteItems[i].Count + " x " + QuoteItems[i].Item.Name;
			}

			if (TargetStorage > 0)
				QuoteDetails.Details.push({'Unit': Storage[TargetStorage - 1].Name, 'Cost': Storage[TargetStorage - 1].Cost, 'Discount': (Storage[TargetStorage - 1].Cost * Global.CurrentDiscount), 'Total': (Storage[TargetStorage - 1].Cost * (1 - Global.CurrentDiscount))});
			QuoteDetails.Details.push({'Unit': Storage[TargetStorage].Name, 'Cost': Storage[TargetStorage].Cost, 'Discount': (Storage[TargetStorage].Cost * Global.CurrentDiscount), 'Total': (Storage[TargetStorage].Cost * (1 - Global.CurrentDiscount))});
			if ((TargetStorage + 1) < Storage.length)
				QuoteDetails.Details.push({'Unit': Storage[TargetStorage + 1].Name, 'Cost': Storage[TargetStorage + 1].Cost, 'Discount': (Storage[TargetStorage + 1].Cost * Global.CurrentDiscount), 'Total': (Storage[TargetStorage + 1].Cost * (1 - Global.CurrentDiscount))});
				
			tabQuoteItems.Draw(QuoteDetails, "QuoteItems");	
			tabQuoteDetails.Draw(QuoteDetails.Details, "QuoteDetails");	

			if (!Submitted) {
				ClientDetails = new Object();
				tabClientDetails.Draw(ClientDetails, "Details");
			}
		}
		
		function SubmitQuote(Step) {
			var Target;

			switch (Step) {
				case 1:
					StoreQuote();
					window.location = "details.html";
					break;

				case 2:
					if (!tabClientDetails.SetData(ClientDetails, 0, true)) {
						alert("Please fill in all required details.")
					} else {
						ClientDetails.Address = ClientDetails.Address.replace(/\r\n/g, "<br>");
						ClientDetails.Address = ClientDetails.Address.replace(/\n/g, "<br>");
						ClientDetails.Address = ClientDetails.Address.replace(/\r/g, "<br>");
						StoreQuote();

						var Today = new Date();
						var Details = 	{
											"Date": Today.format("dd-mmm-yyyy HH:MM ap"), 
											"To": Global.Email_To,
											"Subject": Global.Email_Subject,
											"Quote": QuoteDetails, 
											"Client": ClientDetails
										};
										
						Target = xbGetElementById("QuoteData");
						if (Target != null) {
							Target.value = Details.ToJSON();
							document.forms["SubmitQuoteForm"].submit();
						}
					}
					break;


				case 3:
					RetrieveQuote();
					var Details = 	{
										"To": Global.Email_To,
										"Subject": Global.Email_Subject + " (Reserve)",
										"Quote": QuoteDetails, 
										"Client": ClientDetails
									};

					Target = xbGetElementById("QuoteData");
					if (Target != null) {
						Target.value = Details.ToJSON();
						document.forms["SubmitQuoteForm"].submit();
					}
					break;
			}
		}