var BoxColor = "#FF0000";	// color of box
var BoxSize = 2;	// box line width;


// Global vars
var iWidth = 564;	// image width (default)
var iHeight = 296;	// image height (default)
var hspc = 200;		
var vspc = 25;		

//Netscape DIV specials
var navImageX = 0; // Netscape image X based on page image offset
var navImageY = 0; // Netscape image Y based on page image offset
var navHOffset = 18; // Width of map Surrounding navigator button
var navVOffset = 18; // Height of map Surrounding navigator button

var cMinResolution = 5  // boxes under (eg. 6) pixels are treated as clicks Added (PA)
var gShowBox = true;   // So we can use this system to return the image clicked XY without showing the box Added (PA)
var zoomBoxOn = true;  //So we can switch the system off externally Added (PA)
var ovBoxSize = 2;	// Zoombox line width;
var zbMapImage = "MapImage"; // default
var bPageEdit = true //So we can edit on a navigator page switch to false to expose full functionality iff no type on editing required (PA)


var MODE_BOX = 1;
var currMode = MODE_BOX;

var zooming = false;

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;
//// inderjit singh
var left=219;
var top=25;

/// inderjit singh
// Global vars for browser type and version
var isNav = (navigator.appName.indexOf("Netscape")>=0);
var isNav4 = false;
var isIE4 = false;
var is5up = false;
var isWin = (navigator.platform.indexOf('Win') >= 0);



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;
	}
}
function setccordingRes()
{
var l=screen.width-1024
var t=screen.height-768



    left=left+(l/2)
   // top=25+(t/2);
    hspc = left;		
   // vspc = 25+(t/2);		
  

}
function initZoomBox(iMapWidth, iMapHeight, MapImageName)
{
setccordingRes();
	iWidth = iMapWidth;
	iHeight = iMapHeight;
	zbMapImage = MapImageName;
	//alert(navigator.platform + '  ' + isWin)
    //In netscape layers stop editing in input controls (PA)
	// zoom/selection box
//	alert(document.getElementById('MapImage').style.left);
	content = '<img name="zoomImageTop" src="pixel.gif" width=1 height=1>';
	createLayer("zoomBoxTop",left,top,iWidth,iHeight,false,content);
	content = '<img name="zoomImageLeft" src="pixel.gif" width=1 height=1>';
	createLayer("zoomBoxLeft",left,top,iWidth,iHeight,false,content);
	content = '<img name="zoomImageRight" src="pixel.gif" width=1 height=1>';
	createLayer("zoomBoxRight",left,top,iWidth,iHeight,false,content);
	content = '<img name="zoomImageBottom" src="pixel.gif" width=1 height=1>';
	createLayer("zoomBoxBottom",left,top,iWidth,iHeight,false,content);

	// set zoom box color
	setLayerBackgroundColor("zoomBoxTop", BoxColor);
	setLayerBackgroundColor("zoomBoxLeft", BoxColor);
	setLayerBackgroundColor("zoomBoxRight", BoxColor);
	setLayerBackgroundColor("zoomBoxBottom", BoxColor);

	if (isNav) {
		document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
	}

	if ((isNav)) //Navigator Edit stops if mousedown is actioned
	   document.onmouseup = navChkMouseUp;
    else
    if (isWin)
    {	   
	    document.onmousedown = mapTool;
	    document.onmouseup = chkMouseUp;
	    document.onmousemove = getMouse;
    }
    else
    {	   
	    document.onmousedown = mapTool;
	    document.onmouseup = chkMouseUp;
    }    
	updateZoomBoxCursor();
}



//PA Navigator Edit stops if mousedown is actioned this allows the work to be done on mouseUp
function navChkMouseUp(e) 
{
    getNavImgXY(e); 
    if ((navImageX > 0) && (navImageY > 0))
	    onZoomXY(navImageX, navImageY);
}

//PA Returns navImageX navImageY based on offset of image from mouseclick
function getNavImgXY(e)
{ 
	var MapImg = document.images[zbMapImage];
	if (MapImg == null) return;

	getImageXY(e);
	navImageX=(mouseX-(MapImg.x + navHOffset))	
	navImageY=(mouseY-(MapImg.y + navVOffset)) 
	// If the clicked point is outside the image then return empty
	//if ((navImageX > MapImg.width) || (navImageX < 0) || (navImageY > MapImg.height) || (navImageY < 0)) 
	if ((navImageX > iWidth) || (navImageX < 0) || (navImageY > iHeight) || (navImageY < 0)) 
	{
	    navImageX=0;
	    navImageY=0;
	}    
}	



function setZoomBoxMode(mode)
{
	if ( mode == MODE_BOX)
	{
		currMode = mode;
		updateZoomBoxCursor();
	}
}



/****************************************************************************************
DHTML layer functions
****************************************************************************************/

// Create a DHTML layer
function createLayer(name, inleft, intop, width, height, visible, content) {

	  var layer;
	  if (isNav4) {
	    document.writeln('<layer name="' + name + '" left=' + inleft + ' top=' + intop + ' width=' + width + ' height=' + height +	' visibility=' + (visible ? '"show"' : '"hide"') +  '>');
	    document.writeln(content);
	    document.writeln('</layer>');
	  } else {
	    document.writeln('<div id="' + name + '" style="position:absolute; overflow:hidden; left:' + inleft + 'px; top:' + intop + 'px; width:' + width + 'px; height:' + height + 'px;' + '; z-index:1; visibility:' + (visible ? 'visible;' : 'hidden;'));
	    document.writeln(content);
	    document.writeln('</div>');
	  }
}

// get the layer object called "name"
function getLayer(name) {
	  if (isNav4)
	    return(document.layers[name]);
	  else if (isIE4) {
	    layer = eval('document.all.' + name + '.style');
	    return(layer);
	  } else if (is5up) {
		var theObj = document.getElementById(name);
		return theObj.style
	  }
	  else
	    return(null);
}

function isVisible(name) {
	  var layer = getLayer(name);
	  if (layer != null) {
		  if (isNav && layer.visibility == "show")
		    return(true);
		  if (isIE && layer.visibility == "visible")
		    return(true);
	  }
	  return(false);
}

// move layer to x,y
function moveLayer(name, x, y) {
	var layer = getLayer(name);
	if (layer != null) {
		if (isNav4)
		layer.moveTo(x, y);
		else {
		layer.left = x + "px";
			layer.top  = y + "px";
		}
	}
}

// set layer background color
function setLayerBackgroundColor(name, color) {
	var layer = getLayer(name);
    if (layer != null) {
		if (isNav4)
		layer.bgColor = color;
		else
		layer.backgroundColor = color;
	}
}

// toggle layer to invisible
function hideLayer(name) {
	var layer = getLayer(name);
	if (layer != null) {
		if (isNav4)
		layer.visibility = "hide";
		else
			 layer.visibility = "hidden";
	}
}

// toggle layer to visible
function showLayer(name) {
	var layer = getLayer(name);
	if (layer != null) {
		if (isNav4)
		layer.visibility = "show";
		else
		 layer.visibility = "visible";
	}
}

// clip layer display to clipleft, cliptip, clipright, clipbottom
	// Not working with Mozilla Milestone 12 (Nav5)
function clipLayer(name, clipleft, cliptop, clipright, clipbottom) {
	  var layer = getLayer(name);
	  if (layer == null) return;
	  if (isNav4) {
		    layer.clip.left   = clipleft;
		    layer.clip.top    = cliptop;
		    layer.clip.right  = clipright;
		    layer.clip.bottom = clipbottom;
	  }
	  else {
		    layer.clip = 'rect(' + cliptop + ' ' +  clipright + ' ' + clipbottom + ' ' + clipleft +')';
		    var str='rect(' + cliptop + ' ' +  clipright + ' ' + clipbottom + ' ' + clipleft +')'
		   //alert(str);
	  }
}

function boxIt(theLeft,theTop,theRight,theBottom) {
//alert(theTop+"--"+theBottom)
    	
	if (gShowBox){
		   

		clipLayer("zoomBoxTop",theLeft,theTop,theRight,theTop+ovBoxSize);
		clipLayer("zoomBoxLeft",theLeft,theTop,theLeft+ovBoxSize,theBottom);
		clipLayer("zoomBoxRight",theRight-ovBoxSize,theTop,theRight,theBottom);
		clipLayer("zoomBoxBottom",theLeft,theBottom-ovBoxSize,theRight,theBottom);
		showLayer("zoomBoxTop");
		showLayer("zoomBoxLeft");
		showLayer("zoomBoxRight");
		showLayer("zoomBoxBottom");
	  }
}


/****************************************************************************************
Navigation functions - used to resize zoom box
****************************************************************************************/

// get cursor location
function getImageXY(e) {
	if (isNav) {
		mouseX=e.pageX;
		mouseY=e.pageY;
	} else {
		mouseX=event.clientX + document.body.scrollLeft-2;		
		mouseY=event.clientY + document.body.scrollTop-2;
	}
	// subtract offsets from page left and top
	mouseX = mouseX-hspc;
	mouseY = mouseY-vspc;
}

// start zoom in
function startZoomBox(e) {
	getImageXY(e);
	// keep it within the MapImage
	if ((mouseX<iWidth) && (mouseY<iHeight)) {
		if (zooming) {
			stopZoomBox(e);
		} else {
			x1=mouseX;
			y1=mouseY
			x2=x1+1;
			y2=y1+1;
			zleft=x1;
			ztop=y1;
			zbottom=y1;
			zright=x1

			boxIt(x1,y1,x2,y2);
			zooming=true;
		}
	}
	return false;

}

// stop zoom box display
function stopZoomBox(e) {
	zooming=false;

	if ( (zright <zleft+2) && (ztop < zbottom+2) )
	{
		zright = zleft;
		zbottom = ztop;
	}

	hideLayer("zoomBoxTop");
	hideLayer("zoomBoxLeft");
	hideLayer("zoomBoxRight");
	hideLayer("zoomBoxBottom");
	window.scrollTo(0,0);

	return true;
}

// get the coords at mouse position
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) {
		x2=mouseX;
		y2=mouseY;
		setClip();
	}

	return false;
}

// 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)) {
		boxIt(zleft,ztop,zright,zbottom);
	}
}

/****************************************************************************************
Click/Mouse functions - used to catch mouse button events
****************************************************************************************/

// check for mouseup
function chkMouseUp(e) 
{

	if ((currMode == MODE_BOX) && (zooming)) 
	{
		stopZoomBox(e);
		// Needed to add resolution eg. Dont want to zoom to boxes under (Resolution eg 4) pixels (PA)
 		if ((Math.abs(zleft - zright)<=cMinResolution) || (Math.abs(ztop - zbottom)<=cMinResolution)) 
			onZoomXY(zleft, ztop);
		else
			onZoomBox(zleft, ztop, zright, zbottom);
	}

	return false;
}
function onZoomXY(zleft, ztop)
{
            document.getElementById("bTop").value= ztop;
		   	document.getElementById("bLeft").value=zleft;
            document.getElementById("bBottom").value=0;
            document.getElementById("bRight").value=0;
           	document.getElementById("box").value="ZOOMXY";
           	document.routeform.submit();


}
function onZoomBox(vleft, vtop, vright, vbottom)
	{
	//var left=219;
//var top=25;

	        document.getElementById("bTop").value=vtop;
		   	document.getElementById("bLeft").value=vleft ;
            document.getElementById("bBottom").value=vbottom  ;
            document.getElementById("bRight").value=vright   ;
           	document.getElementById("box").value="ZOOMBOX";
           	document.routeform.submit();
		//document.MapForm.map_x.value = left;
		//document.MapForm.map_y.value = top;
		//document.MapForm.map_x2.value = right;
		//document.MapForm.map_y2.value = bottom;
		//document.MapForm.submit();
	}


function clientDrawThings()
{
     /*   
		var xMid = Math.abs(x1 - Math.round((x1-x2)/2));
		var yMid = Math.abs(y1 - Math.round((y1-y2)/2));
		var startLong=0.0
		var startLat=0.0
		var endLong=0.0
		var endLat=0.0
		stopZoomBox(e);
  		jg.setColor("#0000FF"); // blue
  		jg.drawLine(x1, y1, x2, y2); // co-ordinates related to "myCanvas"
               	jg.setFont('Verdanna','10px',Font.BOLD);
  		jg.setColor("#9900FF"); // purple
  		pagePixelToCoord(x1,y1)//g_outLong,g_outLat//Defined in the page
  		g_startLong=g_outLong
  		g_startLat=g_outLat
  		pagePixelToCoord(x2,y2)//g_endLong,g_endLat //Defined in the page
  		g_endLong=g_outLong
  		g_endLat=g_outLat
              	//jg.drawString(x1+ "," + y1,x1,y1);
              	//jg.drawString(g_startLong + "," + g_startLat,x1,y1);
  		jg.setColor("#FFFFFF"); // purple
  		//alert(xMid +", "+yMid+"    "+parseInt(yMid)+1+","+xMid+1)
               	jg.fillRect(xMid, yMid, 45, 12);
  		jg.setColor("#990099"); // purple
              	jg.drawString(GCDist(g_startLong,g_startLat,g_endLong,g_endLat),xMid,yMid);
  		jg.paint();
		if (Tooltip.tip==null){ 
			//alert(zleft + ', top=' + ztop + ',right= ' + zright + ',bottom ' +  zbottom);
		}
	}
    */
	return false;
}


// perform appropriate action with mapTool
function mapTool (e) {
	if (!zoomBoxOn)
		return false;

	// check mouse left button
	var button;
	if (document.layers) { button = e.which; }
	else 
	{	
		if (!isNav)
			button = event.button;
		else
			button = (e.button == 0 ? 1 : 0);			
	}

	if( button != 1)  return;

	// adjust left-top
	onResize();

	getImageXY(e);

	if ( (currMode == MODE_BOX) && (!zooming) && (mouseX>=0)
		 && (mouseX<iWidth) && (mouseY>=0) && (mouseY<iHeight)) {
		startZoomBox(e);
	return false;
	} else if (zooming) {
		getMouse(e);
		stopZoomBox(e);
	}

	return false;
}


function onResize()
{
	var MapImg = document.images[zbMapImage];
	if (MapImg == null) return;

	if( document.all)
	{
		vspc = 0; //custom values
		hspc = 0;
		var element = MapImg;

		do
		{
			hspc += element.offsetLeft;
			vspc += element.offsetTop;

		}
		while( (element = element.offsetParent))
	}
	else
	{
		hspc = MapImg.x;
		vspc = MapImg.y;
	}

	moveLayer( "zoomBoxTop", hspc, vspc);
	moveLayer( "zoomBoxLeft", hspc, vspc);
	moveLayer( "zoomBoxRight", hspc, vspc);
	moveLayer( "zoomBoxBottom", hspc, vspc);
}

function updateZoomBoxCursor()
{
  if (!is5up) return;

  var MapImg = document.images[zbMapImage];
  if (MapImg == null) return;

  switch (currMode)
  {
    case MODE_BOX:
	MapImg.style.cursor = "crosshair";
	  break;
	default:
		MapImg.style.cursor = "default";
  }
}

