// ----------------------------------------------------------------
	//     				   ArcWeb Services Site Starter Client
	// ----------------------------------------------------------------
	// Purpose:  Manages "active" navigation functionality.  
	//           + Manages map coordinate logic.
	//           + Uses DHTML to produce rubber-banding effect 
	//             when user zooms in or out.  This is handled
	//             by the zoomBox class.
	// ----------------------------------------------------------------
	// Notes:		
	// -------------------------------------------------------------------

	// The following variables are global to the page.
		// These vars reference HTML tags in the page whose
		// values may be read or set dynamically.
		var m_radZoomIn;
		var m_radRecenter;
		var m_txtXCoord;
		var m_txtYCoord;
		var m_imgLoading;
		var m_imgMapCanvas;
		var m_imgBackCanvas;
		var m_divMapBorder;
		var m_divZoomBox;
		var m_divMapTools;
		var m_divNorth;
		var m_divSouth;
		var m_divEast;
		var m_divWest;
		var	m_hvMinX;
		var	m_hvMinY;
		var	m_hvMaxX;
		var	m_hvMaxY;
		var m_hvMapPage;
		var m_panning = false;

		// These vars represent javascript classes that will
		// handle logic.
		var m_mapViewer;  // Object of type map.  Handles map coordinate management.

		var m_zbxZoom;      // Object of type zoombox.  Handles drawing the zoombox.  
							// Operates entirely within page coordinates and has no 
							// awareness of the map space or even the image that 
							// represents the map on the page.

		var m_iToolMode;    // Indicates the currently selected tool, where
							//				+ zoom in  = 1
							//				+ recenter = 2	
							//				+ identify = 3

		var m_sClientBrowserType;	// Possible values: "IE", "Netscape"
		var m_sClientPlatform;		// Possible values: "Windows","Mac"
		
						// The array that stores the level extent widths				  
		var m_ExtentWidths = new Array(1500, 2000, 2500, 5000, 7500, 10000, 15000, 20000, 40000, 80000, 161000);

		var m_lTimerID = 1; // used only for hiding the "Wait" image for Netscape 6.x

		// Determine browser type and platform.

		if (navigator.appName.indexOf("Netscape")>=0) {
			m_sClientBrowserType = 'Netscape';
		} else if (navigator.appName.indexOf('Microsoft') >=0) {
			m_sClientBrowserType = 'IE';
		} else {
			//window.location = "unsupported.htm";
			m_sClientBrowserType = 'IE';
		}

		if (navigator.userAgent.indexOf("Win") >= 0) {
			m_sClientPlatform = 'Windows';
		} else if (navigator.platform.indexOf("Mac") >= 0) {
			m_sClientPlatform = 'Mac';
		} else {
			//window.location = "unsupported.htm";
			m_sClientPlatform = 'Mac';
		}
		

	// *******************************************************************
	// *********************** STARTUP FUNCTION **************************
	// *******************************************************************


	function startUp() {
		// Purpose: Fires when the page first loads.  
		// Find the HTML tags that will be used throughout the
		// page.
		m_radZoomIn = document.getElementById("radZoomIn");
		m_radRecenter = document.getElementById("radRecenter");
		m_txtXCoord = document.getElementById("txtXCoord");
		m_txtYCoord = document.getElementById("txtYCoord");
		m_imgMapCanvas = document.getElementById("imgMapCanvas");
		m_imgBackCanvas = document.getElementById("imgBackCanvas");
		m_imgLoading = document.getElementById("imgLoading");
		m_divZoomBox = document.getElementById("divZoomBox");
		m_divMapBorder = document.getElementById("divMapBorder");
		m_divNorth = document.getElementById("divNorth");
		m_divSouth = document.getElementById("divSouth");
		m_divEast = document.getElementById("divEast");
		m_divWest = document.getElementById("divWest");
		m_divMapTools = document.getElementById("divMapTools");
		m_hvMinX = document.getElementById("hvMinX");
		m_hvMinY = document.getElementById("hvMinY");
		m_hvMaxX = document.getElementById("hvMaxX");
		m_hvMaxY = document.getElementById("hvMaxY");
		m_hvMapPage = document.getElementById("hvMapPage");
		// Create a map coordinate manager.
		m_mapViewer = new map(m_imgMapCanvas.offsetLeft,
							m_imgMapCanvas.offsetTop,
							m_imgMapCanvas.width,	
							m_imgMapCanvas.height,
							m_ExtentWidths,
							new rect(m_hvMinX.value, m_hvMinY.value, m_hvMaxX.value, m_hvMaxY.value)
							);
		// Create a zoom box.
		m_zbxZoom = new zoomBox(m_divZoomBox);
	   
		//Orient other page elements - Map Border, Map Tools, Loading Image, Border Navigation.
		posLoadingImage();
		posBorder();
		//posBorderNavigation(); //must be called BEFORE posTools()
		posTools();  //must be called AFTER posBorderNavigation()  

		// Initialize the tool mode. 
		handleToolClick(returnActiveTool());
			
		// Initialize the X,Y coordinate display.
		m_txtXCoord.value = "X:"
		m_txtYCoord.value = "Y:"

		// Assign custom event handlers to mousedown, mousemove, 
		// and mouseup.
		if (m_sClientBrowserType == 'Netscape') {
			document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
		}
		document.onmousedown = handleMouseDown;
		document.onmousemove = handleMouseMove;
		document.onmouseup = handleMouseUp;
		
		// Assign an event handler to the m_imgMapCanvas onload event.
		m_imgMapCanvas.onload = hideWaitImage;
		
			//Request a map.
		submit();
	}//End Startup

	// *******************************************************************
	// *********************** EVENT HANDLERS  ***************************
	// *******************************************************************

	function handleMouseDown(evt) {
	// Purpose:  Any time a mouse button is depressed, this function
	//           is given the opportunity to respond to the event.
	//
	//           For the purposes of the map, we are only interested
	//           in the click if it happened within the map area, so 
	//           an initial check kicks us out of the function if the
	//           click has not occurred in the map area.
	//
	//           If the click is over the map, then -- depending on
	//           the tool mode -- either the zoombox must be started
	//           or a recenter must be performed.


		// Get event coordinates by browser-specific means.
		var eventX;
		var eventY;

		if (m_sClientBrowserType == 'Netscape') {
			eventX = evt.clientX;
			eventY = evt.clientY;
		} else {
			eventX = event.clientX;
			eventY = event.clientY;
		}

		// Check to see if click is over map
		if (!(m_mapViewer.isEventOverMap(eventX, eventY))) {	
			return;
		} 
		var ptUserClick = new point(eventX,eventY);
		
		switch(m_iToolMode) {
			case 1: // zoom in mode
				if ((m_sClientBrowserType == 'IE') && (m_sClientPlatform == 'Windows')) {
				// For IE, a call to "setCapture" is made to ensure that
					// new IE dragging events do not interfere with capturing 
					// the mousemove events -- effectively, this turns off 
					// drag and drop events temporarily.
					m_imgMapCanvas.setCapture(); 
				}
				m_zbxZoom.show();
				m_zbxZoom.start(eventX, eventY);
				break;
			case 2: // recenter mode
				var ptUserClick = m_mapViewer.toMapPoint(eventX, eventY);
				m_mapViewer.recenter(ptUserClick);
				//Request a new map.
				submit();
				break;
			case 3: // Drag Mode
				if ((m_sClientBrowserType == 'IE') && (m_sClientPlatform == 'Windows')) {
					m_imgMapCanvas.setCapture(); 
					m_imgBackCanvas.setCapture();
				}
				m_panning = startPan(ptUserClick);
				break;
			case 4://Select Parcel
				if ((m_sClientBrowserType == 'IE') && (m_sClientPlatform == 'Windows')) {
					m_imgMapCanvas.setCapture(); 
					m_imgBackCanvas.setCapture();
				}
				SelectGISParcel(ptUserClick);
				break;
		}
	}

	function handleMouseMove(evt) {
	// Purpose:  Any time the mouse moves anywhere on the document, 
	//           this function is given the opportunity to respond to 
	//           the event.

		// Get event coordinates by browser-specific means.

		var eventX;
		var eventY;

		if (m_sClientBrowserType == 'Netscape') {
			eventX = evt.clientX;
			eventY = evt.clientY;
		} else {
			eventX = event.clientX;
			eventY = event.clientY;
		}
		
		// If the mouse isn't currently over the map, we
		// have nothing to do.
		if (!(m_mapViewer.isEventOverMap(eventX, eventY))) {	
			return;
		} 		

		// If the current tool is zoom in and a zoombox is in progress, update
		// the zoom box.
		if (m_iToolMode == 1) {
			if (m_zbxZoom.isInProgress) {
				m_zbxZoom.update(eventX, eventY);
			}
		}
		if (m_iToolMode ==3){
			if(m_panning){
				window.status="Panning";
				var ptUserClick = new point(eventX,eventY);
				panMouse(ptUserClick);
				return;
			}
		}
		if (m_iToolMode ==4){
			if(!m_hasSelection){
				window.status="Getting Details";
				var ptUserClick = new point(eventX,eventY);
				//Would like to update in realtime, but need to throttle back request by about a 1000
				//updateDetailsMouseOver(ptUserClick);
				return;
			}
		}
	
		reportCoords(m_mapViewer.toMapPoint(eventX, eventY)); // update the textbox to reflect
	}//end handleMouseMove

	function handleMouseUp(evt) {
		// Purpose:  Any time a mouse button is released, this function is 
		//					 given the opportunity to respond to the event.

			// If a ZoomBox is not in progress, we've got nothing
			// to do.
		window.status="Logan County Maps";
			
		var eventX;
		var eventY;

		if (m_sClientBrowserType == 'Netscape') {
			eventX = evt.clientX;
			eventY = evt.clientY;
		} else {
			eventX = event.clientX;
			eventY = event.clientY;
		}
		var ptUserClick = new point(eventX,eventY);
		if (m_iToolMode ==3){
			if(m_panning){
				m_panning = stopPan(ptUserClick);
				if ((m_sClientBrowserType == 'IE') && (m_sClientPlatform == 'Windows')) {
					document.releaseCapture();
				}
				return;
			}
		}
		if (m_iToolMode ==4){
			if(m_hasSelection){
				if ((m_sClientBrowserType == 'IE') && (m_sClientPlatform == 'Windows')) {
					document.releaseCapture();
				}
				return;
			}
		}
		
		if (!(m_iToolMode == 1)) {
			return;
		}
		
		if (!(m_zbxZoom.isInProgress())) {
			return;
		}
		
		// Release the capture that was set in the mousedown
		// handler (again, this is something that we have to do because
		// of drag events in IE).
		if ((m_sClientBrowserType == 'IE') && (m_sClientPlatform == 'Windows')) {
			document.releaseCapture();
		}

		// Stop the current effect.
		m_zbxZoom.stop();
		//centerPicture(ptUserClick);
		// If the width of the zoom box is less than five pixels,
		// treat is as a single click and zoom in one map level.
		// Otherwise, set the extent to the zoom box.
		if ((Math.abs(m_zbxZoom.getStartX() - m_zbxZoom.getEndX()) < 5) && (Math.abs(m_zbxZoom.getStartY() - m_zbxZoom.getEndY()) < 5))  {	
			var ptUserClick = m_mapViewer.toMapPoint(m_zbxZoom.getStartX(), m_zbxZoom.getStartY());
			if (m_mapViewer.getLevel() == 1) {   //if we reach the minimum zoom level, zoom a fixed amount.
				m_mapViewer.zoom(0.5);
			} else {
				m_mapViewer.setLevel(m_mapViewer.getLevel() - 1);
			}
			m_mapViewer.recenter(ptUserClick);
		} else {
			borderWidth = 0;
			if (m_sClientBrowserType == 'Netscape') {
				borderWidth = 4; // 2 times border width
			}
			var ptStart = m_mapViewer.toMapPoint(m_zbxZoom.getStartX()+borderWidth, m_zbxZoom.getStartY()+borderWidth);
			var ptEnd   = m_mapViewer.toMapPoint(m_zbxZoom.getEndX()+borderWidth, m_zbxZoom.getEndY()+borderWidth);
			m_mapViewer.setExtent(new rect(ptStart.x,ptStart.y,ptEnd.x,ptEnd.y));
		}
		//Request a new map.
		submit();
		
	}

	function handleToolClick(iToolMode) {
		switch(iToolMode) {
			case 1:
				// zoom in mode
				centerPicture();
				m_imgMapCanvas.style.cursor = "crosshair";
				break;
			case 2:
				// pan mode
				centerPicture();
				m_imgMapCanvas.style.cursor = "hand";
				break;
			case 3:
				// pan mode
				m_imgMapCanvas.style.cursor = "hand";
				break;
			case 4:
				//identify mode
				centerPicture();
				m_imgMapCanvas.style.cursor = "crosshair";
				break;
		}
		m_iToolMode = iToolMode;
	}

	function ResizeMap(sSize) {
		if (((sSize == 'SMALL') && (m_imgMapCanvas.className == 'SmallMap')) || 
			((sSize == 'LARGE') && (m_imgMapCanvas.className == 'LargeMap'))) {
			return;
		}
		switch(sSize) { 
			case 'SMALL':
			m_imgMapCanvas.className = 'SmallMap';
			m_imgBackCanvas.className = 'SmallMap';
			break;
			case 'LARGE':
			m_imgMapCanvas.className = 'LargeMap';
			m_imgBackCanvas.className = 'LargeMap';
			break;
			default: 
			return; // invalid sSize value
		}

			// Create a new map coordinate manager.
		m_mapViewer = new map(m_imgMapCanvas.offsetLeft,
						m_imgMapCanvas.offsetTop,
						m_imgMapCanvas.width,	
						m_imgMapCanvas.height,
						m_ExtentWidths,
						m_mapViewer.getExtent()
						);
			//Orient other page elements - MapSizeImage, Map Border, Map Tools, Loading Image.
		switch(sSize) { 
			case 'SMALL':
			updateImgMapSize('LARGE');
			break;
			case 'LARGE':
			updateImgMapSize('SMALL');
			break;
		}
		
		posLoadingImage();
		posBorder();
		posBorderNavigation(); //must be called BEFORE posTools()
		posTools();  //must be called AFTER posBorderNavigation()
		centerPicture();
		submit();
	}

	function ZoomToLevel(iLevel) {           
		m_mapViewer.setLevel(iLevel);
		//Request a new map.
		centerPicture();
		submit();
	}

	// *******************************************************************
	// ********************** HELPER FUNCTIONS  **************************
	// *******************************************************************

	function hideWaitImage() {
		m_zbxZoom.hide();
		//m_imgLoading.style.visibility = 'hidden';
	}

	function hideWaitImageForNetscape6() {
		if (m_imgMapCanvas.complete) {
			clearInterval(m_lTimerID);
			m_divZoomBox.style.visibility = 'hidden';
			//m_imgLoading.style.visibility = 'hidden';
		}
	}

	function hideBackground(){
		m_imgBackCanvas.sURL = "images/transparent.gif";
		}
		
	function moveEast() {
		var ptUserClick = new point(45,145);
		centerPicture(ptUserClick);
		m_mapViewer.moveEast();
		submit();
	}

	function moveNorth() {
		var ptUserClick = new point(45,145);
		centerPicture(ptUserClick);
		m_mapViewer.moveNorth();
		submit();
	}

	function moveSouth() {
		var ptUserClick = new point(45,145);
		centerPicture(ptUserClick);
		m_mapViewer.moveSouth();
		submit();
	}

	function moveWest() {
		var ptUserClick = new point(45,145);
		centerPicture(ptUserClick);
		m_mapViewer.moveWest();
		submit();
	}

	function persistExtent() {
		m_hvMinX.value = m_mapViewer.getExtent().getLeft();
		m_hvMinY.value = m_mapViewer.getExtent().getBottom();
		m_hvMaxX.value = m_mapViewer.getExtent().getRight();
		m_hvMaxY.value = m_mapViewer.getExtent().getTop();
	}

	function posBorder() {

		if (m_sClientBrowserType == 'Netscape') { 
			m_divMapBorder.style.left = m_imgMapCanvas.offsetLeft - parseInt(m_divMapBorder.style.borderWidth.replace('px',''));
			m_divMapBorder.style.top = m_imgMapCanvas.offsetTop - parseInt(m_divMapBorder.style.borderWidth.replace('px',''));
		} else { // browser must be IE
			m_divMapBorder.style.left = m_imgMapCanvas.offsetLeft;
			m_divMapBorder.style.top = m_imgMapCanvas.offsetTop;
		}
			
		m_divMapBorder.style.width = m_imgMapCanvas.width;
		m_divMapBorder.style.height = m_imgMapCanvas.height;
		m_divMapBorder.style.visibility = "visible";

	}

	function posBorderNavigation() {
		var borderOffset = 0;    
		if (m_sClientBrowserType == 'Netscape') {
			borderOffset = parseInt(m_divMapBorder.style.borderWidth.replace('px','')) 
		}
			//align the NORTH DIV       
		m_divNorth.style.top = m_imgMapCanvas.offsetTop - (parseInt(m_divNorth.style.height.replace('px',''))) - borderOffset;
		m_divNorth.style.left = m_imgMapCanvas.offsetLeft + (m_imgMapCanvas.width / 2)- (parseInt(m_divNorth.style.width.replace('px','')) / 2);    

			//align the SOUTH DIV
		m_divSouth.style.top = m_imgMapCanvas.offsetTop + m_imgMapCanvas.height + borderOffset;
		m_divSouth.style.left = m_imgMapCanvas.offsetLeft + (m_imgMapCanvas.width / 2)- (parseInt(m_divSouth.style.width.replace('px','')) / 2);   
	  
			//align the EAST DIV       
		m_divEast.style.top = m_imgMapCanvas.offsetTop + ((m_imgMapCanvas.height / 2) - (parseInt(m_divEast.style.height.replace('px','')) / 2));
		m_divEast.style.left = m_imgMapCanvas.offsetLeft + m_imgMapCanvas.width + borderOffset;    

			//align the WEST DIV       
		m_divWest.style.top = m_imgMapCanvas.offsetTop + ((m_imgMapCanvas.height / 2) - (parseInt(m_divWest.style.height.replace('px','')) / 2));
		m_divWest.style.left = m_imgMapCanvas.offsetLeft - (parseInt(m_divWest.style.width.replace('px',''))) - borderOffset;   
	}

	function posLoadingImage() {
	//	m_imgLoading.style.left = (parseInt(m_imgMapCanvas.style.left.replace('px','')) + (m_imgMapCanvas.width / 2) - (m_imgLoading.width / 2) );
	//	m_imgLoading.style.top = (parseInt(m_imgMapCanvas.style.top.replace('px','')) + (m_imgMapCanvas.height / 2) - (m_imgLoading.height / 2) );
	}

	function posTools() {
		//m_divMapTools.style.top = parseInt(m_divSouth.style.top.replace('px','')) + parseInt(m_divSouth.style.height.replace('px',''));
		m_divMapTools.style.width = m_imgMapCanvas.width;
	}

	function reportCoords(ptReport) {
		// Note: Use round() instead of toFixed(), since the latter isn't supported
	//       in IE Mac.
		m_txtXCoord.value = "X: "+(Math.round(ptReport.x*10000.0)/10000.0).toString();
		m_txtYCoord.value = "Y: "+(Math.round(ptReport.y*10000.0)/10000.0).toString();
	}

	function returnActiveTool() {
		if (m_radZoomIn.checked) {
			return 1;
		} else if(m_radRecenter.checked) {
			return 2;
		}
	}

	function showWaitImage() {
		//m_imgLoading.style.visibility = 'visible';
	}

	function dragSubmit() {
		var sURL = GetURL();
		updateZoomLevel(m_mapViewer.getLevel());
		//	showWaitImage();
		if (navigator.userAgent.indexOf('Netscape6/6') > -1) {
			m_lTimerID = setInterval("hideWaitImageForNetscape6();",100);
		}
		m_imgBackCanvas.src = sURL;
		//Persist extent in Hidden variables
		persistExtent();	
	}

	function panSubmit() {
		//m_imgBackCanvas.src = m_imgMapCanvas.src;
		//persistExtent();	
	}
	
	function startSubmit() {
		var sURL = GetURL();
		updateZoomLevel(m_mapViewer.getLevel());
		//	showWaitImage();
		if (navigator.userAgent.indexOf('Netscape6/6') > -1) {
			m_lTimerID = setInterval("hideWaitImageForNetscape6();",100);
		}
		m_imgBackCanvas.src = "images/Transparent.gif";
		m_imgMapCanvas.src = sURL;
		//Persist extent in Hidden variables
		persistExtent();	
	}

	function submit() {
		var sURL = GetURL();
		updateZoomLevel(m_mapViewer.getLevel());
		//	showWaitImage();
		if (navigator.userAgent.indexOf('Netscape6/6') > -1) {
			m_lTimerID = setInterval("hideWaitImageForNetscape6();",100);
		}
		m_imgMapCanvas.src = sURL;
		m_imgBackCanvas.src = sURL;
		//Persist extent in Hidden variables
		persistExtent();	
	}

	function updateImgMapSize(sSize) {
		m_imgMapSize = document.getElementById("imgMapSize");
		switch(sSize) { 
			case 'SMALL':
				m_imgMapSize.name = 'SMALL';
				m_imgMapSize.src= 'images/smallmap.gif';
			break;
			case 'LARGE':
				m_imgMapSize.name = 'LARGE';
				m_imgMapSize.src= 'images/largemap.gif';
			break;
		}
	}

	function updateZoomLevel(inLevel) {
			var nLevels = m_ExtentWidths.length;
			for (i=1;i<nLevels+1;i++) {
				document.getElementById('imgZoomLevel' + i).src = 'images/tick.gif';
				if (i==inLevel) {
					document.getElementById('imgZoomLevel' + i).src = 'images/tick_selected.gif';
				}
			}
	}