var menuDiv;
var menuIsDisplayed;
var sellMode = false;

var itemMenuSplits = [
	{ 
		name : "Items",
		selected : false,
		onclick : function() {
			document.getElementById("exitBar").onclick();
			showItems();
		}
	},
	{ 
		name : "Weapons",
		selected : false,
		onclick : function() {
			document.getElementById("exitBar").onclick();
			showEquipment();
		}
	},
	{ 
		name : "Armor",
		selected : false,
		onclick : function() {
			document.getElementById("exitBar").onclick();
			showArmor();
		}
	}
]

var itemEditMenuSplits = [
	{ 
		name : "Items",
		selected : false,
		onclick : function() {
			showEditItems();
		}
	},
	{ 
		name : "Weapons",
		selected : false,
		onclick : function() {
			showEditEquipment();
		}
	},
	{ 
		name : "Armor",
		selected : false,
		onclick : function() {
			showEditArmor();
		}
	}
]

function displayGameMenu() {
	var menu = document.createElement("div");
	menu.style.position = "absolute";
	menu.style.left = "0px";
	menu.style.top = "0px";
	menu.style.width = "320px";
	menu.style.height = "460px";
	menu.style.color = "white";
	menu.style.backgroundColor = "black";
	document.body.appendChild(menu);
	
	var logo = document.createElement("img");
	logo.src = "images/ui/logo.png";
	logo.style.position = "absolute";
	logo.style.left = "0px";
	logo.style.top = "102px";
	logo.style.width = "320px";
	logo.style.height = "100px";
	menu.appendChild(logo);
	
	var newGame = document.createElement("div");
	newGame.style.position = "absolute";
	newGame.style.left = "0px";
	newGame.style.top = "272px";
	newGame.style.width = "320px";
	newGame.style.paddingTop = "7px";
	newGame.style.height = "28px";
	newGame.style.textAlign = "center";
	newGame.style.color = "white";
	newGame.style.fontSize = "13pt";
	newGame.innerHTML = "New Game";
	newGame.onclick = function() {
		document.body.removeChild(menu);
		map = new Map(maps.aboveGround);
		map.render();
		enableControls();
		map.renderMiniMap();
		setSavePoint("aboveGround", 9, 15, 1);
		
		runCinematic(cinematics.intro);
	}
	menu.appendChild(newGame);
	
	var loadGame = document.createElement("div");
	loadGame.style.position = "absolute";
	loadGame.style.left = "0px";
	loadGame.style.top = "312px";
	loadGame.style.width = "320px";
	loadGame.style.paddingTop = "7px";
	loadGame.style.height = "28px";
	loadGame.style.textAlign = "center";
	loadGame.style.fontSize = "13pt";
	loadGame.innerHTML = "Load Game";
	
	var manager = new CookieManager();
	if(manager.get("vars") && manager.get("vars").parseJSON().version == vars.version) {
		loadGame.style.color = "white";
		loadGame.onclick = function() {
			document.body.removeChild(menu);
			load();
			map = new Map(maps[vars.saveMap]);
			var player = map.getPlayer();
			player.x = vars.saveX;
			player.y = vars.saveY;
			player.direction = vars.saveDir;
			map.render();
			enableControls();
			map.renderMiniMap();
		}
	} else {
		loadGame.style.color = "#666666";
	}
	
	menu.appendChild(loadGame);
}

function displayTempleMenu() {
	var menu = [];
	for(var i=0; i<vars.temples.length; i++) {
		var templeName = vars.temples[i];
		
		var menuItem = {
			name : templeName,
			action : function(templeName) {
				return function() {
					eventList.push(function() {
						canvas.fillStyle = "rgba(0, 0, 128, 0.25)";
						canvas.fillRect(0, 0, 320, 256);
						executeNextEvent(300);
					});

					eventList.push(function() {
						map.renderSprites();
						canvas.fillStyle = "rgba(0, 128, 0, 0.5)";
						canvas.fillRect(0, 0, 320, 256);
						executeNextEvent(300);
					});

					eventList.push(function() {
						map.renderSprites();
						canvas.fillStyle = "rgba(128, 0, 0, 0.75)";
						canvas.fillRect(0, 0, 320, 256);
						executeNextEvent(300);
					});

					eventList.push(function() {
						map.renderSprites();
						canvas.fillStyle = "rgba(0, 0, 0, 1)";
						canvas.fillRect(0, 0, 320, 256);
						executeNextEvent(1000);
						temple(templeName);
					});
					
					eventList.push(function() {
						map.renderSprites();
						canvas.fillStyle = "rgba(0, 0, 128, 0.75)";
						canvas.fillRect(0, 0, 320, 256);
						executeNextEvent(300);
					});

					eventList.push(function() {
						map.renderSprites();
						canvas.fillStyle = "rgba(0, 128, 0, 0.5)";
						canvas.fillRect(0, 0, 320, 256);
						executeNextEvent(300);
					});

					eventList.push(function() {
						map.renderSprites();
						canvas.fillStyle = "rgba(128, 0, 0, 0.25)";
						canvas.fillRect(0, 0, 320, 256);
						executeNextEvent(300);
					});
					
					eventList.push(function() {
						display("You arrived at " + templeName);
						map.renderSprites();
						executeNextEvent(300);
					})
					
					hideMenu();
					evaluateTurn();
				}
			}(templeName)
		}
		menu.push(menuItem);
	}
	menu.push({ name : "Exit", action : hideMenu});
	overlayMenu(menu);
}

function vend(itemList) {
	overlayMenu([
		{ name : "Buy", action : function(list) { 
			return function() {
				buyMenu(itemList);
			}
		}(itemList) },
		{ name : "Sell", action : sellItems},
		{ name : "Exit", action : hideMenu}
	]);
}

function buyMenu(itemList) {
	var menu = [];
	for(var i=0; i<itemList.length; i++) {
		var item = itemList[i];
		var menuItem = { title : item.name };
		var obj;
		if(item.type == "item") {
			obj = items[item.name];
			menuItem.description = obj.description;
		} else if(item.type == "weapon") {
			obj = weapons[item.name];
			var delta = obj.atk - vars.atk;
			if(delta >= 0) {
				menuItem.description = "ATK +" + delta;
			} else {
				menuItem.description = "ATK " + delta;
			}
		} else {
			obj = armor[item.name];
			var delta = obj.grd - vars.grd;
			if(delta >= 0) {
				menuItem.description = "GRD +" + delta;
			} else {
				menuItem.description = "GRD " + delta;
			}
		}
		menuItem.rightText = obj.cost + "G";
		menuItem.onclick = function(obj, item) {
			return function() {
				if(obj.cost > vars.gold) {
					alert("You cannot afford " + item.name + ".");
					return;
				}
				
				if(item.type == "weapon") {
					if(!vars.equipment[item.name]) {
						vars.equipment[item.name] = 0;
					}
					
					if(vars.equipment[item.name] != 0) {
						alert("You already have a " + item.name + ".");
						return;
					}
				}
				
				if(item.type == "armor") {
					if(!vars.armorList[item.name]) {
						vars.armorList[item.name] = 0;
					}
					
					if(vars.armorList[item.name] != 0) {
						alert("You already have a " + item.name + ".");
						return;
					}
				}
				
				var buy = confirm("Spend " + obj.cost + "G on " + item.name + "?");
				
				if(buy == true) {
					vars.gold -= obj.cost;
					if(item.type == "item") {
						giveItem(item.name);
					} else if(item.type == "weapon") {
						giveWeapon(item.name);
					} else {
						giveArmor(item.name);
					}
					document.getElementById("exitBar").onclick();
					buyMenu(itemList)
				}
			}
		}(obj, item);
		menu.push(menuItem);
	}
	generateMenu(menu, null, vars.gold + "G");
}

function sellItems() {
	sellMode = true;
	showItems();
}

function showSelectMap() {
	document.getElementById("exitBar").onclick();
	var menu = [];
	
	for(var key in maps) {
		var menuItem = {
			title : key,
			onclick : function(key) {
				return function() {
					map = new Map(maps[key]);
					map.render();
					map.renderMiniMap();
				}
			}(key)
		}
		
		menu.push(menuItem);
	}
	
	generateMenu(menu);
}

function showEditItems() {
	document.getElementById("exitBar").onclick();
	var menu = [];
	
	for(var key in vars.items) {
		var menuItem = {};
		
		menuItem.title = key;
		menuItem.rightText = "x" + vars.items[key];
		
		menuItem.onclick = function(key) {
			return function() {
				var offset = Math.floor(prompt("Enter amount to offset by:"));
				vars.items[key] += offset;
				showEditItems();
			}
		}(key);
		
		menu.push(menuItem);
	}
	
	itemEditMenuSplits[0].selected = true;
	itemEditMenuSplits[1].selected = false;
	itemEditMenuSplits[2].selected = false;
	generateMenu(menu, itemEditMenuSplits);
}

function showEditEquipment() {
	document.getElementById("exitBar").onclick();
	var menu = [];
	
	for(var key in vars.equipment) {
		var menuItem = {};
		
		menuItem.title = key;
		menuItem.rightText = "x" + vars.equipment[key];
		
		menuItem.onclick = function(key) {
			return function() {
				var offset = Math.floor(prompt("Enter amount to offset by:"));
				vars.equipment[key] += offset;
				showEditEquipment();
			}
		}(key);
		
		menu.push(menuItem);
	}
	
	itemEditMenuSplits[0].selected = false;
	itemEditMenuSplits[1].selected = true;
	itemEditMenuSplits[2].selected = false;
	generateMenu(menu, itemEditMenuSplits);
}

function showEditArmor() {
	document.getElementById("exitBar").onclick();
	var menu = [];
	
	for(var key in vars.armorList) {
		var menuItem = {};
		
		menuItem.title = key;
		menuItem.rightText = "x" + vars.armorList[key];
		
		menuItem.onclick = function(key) {
			return function() {
				var offset = Math.floor(prompt("Enter amount to offset by:"));
				vars.armorList[key] += offset;
				showEditArmor();
			}
		}(key);
		
		menu.push(menuItem);
	}
	
	itemEditMenuSplits[0].selected = false;
	itemEditMenuSplits[1].selected = false;
	itemEditMenuSplits[2].selected = true;
	generateMenu(menu, itemEditMenuSplits);
}

function showVars() {
	document.getElementById("exitBar").onclick();
	var menu = [];
	
	for(var key in vars) {
		var menuItem = {
			title : key + " : " + vars[key],
		}
		
		menu.push(menuItem);
	}
	
	generateMenu(menu);
}

function showDebug() {
	var menu = [
		{ title : "Select Map", onclick : showSelectMap },
		{ title : "Edit Inventory", onclick : showEditItems },
		{ title : "Show Vars", onclick : showVars }
	];
	
	generateMenu(menu);
}

function displayMenu() {
	sellMode = false;
	overlayMenu([
		//{ name : "Magic", action : showMagic },
		{ name : "Items", action : showItems },
		{ name : "Status", action : showStatus },
		{ name : "Save", action : showSave },
		//{ name : "Debug", action : showDebug },
		{ name : "Exit", action : hideMenu }
	]);
}

function overlayMenu(items) {
	disableControls();
	
	menuIsDisplayed = true;
	
	menuDiv = document.createElement("div");
	menuDiv.style.position = "absolute";
	menuDiv.style.left = "60px";
	menuDiv.style.top = "40px";
	menuDiv.style.width = "180px";
	menuDiv.style.color = "white";
	menuDiv.style.textAlign = "center";
	menuDiv.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
	if(firefox) {
		menuDiv.style.backgroundColor = "black";
	}
	menuDiv.style["-moz-border-radius"] = "5px";
	menuDiv.style["-webkit-border-radius"] = "5px";
	menuDiv.style.border = "1px solid #CCCCCC";
	document.body.appendChild(menuDiv);
	
	for(var i=0; i<items.length; i++) {
		var item = items[i];
		
		var menu = document.createElement("div");
		menu.style.padding = "8px 10px 8px 10px";
		menu.innerHTML = item.name;
		if(i != items.length - 1) {
			menu.style.borderBottom = "1px solid #CCCCCC";
		}
		menu.onclick = item.action;
		menuDiv.appendChild(menu);
	}
}

function showSave() {
	save();
	alert("Saved!");
}

function terminalMenu(index) {
	generateMenu([]);
	
	var rect = function(w, h, c) {
		var r = document.createElement("div");
		r.style.position = "absolute";
		r.style.width = w + "px";
		r.style.height = h + "px";
		r.style.backgroundColor = c;
		return r;
	}
	
	var shapeBuilder = function(i, c, s) {
		var m = 25;
		if(s == true) {
			m = 15;
		}
		var container = document.createElement("div");
		container.style.position = "absolute";
		container.style.width = (m * 3) + "px";
		container.style.height = (m * 3) + "px";
		if(i == 0) {
			var r = rect(m, m * 3, c);
			r.style.left = m + "px";
			container.appendChild(r);
		} else if(i == 1) {
			var r = rect(m * 3, m, c);
			r.style.top = m + "px";
			container.appendChild(r);
		} else if(i == 2) {
			var r = rect(m, m, c);
			r.style.left = m + "px";
			container.appendChild(r);
			
			r = rect(m * 2, m, c);
			r.style.top = m + "px";
			r.style.left = m + "px";
			container.appendChild(r);
		} else if(i == 3) {
			var r = rect(m, m, c);
			r.style.left = m + "px";
			r.style.top = (m * 2) + "px";
			container.appendChild(r);
			
			r = rect(m * 2, m, c);
			r.style.top = m + "px";
			r.style.left = m + "px";
			container.appendChild(r);
		} else if(i == 4) {
			var r = rect(m, m, c);
			r.style.left = m + "px";
			r.style.top = (m * 2) + "px";
			container.appendChild(r);
			
			r = rect(m * 2, m, c);
			r.style.top = m + "px";
			container.appendChild(r);
		} else {
			var r = rect(m, m, c);
			r.style.left = m + "px";
			container.appendChild(r);
			
			r = rect(m * 2, m, c);
			r.style.top = m + "px";
			container.appendChild(r);
		}
		
		return container;
	}
	
	var paintLevel = function(currentLocation) {
		mapDiv.innerHTML = "";
		
		var path = prepareCPUMap(map);
		
		for(var i=0; i<9; i++) {
			var index = vars.cpuMap[i];
			var color = "#666666";
			if(path[i] == 1) {
				color = "#FFFFFF";
			}
			var shape = shapeBuilder(index, color, false);
			shape.style.left = (2 + (i % 3) * 80) + "px";
			shape.style.top = (2 + Math.floor(i / 3) * 80) + "px";
			mapDiv.appendChild(shape);
			
			if(currentLocation == i) {
				var backingDiv = document.createElement("div");
				backingDiv.style.position = "absolute";
				backingDiv.style.width = "74px";
				backingDiv.style.height = "74px";
				backingDiv.style.left = (2 + (i % 3) * 80) + "px";
				backingDiv.style.top = (2 + Math.floor(i / 3) * 80) + "px";
				backingDiv.style.border = "1px solid #FFFFFF";
				mapDiv.appendChild(backingDiv);
			}
		}
	}
	
	var choices = [
		[3],
		[4,0],
		[4,0],
		[5,1,4],
		[2,4,0,5],
		[4,0],
		[1],
		[2,1,0],
		[5]
	]
	
	var menuDiv = document.getElementById("menuDiv");
	
	var panel = document.createElement("div");
	panel.style.width = "260px";
	panel.style.height = "320px";
	panel.style.position = "absolute";
	panel.style.left = "30px";
	panel.style.top = "70px";
	panel.style.backgroundImage = "url(images/ui/cpuPuzzle.png)";
	
	var mapDiv = document.createElement("div");
	mapDiv.style.width = "280px";
	mapDiv.style.height = "280px";
	mapDiv.style.position = "absolute";
	mapDiv.style.left = "40px";
	mapDiv.style.top = "140px";
	
	paintLevel(index);
	
	menuDiv.appendChild(panel);
	menuDiv.appendChild(mapDiv);
	
	var choiceList = choices[index];
	for(var j=0; j<choiceList.length; j++) {
		var button = shapeBuilder(choiceList[j], "#FFFFFF", true);
		button.style.left = (42 + j * 63) + "px";
		button.style.top = "82px";
		button.onclick = function(choice) {
			return function() {
				vars.cpuMap[index] = choice;
				paintLevel(index);
			}
		}(choiceList[j]);
		menuDiv.appendChild(button);
	}
}

function showMagic() {
	generateMenu([]);
	
	var menuDiv = document.getElementById("menuDiv");
	
	for(var i=0; i<spells.length; i++) {
		var spell = spells[i];
		var img = document.createElement("img");
		img.src = spell.src;
		img.style.position = "absolute";
		img.style.left = "10px";
		img.style.top = "55px";
		img.onclick = function(name) {
			return function() {
				document.getElementById("exitBar").onclick();
				hideMenu();
				setTimeout(function() {
					cast(name);
				}, 0);
			}
		}(spell.name);
		
		var caption = document.createElement("div");
		caption.innerHTML = spell.name;
		caption.style.color = "white";
		caption.style.position = "absolute";
		caption.style.left = "10px";
		caption.style.top = "110px";
		caption.style.width = "50px";
		caption.style.textAlign = "center";
		caption.style.fontSize = "14px";
		
		menuDiv.appendChild(img);
		menuDiv.appendChild(caption);
	}
}

function showItems() {
	var menu = [];
	for(var key in vars.items) {
		if(vars.items[key] == 0) {
			continue;
		}
		var menuItem = {};
		menuItem.onclick = function(itemName) {
			return function() {
				items[itemName].onUse();
				document.getElementById("exitBar").onclick();
				showItems();
			}
		}(key);
		menuItem.title = key;
		if(items[key].description) {
			menuItem.description = items[key].description;
		}
		menuItem.rightText = "x" + vars.items[key];
		if(sellMode == true) {
			menuItem.onclick = function(itemName) {
				return function() {
					var sell = confirm("Sell " + itemName + " for " +
						(items[itemName].cost >> 1) + "G?");
						
					if(sell == true) {
						vars.gold += (items[itemName].cost >> 1);
						vars.items[itemName]--;
						document.getElementById("exitBar").onclick();
						showItems();
					}
				}
			}(key);
			menuItem.description = vars.items[key] + " in stock";
			menuItem.rightText = (items[key].cost >> 1) + "G";
		}
		menu.push(menuItem);
	}
	itemMenuSplits[0].selected = true;
	itemMenuSplits[1].selected = false;
	itemMenuSplits[2].selected = false;
	generateMenu(menu, itemMenuSplits);
}

function showEquipment() {
	var menu = [];
	for(item in vars.equipment) {
		if(vars.equipment[item] == 0) {
			continue;
		}
		var menuItem = {};
		menuItem.onclick = function(itemName) {
			return function() {
				setWeapon(itemName);
				document.getElementById("exitBar").onclick();
				showEquipment();
			}
		}(item);
		menuItem.title = item;
		if(item == vars.weapon) {
			menuItem.onclick = function() {
				setWeapon("Fist");
				document.getElementById("exitBar").onclick();
				showEquipment();
			}
			menuItem.description = "equipped";
		} else {
			var delta = weapons[item].atk - vars.atk;
			if(delta >= 0) {
				menuItem.description = "ATK +" + delta;
			} else {
				menuItem.description = "ATK " + delta;
			}
		}
		menuItem.rightText = "x" + vars.equipment[item];
		
		if(sellMode == true) {
			menuItem.onclick = function(itemName) {
				return function() {
					var sell = confirm("Sell " + itemName + " for " +
						(weapons[itemName].cost >> 1) + "G?");
						
					if(sell == true) {
						vars.gold += (weapons[itemName].cost >> 1);
						vars.equipment[itemName]--;
						if(vars.equipment[itemName] == 0 && vars.weapon == itemName) {
							setWeapon("Fist");
						}
						document.getElementById("exitBar").onclick();
						showEquipment();
					}
				}
			}(item);
			menuItem.description = vars.equipment[item] + " in stock";
			menuItem.rightText = (weapons[item].cost >> 1) + "G";
		}
		
		menu.push(menuItem);
	}
	itemMenuSplits[0].selected = false;
	itemMenuSplits[1].selected = true;
	itemMenuSplits[2].selected = false;
	generateMenu(menu, itemMenuSplits);
}

function showArmor() {
	var menu = [];
	for(item in vars.armorList) {
		if(vars.armorList[item] == 0) {
			continue;
		}
		var menuItem = {};
		menuItem.onclick = function(itemName) {
			return function() {
				setArmor(itemName);
				document.getElementById("exitBar").onclick();
				showArmor();
			}
		}(item);
		menuItem.title = item;
		if(item == vars.armor) {
			menuItem.onclick = function() {
				setArmor("Cloth Shirt");
				document.getElementById("exitBar").onclick();
				showArmor();
			}
			menuItem.description = "equipped";
		} else {
			var delta = armor[item].grd - vars.grd;
			if(delta >= 0) {
				menuItem.description = "GRD +" + delta;
			} else {
				menuItem.description = "GRD " + delta;
			}
		}
		menuItem.rightText = "x" + vars.armorList[item];
		
		if(sellMode == true) {
			menuItem.onclick = function(itemName) {
				return function() {
					var sell = confirm("Sell " + itemName + " for " +
						(armor[itemName].cost >> 1) + "G?");
						
					if(sell == true) {
						vars.gold += (armor[itemName].cost >> 1);
						vars.armorList[itemName]--;
						if(vars.armorList[itemName] == 0 && vars.armor == itemName) {
							setArmor("Cloth Shirt");
						}
						document.getElementById("exitBar").onclick();
						showArmor();
					}
				}
			}(item);
			menuItem.description = vars.armorList[item] + " in stock";
			menuItem.rightText = (armor[item].cost >> 1) + "G";
		}
		
		menu.push(menuItem);
	}
	itemMenuSplits[0].selected = false;
	itemMenuSplits[1].selected = false;
	itemMenuSplits[2].selected = true;
	generateMenu(menu, itemMenuSplits);
}

function showStatus() {
	generateMenu([
		{
			title : "Health Points",
			rightText : vars.hp + "/" + vars.maxHP
		},
		/*{
			title : "Magic Points",
			rightText : vars.mp + "/" + vars.maxMP
		},*/
		{
			title : "Level",
			rightText : vars.lvl
		},
		{
			title : "Experience",
			rightText : vars.xp + "/" + vars.xpRequired
		},
		{
			title : "Gold",
			rightText : vars.gold
		},
		{
			title : "Strength",
			rightText : vars.str
		},
		{
			title : "Attack",
			rightText : vars.atk
		},
		{
			title : "Defense",
			rightText : vars.def
		},
		{
			title : "Guard",
			rightText : vars.grd
		}
	]);
}

function generateMenu(itemList, splits, rightNote) {
	var menuDiv = document.createElement("div");
	document.body.appendChild(menuDiv);
	menuDiv.id = "menuDiv";
	menuDiv.style.position = "absolute";
	menuDiv.style.left = "0px";
	menuDiv.style.top = "0px";
	menuDiv.style.width = "320px";
	menuDiv.style.backgroundColor = "black";
	
	var needsBottomBar = true;
	
	if(44 + itemList.length * 44 < 460) {
		menuDiv.style.height = "460px";
		needsBottomBar = false;
	}
	
	var rootItem = document.createElement("div");
	rootItem.style.height = "32px";
	rootItem.style.backgroundImage = "url(images/ui/menuCap.png)";
	rootItem.style.color = "white";
	rootItem.style.paddingLeft = "25px";
	rootItem.style.paddingTop = "12px";
	rootItem.innerHTML = "Back";
	
	menuDiv.appendChild(rootItem);
	
	var backButton = document.createElement("div");
	backButton.style.position = "absolute";
	backButton.style.left = "9px";
	backButton.style.top = "9px";
	backButton.style.width = "65px";
	backButton.style.height = "27px";
	backButton.id = "exitBar";
	backButton.onclick = function() { 
		document.body.removeChild(menuDiv);
		delete menuDiv;
		window.scrollTo(0, 1);
	};
	menuDiv.appendChild(backButton);
	
	if(rightNote) {
		var div = document.createElement("div");
		div.style.backgroundImage = "url(images/ui/splitter.png)";
		div.style.height = "25px";
		div.style.padding = "2px 6px 0px 6px";
		div.style.color = "white";
		div.style.position = "absolute";
		div.style.top = "9px";
		div.style.right = "10px";
		
		var img = document.createElement("div");
		img.style.width = "6px";
		img.style.height = "27px";
		img.style.position = "absolute";
		img.style.top = "0px";
		img.style.left = "0px";
		img.style.backgroundImage = "url(images/ui/splitterLeftCap.png)";
		div.appendChild(img);
		
		div.innerHTML += rightNote;
		
		var img = document.createElement("div");
		img.style.width = "6px";
		img.style.height = "27px";
		img.style.position = "absolute";
		img.style.top = "0px";
		img.style.right = "0px";
		img.style.backgroundImage = "url(images/ui/splitterRightCap.png)";
		div.appendChild(img);
		
		menuDiv.appendChild(div);
	}
	
	if(splits) {
		var splitWidth = 0;
		var splitDivs = [];
		for(var i=0; i<splits.length; i++) {
			var split = splits[i];
			var div = document.createElement("div");
			if(split.selected) {
				div.style.backgroundImage = "url(images/ui/splitter.png)";
			} else {
				div.style.backgroundImage = "url(images/ui/splitBackdrop.png)";
			}
			div.onclick = split.onclick;
			div.style.height = "25px";
			div.style.padding = "2px 6px 0px 6px";
			div.style.color = "white";
			div.style.position = "absolute";
			div.style.top = "9px";
			
			if(i == 0) {
				var img = document.createElement("div");
				img.style.width = "6px";
				img.style.height = "27px";
				img.style.position = "absolute";
				img.style.top = "0px";
				img.style.left = "0px";
				if(split.selected) {
					img.style.backgroundImage = "url(images/ui/splitterLeftCap.png)";
				} else {
					img.style.backgroundImage = "url(images/ui/splitBackdropLeftCap.png)";
				}
				
				div.appendChild(img);
			} else {
				var img = document.createElement("div");
				img.style.backgroundImage = "url(images/ui/splitter.png)";
				img.style.width = "1px";
				img.style.height = "27px";
				img.style.position = "absolute";
				img.style.top = "0px";
				img.style.left = "0px";
				div.appendChild(img);
			}
			div.innerHTML += split.name;
			if(i == splits.length - 1) {
				var img = document.createElement("div");
				img.style.width = "6px";
				img.style.height = "27px";
				img.style.position = "absolute";
				img.style.top = "0px";
				img.style.right = "0px";
				if(split.selected) {
					img.style.backgroundImage = "url(images/ui/splitterRightCap.png)";
				} else {
					img.style.backgroundImage = "url(images/ui/splitBackdropRightCap.png)";
				}
				
				div.appendChild(img);
			}
			
			menuDiv.appendChild(div);
			splitDivs.push(div);
			splitWidth += div.offsetWidth;
		}
		
		var offset = 74 + ((246 - splitWidth) >> 1);
		for(var i=0; i<splitDivs.length; i++) {
			splitDivs[i].style.left = offset + "px";
			offset += splitDivs[i].offsetWidth;
		}
	}
	
	for(var i=0; i<itemList.length; i++) {
		var item = itemList[i];
		
		var div = document.createElement("div");
		div.style.color = "white";
		div.style.height = "32px";
		div.style.backgroundImage = "url(images/ui/menuItem.png)";
		div.style.paddingLeft = "10px";
		div.style.paddingTop = "12px";
		
		div.innerHTML = "<b>" + item.title + "</b>";
		if(item.description == 0 || item.description) {
			div.innerHTML += " <span style=\"font-size: 13pt\"><i>(" + item.description + ")</i></span>";
		}
		
		if(item.rightText == 0 || item.rightText) {
			var rightDiv = document.createElement("div");
			rightDiv.style.textAlign = "right";
			rightDiv.style.position = "relative";
			rightDiv.style.left = "0px";
			rightDiv.style.width = "300px";
			rightDiv.style.top = "-21px";
			rightDiv.innerHTML = item.rightText;
			div.appendChild(rightDiv);
		}
		
		if(item.onclick) {
			div.onclick = item.onclick;
		}
		
		menuDiv.appendChild(div);
	}
	
	if(needsBottomBar == true) {
		rootItem = document.createElement("div");
		rootItem.style.height = "32px";
		rootItem.style.backgroundImage = "url(images/ui/menuCap.png)";
		rootItem.style.color = "white";
		rootItem.style.paddingLeft = "25px";
		rootItem.style.paddingTop = "12px";
		rootItem.innerHTML = "Back";
		menuDiv.appendChild(rootItem);
		
		backButton = document.createElement("div");
		backButton.style.position = "absolute";
		backButton.style.left = "9px";
		backButton.style.top = (44 + 9 + itemList.length * 44) + "px";
		backButton.style.width = "65px";
		backButton.style.height = "27px";
		backButton.style.marginBottom = "-10px";
		backButton.onclick = function() { 
			document.body.removeChild(menuDiv);
			delete menuDiv;
			window.scrollTo(0, 1);
		};
		rootItem.appendChild(backButton);
		
		if(rightNote) {
			var div = document.createElement("div");
			div.style.backgroundImage = "url(images/ui/splitter.png)";
			div.style.height = "25px";
			div.style.padding = "2px 6px 0px 6px";
			div.style.color = "white";
			div.style.position = "absolute";
			div.style.top = (44 + 9 + itemList.length * 44) + "px";
			div.style.right = "10px";

			var img = document.createElement("div");
			img.style.width = "6px";
			img.style.height = "27px";
			img.style.position = "absolute";
			img.style.top = "0px";
			img.style.left = "0px";
			img.style.backgroundImage = "url(images/ui/splitterLeftCap.png)";
			div.appendChild(img);

			div.innerHTML += rightNote;

			var img = document.createElement("div");
			img.style.width = "6px";
			img.style.height = "27px";
			img.style.position = "absolute";
			img.style.top = "0px";
			img.style.right = "0px";
			img.style.backgroundImage = "url(images/ui/splitterRightCap.png)";
			div.appendChild(img);

			menuDiv.appendChild(div);
		}
		
		if(splits) {
			var splitWidth = 0;
			var splitDivs = [];
			for(var i=0; i<splits.length; i++) {
				var split = splits[i];
				var div = document.createElement("div");
				if(split.selected) {
					div.style.backgroundImage = "url(images/ui/splitter.png)";
				} else {
					div.style.backgroundImage = "url(images/ui/splitBackdrop.png)";
				}
				div.onclick = split.onclick;
				div.style.height = "25px";
				div.style.padding = "2px 6px 0px 6px";
				div.style.color = "white";
				div.style.position = "absolute";
				div.style.top = (44 + 9 + itemList.length * 44) + "px";

				if(i == 0) {
					var img = document.createElement("div");
					img.style.width = "6px";
					img.style.height = "27px";
					img.style.position = "absolute";
					img.style.top = "0px";
					img.style.left = "0px";
					if(split.selected) {
						img.style.backgroundImage = "url(images/ui/splitterLeftCap.png)";
					} else {
						img.style.backgroundImage = "url(images/ui/splitBackdropLeftCap.png)";
					}

					div.appendChild(img);
				} else {
					var img = document.createElement("div");
					img.style.backgroundImage = "url(images/ui/splitter.png)";
					img.style.width = "1px";
					img.style.height = "27px";
					img.style.position = "absolute";
					img.style.top = "0px";
					img.style.left = "0px";
					div.appendChild(img);
				}
				div.innerHTML += split.name;
				if(i == splits.length - 1) {
					var img = document.createElement("div");
					img.style.width = "6px";
					img.style.height = "27px";
					img.style.position = "absolute";
					img.style.top = "0px";
					img.style.right = "0px";
					if(split.selected) {
						img.style.backgroundImage = "url(images/ui/splitterRightCap.png)";
					} else {
						img.style.backgroundImage = "url(images/ui/splitBackdropRightCap.png)";
					}

					div.appendChild(img);
				}

				menuDiv.appendChild(div);
				splitDivs.push(div);
				splitWidth += div.offsetWidth;
			}

			var offset = 74 + ((246 - splitWidth) >> 1);
			for(var i=0; i<splitDivs.length; i++) {
				splitDivs[i].style.left = offset + "px";
				offset += splitDivs[i].offsetWidth;
			}
		}
	}
}

function hideMenu() {
	document.body.removeChild(menuDiv);
	delete menuDiv;
	menuIsDisplayed = false;
	
	enableControls();
}