// JavaScript Document

var mouseoverMap = document.getElementById("mouseover-map");
var dtTags = mouseoverMap.getElementsByTagName("dt");
var ddTags = mouseoverMap.getElementsByTagName("dd");

var phaseListOne = document.getElementById("phaseListOne");
var phaseListTwo = document.getElementById("phaseListTwo");
var phaseList = Array(phaseListOne,phaseListTwo);
var liTags = Array();

for(i=0; i < phaseList.length; i++)
{
	var liList = phaseList[i].getElementsByTagName("li");
	
	for(j=0; j < liList.length; j++)
	{
		liTags.push(liList[j]);
	}
}

for(i=0; i< dtTags.length; i++)
{
	dtTags[i].onmouseover = mouseOverBackground;
	dtTags[i].onmouseout = mouseOutBackground;
	liTags[i].onmouseover = mouseOverBackground;
	liTags[i].onmouseout = mouseOutBackground;
}

function mouseOverBackground(event)
{
	for(i=0; i < dtTags.length; i++)
	{
		if(dtTags[i].id == this.id || liTags[i].id == this.id)
		{
			showBackground(i);
		}
	}
}

function mouseOutBackground(event)
{
	showBackground(-1);
}

function showBackground(number)
{
	if(number > -1)
	{
		mouseoverMap.style.backgroundPosition = "0px "+(-354*(number+1))+"px";
		ddTags[number].style.display = "block";
	}
	else
	{
		mouseoverMap.style.backgroundPosition = "0px -1px";
		for(i=0; i < ddTags.length; i++)
		{
			ddTags[i].style.display = "none";
		}
	}
}