<!--- EDITING THIS FILE CAN BREAK YOUR MAP! --->

<!--- Import the other required files --->
document.write('<link   rel="stylesheet"      type="text/css"       href="mapfiles/scripts/map.css">');
document.write('<script language="javascript" type="text/javascript" src="mapfiles/scripts/lspowerprojects.js"> </script>');
document.write('<script language="javascript" type="text/javascript" src="mapfiles/scripts/lspowerimagemap.js"> </script>');

function drawMap() {
	<!--- IMAGE MAP HOT SPOTS FOR EACH PROJECT --->
	document.write('<map name="ImageMap" id="ImageMap">');
		drawImageMap();
	document.write('</map>');
	
	// Draw the Map Image
	document.write('<div id="theMap" style="visibility:visible;position:relative;left:10px;top:10px;">');
		document.write('<img src="mapFiles/images/US_MapInteractive_010909.png" width="754" height="447" border="0" usemap="#ImageMap">');
	document.write('</div>');
	
	// Draw the Project Details Panel DIVs
	document.write('<div id="projectpanel" class="panel">');
		document.write('<table width="380"height="360" cellspacing="0" cellpadding="8" border="0">');
			document.write('<tr>');
				document.write('<td id="projectname" width="330" height="30" align="left" valign="top"></td>');
				document.write('<td id="closebutton" class="closebutton" width="50" height="30" align="right" valign="top"></td>');
			document.write('</tr>');
			
			document.write('<tr>');
				document.write('<td id="projectimage" colspan="2" height="240" align="center"></td>');
			document.write('</tr>');
			
			document.write('<tr>');
				document.write('<td id="projectdescription" width="330" height="50" align="left" valign="top"></td>');
				document.write('<td id="websitebutton" width="50" height="50" align="right" valign="top"></td>');
			document.write('</tr>');
		document.write('</table>');
	document.write('</div>');
}

function showProject(whichProjectObject) {
	var panelDiv = document.getElementById("projectpanel");
	var project  = eval(whichProjectObject);
	var name     = document.getElementById("projectname");
	var close    = document.getElementById("closebutton");
	var image    = document.getElementById("projectimage");
	var desc     = document.getElementById("projectdescription");
	var site     = document.getElementById("websitebutton");
	
	// Figure Out Where on the Page the Map Is --->
	var mapLoc     = getMapLoc();
	mapLoc         = mapLoc.split(',');
	var mapY       = mapLoc[1]-8;
	var mapX       = mapLoc[0]-8;
	
	// Load the Panel
	name.innerHTML  = "<font class='mapbold'>" + project.Name + "</font><br><font class='mapplain'><b>Status: </b>" + project.Status + "</font>";
	close.innerHTML = "<a class='mapbutton' href='javascript:hideProject();'>Close</a>";
	desc.innerHTML  = "<font class='mapplain'><b>" + project.Description + "</b></font><br><font class='mapplain'>" + project.Location + "</font>";
	
	if (project.Image == "N/A" || project.Image == "" || project.Image == " ") {
		image.innerHTML = "<img src='mapfiles/images/ProjectImages/Default.jpg' width='335' height='230' border='0'>";
	} else {
		image.innerHTML = "<img src='mapfiles/images/ProjectImages/" + project.Image + "' width='335' height='230' border='0'>";
	}
	
	if (project.Website != "N/A" && project.Website != "" && project.Website != " " ) {
		site.innerHTML  = "<a class='mapbutton' href='http://" + project.Website + "' target='_blank'>Website</a>";
	} else {
		site.innerHTML  = "";
	}
	
	// Display the Panel
	panelDiv.style.top        = (mapY + 25);
	panelDiv.style.left       = (mapX + 200);
	panelDiv.style.visibility = 'visible';
	
}

function hideProject() {
	var panelDiv = document.getElementById("projectpanel");
	panelDiv.style.visibility = 'hidden';
}

function getMapLoc() {
	var mapL = 0;
	var mapT = 0;
	
	mapL = document.getElementById("theMap").offsetLeft;
	mapT = document.getElementById("theMap").offsetTop;
	
	return mapL + "," + mapT;
}

