// -----------------------------------------------------------------
//						Redland Shire Council 
// -----------------------------------------------------------------
// Class    : ZoomPan 
// Purpose  : Handles rubberbanding of dynamic zoom, panning of the
//			  map, and control of the identify window.
// -----------------------------------------------------------------
// Calls    :
// Called by: 
// -----------------------------------------------------------------
// Arguments:
// Globals  :
// Returns  :
// -----------------------------------------------------------------
// Notes    :
// -----------------------------------------------------------------
// History  : Client side code to control Zooming and Panning in
//			  firefox and opera is yet to be implemented.
// =================================================================

// variables used by firefox accessible across functions
var deltaX=0;
var delatY=0;

//MouseDown event handler for IE
function ieMouseDownZoomIn(event)
{
	//Calculate where the map window actually is, and store this in the offset variables
	imgMapYOffset = parseInt(document.getElementById('divImgMap').style.top)
	imgMapXOffset = parseInt(document.getElementById('divImgMap').style.left)
	
	//Set the mouse as moving only if the left button was clicked
	//so the mousemove event handler will redraw the rubberband
	if (event.button == 1) {
		mouseMoving=1;

		// start the box at the cursor location
		//There is a slight offset to make it line up with the crosshair cursor
		document.getElementById('divZoomBox').style.left = event.clientX - 2;
		document.getElementById('divZoomBox').style.top = event.clientY - 2;
		
		//On each new click, reset the size of the rubberband selection box
		document.getElementById('divZoomBox').style.width = 1;
		document.getElementById('divZoomBox').style.height = 1;
		
		//Made the rubberband div layer (which is currently hidden) visible
		document.getElementById('divZoomBox').style.visibility = 'visible';
		
		//Set the dimensions of the map image into client side variables for use
		imgMapWidth = document.getElementById('imgMap').width;
		imgMapHeight = document.getElementById('imgMap').height;
			
		//Set variables to be used in ieMouseMove
		beginXClick = event.clientX - imgMapXOffset;
		beginYClick = event.clientY - imgMapYOffset;
		
		//Start a 'capture' over the image so that IE does not try and drag'n'drop it
		document.getElementById('imgMap').setCapture();
	
	}
	
}

//MouseDown Zoom In event handler for FireFox
function firefoxMouseDownZoomIn(event,type)
{

	//Calculate where the map window actually is, and store this in the offset variables
	imgMapYOffset = parseInt(document.getElementById('divImgMap').style.top)
	imgMapXOffset = parseInt(document.getElementById('divImgMap').style.left)

	//Calculate where the map window actually is, and store this in the offset variables
	//imgMapYOffset = 0;
	//imgMapXOffset = 0;
	
	//Set the mouse as moving only if the left button was clicked
	//so the mousemove event handler will redraw the rubberband
	if (event.button == 0)
	{
		mouseMoving = 1;
		
		//On each new click, reset the size of the rubberband selection box
		document.getElementById('divZoomBox').style.width = "1px";
		document.getElementById('divZoomBox').style.height = "1px";
		
		//Start the rubberband at the mouse click location
		document.getElementById('divZoomBox').style.left = (event.clientX - 1)+"px";
		document.getElementById('divZoomBox').style.top = (event.clientY - 1)+"px";
	
		//Made the currently hidden div layer visible
		document.getElementById('divZoomBox').style.visibility = 'visible';
		
		//Set the dimensions of the map image
		imgMapWidth = document.getElementById('imgMap').width;
		imgMapHeight = document.getElementById('imgMap').height;
			
		//Set variables to be used in firefoxMouseMove
		beginXClick = event.clientX - imgMapXOffset;
		beginYClick = event.clientY - imgMapYOffset;
		
		// this function is called for different tools, need to start the event listener accordingly
		if (type=="in")
		{
			document.addEventListener("mousemove", firefoxMouseMoveZoomIn, true);
			document.addEventListener("mouseup", firefoxMouseUpZoomIn, true);
		}
		else if (type=="out")
		{
			document.addEventListener("mousemove", firefoxMouseMoveZoomIn, true);
			document.addEventListener("mouseup", firefoxMouseUpZoomIn, true);
		}
		else if (type=="select")
		{
			document.addEventListener("mousemove", firefoxMouseMoveZoomIn, true);
			document.addEventListener("mouseup", firefoxMouseUpSelect, true);
		}
		
		//Allows the image to be 'dragged on' instead of drag'n'dropped
		return false;
	}
	
}


//MouseMove event handler for IE
function ieMouseMoveZoomIn(event)
{
	//If the mouse is moving...(ie. drawing a rubber band box)
	if (mouseMoving == 1)
	{
		//Check and only draw the rubberband if it is
		//within the y-bounds of the map image size.
	
		//Prevent rubberband from going above the top of the image
		if (event.y < 0 + imgMapYOffset)
		{
			eventY = 0;
		}
		else if (event.y < imgMapHeight + imgMapYOffset)
		{
			eventY = event.y - imgMapYOffset;
		}
		
		//Prevent rubberband from going below the bottom of the image
		if (event.y > imgMapHeight + imgMapYOffset)
		{
			eventY = imgMapHeight;
		}
		else if (event.y > 0 + imgMapYOffset)
		{
			eventY = event.y - imgMapYOffset;
		}
		
		//For box dragged below the start click point
		if (eventY - beginYClick >= 0)
		{
			//The top of the box should start at the click point
			document.getElementById('divZoomBox').style.top = beginYClick + imgMapYOffset;
			
			//Height of the rubberband box should be the difference between the start click
			//point, and the current mouse position
			document.getElementById('divZoomBox').style.height = Math.abs(eventY - beginYClick);
			
			//If the height of the rubberband box is 0, hide it. This fixes a CSS bug in IE.
			if (parseInt(document.getElementById('divZoomBox').style.height) == 0)
			{
				document.getElementById('divZoomBox').style.visibility = 'hidden';
			}
			else
			{
				document.getElementById('divZoomBox').style.visibility = 'visible';
			}
		
		}
		else //For box dragged above the start click point
		{
			//The top of the box should start at the current mouse position
			document.getElementById('divZoomBox').style.top = beginYClick - Math.abs(eventY - beginYClick) + imgMapYOffset;
			
			//Height of the rubberband box should be the difference between the start click
			//point, and the current mouse position
			document.getElementById('divZoomBox').style.height = Math.abs(eventY - beginYClick);
			
			//If the height of the rubberband box is 0, hide it. This fixes a CSS bug in IE.
			if (parseInt(document.getElementById('divZoomBox').style.height) == 0)
			{
				document.getElementById('divZoomBox').style.visibility = 'hidden';
			}
			else
			{
				document.getElementById('divZoomBox').style.visibility = 'visible';
			}
		}
		
		
		//Check and only draw the rubberband if it is within the
		//x-bounds of the map image size
		
		//Prevent rubberband from going left of the image side
		if (event.x < 0 + imgMapXOffset)
		{
			eventX = 0;
		}
		else if (event.x < imgMapWidth + imgMapXOffset)
		{
			eventX = event.x - imgMapXOffset;
		}
		
		//Prevent rubberband from going right of the image side
		if (event.x > imgMapWidth + imgMapXOffset)
		{
			eventX = imgMapWidth;
		}
		else if (event.x > 0 + imgMapXOffset)
		{
			eventX = event.x - imgMapXOffset;
		}
		
		//Determine if the box is being dragged left or right and adjust math accordingly
		if (eventX - beginXClick >= 0)
		{
			//The left of the box should start at the click point
			document.getElementById('divZoomBox').style.left = beginXClick + imgMapXOffset;
			
			//Width of the rubberband box should be the difference between the start click
			//point, and the current mouse position
			document.getElementById('divZoomBox').style.width = Math.abs(eventX - beginXClick);
		}
		else
		{
			//The top of the box should start at the click point
			document.getElementById('divZoomBox').style.left = beginXClick - Math.abs(eventX - beginXClick) + imgMapXOffset;
			
			//Width of the rubberband box should be the difference between the start click
			//point, and the current mouse position
			document.getElementById('divZoomBox').style.width = Math.abs(eventX - beginXClick);
		}
	}
}

//Zoom In MouseMove event handler for FireFox
function firefoxMouseMoveZoomIn(event)
{

	//If the mouse is moving...(ie. drawing a rubber band box)
	if (mouseMoving == 1)
	{
	
		//Check and only draw the rubberband if it is
		//within the y-bounds of the map image size.
	
		//Prevent rubberband from going above the top of the image
		if (event.clientY < 0 + imgMapYOffset)
		{
			eventY = 0;
		}
		else if (event.clientY < imgMapHeight + imgMapYOffset)
		{
			eventY = event.clientY - imgMapYOffset;
		}
		
		//Prevent rubberband from going below the bottom of the image
		if (event.clientY > imgMapHeight + imgMapYOffset)
		{
			eventY = imgMapHeight;
		}
		else if (event.clientY > 0 + imgMapYOffset)
		{
			eventY = event.clientY - imgMapYOffset;
		}
		
		//For box dragged below the start click point
		if (eventY - beginYClick >= 0)
		{
			//The top of the box should start at the click point
			document.getElementById('divZoomBox').style.top = (beginYClick + imgMapYOffset)+"px";;
			
			//Height of the rubberband box should be the difference between the start click
			//point, and the current mouse position
			document.getElementById('divZoomBox').style.height = Math.abs(eventY - beginYClick)+"px";
		}
		else //For box dragged above the start click point
		{
			//The top of the box should start at the current mouse position
			document.getElementById('divZoomBox').style.top = (beginYClick - Math.abs(eventY - beginYClick) + imgMapYOffset)+"px";
			
			//Height of the rubberband box should be the difference between the start click
			//point, and the current mouse position
			document.getElementById('divZoomBox').style.height = Math.abs(eventY - beginYClick)+"px";
		}
		
		//Check and only draw the rubberband if it is within the
		//x-bounds of the map image size
		
		//Prevent rubberband from going left of the image side
		if (event.clientX < 0 + imgMapXOffset)
		{
			eventX = 0;
		}
		else if (event.clientX < imgMapWidth + imgMapXOffset)
		{
			eventX = event.clientX - imgMapXOffset;
		}
		
		//Prevent rubberband from going right of the image side
		if (event.clientX > imgMapWidth + imgMapXOffset)
		{
			eventX = imgMapWidth;
		}
		else if (event.clientX > 0 + imgMapXOffset)
		{
			eventX = event.clientX - imgMapXOffset;
		}
		
		//Determine if the box is being dragged left or right and adjust math accordingly
		if (eventX - beginXClick >= 0)
		{
			//The left of the box should start at the click point
			document.getElementById('divZoomBox').style.left = (beginXClick + imgMapXOffset)+"px";
			
			//Width of the rubberband box should be the difference between the start click
			//point, and the current mouse position
			document.getElementById('divZoomBox').style.width = Math.abs(eventX - beginXClick)+"px";
		}
		else
		{
			//The top of the box should start at the click point
			document.getElementById('divZoomBox').style.left = (beginXClick - Math.abs(eventX - beginXClick) + imgMapXOffset)+"px";
			
			//Width of the rubberband box should be the difference between the start click
			//point, and the current mouse position
			document.getElementById('divZoomBox').style.width = Math.abs(eventX - beginXClick)+"px";
		}
	}
}

//MouseUp event handler for IE
function ieMouseUpZoomIn()
{
	// if the mouse isn't moving then the zoom has been cancelled
	if (mouseMoving==1)
	{
		//Mouse has stopped moving
		mouseMoving = 0;
		
		//Hide the zoom rubber band
		document.getElementById('divZoomBox').style.visibility = 'hidden';
		
		//Release mouse capture as no more dragging necessary
		document.getElementById('imgMap').releaseCapture();
		
		//If the zoom box is smaller than 4 pixels or 0 pixels (single click zoom)
		if (Math.abs(beginXClick-eventX) <=4 || Math.abs(beginYClick-eventY) <=4 || (eventX == 0 && eventY == 0))
		{
		//Fixed ratio zoom and centre at click point
			if (document.getElementById('txtCurrentTool').value == 'ZoomIn')
			//Zoomin tool is being used, so use the following math calculations
			{
				//ratio of 1/4 will half the scale
				document.getElementById('txtX1').value = (0.25 * imgMapWidth) + (beginXClick-(imgMapWidth / 2));
				document.getElementById('txtX2').value = (1 - 0.25) * imgMapWidth + (beginXClick-(imgMapWidth / 2));
				document.getElementById('txtY2').value = 0.25 * imgMapHeight + (beginYClick-(imgMapHeight / 2));
				document.getElementById('txtY1').value = (1 - 0.25) * imgMapHeight + (beginYClick-(imgMapHeight / 2));
			}
			else if (document.getElementById('txtCurrentTool').value == 'ZoomOut')
			//Zoomout tool is being used, so adjust the calculations
			{		
				//ratio of 1/4 will double the scale
				document.getElementById('txtX1').value = (0.25 * imgMapWidth) - (beginXClick-(imgMapWidth / 2));
				document.getElementById('txtX2').value = (1 - 0.25) * imgMapWidth - (beginXClick-(imgMapWidth / 2));
				document.getElementById('txtY1').value = (0.25 * imgMapHeight) - (beginYClick-(imgMapHeight / 2));
				document.getElementById('txtY2').value = (1 - 0.25) * imgMapHeight - (beginYClick-(imgMapHeight / 2));
			}
		}
		else
		{
			//Zoom as per rubberband extent
			document.getElementById('txtX1').value = beginXClick;
			document.getElementById('txtX2').value = eventX;
			document.getElementById('txtY1').value = beginYClick;
			document.getElementById('txtY2').value = eventY;
		}
		
		//Show the loading splash picture
		LoadNextImage();
		
		//Submit the page to the server for processing
		document.getElementById('frmMapPage').submit();
	}
}

//Zoom In MouseUp event handler for FireFox
function firefoxMouseUpZoomIn()
{
	// if the mouse isn't moving then the zoom has been cancelled
	if (mouseMoving==1)
	{
		//Mouse has stopped moving
		mouseMoving = 0;
		
		//Hide the zoom rubber band
		document.getElementById('divZoomBox').style.visibility = 'hidden';
		
		//If the zoom box is smaller than 4 pixels or 0 pixels (single click zoom)
		if (Math.abs(beginXClick-eventX) <=4 || Math.abs(beginYClick-eventY) <=4 || (eventX == 0 && eventY == 0))
		{
		//Fixed ratio zoom and centre at click point
			if (document.getElementById('txtCurrentTool').value == 'ZoomIn')
			//Zoomin tool is being used, so use the following math calculations
			{
				//ratio of 1/4 will half the scale
				document.getElementById('txtX1').value = (0.25 * imgMapWidth) + (beginXClick-(imgMapWidth / 2));
				document.getElementById('txtX2').value = (1 - 0.25) * imgMapWidth + (beginXClick-(imgMapWidth / 2));
				document.getElementById('txtY2').value = 0.25 * imgMapHeight + (beginYClick-(imgMapHeight / 2));
				document.getElementById('txtY1').value = (1 - 0.25) * imgMapHeight + (beginYClick-(imgMapHeight / 2));
			}
			else if (document.getElementById('txtCurrentTool').value == 'ZoomOut')
			//Zoomout tool is being used, so adjust the calculations
			{		
				//ratio of 1/4 will double the scale
				document.getElementById('txtX1').value = (0.25 * imgMapWidth) - (beginXClick-(imgMapWidth / 2));
				document.getElementById('txtX2').value = (1 - 0.25) * imgMapWidth - (beginXClick-(imgMapWidth / 2));
				document.getElementById('txtY1').value = (0.25 * imgMapHeight) - (beginYClick-(imgMapHeight / 2));
				document.getElementById('txtY2').value = (1 - 0.25) * imgMapHeight - (beginYClick-(imgMapHeight / 2));
			}
		}
		else
		{
			//Zoom as per rubberband extent
			document.getElementById('txtX1').value = beginXClick;
			document.getElementById('txtX2').value = eventX;
			document.getElementById('txtY1').value = beginYClick;
			document.getElementById('txtY2').value = eventY;
		}
		
		//Show the loading splash picture
		LoadNextImage();
		
		//Submit the page to the server for processing
		document.getElementById('frmMapPage').submit();
	}
}


//MouseDown event handler for IE
function ieMouseDownPan(event)
{
	//Set the mouse as moving only if the left button was clicked
	//so the mousemove event handler will redraw the rubberband
	mouseMoving = 1;
		
	//Set the dimensions of the map image
	imgMapWidth = document.getElementById('imgMap').width;
	imgMapHeight = document.getElementById('imgMap').height;
		
	//Set variables to be used in ieMouseMove
	beginXClick = event.clientX;
	beginYClick = event.clientY;
	
	//Start a capture over the image so that IE does not try and drag'n'drop it
	document.getElementById('imgMap').setCapture();
}


//MouseDown event handler for Firefox/netscape
function firefoxMouseDownPan(event)
{
	//Set the mouse as moving only if the left button was clicked
	//so the mousemove event handler will redraw the rubberband
	mouseMoving = 1;
		
	//Set the dimensions of the map image
	imgMapWidth = document.getElementById('imgMap').width;
	imgMapHeight = document.getElementById('imgMap').height;
		
	//Set variables to be used in ieMouseMove
	beginXClick = event.clientX;
	beginYClick = event.clientY;

	document.addEventListener("mousemove", firefoxMouseMovePan, true);
	document.addEventListener("mouseup", firefoxMouseUpPan, true);
	
}

function ieMouseMovePan(event)
{	
	if (mouseMoving == 1)
	{
		//If the mouse is moving, update the position of the map image by
		//altering the left and top CSS properties.
		document.getElementById('imgMap').style.left = event.clientX - beginXClick;
		document.getElementById('imgMap').style.top = event.clientY - beginYClick;
	}
}

function firefoxMouseMovePan(event)
{	
	if (mouseMoving == 1)
	{
		//If the mouse is moving, update the position of the map image by
		//altering the left and top CSS properties.
		document.getElementById('imgMap').style.left = event.clientX - beginXClick;
		document.getElementById('imgMap').style.top = event.clientY - beginYClick;
		
		//Store the change in x and y values, which represent the new maps position
		deltaX = event.clientX - beginXClick;
		deltaY = event.clientY - beginYClick;

	}
}

function ieMouseUpPan(event)
{
	//Store the change in x and y values, which represent the new maps position
	var deltaX = event.clientX - beginXClick;
	var deltaY = event.clientY - beginYClick;
	
	//Put these x and y change values into these hidden form controls, which
	//are submitted to the server for processing later in this function.
	document.getElementById('txtX1').value = deltaX;
	document.getElementById('txtY1').value = deltaY;
	
	//Show the loading splash icon
	LoadNextImage();

	//Submit the page to the server for processing
	document.getElementById('frmMapPage').submit();
	
	//Stop the mouse moving state
	mouseMoving = 0;
	
	//Release mouse capture as no more dragging necessary
	document.getElementById('imgMap').releaseCapture();
}

function firefoxMouseUpPan(event)
{
	//Put these x and y change values into these hidden form controls, which
	//are submitted to the server for processing later in this function.
	document.getElementById('txtX1').value = deltaX;
	document.getElementById('txtY1').value = deltaY;

	//Show the loading splash icon
	LoadNextImage();

	//Submit the page to the server for processing
	document.getElementById('frmMapPage').submit();
	
	//Stop the mouse moving state
	mouseMoving = 0;
}