/********************
* Testing functions *
*********************/

function showWindowXY()
{
	varX = getWindowX();
	varY = getWindowY();
	var alert = varX+":"+varY;
	window.alert(alert)
}

/***************************
* General window utilities *
****************************/

function prepareWindow()
// sets map size from index page when starting map
{
	setWindowDim();
	mapWidth  = windowX - 390;
	mapHeight = windowY - 70;
	if (mapWidth > 100 && mapHeight > 100)
	{
		if (linkObj = document.getElementById('metro_link'))
		{
			mapSize = "&mapsize="+mapWidth+"+"+mapHeight;
			var oldUrl = linkObj.href;
			linkObj.href = oldUrl+mapSize;
		}
	}
}

function onloadActions()
{
	setWindowDim();
	setLayerB();
	setLayerC();
	setIndieLayers();
	setLabelLayers();
	setZoomDir();
	displayScaleMessage();
}

function onManualResize()
{
	maximizeMap();
	// submit form! (reload for testing purposes)
	selectZoomDir('0');
	formSubmit();
}

function formSubmit()
{
	var loadingurl = '/~trex0003/metro/qmloading.html';
	determineTrans()
	layerRemoveNulls();
	maximizeScalebar();
	if (document.getElementById("ms").target == 'querywindow') {
		if (typeof(querywindow) != "undefined") {
			querywindow.document.getElementById('qresults').innerHTML = qinnerhtml;
			// querywindow.focus();
		}
		else {
			querywindow = window.open('','querywindow','width=600,height=600,scrollbars=0,menubar=0,location=0,resizable=1,status=0')
			querywindow.document.write(qhtml);
			if (!querywindow.opener) querywindow.opener = self;
		}
		// querywindow.focus();
	}
	document.getElementById("ms").submit();
	// Need to re-load animated gif *AFTER* form is submitted in order to un-freeze animation in IE
	// Note that gif is pre-loaded as background image to prevent delay of display
	// document.getElementById("compass").src = "/~trex0003/metro/arrows/z_compass_turn.gif";
	if (document.getElementById("ms").target != 'querywindow') {
		compassAnimate();
	}
	else {
		querywindow.focus();
	}
}

function setWindowDim()
{
	windowX = getWindowX();
	windowY = getWindowY();
}

function revealHidden(objId)
// Used to reveal content hidden by overflow property only!
{
	if (theObj = document.getElementById(objId))
	{
		theObj.style.overflow = "auto";
	}
}

function toggleHidden(objId)
// Toggles visibility based on overflow property only!
{
	if (theObj = document.getElementById(objId))
	{
		if (theObj.style.overflow == "auto")
		{
			theObj.style.overflow = "hidden";
		}
		else
		{
			theObj.style.overflow = "auto";
		}
	}
}

function compassAnimate()
{
	document.getElementById("compass").src = "/~trex0003/metro/arrows/z_compass_turn.gif";
	
}

// for explanation of the series in getWindowX/Y(), below, see:
// http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
// Basically, use window.innerWidth for browsers that accept it
// for those that don't (3 listed), document.documentElement.clientWidth/Height
// gives you window size > 0 in only one case. Then, of the remaining two,
// document.body.clientHeight/Width gives you window dimensions. Otherwise, you
// will get dimensions of document, which may extend beyond (or less than) window.
// document.body.offsetWidth/Height left in just incase...

function getWindowX()
{
	var WinX = "";
	if ((window.innerWidth) && (window.innerWidth > 0))
	{ WinX = window.innerWidth }
	else if ((document.documentElement.clientWidth) && (document.documentElement.clientWidth > 0))
	{ WinX = document.documentElement.clientWidth }
	else if ((document.body.clientWidth) && (document.body.clientWidth > 0))
	{ WinX = document.body.clientWidth }
	else
	{ WinX = document.body.offsetWidth }
	return WinX;
}

function getWindowY()
{
	var WinY = "";
	if ((window.innerHeight) && (window.innerHeight > 0))
	{ WinY = window.innerHeight }
	else if ((document.documentElement.clientHeight) && (document.documentElement.clientHeight > 0))
	{ WinY = document.documentElement.clientHeight }
	else if ((document.body.clientHeight) && (document.body.clientHeight > 0))
	{ WinY = document.body.clientHeight }
	else
	{ WinY = document.body.offsetHeight }
	return WinY;
}


/****************************************
* Object position & dimension utilities *
*****************************************/

// this function gets the upper left and lower right screen coordinates
// of object "theObj" and returns the results as an object
//// box.ulx = upper left  x-coord; box.uly = upper left  y-coord;
//// box.lrx = lower right x-coord; box.lry = lower right 7-coord;

function getBoundingBox(theObj)
{
	box = new Object();
	var object = document.getElementById(theObj)
	var obj = object;
	var coord = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			coord += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		coord += obj.x;
	box.ulx = coord;

	var obj = object;
	var coord = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			coord += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		coord += obj.y;
	box.uly = coord;

	var coord  = 0;
	    coord += object.offsetWidth;
		coord += box.ulx;
	box.lrx = coord;
	
	var coord  = 0;
	    coord += object.offsetHeight;
		coord += box.uly;
	box.lry = coord;

	return box;
}

function maximizeMap()
// Used to set map size on first load of page
{
	var mapTop  = getBoundingBox('t01_r02_d02').uly;
	var mapLeft = getBoundingBox('t01_r02_d02').ulx;
	var legendAllowance = getBoundingBox('t01_r01_d03').lrx - getBoundingBox('t01_r02_d02').lrx;
	var maxMapY = getWindowY() - mapTop - 10;
	var maxMapX = getWindowX() - mapLeft - legendAllowance - 10;
	var mapsize = maxMapX+" "+maxMapY;
	document.getElementById("mapsize_input").value = mapsize;

	var mapCenterX = 0.5 * maxMapX;
	var mapCenterY = 0.5 * maxMapY;
	var mapCenter = mapCenterX+" "+mapCenterY;
	document.getElementById("imgxy").value = mapCenter;
}

function maximizeScalebar()
// vary scalebar size when page is resized
// requires new map width to be set first!
{
	var toolsLeft  = getBoundingBox("td_zoomin").ulx;
	var toolsRight = getBoundingBox("td_info").lrx;
	var toolsWidth = toolsRight - toolsLeft;
	var mapObj = document.getElementById("mapsize_input");
	var mapWidth = mapObj.value.split(" ",1);
	var scalebarWidth  = mapWidth - toolsWidth - 10;
	if (scalebarWidth > 0)
	{
		scalebarWidth = scalebarWidth+" 6";
		document.getElementById('scalebarsize_input').value = scalebarWidth;
	}
	else
	{ 
		var alert  = "Scalebar Width not defined!";
		scalebarWidth = "100 6"
	}
}

function resizeMap()
// Used to resize map after window has been resized
// ## MAY NO LONGER BE NEEDED! ##
{
	var newWindowX = getWindowX();
	var newWindowY = getWindowY();
	var deltaX = newWindowX - windowX;
	var deltaY = newWindowY - windowY;
	if (mapObj = document.getElementById('mainmap_img'))
	{
		var mapWidth  = mapObj.width;
		var mapHeight = mapObj.height;
		mapObj.width  = mapWidth  + deltaX;
		mapObj.height = mapHeight + deltaY;
	}
	setWindowDim();	
}


/********************************
* Mouse Button (Tool) Functions *
*********************************/

function selectZoomDir(dir)
{
	document.getElementById('zoomdir_input').value = dir;
	setMode('browse');
}

function zoomFull()
{
	if (mapExtObj = document.getElementById('imgext_input'))
	{
		mapExtObj.value = "409583 4916397 532784 5040034";
		selectZoomDir('0');
		setMode('browse');
		setTrans('100');
		formSubmit();
	}
}

function setMode(mode)
{
	document.getElementById('mode_input').value = mode;
	if (mode == 'nquery') {
		document.getElementById('ms').target = 'querywindow';
	}
	else {
		document.getElementById('ms').target = '_self';
	}
}

function mapShift(direction)
// sets main map input mouseclicks to appropriate coordinates
// then submit form
{
	var mapCenterXY = document.getElementById("imgxy");
	var arrayCenterXY = mapCenterXY.value.split(" ");
	var mapRight = 2*arrayCenterXY[0];
	var mapBottom = 2*arrayCenterXY[1];
	if (direction.match("N"))
	{ arrayCenterXY[1] = "0" }
	if (direction.match("E"))
	{ arrayCenterXY[0] = mapRight }
	if (direction.match("S"))
	{ arrayCenterXY[1] = mapBottom }
	if (direction.match("W"))
	{ arrayCenterXY[0] = "0" }
	mapCenterXY.value = arrayCenterXY[0]+" "+arrayCenterXY[1];
	// Don't forget to set mouse mode to pan!
	formSubmit();
}

function arrowSwitch(objId) 
// onclick method to change to highlight color
{
	selectTool('_pan');
	selectZoomDir('0');
	var myObjId = "_"+objId;
	if (obj=document.getElementById(myObjId)) 
	{
		var img  = "url(/~trex0003/metro/arrows/d_";
			img += objId;
			img += ".gif)";
		obj.style.backgroundImage = img;
	}
	mapShift(objId);
}

function arrowRevert(objId) 
// method to return arrow to normal color when mouse leaves
{
	var myObjId = "_"+objId;
	if (obj=document.getElementById(myObjId))
	{
		var img  = "url(/~trex0003/metro/arrows/o_";
			img += objId;
			img += ".gif)";
		obj.style.backgroundImage = img;
	}
}

function selectTool(objId) 
// method to select navigation/query tool (and unselect others)
{
	// resume buttons to original color
	var toolArray = new Array("_zoomin", "_zoomout", "_pan", "_full", "_info");
	for (tool in toolArray) 
	{
		if (obj=document.getElementById(toolArray[tool])) 
		{
			var img  = "/~trex0003/metro/buttons/n" + toolArray[tool] + ".gif";
			obj.src = img;
		}
			
	}

	// set active tool to new color
	if (obj=document.getElementById(objId)) 
	{
		var img  = "/~trex0003/metro/buttons/a" + objId + ".gif";
		obj.src = img;
	}
}


/*********************************************
* Page load actions to SET previous settings *
**********************************************/

function setLayerB()
// Find which landuse (B) layer in current map is checked
// Also highlight selected layer text
{
	var countLayers = 0;
	// loop through array & test if checked; should be only 1; set LayerB to that
	for (var i=0;i<arrayLayerB.length;i++)
	{
		if (arrayLBChecked[i].toLowerCase() != '')
		{
			// set LayerB value to analogous position in array of layer names
			document.getElementById("landuse_input").value = arrayLayerB[i];
			document.getElementById(arrayLayerB[i]).className = "layer_on";
			countLayers++
		}
	}
	if (countLayers > 1) 
	{ window.alert("Multiple Landuse (B) Layers turned on!") }
	if (countLayers == 0)
	{ document.getElementById('landuse_none').className = "layer_on"; }
}

function setLayerC()
// Find which imagery (C) layer in current map is checked
// Also highlight selected layer text
{
	var countLayers = 0;
	// loop through array & test if checked; should be only 1; set LayerC to that
	for (var i=0;i<arrayLayerC.length;i++)
	{
		if (arrayLCChecked[i].toLowerCase() != '')
		{
			// set LayerC value to array value
			document.getElementById("imagery_input").value = arrayLayerC[i];
			document.getElementById(arrayLayerC[i]).className = "layer_on";
			countLayers++
		}
	}
	if (countLayers > 1) 
	{ window.alert("Multiple Imagery (C) Layers turned on!") }
	if (countLayers == 0)
	{ document.getElementById('imagery_none').className = "layer_on" };
}

function setIndieLayers()
// Find which independent layers in current map are checked
// Also highlight selected layer text
{
	// loop through array and test checked; may be more than one
	for (var i=0;i<arrayIndieLayers.length;i++)
	{
		if (arrayILChecked[i].toLowerCase() != '')
		{
			var inputId = arrayIndieLayers[i]+"_input";
			document.getElementById(inputId).value = arrayIndieLayers[i];
			document.getElementById(arrayIndieLayers[i]).className = "layer_on";
		}
	}
}

function setLabelLayers()
// Find which label layers in current map are checked
// Also hide/reveal text to turn labels on/off
{
	var labelInputId, labelDivId_on, labelDivId_off;
	var objInputId, objDivOn, objDivOff;
	
	// loop through array and test checked; may be more than one
	for (var i=0;i<arrayAllLabels.length;i++)
	{
		if (arrayALChecked[i].toLowerCase() != '')
		{
			labelInputId   = arrayAllLabels[i]+"_input";
			labelDivId_on  = "div_"+arrayAllLabels[i]+"_on";
			labelDivId_off = "div_"+arrayAllLabels[i]+"_off";
			document.getElementById(labelInputId).value = arrayAllLabels[i];
			document.getElementById(labelDivId_on).className  = "div_show";
			document.getElementById(labelDivId_off).className = "div_hide";
		}
	}
}

function setZoomDir()
// Selects mouse tool to match that used in previous view.
// NOTE: MapServer can auto-set zoomdir input to match previous!
{
	var myZoomDir = document.getElementById("zoomdir_input").value;
	// loop through array and test if checked; should be only 1; set ZoomDir to that
	for (var i=0;i<arrayZoomDir.length;i++)
	{
		if (arrayZoomDir[i] == myZoomDir)
		{
			selectTool(arrayZDToolId[i]);
		}
	}
}


/*****************************************
* Map Layer Selection/manipulation Tools *
******************************************/

function toggleLabel(labelName) 
// currently used to toggle on label on or off
{
	var labelInputId   = labelName+"_input";
	var labelDivId_on  = "div_"+labelName+"_on";
	var labelDivId_off = "div_"+labelName+"_off";
	var objInputId = document.getElementById(labelInputId);
	var objDivOn   = document.getElementById(labelDivId_on);
	var objDivOff  = document.getElementById(labelDivId_off);

	if (objDivOn.className == "div_show")
	{
		objDivOn.className  = "div_hide";
		objDivOff.className = "div_show";
		objInputId.value    = "NULL";
	}
	else
	{
		objDivOn.className  = "div_show";
		objDivOff.className = "div_hide";
		objInputId.value    = labelName;
	}
	selectZoomDir('0');
	selectTool('_pan');
	formSubmit();
}

function toggleAll(state) 
// currently used to toggle between all labels on or off
{
	var labelInputId, labelDivId_on, labelDivId_off;
	var layerInputId, layerAId
	
	for (var i=0;i<arrayAllLabels.length;i++)
	{
		labelInputId   = arrayAllLabels[i]+"_input";
		labelDivId_on  = "div_"+arrayAllLabels[i]+"_on";
		labelDivId_off = "div_"+arrayAllLabels[i]+"_off";
		layerAId     = arrayAllLabels[i].replace(/labels/,"");
		layerInputId = layerAId+"_input";
	
		if (state == "on")
		{
			document.getElementById(labelInputId).value = arrayAllLabels[i];
			document.getElementById(layerInputId).value = layerAId;
			document.getElementById(labelDivId_on).className  = "div_show";
			document.getElementById(labelDivId_off).className = "div_hide";
			document.getElementById(layerAId).className = "layer_on";
		}
		else
		{
			document.getElementById(labelInputId).value = "NULL";
			document.getElementById(layerInputId).value = "NULL";
			document.getElementById(labelDivId_on).className  = "div_hide";
			document.getElementById(labelDivId_off).className = "div_show";
			document.getElementById(layerAId).className = "layer_off";
		}
	}
	selectZoomDir('0');
	selectTool('_pan');
	formSubmit();
}

function switchLayer(layerGroupName, layerName) // radio button equivalent (all off, then select one)
{
	// turn all layers off
	if (layerArray=document.getElementsByName(layerGroupName)) 
	{
		for (var i=0;i<layerArray.length;i++) 
		{ layerArray[i].className = "layer_off" }
	}

	// highlight chosen layer
	if (chosenLayer=document.getElementById(layerName)) 
	{ chosenLayer.className = "layer_on" }

	// modify form input and submit
	var inputId = layerGroupName+"_input";
	if (chosenInput=document.getElementById(inputId))
	{
		chosenInput.value = layerName;
		selectZoomDir('0');
		selectTool('_pan');
		formSubmit();
	}
	else
	{
		alert = "Could not select layer "+layerName+" for display!";
		window.alert(alert);
	}
}

function toggleLayer(layerName) // checkbox equivalent (only toggle selected layer on or off
{
	var inputName = layerName+"_input";
	if (chosenLayer=document.getElementById(layerName)) 
	{
		if (chosenLayer.className == "layer_on") 
		{ 
			chosenLayer.className = "layer_off";
			document.getElementById(inputName).value = "NULL";
		}
		else
		{
			chosenLayer.className = "layer_on";
			document.getElementById(inputName).value = layerName;
		}
		selectZoomDir('0');
		selectTool('_pan');
		formSubmit();
	}

}

function determineTrans()
// from scale and landuse (B) layer settings, sets imagery (C) layer transparency
// default transparency in html template is 50, so this sets exceptions
{
	// determine scale in next map
	var zoomDir = document.getElementById('zoomdir_input').value;
	var imageLayer = document.getElementById('imagery_input').value;
	var newScale = scale;
	if (zoomDir == "-1")
		{ newScale = 2 * scale }
	else if (zoomDir == "1")
		{ newScale = 0.5 * scale }
	
	// test exception cases where transparency should be 100 (opaque) 
	if (newScale > 100000)
		// no imagery available above 100K
		{ 
			setTrans('100');
			document.getElementById('div_too_far').style.display = "block";
		}
	else if (imageLayer == "NULL")
		// within imagery scale range, but imagery turned off
		{ setTrans('100') }
}

function displayScaleMessage()
// onload, display imagery availability message
{
	var imageLayer = document.getElementById('imagery_input').value;
	if (scale > 100000)
        // no imagery available above 100K
        {
            document.getElementById('div_too_far').style.display = "block";
			document.getElementById('c1_imagery').style.backgroundColor = "#C8C8C8";
        }
}

function setTrans(transValue)
// used by determineTrans to set transparency
{
	var transLayer = "";
	// cycle through imagery layers and set value
	for (var i=0;i<arrayLayerB.length;i++)
	{
		transLayer = "map_"+arrayLayerB[i]+"_transparency";
		if (transObj = document.getElementById(transLayer))
			{ transObj.value = transValue; }
	}
	// in addition to landuse set, also set lakes to transparent
	transLayer = "map_lakes_transparency"
	if (transObj = document.getElementById(transLayer))
		{ transObj.value = transValue; }
}

function layerRemoveNulls() 
// Clean up! cycle through "layer" name-group & remove nulls minimize GET URL
// Note reverse loop! Problem with positive loop because array position
// changed each time an element was removed! Funky.
{
	if (layerGroup = document.getElementsByName("layer"))
	{
		for (var i=layerGroup.length-1;i>-1;i--)
		{
			currentLayer = layerGroup[i];
			if ((currentLayer.value == "NULL") || (currentLayer.value == ""))
			{ currentLayer.parentNode.removeChild(currentLayer) }
		}
	}
}

var qhtml ='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Query Results - Washington County, MN Land Use Monitor</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- a:link {color: #640000} a:visited {color: #3A1B0D} a:hover {color: #FF0000} a:active {color: #FF2074} p {margin-bottom: 0px; padding-bottom: 0px; font-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: bold; text-align: left; vertical-align: top; color: #3A1B0D} h1 {font-family: Arial, Helvetica, sans-serif; font-size: large; font-weight: bold; text-align: left; vertical-align: top; color: #640000} h2 {margin-bottom: 0px; padding-bottom: 0px; font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: bold; text-align: left; vertical-align: top; color: #28274C} h3 {font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; text-align: left; vertical-align: top; color: #640000} td {font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #28274C} body {} --> </style> </head> <body topmargin="10" marginwidth="0" marginheight="0" leftmargin="10" bgcolor="#EAE7A2"> <table width="500" border="0" cellspacing="2" cellpadding="30" align="left" bgcolor="#EAE7A2"> <tr><td> <h1>The Twin Cities Metro Land Use Explorer</h1> <h3>Land Use Details On Selected Point:<br>&nbsp;</h3> <div id="qresults" width="100%"> <center><h1 style="color: #FF0000">Retrieving Data...</h1></center> </div> </td></tr> </table> </body> </html>';

var qinnerhtml ='<center><h1 style="color: #FF0000">Retrieving Data...</h1></center>';