var ZoomLevels = 7;
var LEFT_BUTTON = 1;

var mouseX=0;
var mouseY=0;
var x1=0;
var y1=0;
var x2=0;
var y2=0;
var zleft=0;
var zright=0;
var ztop=0;
var zbottom=0;

var zooming=false;

//correction for IE
var add;

if( window.name == "map") //'map' frame
	add = 0;
else
	add=-2;				 //no frames

function createZoomBox()
{
  setZoomBoxSettings();	
	var zBgColor ="#ff0000";
	var content = "";
	//Zoom Box
	content = '<img name="zoomImageTop" src="include/map/images/pix.gif" width=1 height=1>';
	createLayer("zoomBoxTop",hspc,vspc,iWidth,iHeight,false,content, zBgColor);
	content = '<img name="zoomImageLeft" src="include/map/images/pix.gif" width=1 height=1>';
	createLayer("zoomBoxLeft",hspc,vspc,iWidth,iHeight,false,content, zBgColor);
	content = '<img name="zoomImageRight" src="include/map/images/pix.gif" width=1 height=1>';
	createLayer("zoomBoxRight",hspc,vspc,iWidth,iHeight,false,content, zBgColor);
	content = '<img name="zoomImageBottom" src="include/map/images/pix.gif" width=1 height=1>';
	createLayer("zoomBoxBottom",hspc,vspc,iWidth,iHeight,false,content, zBgColor);
}

function setZoomBoxSettings() {
	// Set up event capture for mouse movement
	if (document.layers) {
		document.captureEvents(Event.MOUSEMOVE);
		document.captureEvents(Event.MOUSEDOWN);
		document.captureEvents(Event.MOUSEUP);
	}
	document.onmousemove = getMouse;
	document.onmousedown = mapTool;
	document.onmouseup = mouseUp;
}

// check for mouseup
function mouseUp(e) {

 	var button;
	
	if (document.layers) {
		button = e.which;
	} 
	else {
		button = event.button;
	}

	if( button != LEFT_BUTTON)
	{
		zooming=false;
		hideZoomBox();
	    return;
	}

	if (zooming) {
		if (mouseX<0)
		 	mouseX = 0;
		if (mouseX>iWidth)
			mouseX = iWidth;
		if (mouseY<0)
			mouseY = 0;
		if (mouseY>iHeight)
			mouseY = iHeight;
			
		mapTool(e);
	}
	else
	{
		if( (gMode != "ZoomIn" && gMode != "zoomout"))
		{
			getImageXY(e);
			if ( (mouseX>=0) && (mouseX<iWidth) && (mouseY>=0) && (mouseY<iHeight))
			{
				zleft = mouseX;
				ztop = mouseY;					
				refreshMap();
			}
		}
	}
}

function mapTool (e) {
	//if the user is smart enough to use IE, they can change the mode to "zoomout" when holding shift or "pan" when holding ctl.
	if(!document.layers)
	{
		gMode="ZoomIn"; //default tool
		if(event.shiftKey) 
			gMode="zoomout";			
		if(event.ctrlKey)
			gMode="pan";
	}

 	var button;
	
	if (document.layers) {
		button = e.which;
	} 
	else {
		button = event.button;
	}

	if( button != LEFT_BUTTON)
		 return;

	onResize();
		
	getImageXY(e);
	
	if ( (gMode == "ZoomIn" || gMode == "zoomout") && (!zooming) && (mouseX>=0) && (mouseX<iWidth) && (mouseY>=0) && (mouseY<iHeight)) {
			startZoomBox(e);
		return false;
	} else if (zooming) {
		getMouse(e);
		stopZoomBox(e);
  }
	
  return true;
}

function getImageXY(e) {

	if (document.layers) {
		mouseX=e.pageX;
		mouseY=e.pageY;
	} else {
		mouseX=event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft + add;//custom values
		mouseY=event.clientY + document.body.scrollTop + document.documentElement.scrollTop + add;
	}
	
	// subtract offsets from page left and top
	mouseX = mouseX-hspc;
	mouseY = mouseY-vspc;
}	

// get the coords at mouse position
function getMouse(e) {
	getImageXY(e);
	
	if (zooming) {
		if (mouseX<0)
		 	mouseX = 0;
		if (mouseX>iWidth)
			mouseX = iWidth;
		if (mouseY<0)
			mouseY = 0;
		if (mouseY>iHeight)
			mouseY = iHeight;
		x2=mouseX;
		y2=mouseY;
		setClip();
		return false;
	} else 
    	return true;
  return true;
}

// start zoom in.... box displayed
function startZoomBox(e) {
//	moveLayer("map",hspc,vspc);
	getImageXY(e);	
	// keep it within the MapImage
	if ((mouseX<iWidth) && (mouseY<iHeight)) {
		if (!zooming) {
			x1=mouseX;
			y1=mouseY
			x2=x1+1;
			y2=y1+1;
			clipLayer("zoomBoxTop",x1,y1,x2,y2);
			clipLayer("zoomBoxLeft",x1,y1,x2,y2);
			clipLayer("zoomBoxRight",x1,y1,x2,y2);
			clipLayer("zoomBoxBottom",x1,y1,x2,y2);
			zooming=true;
			showLayer("zoomBoxTop");
			showLayer("zoomBoxLeft");
			showLayer("zoomBoxRight");
			showLayer("zoomBoxBottom");
		}
	} else {
		if (zooming) {
			stopZoomBox(e);
		}
	}
	return false;	
}

// stop zoom box display... zoom in/out
function stopZoomBox(e) {

	zooming=false;
	
	if ( (zright <zleft+2) && (ztop < zbottom+2) )
	{
		// if the zoom box is too small
		zright = zleft;
		zbottom = ztop;
	}
	
	refreshMap();
	
	return true;
}

// clip zoom box layer to mouse coords
function setClip() {	
	var tempX=x1;
	var tempY=y1;
	if (x1>x2) {
		zright=x1;
		zleft=x2;
	} else {
		zleft=x1;
		zright=x2;
	}
	if (y1>y2) {
		zbottom=y1;
		ztop=y2;
	} else {
		ztop=y1;
		zbottom=y2;
	}
	
	if ((x1 != x2) && (y1 != y2)) {
		var ovBoxSize = 1;
		clipLayer("zoomBoxTop",zleft,ztop,zright,ztop+ovBoxSize);
		clipLayer("zoomBoxLeft",zleft,ztop,zleft+ovBoxSize,zbottom);
		clipLayer("zoomBoxRight",zright-ovBoxSize,ztop,zright,zbottom);
		clipLayer("zoomBoxBottom",zleft,zbottom-ovBoxSize,zright,zbottom);
	}
}

function hideZoomBox() {
	hideLayer("zoomBoxTop");
	hideLayer("zoomBoxLeft");
	hideLayer("zoomBoxRight");
	hideLayer("zoomBoxBottom");
}

function onResize(){	
		var oMap = document.images['mapimg'];
	
		if( document.all){
		
			vspc = 0; //custom values
			hspc = 0;
			var element = oMap;
	
			do
			{
				vspc += element.offsetTop;
				hspc += element.offsetLeft;
			} 
			while( (element = element.offsetParent))						
		}
		else
		{
			vspc = oMap.y;
			hspc = oMap.x;
		}

		if(document.all){			
			moveLayer( "zoomBoxTop", hspc, vspc);
			var lay = document.getElementById("zoomBoxTop");
			var box = lay.getBoundingClientRect();
			var curLeft = parseInt(lay.style.left.replace(/[^0-9]/g,""));
			var curTop = parseInt(lay.style.top.replace(/[^0-9]/g,""));
						
			var hspcNew = curLeft - (box.left - curLeft) + 2 - (document.body.scrollLeft + document.documentElement.scrollLeft);
			var vspcNew = curTop - (box.top - curTop) + 2 - (document.body.scrollTop + document.documentElement.scrollTop);			
			
			moveLayer( "zoomBoxTop", hspcNew, vspcNew);
			moveLayer( "zoomBoxLeft", hspcNew, vspcNew);
			moveLayer( "zoomBoxRight", hspcNew, vspcNew);
			moveLayer( "zoomBoxBottom", hspcNew, vspcNew);
		}
		else{		
			moveLayer( "zoomBoxTop", hspc, vspc);
			moveLayer( "zoomBoxLeft", hspc, vspc);
			moveLayer( "zoomBoxRight", hspc, vspc);
			moveLayer( "zoomBoxBottom", hspc, vspc);
		}	
		
}

function refreshMap()
{
	document.Form.map_x.value = zleft;
	document.Form.map_y.value = ztop;
	document.Form.map_x2.value = zright;
	document.Form.map_y2.value = zbottom;

	var Form = document.Form;
	
	var X = iWidth;
	var Y = iHeight;
	
	var T = parseFloat( Form.T.value);
	var B = parseFloat( Form.B.value);
	var L = parseFloat( Form.L.value);
	var R = parseFloat( Form.R.value);
	
	var stepY = (T - B)/Y;
    var stepX = (R - L)/X;
	
	if( gMode == 'pan')
	{
		var pX = L + ((zleft) * stepX);
		var pY = T - ((ztop) * stepY);
		
		T = pY + Y/2 * stepY;
		L = pX - X/2 * stepX;
		
		B = pY - Y/2 * stepY;
		R = pX + X/2 * stepX;
		
	}
	
	if( gMode == 'ZoomIn')
	{
		if( zleft != zright || ztop != zbottom)
		{
			L = L + (zleft * stepX);
			R = R - ((X-zright) * stepX);

			T = T - (ztop * stepY);	
			B = B + ((Y-zbottom) * stepY);
		}
		else
		{
			var cX = L + (zleft * stepX);
			var cY = T - (ztop * stepY);
			
			L = cX - (X/2)*(stepX/2);
			R = cX + (X/2)*(stepX/2);
			
			T = cY + (Y/2)*(stepY/2);
			B = cY - (Y/2)*(stepY/2);
		}
	}
	
	if( gMode == "zoomout")
	{
		if( zleft != zright || ztop != zbottom)
		{
			var x = zleft + (zright-zleft)/2;
			var y = ztop + (zbottom-ztop)/2;
			
			var zWidth = zright-zleft;
			var zHeight = zbottom-ztop;
			var ZO = zWidth > zHeight?X/zWidth:Y/zHeight;
			ZO = ZO > 9?9:ZO;
			
			var cX = L + (x * stepX);
			var cY = T - (y * stepY);

			L = cX - (X/2)*(stepX*ZO);
			R = cX + (X/2)*(stepX*ZO);
			
			T = cY + (Y/2)*(stepY*ZO);
			B = cY - (Y/2)*(stepY*ZO);
		}
		else
		{
			var cX = L + (zleft * stepX);
			var cY = T - (ztop * stepY);
			
			L = cX - (X/2)*(stepX*2);
			R = cX + (X/2)*(stepX*2);
			
			T = cY + (Y/2)*(stepY*2);
			B = cY - (Y/2)*(stepY*2);
		}
	}
	
	if( gMode == 'pan' || gMode == "ZoomIn" || gMode == "zoomout")
	{
		var ext = new Extent( T, L, B, R);
		ext = normExt( ext);
		
		Form.T.value = ext.T;
		Form.L.value = ext.L;
		Form.B.value = ext.B;
		Form.R.value = ext.R;

		setMapImgSrc( ext.T, ext.L, ext.B, ext.R);
		hideZoomBox();
	}
	else
	{
		document.Form.submit();
	}
	var Level =  Math.round((Math.log((R-L)/0.018))/((18/ZoomLevels)*Math.log(2))) ;
	SetLevelImages(Level);
}

function setZoomLevel(Level)
{
	var T = parseFloat( document.Form.T.value);
	var B = parseFloat( document.Form.B.value);
	var L = parseFloat( document.Form.L.value);
	var R = parseFloat( document.Form.R.value);
	
	stepX=0.018;
	stepY=0.013;
	
	stepX = (stepX)*Math.pow(2,Level*(18/ZoomLevels))
	stepY = (stepY)*Math.pow(2,Level*(18/ZoomLevels))	
	
	var cX = L+((R-L)/2)
	var cY = B+((T-B)/2)
		
	L = cX - stepX;
	R = cX + stepX;
	
	T = cY + stepY;
	B = cY - stepY;
	
	var ext = new Extent( T, L, B, R);
		ext = normExt( ext);
		
		document.Form.T.value = ext.T;
		document.Form.L.value = ext.L;
		document.Form.B.value = ext.B;
		document.Form.R.value = ext.R;

		setMapImgSrc( ext.T, ext.L, ext.B, ext.R);
		SetLevelImages(Level);
}

function SetLevelImages(Level)
{
	for(var i=19; i<25; i++)
	{
		eval("document.images['Image" + i + "'].src = 'http://images.50below.com/template/map_images/map-4x" + eval(i-17) + ".gif'");
		//alert("document.images['Image" + i + "'].src = 'http://images.50below.com/template/map_images/map-4x" + eval(i-17) + ".gif'");
	}
	NewLevel=Level
	if(Level<1)NewLevel=1;
	if(Level>6)NewLevel=6;	
	
	eval( "document.images['Image" + eval(18+NewLevel) + "'].src = 'http://images.50below.com/template/map_images/map_over-4x" + eval(1+NewLevel) + ".gif'");	
}