function ContactMap() {

	// create the card element
	// style pulled from pagespecific.css
	
	c=document.createElement("DIV");
	c.id="ContactCard";
	c.setAttribute("id","ContactCard");
	c.style.position="absolute";
	c.style.display="none";

	document.getElementsByTagName("body")[0].appendChild(c);

	// assign events to all areas within the image map
	var areas = document.getElementById("map_contact").getElementsByTagName("area");
	for (i=0;i<areas.length;i++) {
		areas[i].onmouseover = showCard;
		areas[i].onmouseout = hideCard;
		areas[i].onmousemove = Locate;
	}
}


function showCard(e) {
	if (!e) var e = window.event;
	var src;
	(e.srcElement)?src=e.srcElement:src=e.target;

	var myCard = document.getElementById('ContactCard');
	var myInfo = document.getElementById(src.getAttribute("card")).getElementsByTagName("TD");
	

	
	 // depends on five columns in contact table
	var myName = myInfo[0].innerHTML;
	var myPhone = myInfo[1].innerHTML;
	var myState = myInfo[2].innerHTML;

	myCard.innerHTML = myName + "<br />" + "Office: " + myPhone + "<br />" + myState;
	myCard.style.display = "block";
	Locate(e);
}
function hideCard(e) {
	document.getElementById("ContactCard").style.display = "none";
}

function Locate(e) {
	if (!e) var e = window.event;
	var posx=0,posy=0;
	if(e.pageX || e.pageY) {
		posx=e.pageX; posy=e.pageY;
		}
	else if(e.clientX || e.clientY) {
		if(document.documentElement.scrollTop) {
			posx=e.clientX+document.documentElement.scrollLeft;
			posy=e.clientY+document.documentElement.scrollTop;
			}
		else{
			posx=e.clientX+document.body.scrollLeft;
			posy=e.clientY+document.body.scrollTop;
		}
	}
	var c = document.getElementById("ContactCard")
	c.style.top = (posy+10)+"px";
	c.style.left= (posx+20)+"px";
}

addLoadEvent(function(){ContactMap();});;