/*

homevalue_hoverbox.js

author:		jon krauss
history:	r1.0 061906	live
			r1.1 072706	made more flexible, column titles from variables
			r1.2 041907 network bar changed this year, so made var numberOfPrecedingAreaTags setable

description:
	these scripts make the homevalues maps interactive by showing a box over the map when a reader mouses over
	a region with the relevant data for that region.

requires:
	homevalues_hoverbox_simple.css

setup:
	the order of the data in the array hoverboxData must correspond to the order of the imagemap <area> tags, because
	the function setupHover automatically adds the onmouseover/onmouseout event handlers to the <area> tags using
	the data in array hoverboxData.

example setup in parent html document:
	var totalColumns = 3;
	var columnTitle1 = "Neighborhood";
	var columnTitle2 = "Median&nbsp;Value";
	var columnTitle3 = "Change";
	var numberOfPrecedingAreaTags = 8; //count the number of area tags in the network bar

	hoverboxData = new Array(
	new Array(0,"","",""),
	new Array(1,"Edmonds","$250,000","20.7%"),
	new Array(2,"Mukilteo","$225,500","23.7%"),
	new Array(3,"Mill Creek","$193,470","16.4%"),
	new Array(4,"Snohomish","$189,950","7.5%"),
	new Array(5,"Bothell","$186,750","12.0%"),
	new Array(6,"Mountlake Terrace","$183,900","8.4%"),
	new Array(7,"Lynnwood","$168,025","6.2%"),
	new Array(8,"Everett","$164,500","9.2%")
	);


*/

document.onmousemove = trackMouse;
window.onload = setupHover;

function setupHover(){
//adds onmouseover and onmouseout event handlers to image map area tags (except network bar area tags),
//which fire off the hover function showing data in hovering div
	
	//loop through area tags and add event handlers
	var obj = document.body.getElementsByTagName("AREA");
	//var numberOfPrecedingAreaTags = 5; //area tags in network bar, need to be skipped over when adding event handlers

//alert(obj.length);
	var i;
	var strDebug;
	for (i = 0; i < obj.length; i++ ) {

		strFX = "    hover(" + (i + 1) + ",0)";
		strDebug = strDebug + strFX;


		if (document.all){
			if(obj[numberOfPrecedingAreaTags + i]){
				obj[numberOfPrecedingAreaTags + i].onmouseover = new Function("hover(" + (i + 1) + ",1)");
				obj[numberOfPrecedingAreaTags + i].onmouseout = new Function("hover(" + (i + 1) + ",0)");
			}
		} else {
			if(obj[numberOfPrecedingAreaTags + i]){
				obj[numberOfPrecedingAreaTags + i].setAttribute("onmouseover","hover(" + (i + 1) + ",1)");
				obj[numberOfPrecedingAreaTags + i].setAttribute("onmouseout","hover(" + (i + 1) + ",0)");
			}
		}

	}
	//alert(strDebug);
}


var isHovering = false;
function trackMouse(evt){
//tracks mouse position and moves hoverbox if hovering is currently in effect

	//get mouse position
	var mouseX = 0;
	var mouseY = 0;
	if (document.all) { // if IE
		//mouseX = event.clientX + document.body.scrollLeft;
		//mouseY = event.clientY + document.body.scrollTop;
		mouseX = event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
		mouseY = event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
		//mouseX -= 10;
		//mouseY -= 60;
		mouseX -= 130;
		mouseY -= 90;
	} else {
		mouseX = evt.pageX;
		mouseY = evt.pageY;
		//mouseX -= 70;
		//mouseY -= 70;
		mouseX -= 130;
		mouseY -= 90;
	}
	//if (mouseX < 0){mouseX = 0;}
	//if (mouseY < 0){mouseY = 0;}
	
	var hoverBox = document.getElementById("hoverBox");
	var data = document.getElementById("data");

	if (isHovering){
		hoverBox.style.left = mouseX + "px";
		hoverBox.style.top = mouseY + "px";
		hoverBox.style.display = "block";
	}
}

function hover(hoverID, hoverState){
//hides or shows hover box of given id
//hoverID -- number of image map region and index in array
//hoverState -- boolean value, 1 for on, 0 for off
	
//alert("hover " + hoverID + " " + hoverState);
	
	if (document.getElementById){
	
		var hoverBox = document.getElementById("hoverBox");
		var data = document.getElementById("data");
		//var newdata = hoverboxData[hoverID][0] + "<br>" + hoverboxData[hoverID][1] + "<br>" + hoverboxData[hoverID][2];
		var newdata = "";
		
		if (totalColumns == 2){
			newdata += "<table cellspacing='0' cellpadding='0' border='0' width='200'>";
			newdata += "<tr><th>&nbsp;</th><th>";
			newdata += columnTitle1;
			newdata += "</th><th class='alignrt'>";
			newdata += columnTitle2;
			newdata += "</th></tr>";
			newdata += "<tr><td width='0'>";
			newdata += hoverboxData[hoverID][0];
			newdata += "</td><td width='100%'>";
			newdata += hoverboxData[hoverID][1];
			newdata += "</td><td class='alignrt' width='100%'>";
			newdata += hoverboxData[hoverID][2];
			newdata += "</td></tr></table>";
			hoverBox.style.width = "200px";
			hoverBox.style.marginLeft = "50px";
		} else if (totalColumns == 3){
			newdata += "<table cellspacing='0' cellpadding='0' border='0'>";
			newdata += "<tr><th>&nbsp;</th><th>";
			newdata += columnTitle1;
			newdata += "</th><th class='alignrt'>" ;
			newdata += columnTitle2;
			newdata += "</th><th class='alignrt'>";
			newdata += columnTitle3;
			newdata += "</th></tr>";
			newdata += "<tr><td width='0'>";
			newdata += hoverboxData[hoverID][0];
			newdata += "</td><td width='100%'>"
			newdata += hoverboxData[hoverID][1];
			newdata += "</td><td width='0' class='alignrt'>";
			newdata += hoverboxData[hoverID][2];
			newdata += "</td><td width='0' class='alignrt'>";
			newdata += hoverboxData[hoverID][3];
			newdata += "</td>";
			newdata += "</tr></table>";
		} else {
			alert("error: incorrect totalColumns");	
		}
		
		
		//turn on
		if (hoverState){
			isHovering = true;
			//update innerhtml
			data.innerHTML = newdata;
			//show hoverBox
			if (hoverBox.style.display = "none"){
				hoverBox.style.display = "block";
			}
		} else {
			isHovering = false;
			hoverBox.style.display = "none";
		}
	}
}