/* ======================================================================
	Written by: Andres Gonzalez

	This script controls all the functionally/effects of the map except the
	panning, which is done by a script.aculo.us draggable ;-)

	Current features driven by this script are:
		- showing/hidding tooltips
		- properly placing tooltips so they dont show beyond the viewport
		- displaying enlarged city thumbnail
		- setting cookie to remember last viewed position of map
		
	Currently only one map dimension can be used at a time, but adding
	the features to use smaller or larger map sizes (zooming) wont be difficult.
	Viewport size can be changed witout a problem.
	
	This script works in conjunction with a JSP script which reads all
	data from an XML file, containing city, location, x & y coordinates,
	and city id. Another JSP script than generates a css file which contains
	coordinates for each city, which is responsible for the placement of
	each plot on the map, and also outputs the markup for each city.

====================================================================== */

var viewPortW = 750; //viewport width
var viewPortH = 600; //viewport height
var mapW = 2048; //map width
var mapH = 998; //map height
var tooltipTime = 300; //time in ms to delay show/hide tooltips

///////////////////////////////////////////////////////////////////////////
/////////////////////[don't edit below this line]//////////////////////////
///////////////////////////////////////////////////////////////////////////

var timeOut; //holds setTimeout instance for tooltip
var curCity; //holds currently displayed city
var curTooltip; //holds currenlty displayed city tooltip
var maxXdisp = mapW-viewPortW; //max X displacement (max value for panning)
var maxYdisp = mapH-viewPortH; //max Y displacement (max value for panning)

function cityCtrl(id, x, y) {
	var city = document.getElementById(id);
	var tooltip = document.getElementById(id).getElementsByTagName('div')[0];
	
	cityShow(city, tooltip, x, y);
	timeOut = setTimeout(function(){ cityHide(city, tooltip); }, tooltipTime);
}//cityCtrl end

//shows city tooltip
function cityShow(city, tooltip, x, y){
	if(curCity){
		cityHide(curCity, curTooltip);//only one city should be displayed at a time
	}
	clearTimeout(timeOut);
	/*
	because IE deals with z-index horribly, all elements are set to 0
	only when moused over, does the z-index value change for the current elements
	*/
	city.style.zIndex = "10";
	tooltip.style.zIndex = "20";
	tooltipPos(tooltip, x, y);

	//sets currently displayed city & its tooltip
	curCity = city; curTooltip = tooltip;
	//document.getElementById("debug").innerHTML = "show";
}//cityShow end

//hides city tooltip
function cityHide(city, tooltip){
	//to effectively hide items, any altered attributes must be set to auto
	city.style.zIndex = "0";
	tooltip.style.top = "auto";
	tooltip.style.bottom = "auto";
	tooltip.style.right = "auto";
	tooltip.style.left = "-9999px";
	tooltip.style.zIndex = "0";
	//document.getElementById("debug").innerHTML = "hide";
}//cityHide end

//places the tooltip in the proper direction, according to coordinates
function tooltipPos(tooltip, x, y){
	var mapStyle = document.getElementById('map').style; //holds map css style
	var maxT = Math.abs(parseInt(mapStyle.top))+250; //max px from top
	var maxR = Math.abs(parseInt(mapStyle.left))+500; //max px from right

	var pos;
	if(y<maxT){ pos = "b"; }else{ pos = "t"; }
	if(x>maxR){ pos += "l"; }else{ pos += "r"; }
	
	switch(pos){
		case 'tl':
			tooltip.style.bottom = "0";
			//since 'left' value is used to hide tooltip, it must be reset
			tooltip.style.left = "auto";
			tooltip.style.right = "0";
			break;
		case 'tr':
			tooltip.style.bottom = "0";
			tooltip.style.left = "0";
			break;
		case 'br':
			tooltip.style.top = "0";
			tooltip.style.left = "0";
			break;
		case 'bl':
			tooltip.style.top = "0";
			tooltip.style.left = "auto";
			tooltip.style.right = "0";
			break;
	}
}//tooltipPos end

//sets map's position
function setMapPos(){
	var initXpos; var initYpos;
	
	if(readCookie("mapPos")){//if cookie is set, use those values
		var value = readCookie("mapPos");
		var va = value.split(','); //value is set as (x,y)
		
		initXpos = parseInt(va[0]); //last x position of map, set by cookie
		initYpos = parseInt(va[1]); //last y position of map, set by cookie
	}else{ //if cookie has not been set
		initXpos = -295; //initial x coord of map (top = 0)
		initYpos = -177; //initial y coord of map (left = 0)
	}
	
	var mapStyle = document.getElementById('map').style; //holds map css style
	mapStyle.left = initXpos+'px';
	mapStyle.top = initYpos+'px';

	/*map is initially set to display=none, this avoids a skip when map is possitioned by cookie
	since map displays at top, left by default*/
	mapStyle.display = 'block';
}//setMapPos end

/*
directs browser to view enlarged image, and also sets a cookie with current map position
this way when they return to the map, it wont always return to the default position.
*/
function viewCity(city){
	x = parseInt(document.getElementById('map').style.left);
	y = parseInt(document.getElementById('map').style.top);
	document.cookie = "mapPos="+x+","+y;
	window.location = "mapView/"+city+".jpg";
}//viewCity end

//this function simply reads the cookie that is set above (function from quirksmode.org)
function readCookie(name){
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++)
	{
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}//readCookie end

//sets map position once document is loaded
window.onload=setMapPos;