// CivXplorer On-Map Graphics and Text

// Suzanne Fliege
// PlanSight, LLC

// contains functions to user creation of map points by Lat/Long.
mapgraphicsAvailable = true;


//******************************************************************************
// do not edit below here
//******************************************************************************
// map graphic variables
var mapgraphicTypeList = new Array("point","line","polygon","text");
var mapgraphicWidthList = new Array("1pt","2pt","3pt","4pt","5pt","6pt","7pt","8pt","9pt","10pt");
var mapgraphicFillPctList = new Array("0% - hollow","10%","20%","30%","40%","50%","60%","70%","80%","90%","100% - solid");
var mapgraphicFillValueList = new Array("0.0","0.1","0.2","0.3","0.4","0.5","0.6","0.7","0.8","0.9","1.0");
var mapgraphicType = "point";
var mapgraphicShape = "circle";
var mapgraphicWidth = "1pt";
var mapgraphicColor = "255,0,0";
var mapgraphicFillColor = "255,0,0";
var mapgraphicFillValue = "0.5";
var mapgraphicLabel = "My Text";
var mapgraphicXML = "";
// map graphic storage array
var mapgraphicXMLs = new Array();
var mapgraphicNames = new Array();
var isMapGraphics = false;

// add menu items for Lat/Long pt mgmt
function addMapGraphicMenuItems() {
	document.writeln(createMenuItem("menuItem_MapGraphicDraw","clickFunction(\'mapgraphic\');","Add Map Annotation"));
	document.writeln(createMenuItem("menuItem_MapGraphicClear","clearMapGraphics();","Clear Map Annotations"));
	return false;
}

// writes form for user lat/long point creation
function showMapGraphicDialog() {
    document.getElementById('cxSelectIDDialog').style.visibility = "visible";
	document.getElementById('cxSelectIDDialog').style.width = "280px";
	var colorLabelString = "Color";
	var theString = "";
	theString += '<form name="MapGraphicStuff" onsubmit="return false;">';
	theString += '<table cellpadding="0" cellspacing="0" width="100%">';
	theString += '<tr><td class="header1" width="*" align="center">Add Annotation To Map</td><td class="header1" width="18"><a href="#" onmousedown="hideSelectIDDialog();"><img src="images/CXminimize.gif" align="top"></a></td></tr>';
	theString += '</table><table cellpadding="2" cellspacing="0" width="100%">';
	// graphic type
	theString += '<tr><td class="toolInfo2" align="right">Type</td><td><select name="graphicType" onchange="mapgraphicType=this.options[this.selectedIndex].value;clickFunction(\'mapgraphic\');">';
	for (var i=0;i<mapgraphicTypeList.length;i++) {
		theString += '<option value="' + mapgraphicTypeList[i] + '"';
		if (mapgraphicType == mapgraphicTypeList[i]) theString += ' selected';
		theString += '>' + mapgraphicTypeList[i];
	}
	theString += '</select></td></tr>';
	// graphic style (point marker, line width)
	if (mapgraphicType == "point") {
		theString += '<tr><td class="toolInfo2" align="right">Shape</td><td><select name="graphicShape" onchange="mapgraphicShape=this.options[this.selectedIndex].value;">';
		for (var i=0;i<graphicPointTypes.length;i++) {
			theString += '<option value="' + graphicPointTypes[i] + '"';
			if (mapgraphicShape == graphicPointTypes[i]) theString += ' selected';
			theString += '>' + graphicPointTypes[i];
		}
		theString += '</select></td></tr>';
	} else if ((mapgraphicType == "line") || (mapgraphicType == "polygon")) {
		colorLabelString = "Line Color";
		theString += '<tr><td class="toolInfo2" align="right">Line Width</td><td><select name="graphicWidth" onchange="mapgraphicWidth=this.options[this.selectedIndex].value;">';
		for (var i=0;i<mapgraphicWidthList.length;i++) {
			theString += '<option value="' + mapgraphicWidthList[i] + '"';
			if (mapgraphicWidth == mapgraphicWidthList[i]) theString += ' selected';
			theString += '>' + mapgraphicWidthList[i];
		}
		theString += '</select></td></tr>';
	}
	// color
	theString += '<tr><td class="toolInfo2" align="right">' + colorLabelString + '</td><td><select name="graphicColor" onchange="mapgraphicColor=this.options[this.selectedIndex].value;">';
	for (var i=0;i<colorSwatchNames.length;i++) {
		theString += '<option value="' + colorSwatchRGBs[i] + '"';
		if (mapgraphicColor == colorSwatchRGBs[i]) theString += ' selected';
		theString += '>' + colorSwatchNames[i];
	}
	theString += '</select></td></tr>';
	if (mapgraphicType == "polygon") {
		theString += '<tr><td class="toolInfo2" align="right">Fill Color</td><td><select name="graphicFillColor" onchange="mapgraphicFillColor=this.options[this.selectedIndex].value;">';
		for (var i=0;i<colorSwatchNames.length;i++) {
			theString += '<option value="' + colorSwatchRGBs[i] + '"';
			if (mapgraphicFillColor == colorSwatchRGBs[i]) theString += ' selected';
			theString += '>' + colorSwatchNames[i];
		}
		theString += '</select></td></tr>';
		theString += '<tr><td class="toolInfo2" align="right">Fill Density</td><td><select name="graphicFillValue" onchange="mapgraphicFillValue=this.options[this.selectedIndex].value;">';
		for (var i=0;i<mapgraphicFillValueList.length;i++) {
			theString += '<option value="' + mapgraphicFillValueList[i] + '"';
			if (mapgraphicFillValue == mapgraphicFillValueList[i]) theString += ' selected';
			theString += '>' + mapgraphicFillPctList[i];
		}
		theString += '</select></td></tr>';
	}
	// text input
	if (mapgraphicType == "text") {
		theString += '<tr><td class="toolInfo2" align="center" colspan="2">Text: <input type="Text" name="LabelString" size="25" maxlength="25" value=\''+ mapgraphicLabel +'\'></td></tr>';
	}
	// user info string and dialog height
	if (mapgraphicType == "point") {
		document.getElementById('cxSelectIDDialog').style.height = "150px";
		theString += '<tr><td class="toolInfoSmall" align="center" colspan="2">Specify a point shape and color, then click on the map to create it.</td></tr>';	
	} else if (mapgraphicType == "line") {
		document.getElementById('cxSelectIDDialog').style.height = "150px";
		theString += '<tr><td class="toolInfoSmall" align="center" colspan="2">Specify a line width and color, then click on the map to create it.  Double click to finish the line.</td></tr>';	
	} else if (mapgraphicType == "polygon") {
		document.getElementById('cxSelectIDDialog').style.height = "200px";
		theString += '<tr><td class="toolInfoSmall" align="center" colspan="2">Specify a polygon line width, line and fill colors, and fill density, then click on the map to create it.  Double click to finish the polygon.</td></tr>';	
	} else if (mapgraphicType == "text") {
		document.getElementById('cxSelectIDDialog').style.height = "150px";
		theString += '<tr><td class="toolInfoSmall" align="center" colspan="2">Specify a text color and label, then click on the map to create it.</td></tr>';	
	}
	theString += '</table>';
	theString += '</form>';
	updateContent("cxSelectIDDialog",theString);
	return false;
}

// clears out points
function clearMapGraphics() {
	hideAllDropdowns();
	var clearPts = confirm("Delete All Annotation from Map?");
	if (clearPts) {
		mapgraphicXMLs.length = 0;
		mapgraphicNames.length = 0;
		isMapGraphics = false;
		sendMapRequest();
	} else {
		return false;
	}
}

// adds graphic acetate layers to map request
function addGraphicsToMap() {
	var tempString = '';
	for (var i = 0;i<mapgraphicXMLs.length;i++) {
		tempString += mapgraphicXMLs[i];
	}
	return tempString;
}

// get user click and create point or text XML
function getMapGraphicPt(e) {
    document.getElementById("LoadData").style.visibility = "visible";
	getXY(e);
	var tempXYs = getMapXY(mouseX,mouseY);
	var tempGraphicCount = mapgraphicXMLs.length
	var tempName = '';
	var tempString = '';
	tempString += '<LAYER type="acetate" name="MapGraphic' + tempGraphicCount + '">\n';
	tempString += '<OBJECT units="database">\n';
	if (mapgraphicType == "point") {
		tempString += '<POINT coords="' + tempXYs[0] + " " + tempXYs[1] + '">\n';
		tempString += '<SIMPLEMARKERSYMBOL  type="' + mapgraphicShape + '"  color="' + mapgraphicColor + '" outline="0,0,0" width="16" overlap="false" />\n</POINT>\n</OBJECT>\n';
		tempName = mapgraphicColor + " " + mapgraphicShape;
	} else if (mapgraphicType == "text") {
		mapgraphicLabel = document.MapGraphicStuff.LabelString.value;
		tempString += '<TEXT coords="' + tempXYs[0] + " " + tempXYs[1] + '" label="' + mapgraphicLabel + '">\n';
		tempString += '<TEXTMARKERSYMBOL fontcolor="' + mapgraphicColor + '" fontsize="16" fontstyle="bold" outline="255,255,255" glowing="153,153,153" halignment="center" valignment="center" interval="0"/>\n</TEXT>\n</OBJECT>\n';
		tempName = mapgraphicColor + " text: " + mapgraphicLabel;
	}
	tempString += '</LAYER>\n';
	mapgraphicXMLs[tempGraphicCount] = tempString;
	mapgraphicNames[tempGraphicCount] = tempName;
	isMapGraphics = true;
	sendMapRequest();
}

// get user polyline and create XML
function getMapGraphicLine() {
    document.getElementById("LoadData").style.visibility = "visible";
	var tempCoordString = '';
	for (var i=0;i<clickPointX.length;i++) {
		tempCoordString += clickPointX[i] + " " + clickPointY[i];
		if (i < clickPointX.length - 1) tempCoordString += ";";
	}
	var tempGraphicCount = mapgraphicXMLs.length
	var tempName = mapgraphicColor + " " + mapgraphicWidth + "line"; //"polygon - " + mapgraphicColor + " line and " + mapgraphicFillColor + " fill color";
	var tempString = '';
	tempString += '<LAYER type="acetate" name="MapGraphic' + tempGraphicCount + '">\n';
	tempString += '<OBJECT units="database">\n';
	tempString += '<LINE coords="' + tempCoordString + '">\n';
	tempString += '<SIMPLELINESYMBOL  width="' + mapgraphicWidth + '"  color="' + mapgraphicColor + '" overlap="false" />\n';
	tempString += '</LINE>\n</OBJECT>\n</LAYER>\n';
	mapgraphicXMLs[tempGraphicCount] = tempString;
	mapgraphicNames[tempGraphicCount] = tempName;
	isMapGraphics = true;
	resetClick(true);
	sendMapRequest();
}

// get user polygon and create XML
function getMapGraphicPolygon() {
    document.getElementById("LoadData").style.visibility = "visible";
	var tempCoordString = '';
	for (var i=0;i<clickPointX.length;i++) {
		tempCoordString += clickPointX[i] + " " + clickPointY[i];
		if (i < clickPointX.length - 1) tempCoordString += ";";
	}
	var tempGraphicCount = mapgraphicXMLs.length
	var tempName = "polygon - " + mapgraphicColor + " line and " + mapgraphicFillColor + " fill color";
	var tempString = '';
	tempString += '<LAYER type="acetate" name="MapGraphic' + tempGraphicCount + '">\n';
	tempString += '<OBJECT units="database">\n';
	tempString += '<POLYGON coords="' + tempCoordString + '">\n';
	tempString += '<SIMPLEPOLYGONSYMBOL  boundarywidth="' + mapgraphicWidth + '"  boundarycolor="' + mapgraphicColor + '" fillcolor="' + mapgraphicFillColor + '" filltransparency="' + mapgraphicFillValue + '" />\n';
	tempString += '</POLYGON>\n</OBJECT>\n</LAYER>\n';
	mapgraphicXMLs[tempGraphicCount] = tempString;
	mapgraphicNames[tempGraphicCount] = tempName;
	isMapGraphics = true;
	resetClick(true);
	sendMapRequest();
}




// captures user input and saves to session variables
function drawMapGraphic() {
	document.getElementById("LoadMap").style.visibility = "visible";
	mouseAction = "";	

	
	
	if (latlongptType == "degminsec") {
		latlongptY = parseInt(document.LatLongPtStuff.LatDString.value) + (parseInt(document.LatLongPtStuff.LatMString.value)/60) + (parseFloat(document.LatLongPtStuff.LatSString.value)/3600);
		latlongptX = 0 - (parseInt(document.LatLongPtStuff.LongDString.value) + (parseInt(document.LatLongPtStuff.LongMString.value)/60) + (parseFloat(document.LatLongPtStuff.LongSString.value)/3600));
	} else {
		latlongptY = parseFloat(document.LatLongPtStuff.LatString.value);
		latlongptX = parseFloat(document.LatLongPtStuff.LongString.value);
	}
	latlongptLabel = document.LatLongPtStuff.LabelString.value;
	var tempString = '<ARCXML version="1.1">\n<REQUEST>\n<GET_IMAGE>\n<PROPERTIES>\n';
	tempString += '<ENVELOPE minx="' + (latlongptX-0.000000001) + '" miny="' + latlongptY + '" maxx="' + latlongptX + '" maxy="' + latlongptY + '" />\n';
	if (coordSysIDIsNumber) {
		tempString += '<FEATURECOORDSYS id="' + mapserviceCoordSysID + '"/>\n';
	} else {
		tempString += '<FEATURECOORDSYS string="' + mapserviceCoordSysID + '"/>\n';
	}
	tempString += '<FILTERCOORDSYS id="4269"/>\n'; //4326
	tempString += '<IMAGESIZE height="1" width="1" />\n';
	tempString += '</PROPERTIES>\n</GET_IMAGE>\n</REQUEST>\n</ARCXML>';
	sendToServer(imsURL,tempString,43)
}

// add point or text
function doMapGraphicPt() {


}

function saveMapGraphic() {

}

// check that returned coords are on map, and put on map or notify user
function checkLatLongPt1() {
	// calculate point
	var theXYs = getEnvelopeXYs(theReply,0)
	latlongptX = (theXYs[0]+theXYs[2])/2;
	latlongptY = (theXYs[1]+theXYs[3])/2;
	if ((latlongptX < limitRight) && (latlongptX > limitLeft) && (latlongptY > limitBottom) && (latlongptY < limitTop)) {
		// add to array
		var tempPtCnt = latlongptXs.length;
		latlongptXs[tempPtCnt] = latlongptX;
		latlongptYs[tempPtCnt] = latlongptY;
		latlongptTypes[tempPtCnt] = latlongptType;
		latlongptLabels[tempPtCnt] = makeXMLsafe(latlongptLabel);
		latlongptShapes[tempPtCnt] = latlongptShape;
		latlongptColors[tempPtCnt] = latlongptColor;
		// zoom map
		saveLastExtent();
		eLeft = latlongptX - selectPointMargin;
		eRight = latlongptX + selectPointMargin;
		eTop = latlongptY + selectPointMargin;
		eBottom = latlongptY - selectPointMargin;
		isALatLongPt = true;
		sendMapRequest();
	} else {
		alert("That coordinate falls outside the extents\n of this map and cannot be displayed!");
		document.getElementById("LoadMap").style.visibility = "hidden";
		return false;
	}
}