// javascript dynamic map script.


window.onload = loadEvents;

function loadEvents(){
	document.getElementById("city").onmouseover = loadAreaList;
	document.getElementById("city").onmouseout = clearAreaList;	
	document.getElementById("east").onmouseover = loadAreaList;
	document.getElementById("east").onmouseout = clearAreaList;
	document.getElementById("north").onmouseover = loadAreaList;
	document.getElementById("north").onmouseout = clearAreaList;
	document.getElementById("northEast").onmouseover = loadAreaList;
	document.getElementById("northEast").onmouseout = clearAreaList;
	document.getElementById("northWest").onmouseover = loadAreaList;
	document.getElementById("northWest").onmouseout = clearAreaList;
	document.getElementById("west").onmouseover = loadAreaList;
	document.getElementById("west").onmouseout = clearAreaList;
	document.getElementById("southWest").onmouseover = loadAreaList;
	document.getElementById("southWest").onmouseout = clearAreaList;
	document.getElementById("southEast").onmouseover = loadAreaList;
	document.getElementById("southEast").onmouseout = clearAreaList;
	document.getElementById("south").onmouseover = loadAreaList;
	document.getElementById("south").onmouseout = clearAreaList;
	document.getElementById("greaterPollok").onmouseover = loadAreaList;
	document.getElementById("greaterPollok").onmouseout = clearAreaList;
}

function loadAreaList(){
	var area = this.id;
	var tList = document.getElementById(area + "AreaList");
	var tBox = document.getElementById("areaListBox");
	var oBox = document.getElementById("areaListing");
	tBox.appendChild(tList);
	document.getElementById("glasgowMap").src = "images/" + area + "Area.gif";
}
function clearAreaList(){
	var tBox = document.getElementById("areaListBox");
	var oBox = document.getElementById("areaListing");
	if (tBox.lastChild){
		oBox.appendChild(tBox.lastChild);
	}
	document.getElementById("glasgowMap").src = "images/glasgow-large.gif";
}