// Image dimensions
var imageWidth = 580;
var imageHeight = 360;

// The map object id
var mapObj = "mapImage";

// Is the browser IE?
var isIE = document.all?true:false;

// Down states for the toolbar buttons
var infoButtonDown, panButtonDown, magnifyButtonDown;

// Has the user clicked over the map?
var mapClicked = false;

// Coordinates used by the mousedown, mouseup and mouseclick events
var xDown, yDown, xMove, yMove, xUp, yUp, xMap, yMap, topX, bottomX, topY, bottomY;

// Capture mouse events
if (!isIE) {
	document.captureEvents(Event.MOUSEDOWN);
	document.captureEvents(Event.MOUSEMOVE);
	document.captureEvents(Event.MOUSEUP);
}
document.onmousedown = mouseDown;
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
		
/*
Checks to see which button was, by default, selected
*/
function checkRadioButtons() {
	if (document.getElementById("infoRadio").checked == true) {
		document.getElementById("infobutton").style.backgroundPosition = "-70px 0";
		infoButtonDown = true;
		magnifyButtonDown = false;
		panButtonDown = false;
		document.getElementById("mapImage").style.cursor = "help";
		document.getElementById("mapImage").disabled = false;
	}
	else if (document.getElementById("magnifyRadio").checked == true) {
		document.getElementById("magnifybutton").style.backgroundPosition = "-70px 0";
		magnifyButtonDown = true;
		infoButtonDown = false;
		panButtonDown = false;
		document.getElementById("mapImage").style.cursor = "crosshair";
		document.getElementById("mapImage").disabled = true;
		
		// Turn the filter on
		document.getElementById("filter").style.width = imageWidth + "px";
		document.getElementById("filter").style.height = imageHeight + "px";
		// Add on 1 to account for the image border!
		document.getElementById("filter").style.left = findPosX(document.getElementById(mapObj)) + 1 + "px";
		document.getElementById("filter").style.top = findPosY(document.getElementById(mapObj)) + 1 + "px";
		document.getElementById("filter").style.display = "block";
	}
	else { //if (document.getElementById("panRadio").checked == true) {
		document.getElementById("panbutton").style.backgroundPosition = "-70px 0";
		panButtonDown = true;
		magnifyButtonDown = false;
		infoButtonDown = false;
		document.getElementById("mapImage").style.cursor = "auto";
		document.getElementById("mapImage").disabled = false;
	}
}
	
/*
Shows the toolbar only when Javascript is enabled
*/
function showTools() {
	document.getElementById("toolbar").style.display = "block";
}
			
/*
Function to handle clicks on magnify button
*/
function magnifyButtonClick() {
	if (magnifyButtonDown != true) {
		document.getElementById("magnifybutton").style.backgroundPosition = "-70px 0";
		magnifyButtonDown = true;
		document.getElementById("magnifyRadio").checked = true;
				
		// Disable map image
		document.getElementById("mapImage").disabled = true;
		
		// Change cursor to crosshair
		document.getElementById("mapImage").style.cursor = "crosshair";
		
		// reset other buttons
		document.getElementById("panbutton").style.backgroundPosition = "left top";
		panButtonDown = false;
		document.getElementById("infobutton").style.backgroundPosition = "left top";
		infoButtonDown = false;
		
		// Turn the filter on
		document.getElementById("filter").style.width = imageWidth + "px";
		document.getElementById("filter").style.height = imageHeight + "px";
		// Add on 1 to account for the image border!
		document.getElementById("filter").style.left = findPosX(document.getElementById(mapObj)) + 1 + "px";
		document.getElementById("filter").style.top = findPosY(document.getElementById(mapObj)) + 1 + "px";
		document.getElementById("filter").style.display = "block";
	}
	return false;
}
		
/*
Function to handle clicks on pan button
*/
function panButtonClick() {
	if (panButtonDown != true) {
		document.getElementById("panbutton").style.backgroundPosition = "-70px 0";
		panButtonDown = true;
		document.getElementById("panRadio").checked = true;
		
		// Enable map image
		document.getElementById("mapImage").disabled = false;
		
		// Change cursor to auto
		document.getElementById("mapImage").style.cursor = "auto";
			
		// reset other buttons
		document.getElementById("infobutton").style.backgroundPosition = "left top";
		infoButtonDown = false;
		document.getElementById("magnifybutton").style.backgroundPosition = "left top";
		magnifyButtonDown = false;
		
		// Turn the filter off
		document.getElementById("filter").style.display = "none";
	}
	return false;
}

/*
Function to handle clicks on info button
*/
function infoButtonClick() {
	if (infoButtonDown != true) {
		document.getElementById("infobutton").style.backgroundPosition = "-70px 0";
		infoButtonDown = true;
		document.getElementById("infoRadio").checked = true;
		
		// Enable map image
		document.getElementById("mapImage").disabled = false;
		
		// Change cursor to help
		document.getElementById("mapImage").style.cursor = "help";
				
		// reset other buttons
		document.getElementById("panbutton").style.backgroundPosition = "left top";
		panButtonDown = false;
		document.getElementById("magnifybutton").style.backgroundPosition = "left top";
		magnifyButtonDown = false;
		
		// Turn the filter off
		document.getElementById("filter").style.display = "none";
	}
}
		
/*
Function to find the x position of the top left corner of
a given object
*/
function findPosX(obj) {
	var curleft = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}

/*
Function to find the y position of the top left corner of
a given object
*/
function findPosY(obj) {
	var curtop = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}

/*
When the user presses down on the mouse, capture the coordinates
of the cursor
*/
function mouseDown(e) {

	// If the magnify button is selected
	if (magnifyButtonDown == true) {
		
		// Get coordinates of mousedown event
		if (!isIE) { // Mozilla
			xDown = e.pageX;
			yDown = e.pageY;
		}
		if (isIE) {
			if (document.documentElement) { // Internet Explorer 6
				xDown = event.clientX + document.documentElement.scrollLeft;
				yDown = event.clientY + document.documentElement.scrollTop;
			}
			else { // Internet Explorer
				xDown = event.clientX + document.body.scrollLeft;
				yDown = event.clientY + document.body.scrollTop;
			}
		}
		
		// Get location of map on screen
		xMap = findPosX(document.getElementById(mapObj));
		yMap = findPosY(document.getElementById(mapObj));
		
		if ((xDown >= xMap) && (xDown <= (xMap+imageWidth))) { // User clicked over map
			if ((yDown >= yMap) && (yDown <= (yMap+imageHeight))) {
			
				// Set map clicked to true
				mapClicked = true;
				
				// Don't show the zoom box just yet, wait until the use moves the mouse!
			}
		}
	}
}

/*
When the user moves the mouse, capture the coordinates
of the cursor
*/
function mouseMove(e) {
	if (mapClicked == true) {
		
		// Get coordinates of mousedown event
		if (!isIE) { // Mozilla
			xMove = e.pageX;
			yMove = e.pageY;
		}
		if (isIE) {
			if (document.documentElement) { // Internet Explorer 6
				xMove = event.clientX + document.documentElement.scrollLeft;
				yMove = event.clientY + document.documentElement.scrollTop;
			}
			else { // Internet Explorer
				xMove = event.clientX + document.body.scrollLeft;
				yMove = event.clientY + document.body.scrollTop;
			}
		}
		
		// Show the hidden div and relocate it to the mouse origin
		document.getElementById("zoombox").style.display = "block";
		
		// Y coordinate
		if (yDown < yMove) {
			topY = yDown;
			bottomY = yMove;
		}
		else {
			topY = yMove;
			bottomY = yDown;
		}
		
		// X coordinate
		if (xDown < xMove) {
			topX = xDown;
			bottomX = xMove;
		}
		else {
			topX = xMove;
			bottomX = xDown;
		}
		
		// Work out lowest values for top coord
		if (topY < findPosY(document.getElementById(mapObj))) {
			topY = findPosY(document.getElementById(mapObj));
			yMove = findPosY(document.getElementById(mapObj));
		}
		if (topX < findPosX(document.getElementById(mapObj))) {
			topX = findPosX(document.getElementById(mapObj));
			xMove = findPosX(document.getElementById(mapObj));
		}
		
		// Work out the highest values for the bottom coord
		if (bottomY > (findPosY(document.getElementById(mapObj)) + imageHeight)) {
			bottomY = findPosY(document.getElementById(mapObj)) + imageHeight;
			yMove = findPosY(document.getElementById(mapObj)) + imageHeight;
		}
		if (bottomX > (findPosX(document.getElementById(mapObj)) + imageWidth)) {
			bottomX = findPosX(document.getElementById(mapObj)) + imageWidth;
			xMove = findPosX(document.getElementById(mapObj)) + imageWidth;
		}
		
		// Set top coord
		document.getElementById("zoombox").style.top = topY + "px";
		document.getElementById("zoombox").style.left = topX + "px";
		
		// resize the box, ensuring it is never out of the map image
		var width = Math.abs(xMove - xDown - 4); // Minus the width of the border * 2!
		var height = Math.abs(yMove - yDown - 4);
		
		document.getElementById("zoombox").style.width = width + "px";
		document.getElementById("zoombox").style.height = height + "px"; 
	}
}

/*
When the user releases the mouse button, capture the coordinates of
the cursor, and perform the relevant actions
*/
function mouseUp(e) {
	if (mapClicked == true) { // If the user clicked on the map
	
		// Get coordinates of mousedown event
		if (!isIE) { // Mozilla
			xUp = e.pageX;
			yUp = e.pageY;
		}
		if (isIE) {
			if (document.documentElement) { // Internet Explorer 6
				xUp = event.clientX + document.documentElement.scrollLeft;
				yUp = event.clientY + document.documentElement.scrollTop;
			}
			else { // Internet Explorer
				xUp = event.clientX + document.body.scrollLeft;
				yUp = event.clientY + document.body.scrollTop;
			}
		}
						
		// Convert screen coordinates to image coordinates
		var imageDownX, imageDownY, imageUpX, imageUpY;
		
		imageDownX = xDown - findPosX(document.getElementById(mapObj));
		imageDownY = yDown - findPosY(document.getElementById(mapObj));
		imageUpX = xUp - findPosX(document.getElementById(mapObj));
		imageUpY = yUp - findPosY(document.getElementById(mapObj));
		
		// Work out the midpoint between the two coordinates
		var midX, midY
		
		midX = Math.round((imageDownX + imageUpX) / 2);
		midY = Math.round((imageDownY + imageUpY) / 2);
		
		// Work out the distance between the two coords as calculate
		// by the mouseMove function
		var width, height, diag
	
		width = bottomX - topX;
		height = bottomY - topY;
		
		diag = Math.sqrt((width * width) + (height * height));
		diag = Math.round(diag);
		
		if (!diag) {
			diag = 0;
		}
		
		window.status = "Width = " + width + ", Height = " + height + ", Diagonal = " + diag;
		
		// Set map clicked to false
		mapClicked = false;
		
		// Hide the zoom box
		document.getElementById("zoombox").style.display = "none";
		document.getElementById("zoombox").style.width = 0;
		document.getElementById("zoombox").style.height = 0;
		
		// Fill out the hidden form fields and submit it
		document.getElementById("x").value = midX;
		document.getElementById("y").value = midY;
		document.getElementById("diag").value = diag;
		document.getElementById("theForm").submit();
		
		// Loading screen
		loadingScreen();
	}
}

function loadingScreen() {
	// Turn the loading screen on
	document.getElementById("loading").style.width = imageWidth + "px";
	document.getElementById("loading").style.height = imageHeight + "px";
	// Add on 1 to account for the image border! 
	document.getElementById("loading").style.left = findPosX(document.getElementById(mapObj)) + (imageWidth/2) - 105 + 1 + "px";
	document.getElementById("loading").style.top = findPosY(document.getElementById(mapObj)) + (imageHeight/2) - 30 + 1 + "px";
	document.getElementById("loading").style.display = "block";
}

function locatePolicyBox() {
	// Place the found policies box over the map
	document.getElementById("foundPolicies").style.width = (imageWidth - 30) / 2 + "px";
	document.getElementById("foundPolicies").style.height = (imageHeight - 30) / 2 + "px";
	document.getElementById("foundPolicies").style.left = findPosX(document.getElementById(mapObj)) + 1 + (imageWidth / 4) + "px";
	document.getElementById("foundPolicies").style.top = findPosY(document.getElementById(mapObj)) + 1 + (imageHeight / 4) + "px";
	document.getElementById("foundPolicies").style.display = "block";
}

function hideFoundPolicies() {
	// Turn the found policies div off
	document.getElementById("foundPolicies").style.display = "none";
}