var backColor = "#191970";	// color of box
var lineSize = 3;	// Zoombox line width;

// Global vars
var iWidth=0;
var iHeight=0;
var iLeft=0;
var iRight=0;
var iTop=0;
var iBottom=0;

var left=0; 
var right=0;
var top=0;
var bottom=0;

var zbMapImage = "MapImage"; // default
var currMode = "ZOOM_MODE";
var zooming = false;

var mouseX=0;
var mouseY=0;
var x1=0;
var y1=0;
var x2=0;
var y2=0;

var ClientID; //Client ID passed back to the control

// Global vars for browser type and version
var isNav = (navigator.appName.indexOf("Netscape")>=0);
var isNav4 = false;
var isIE4 = false;
var is5up = false;

if (isNav) {if (parseFloat(navigator.appVersion)<5){isNav4=true;}else {is5up = true;}}else{isIE4=true;if (navigator.appVersion.indexOf("MSIE")>0) {isIE4 = false;is5up = true;}}
//##################################################################################
// INITIALISE ZOOM BOX FUNCTION
function initZoomBox(iMapWidth, iMapHeight, mapImageName,iClientID)
{
    if(document.getElementById(iClientID + "_MapMode").value=="")
    {currMode = "ZOOM_MODE";}
    else
    {currMode = document.getElementById(iClientID + "_MapMode").value;}
    
    ClientID=iClientID;
	iWidth = parseInt(iMapWidth);
	iHeight = parseInt(iMapHeight);
	zbMapImage = ClientID + "_" + mapImageName;
    //Get position of image - left and top
    iLeft = findPosX(document.getElementById(zbMapImage));
    iTop = findPosY(document.getElementById(zbMapImage));
    iRight = iLeft + iWidth;
    iBottom = iTop + iHeight;

    //Create Coordinate display box    
    createCoordsDiv("coordDiv",iLeft + 5,iTop + (iHeight-18),130,17);//175
    hideLayer("coordDiv");
    createZoomDiv("zoomDiv",0,0,0,0);
    hideLayer("zoomDiv");
    //initiate capture events
	if (isNav) {
		document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
	}

	document.onmousedown = chkMouseDown;
	document.onmouseup = chkMouseUp;
	document.onmousemove = getMouse;

	updateZoomBoxCursor(currMode);
}
//##################################################################################
//Create zoom and coords div
function createCoordsDiv(name,left,top,width,height)
{
        var str;
        str = '<div id= "' + name + '" style="color: #000000;filter:alpha(opacity=65);opacity: 0.65;';
        str +='position:absolute; overflow:hidden; border-right: #191970 1px solid;border-top: #191970 1px solid;border-left: #191970 1px solid;border-bottom: #191970 1px solid;';
        str +='background-color: #b0c4de; left:' + left + 'px; top:' + top + 'px; width:' + width + 'px; height:' + height + 'px;' + '; z-index:1; visibility:hidden;font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;font-size: 10px;"></div>';
	    document.writeln(str);
}
//__________________________________________________________________________________
function createZoomDiv(name,left,top,width,height)
{
        var str;
        str = '<div id= "' + name + '" style="color: #000000;filter:alpha(opacity=65);opacity: 0.65;';
        str +='position:absolute; overflow:hidden; border-right: #191970 2px dotted;border-top: #191970 2px dotted;border-left: #191970 2px dotted;border-bottom: #191970 2px dotted;';
        str +='background-color: #b0c4de; left:' + left + 'px; top:' + top + 'px; width:' + width + 'px; height:' + height + 'px;' + '; z-index:1; visibility:hidden"></div>';
	    document.writeln(str);
}

//##################################################################################
//Draw Zoom B0x and Stop Zoom Box Functions
// start zoom in
function drawZoomBox(x,y) {
    var mapx,mapy,newx,newy,width,height;
    var zoomobj;

    try{
        zoomobj= document.getElementById("zoomDiv");
        mapx = x;
        mapy = y;
        startleft = left + iLeft; //add the left buffer
        starttop = top + iTop; //add the top buffer

        if ((mapx >= startleft)&&(mapy >= starttop))
            {
                zoomobj.style.left = startleft +"px";
                zoomobj.style.top = starttop + "px";
                if (mapx > iRight)
                 {
                 zoomobj.style.width= (iRight -startleft - 2) + "px";
                 }
                else 
                {
                  zoomobj.style.width= (mapx -startleft) + "px";
                }
                if (mapy > iBottom)
                 {
                   zoomobj.style.height= (iBottom -starttop - 2) + "px";
                 }
                else 
                {
                   zoomobj.style.height= (mapy -starttop) + "px";
                }
            }
        else if ((mapx < startleft)&&(mapy > starttop))
            {     
                zoomobj.style.top = starttop + "px";
                if (mapx < iLeft)
                 {
                   zoomobj.style.width= (startleft-(iLeft + 2)) + "px";
                   zoomobj.style.left = (iLeft+2) + "px";;
                 }
                else 
                 {  
                   zoomobj.style.width= (startleft-mapx) + "px";;
                   zoomobj.style.left = mapx + "px";;
                 }
                if (mapy > iBottom)
                 {
                   zoomobj.style.height= (iBottom -starttop - 2) + "px";;
                 }
                else
                 {
                   zoomobj.style.height= (mapy -starttop) + "px";
                 }
            }
        else if ((mapx < startleft)&&(mapy < starttop))
            {
                if (mapx < iLeft)
                 { 
                    zoomobj.style.width= (startleft-(iLeft + 2)) + "px";;
                    zoomobj.style.left = (iLeft+2) + "px";;
                 }
                else 
                 {
                   zoomobj.style.width= (startleft-mapx) + "px";;
                   zoomobj.style.left = mapx + "px";;
                 }
                if (mapy < iTop) 
                {
                   zoomobj.style.height= (starttop - (iTop +2)) + "px";;
                   zoomobj.style.top = (iTop+2) + "px";;
                }
                else 
                {
                   zoomobj.style.height= (starttop-mapy)  + "px";;
                   zoomobj.style.top = mapy + "px";;
                }
            }        
        else if ((mapx > startleft)&&(mapy < starttop))
            {   
                zoomobj.style.left = startleft + "px";;
                if (mapx > iRight)
                 {
                    zoomobj.style.width= (iRight -startleft - 2) + "px";;
                 }
                else
                 {
                  zoomobj.style.width= (mapx -startleft) + "px";;
                 }
                if (mapy < iTop)
                 {
                   zoomobj.style.height= (starttop - (iTop +2)) + "px";;
                   zoomobj.style.top = (iTop+2) + "px";;
                 }
                else 
                {
                  zoomobj.style.height= (starttop-mapy) + "px";;
                  zoomobj.style.top = mapy + "px";;
                }
            }
            
    }
    catch(err){
        zoomobj.style.left = startleft;
        zoomobj.style.top = mapy;
        zoomobj.style.width= (mapx-startleft);
        zoomobj.style.height= (starttop-mapy);
    }
}
//__________________________________________________________________________________
//Check MouseUp, checkMouseDown and GetMouse
function chkMouseDown(e)
{
// check mouse left button
	var button;
    var evt = e ? e : window.event;
	if (document.layers) { button = e.which; }
	else 
	{	
		if (!isNav)
			button = event.button;
		else
			button = (e.button == 0 ? 1 : 0);			
	}

	if( button > 1)  return;
    
      if ((evt.clientX < iLeft)||(evt.clientY < iTop)||(evt.clientX > iLeft + iWidth)||(evt.clientY > iTop+iHeight)) return; //outside the image - igonore

    //otherwise continue
    getMouse(e);
	if ( (currMode == "ZOOM_MODE") && (!zooming) && (mouseX>=0)
		 && (mouseX<iWidth) && (mouseY>=0) && (mouseY<iHeight)) {
        getMouse(e);
        //Move the div to the current location and specify the start x and y for passing back to the map
        left= mouseX;
        top = mouseY;
        document.getElementById("zoomDiv").style.left= mouseX + iLeft;
        document.getElementById("zoomDiv").style.top= mouseY + iTop;
        showLayer("zoomDiv");
        zooming=true;

	    return false;
	} else if (zooming) {
	}

	return false;
}
//__________________________________________________________________________________
function chkMouseUp(e) {

            var evt = e ? e : window.event;
            
            if ((evt.clientX < iLeft)||(evt.clientY < iTop)||(evt.clientX > iLeft + iWidth)||(evt.clientY > iTop+iHeight)) return; //outside the image - igonore

            //otherwise continue
            getMouse(e);
            if ((currMode == "ZOOM_MODE") && (zooming) && (mouseX>=0)
                 && (mouseX<iWidth) && (mouseY>=0) && (mouseY<iHeight))
                 {
                    var tempright,tempbottom;
                    
                    try{
                    document.getElementById("processing").style.display="block" //processing window show
                    }catch(e){}
                    
                    getMouse(e);
                    hideLayer("zoomDiv");
                    zooming=false;
                    tempright=mouseX;// + iLeft;
                    tempbottom = mouseY;// + iTop;
                    right=tempright;
                    bottom = tempbottom;

                    if (tempright < left)
                        {
                            right=left;
                            left=tempright;
                        }
                    if (tempbottom < top)
                        {
                            bottom=top;
                            top=tempbottom;
                        }

                    if (((right-left) < 5)&&((bottom-top) < 5))
                        {onZoomXY(left, top);}
                    else
                        {onZoomBox(left, top, right, bottom);}
                }
                    return false;
}
//__________________________________________________________________________________
function getMouse(e) {
	//window.status="";
	
    getImageXY(e);
	if (mouseX>iWidth)
		{mouseX = iWidth - 1;}
	if (mouseY>iHeight)
		{mouseY = iHeight - 1;}
	if (mouseX<=0)
		{mouseX = 1;}
	if (mouseY<=0)
		{mouseY = 1;}

	if (zooming) {
        getImageXY(e);
        //draw the box but add the left before the image and the top before the image
        drawZoomBox(mouseX + iLeft,mouseY + iTop);
	}
	
	GetCoords(e,zbMapImage);
    //showLayer("coordDiv");
    //    document.getElementById("coordDiv").innerHTML=mouseX + ":" + mouseY;

	return false;
}

//##################################################################################
// get image location x and y
function getImageXY(e) {
	if (isNav) {
		mouseX=e.pageX;
		mouseY=e.pageY;
	} else {
		mouseX=event.clientX + document.body.scrollLeft-0;		
		mouseY=event.clientY + document.body.scrollTop-0;
	}
	// subtract offsets that the image is from page left and top
	mouseX = mouseX-iLeft;
	mouseY = mouseY-iTop;
}
//##################################################################################
//UPDATE ZOOM BOX CURSOR FUNCTION AND SET CURRENT MODE
function updateZoomBoxCursor(MapMode)
{
  //if (!is5up) return;

  var MapImg = document.images[zbMapImage];
  if (MapImg == null) return;
  
  currMode=MapMode
  switch (currMode)
  
  {
    case "NO_MODE":
	MapImg.style.cursor = "default";
	  break;
	default:
		MapImg.style.cursor = "crosshair";
  }
}
//__________________________________________________________________________________
//function setZoomBoxMode(iClientID,mode)
//{
//	if ( mode == ZOOM_MODE)
//	{
//		currMode = mode;
//		updateZoomBoxCursor();
//	}
//}

//##################################################################################
//Write coords on div
function GetCoords(e,o){

	var rect,x,y,top,left,bottom,right,w,h,w2,h2,left2,top2,right2,bottom2,pixX,pixY,coordX,coordY;
	var text = '';
	var evt = e ? e : window.event;

	x=evt.clientX;
	y=evt.clientY;

	if(x<iLeft||x>iRight||y<iTop||y>iBottom)
	    {hideLayer("coordDiv");}
	else
	{
		w=iWidth;
		h=iHeight;

		left2 = parseFloat(document.getElementById(ClientID + "_" + "lefty").value);
		right2 = parseFloat(document.getElementById(ClientID + "_" + "righty").value);
		top2 = parseFloat(document.getElementById(ClientID + "_" + "topy").value);
		bottom2 = parseFloat(document.getElementById(ClientID + "_" + "bottomy").value);
        
		if (left2*right2 < 0)
			{w2 = Math.abs(right2)+Math.abs(left2);}
		else
			{w2 = Math.abs(right2)-Math.abs(left2);}
			
		if (top2*bottom2 < 0)
			{h2 = Math.abs(bottom2) + Math.abs(top2);}
		else
			{h2 = Math.abs(bottom2) - Math.abs(top2);}

		pixX = Math.abs(w2)/w;
		
		pixY = Math.abs(h2)/h;
		pixY = pixY*-1;
		
		coordX = left2+((x-iLeft)*pixX);
		coordY = top2+((y-iTop)*pixY);

		text += 'X: ' + coordX.toFixed(5) + ' , Y: ' + coordY.toFixed(5);
		//text = "X:" + x + " | Y: " + y + " | iTop:" + iTop + " | iLeft:" + iLeft + " | Right: " + iRight + " | Bottom: " + iBottom;

        showLayer("coordDiv");
        document.getElementById("coordDiv").innerHTML=text;
	}
}
//##################################################################################
//Functions to initiate the zooming engine - writes data to the hidden inputs on the page and submits the page
function onPointXY(x, y)
	{}
//__________________________________________________________________________________
function onZoomXY(x, y)
{
	document.getElementById(ClientID + "_" + "map_x").value = x;
	document.getElementById(ClientID + "_" + "map_y").value = y;
	document.forms[0].submit();
}
//__________________________________________________________________________________
function onZoomBox(zleft, ztop, zright, zbottom)
{
	document.getElementById(ClientID + "_" + "map_x").value = zleft;
	document.getElementById(ClientID + "_" + "map_y").value = ztop;
	document.getElementById(ClientID + "_" + "map_x2").value = zright;
	document.getElementById(ClientID + "_" + "map_y2").value = zbottom;
	document.forms[0].submit();
}


//##################################################################################
//@@@@@@@@@@@@@@@@@@  GENERIC FUNCTIONS  @@@@@@@@@@@@@@@@@@@
//##################################################################################

//Get element coords
//function getElementCoords (element) {
//var coords = { left: 0, top: 0, right: 0, bottom:0};
//while (element) {
//coords.left += element.offsetLeft;
//coords.top += element.offsetTop;
//coords.right += element.offsetLeft + element.offsetWidth;
//coords.bottom += element.offsetTop + element.offsetHeight ;
//element = element.offsetParent;
//}
//return coords;
//}
//__________________________________________________________________________________
//Find x and Y position
function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }
//__________________________________________________________________________________
  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }
//__________________________________________________________________________________
//SET DIV LAYER VISIBLE OR HIDDEN
function showLayer(elementID) {
    document.getElementById(elementID).style.visibility = "visible";
}
//__________________________________________________________________________________
function hideLayer(elementID) {
    document.getElementById(elementID).style.visibility = "hidden";
}