function cacheIcons (layername, clustered) {
	// create a number of icons and cache them to speed up display
	 iconlocation = getIconLocationPreload(layername,clustered);
	 return iconlocation;

}

function getIconLocationPreload(datatype, clustered) {
        var iconlocation = "../images/single.png";
 	if (clustered == true) {
 		iconlocation = "../images/"+datatype;
 		iconlocation = iconlocation + "Cluster.png";
 	}
 	else  {
 		iconlocation = "../images/"+datatype;
 		iconlocation = iconlocation + ".png";
 	}
 	return iconlocation;
}


function resizeDiv() {
	var el = document.getElementById("mapinterface");
	var currWidth = parseInt(getStyle(el,"width"));
	var newWidth = parseInt(document.body.clientWidth) - 300;
	setStyle("mapinterface", "width", newWidth + "px");

}
 
function init() {
 	// called when the map page is loaded.
	waitingHTML = "<div style=\"position: absolute;margin-left:100px;margin-top: 100px;width: auto;height: 19px;padding: 4px 10px 0px 10px;"
	waitingHTML += "color: #CC0000;background-color: rgb(221, 221, 238);border: 1px solid #979797;font-size: 14px;font-weight: 800;\">Loading map, please wait . . . this may take some time</div>";       

	document.getElementById('mapinterface').innerHTML = waitingHTML;
	getMapScripts();
} 
function changeLayerTree(layername) {
	// used when there are sub-themes available in the data
	var layerdiv = document.getElementById(layername+"HTML");
	var d = layerdiv.getElementsByTagName('div');
	
	// find out whether the sub layers are visible or not at the minute ...
	// and change their visibility
	for (i=0;i< d.length; i++) {
		el = d[i];
		//alert(el.id);
		if (el.style.display == "" || el.style.display == "block") {
			el.style.display = "none";
		}
		else  {
			el.style.display = "block";
		}
		
	}


}
function getInfoCloseButton() {
	  html = "";
	  if (navigator.appName.indexOf('Microsoft') != -1) {
	         html += "<div style=\"height:8px;width:100%;\"></div>";  // a gap before the close button
	         html += "<button style=\"margin-bottom:0px;margin-right:5px;float:right;\" id=\"closeinfowindow\" type=\"button\" name=\"closeinfowindow\" ";
	  	 html += " onclick=\"doCloseInfoWindow()\">Close</button>";
	  }
	  else {
	        html += "<button style=\"margin-bottom:20px;margin-right:5px;float:right;\" id=\"closeinfowindow\" type=\"button\" name=\"closeinfowindow\" ";
	  	html += " onclick=\"doCloseInfoWindow()\">Close</button>";
	        html += "<div style=\"height:5px;width:100%;\"></div>";  // a gap after the close button
	  }
	return html;
}
function showInfo(infoHTML,headerHTML, footerHTML,lat,lng,html4) {
	doCloseInfoWindow();
	infodisplayed = true;
	var html = "";	
	  html += "<div style=\"overflow-y:auto;overflow-x:auto;margin-left:3px;height:380px;width:97%;\">";
	  html += "<div style=\"margin-top:5px;border:2px solid green;border-style: double;\">";
	  html +=  infoHTML;
	  html += "</div>"; // the actual data
	  html += "</div>"; // overflow div around the data
	
	  var ni = document.getElementById('mapwrapper');
	  var newdiv = document.createElement('div');
	  var divIdName = 'infowindow';
	  newdiv.setAttribute('id',divIdName);
	  newdiv.setAttribute('class','png');
	  newdiv.setAttribute('style', 'visibility: visible');
	 
	 
	  var infoHeader = "<h2 class=\"maphidden\">Info Window</h2>";
	  infoHeader = infoHeader + html4;
	  if (isGoogleMap) {
	  	xPix = getXPixGM(lat,lng);
	  	yPix = getYPixGM(lat,lng);
	  }
	  else {
	  	xPix = getXPixOL(lat,lng);
	  	yPix = getYPixOL(lat,lng);
	  }
	  
	  var infoHeight = 300;
	  if (xPix > 350) {
	  	  var infoArrow = "<div id=\"infopointerright\" class=\"png\"></div>";
	  }
	  else {
		  var infoArrow = "<div id=\"infopointerleft\" class=\"png\"></div>";
	  }
	  
	  var infoWrapper = "<div id=\"infocontent\" class=\"png\">";
	  infoWrapper = infoWrapper + "<img onclick=\"doCloseInfoWindow()\" src=\"../images/butt_close_off.gif\" alt=\"Close\" width=\"16\" height=\"16\"";
	  infoWrapper = infoWrapper + "class=\"closebutton\" />";
	  newdiv.innerHTML = infoHeader + infoWrapper + headerHTML+"<div id=\"infodescription\">"+infoHTML + "</div></div>" + infoArrow;
	  ni.appendChild(newdiv);
	  
	  document.getElementById('infowindow').style.top = (yPix - infoHeight/2)+ "px";
	  if (xPix > 350) {
	 	 document.getElementById('infowindow').style.left = (xPix -315) + "px";
	  	document.getElementById('infopointerright').style.top = 125+ "px";
	  	document.getElementById('infopointerright').style.left = 290 + "px";
	  
	  }
	  else {
	 	 document.getElementById('infowindow').style.left = 15+xPix+ "px";
	  	document.getElementById('infopointerleft').style.top = 125+ "px";
	  	document.getElementById('infopointerleft').style.left = -18 + "px";
	  }
	
	// make the info box visible
	document.getElementById('infowindow').style.visibility = "visible";
	isSearchMove = false;
}
function doCloseInfoWindow() {
	infodisplayed = false;
	  var ni = document.getElementById('mapwrapper');
	  
	  // try this - is the window already visible?
	  try {
		  var infodiv = document.getElementById('infowindow');
		  ni.removeChild(infodiv);
	  }
	  catch (e) {
	  }

	if (isGoogleMap) {
		removeAdminOverlaysGM();
	}
	else {
		removeAdminOverlaysOL();
	}
}






var mainInfoDivText = "";
var photoInfoDivText = "";
var noiseInfoDivText = "";
var currentInfoTab = "main";

function processReadOnlyChild(response) {
	   var htmlscript = response.split("|XX|");
	   
	var headID = document.getElementsByTagName("head")[0];
	var newScript = document.createElement('script');
	newScript.type = 'text/javascript';

	newScript.text = htmlscript[1];
	headID.appendChild(newScript);

	  html = "";
	  //html += "<div style=\"position:relative;overflow-y:auto;overflow-x:auto;overflow: auto;margin-left:3px;height:400px;width:97%;\">";
	  //html += "<div style=\"position:relative;overflow-y:auto;overflow-x:auto;overflow: auto;margin-left:3px;height:100%;width:97%;\">";
	  
	  html += "<div style=\"position:relative;overflow-y:auto;overflow-x:auto;overflow: auto;margin-left:3px;height:80%;width:97%;\">";
	  //html += "<div style=\"margin-top:5px;border:2px solid green;border-style: double;\">";
	  html +=  htmlscript[0];
	  //alert(htmlscript[0]);
	  //html += "</div>"; // the actual data
	  html += "</div>"; // overflow div around the data

	document.getElementById('infodescription').innerHTML = html + generatePrevNextButtons();
	
}
function doCloseChildInfoWindow() {
	//document.getElementById('subTables').style.display = "none";
	
	// make sure the checkbox is also off
	document.getElementById('showChildren').checked = false;
}



function showMainInfo() {
	if (currentInfoTab == "main") {
		mainInfoDivText = document.getElementById("infodescription").innerHTML;
	}
	if (currentInfoTab == "noisereadings") {
		noiseInfoDivText = document.getElementById('infodescription').innerHTML;
	}
	if (currentInfoTab == "photos") {
		photoInfoDivText = document.getElementById('infodescription').innerHTML;
	}
	currentInfoTab = "main";
	document.getElementById('infodescription').innerHTML = mainInfoDivText;

}



function storeCurrentDIVText() {
	var controlText = document.getElementById('controlcontent').innerHTML;
	//alert(currentTab);
	if (currentTab == "legend")  {
		//alert("legend is teh current tab");
		legendText = controlText;
		//alert(legendText);
	}
	if (currentTab == "search")  {
		searchText = controlText;
	}
	if (currentTab == "edit")  {
		editText = controlText;
	}
	if (currentTab == "addContent")  {
		addContentText1 = controlText;
	}
}

function showSearch() {
	if ((!searchText) || (searchText.length == 0)) { 
		// this happesn when the map has not yet finished loading and you click on the search tab
		// do nothing 
		alert ("Please wait for the map to load");
		return;		
	}
	if (currentTab == "legend") {
		trackLayerStatus();
	}

	
	if (currentTab  == "edit") {
		switchAllLayersOn();
	}
 //Clear Unapproved Edit Point - Added by KC
      map.clearMarkers();
      updateMap(true);
      //Clear Unapproved Edit Point - END	
//Clear point - Added by KC
       clearCaptureOverlays();
       // Clear Point -END	
// load the search tab as current
	loadHTMLIntoDIV('../html/searchTab.html','maptabs');
	
	storeCurrentDIVText();
	currentTab = "search";
	document.getElementById('controlcontent').innerHTML = searchText;
	doCloseInfoWindow();	
	return false;
}


function showLegend() {
	//alert("show legend");
	if (currentTab  == "edit") {
		// will need to switch the layers back on as have changed tab
		var layersOn = true;
	}
 //Clear Unapproved Edit Point - Added by KC
      map.clearMarkers();
      updateMap(true);
      //Clear Unapproved Edit Point - END
//Clear point - Added by KC
       clearCaptureOverlays();
       // Clear Point -END	
loadHTMLIntoDIV('../html/legendTab.html','maptabs');
	storeCurrentDIVText();
	currentTab = "legend";
	//alert(legendText);
	document.getElementById('controlcontent').innerHTML = legendText;
	// the innerHTML of a DIV does not change if you unclick a checkbox ..so need to update these separately
	updateCheckboxes();
	if (layersOn == true ) {
		switchAllLayersOn();
	}
	doCloseInfoWindow();	
	return false;
}


function resizeMapDiv() {

	if (isGoogleMap) {
		resizeMapDivGM();
	}
	else {
		resizeMapDivOL();
	}
	
}


window.onresize= changeView;
var currheight = document.documentElement.clientHeight;
function changeView() {
	if(currheight != document.documentElement.clientHeight)
	{
		resizeMapDiv();
    }
	currheight = document.documentElement.clientHeight;
}

function getStyle(el, style) {
   if(!document.getElementById) return;
   if(!el) return;	
     var value = el.style[toCamelCase(style)];

    if(!value)
        if(document.defaultView)
            value = document.defaultView.
                 getComputedStyle(el, "").getPropertyValue(style);

        else if(el.currentStyle)
            value = el.currentStyle[toCamelCase(style)];

     return value;
}

function setStyle(objId, style, value) {
    document.getElementById(objId).style[style] = value;
}

function toCamelCase( sInput ) {
    var oStringList = sInput.split('-');
    if(oStringList.length == 1)
        return oStringList[0];
    var ret = sInput.indexOf("-") == 0 ?
       oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1) : oStringList[0];
    for(var i = 1, len = oStringList.length; i < len; i++){
        var s = oStringList[i];
        ret += s.charAt(0).toUpperCase() + s.substring(1)
    }
    return ret;
}

function increaseWidth(addToWidth, whichDiv){
    var theDiv = document.getElementById(whichDiv);
    var currWidth = parseInt(getStyle(theDiv, "width"));
    var newWidth = currWidth + parseInt(addToWidth);
    setStyle(whichDiv, "width", newWidth + "px");
}


function toggleAllLayers() {
	// switch all layers on or off
	if (document.getElementById('allLayersOn').checked == true)  {
		switchAllLayersOn();
	}
	else {
		trackLayerStatus();
		switchAllLayersOff();
	}
}