function loadControlPanel(map, container, contextTag, overlayCorner, contextCorner, nav, layers, draw){
		YAHOO.namespace("controlPanel.container");
		// Instantiate a Panel from script
		YAHOO.controlPanel.container.panel = new YAHOO.widget.Panel("controlPanel", { width:"150px", height:"530px",iframe:"true",context:[contextTag, overlayCorner, contextCorner, [contextTag, "windowResize"]],visible:false, draggable:false, close:false, effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
		YAHOO.controlPanel.container.panel.setHeader("Control Panel");
		YAHOO.controlPanel.container.panel.setBody(
			"<br> " +
			"<table style='background-color:#4C4545;border:1px solid black;padding:0;spacing:0;margin:0' width='150px;'> " +
			"	<a href='javascript:toggleTool(\"navMode\",\"navModeImg\")'> " +
			"	<tr> " +
			"		<td width='90%'  style='color:white;text-decoration:none;font-size:8pt;font-weight:bold;' >Navigation Mode</td> " +
			"			<td width='10%'><a href='javascript:toggleTool(\"navMode\",\"navModeImg\")'><img id='navModeImg' src='../images/up_arrow.jpg'  style='width:8,height:8; border:none;'></a> " +
			"		</td> " +
			"	</tr> " +
			"	</a> " +
			"</table> " +
			"<div id='navMode' style='display:\"inline\";'> " +
			"	<table style='background-color:white;border:1px solid black;padding:0;spacing:0;margin:0;' width='150px;'> " +
			"		<tr height='15px'> " +
			"			<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelPan);'> " +
			"				<td id='controlPanelPan' style='font-size:8pt;text-decoration:none;' class='controlPanelSelected'> " +
			"					<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelPan);' style='vertical-align:middle;'><img alt='Pan'  src='../images/pan.bmp'' class='controlPanelNotSelected'></a> " +
			"					&nbsp;&nbsp;&nbsp;<span style='vertical-align:middle;'>Pan</span> " +
			"				</td> " +
			"			</a> " +
			"		</tr> " +
			"		<tr height='15px'> " +
			"			<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelZoomIn);'> " +
			"				<td id='controlPanelZoomIn' style='font-size:8pt;text-decoration:none;'> " +
			"					<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelZoomIn);' style='vertical-align:middle;'><img  alt='Zoom In'  src='../images/zoomIn.bmp'' class='controlPanelNotSelected'></a> " +
			"					&nbsp;&nbsp;&nbsp;<span style='vertical-align:middle;'>Zoom In</span> " +
			"				</td> " +
			"			</a> " +
			"		</tr> " +
			"		<tr height='15px'> " +
			"			<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelZoomOut);'> " +
			"				<td id='controlPanelZoomOut' style='font-size:8pt;text-decoration:none;'> " +
			"					<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelZoomOut);' style='vertical-align:middle;'><img  alt='Zoom In'  src='../images/zoomOut.bmp'' class='controlPanelNotSelected'></a> " +
			"					&nbsp;&nbsp;&nbsp;<span style='vertical-align:middle;'>Zoom Out</span> " +
			"				</td> " +
			"			</a> " +
			"		</tr> " +
			"	</table> " +
			"</div> " +
			"<table style='background-color:#4C4545;border:1px solid black;padding:0;spacing:0;margin:0;color:white' width='150px;'> " +
			"	<a href='javascript:toggleTool(\"navLinks\",\"navLinksImg\")'> " +
			"		<tr> " +
			"			<td width='90%'  style='color:white;text-decoration:none;font-size:8pt;font-weight:bold;' >Navigation Links</td> " +
			"			<td width='10%'> " +
			"				<a href='javascript:toggleTool(\"navLinks\",\"navLinksImg\")'><img id='navLinksImg' src='../images/up_arrow.jpg'  style='width:8,height:8; border:none;'></a> " +
			"			</td> " +
			"		</tr> " +
			"	</a> " +
			"</table> " +
			"<div id='navLinks' style='display:\"inline\";'> " +
			"	<table style='background-color:white;border:1px solid black;padding:0;spacing:0;margin:0;font-size:6pt;' width='150px;'> " +
			"		<tr height='15px' onmouseover='document.getElementById(\"controlPanelFullExtent\").className=\"controlPanelSelected\";' onmouseout='document.getElementById(\"controlPanelFullExtent\").className=\"\";'> " +
			"			<a href='javascript:" + nav + ".zoomToFullExtent();' > " +
			"				<td id='controlPanelFullExtent' style='font-size:8pt;text-decoration:none;'> " +
			"					<a href='javascript:" + nav + ".zoomToFullExtent();' style='vertical-align:middle;'><img  alt='Full Extent'  src='../images/fullExtent.bmp'' class='controlPanelNotSelected'></a> " +
			"					&nbsp;&nbsp;&nbsp;<span style='vertical-align:middle;'>Go to Full Extent</span> " +
			"				</td> " +
			"			</a> " +
			"		</tr> " +
			"		<tr height='15px' onmouseover='document.getElementById(\"controlPanelPrevExtent\").className=\"controlPanelSelected\";' onmouseout='document.getElementById(\"controlPanelPrevExtent\").className=\"\";'> " +
			"			<a href='javascript:" + nav + ".zoomToPrevExtent();' > " +
			"				<td id='controlPanelPrevExtent' style='font-size:8pt;text-decoration:none;'> " +
			"					<a href='javascript:" + nav + ".zoomToPrevExtent();' style='vertical-align:middle;'><img  alt='Previous Extent'  src='../images/prevExtent.bmp'' class='controlPanelNotSelected'></a> " +
			"					&nbsp;&nbsp;&nbsp;<span style='vertical-align:middle;'>Go to Prev Extent</span> " +
			"				</td> " +
			"			</a> " +
			"		</tr> " +
			"		<tr height='15px' onmouseover='document.getElementById(\"controlPanelNextExtent\").className=\"controlPanelSelected\";' onmouseout='document.getElementById(\"controlPanelNextExtent\").className=\"\";'> " +
			"			<a href='javascript:" + nav + ".zoomToNextExtent();' > " +
			"				<td id='controlPanelNextExtent' style='font-size:8pt;text-decoration:none;'> " +
			"					<a href='javascript:" + nav + ".zoomToNextExtent();' style='vertical-align:middle;'><img  alt='Next Extent'  src='../images/nextExtent.bmp'' class='controlPanelNotSelected'></a> " +
			"					&nbsp;&nbsp;&nbsp;<span style='vertical-align:middle;'>Go to Next Extent</span> " +
			"				</td> " +
			"			</a> " +
			"		</tr> " +
			"		<tr height='15px' onmouseover='document.getElementById(\"controlPanelClearGraphics\").className=\"controlPanelSelected\";' onmouseout='document.getElementById(\"controlPanelClearGraphics\").className=\"\";'> " +
			"			<a href='javascript:" + map + ".graphics.clear();' > " +
			"				<td id='controlPanelClearGraphics' style='font-size:8pt;text-decoration:none;'> " +
			"					<a href='javascript:" + map + ".graphics.clear();' style='vertical-align:middle;'><img  alt='Clear Graphics'  src='../images/deactivate.bmp'' class='controlPanelNotSelected'></a> " +
			"					&nbsp;&nbsp;&nbsp;<span style='vertical-align:middle;'>Clear Graphics</span> " +
			"				</td> " +
			"			</a> " +
			"		</tr> " +
			"	</table> " +
			"</div> " +
			"<table style='background-color:#4C4545;border:1px solid black;padding:0;spacing:0;margin:0' width='150px;'> " +
			"	<a href='javascript:toggleTool(\"drawMode\",\"drawModeImg\")'> " +
			"	<tr> " +
			"		<td width='90%'  style='color:white;text-decoration:none;font-size:8pt;font-weight:bold;' >Drawing Tools</td> " +
			"			<td width='10%'><a href='javascript:toggleTool(\"drawMode\",\"drawModeImg\")'><img id='drawModeImg' src='../images/down_arrow.jpg'  style='width:8,height:8; border:none;'></a> " +
			"		</td> " +
			"	</tr> " +
			"	</a> " +
			"</table> " +
			"<div id='drawMode' style='display:\"none\";'> " +
			"	<table style='background-color:white;border:1px solid black;padding:0;spacing:0;margin:0;font-size:6pt;' width='150px;''> " +
			"		<tr height='15px'> " +
			"			<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelPoint);'> " +
			"				<td id='controlPanelPoint' style='font-size:8pt;text-decoration:none;''> " +
			"					<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelPoint);' style='vertical-align:middle;'><img alt='Point'  src='../images/pan.bmp'' class='controlPanelNotSelected'></a> " +
			"					&nbsp;&nbsp;&nbsp;<span style='vertical-align:middle;'>Point</span> " +
			"				</td> " +
			"			</a> " +
			"		</tr> " +
			"		<tr height='15px'> " +
			"			<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelMultiPoint);'> " +
			"				<td id='controlPanelMultiPoint' style='font-size:8pt;text-decoration:none;'> " +
			"					<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelMultiPoint);' style='vertical-align:middle;'><img alt='Multi-Point'  src='../images/pan.bmp'' class='controlPanelNotSelected'></a> " +
			"					&nbsp;&nbsp;&nbsp;<span style='vertical-align:middle;'>Multi-Point</span> " +
			"				</td> " +
			"			</a> " +
			"		</tr> " +
			"		<tr height='15px'> " +
			"			<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelLine);'> " +
			"				<td id='controlPanelLine' style='font-size:8pt;text-decoration:none;'> " +
			"					<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelLine);' style='vertical-align:middle;'><img alt='Line'  src='../images/pan.bmp'' class='controlPanelNotSelected'></a> " +
			"					&nbsp;&nbsp;&nbsp;<span style='vertical-align:middle;'>Line</span> " +
			"				</td> " +
			"			</a> " +
			"		</tr> " +
			"		<tr height='15px'> " +
			"			<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelPolyline);'> " +
			"				<td id='controlPanelPolyline' style='font-size:8pt;text-decoration:none;'> " +
			"					<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelPolyline);' style='vertical-align:middle;'><img alt='Polyline'  src='../images/pan.bmp'' class='controlPanelNotSelected'></a> " +
			"					&nbsp;&nbsp;&nbsp;<span style='vertical-align:middle;'>Polyline</span> " +
			"				</td> " +
			"			</a> " +
			"		</tr> " +
			"		<tr height='15px'> " +
			"			<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelPolygon);'> " +
			"				<td id='controlPanelPolygon' style='font-size:8pt;text-decoration:none;'> " +
			"					<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelPolygon);' style='vertical-align:middle;'><img alt='Polygon'  src='../images/pan.bmp'' class='controlPanelNotSelected'></a> " +
			"					&nbsp;&nbsp;&nbsp;<span style='vertical-align:middle;'>Polygon</span> " +
			"				</td> " +
			"			</a> " +
			"		</tr> " +
			"		<tr height='15px'> " +
			"			<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelFreePolyline);'> " +
			"				<td id='controlPanelFreePolyline' style='font-size:8pt;text-decoration:none;'> " +
			"					<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelFreePolyline);' style='vertical-align:middle;'><img alt='Freehand Polyline'  src='../images/pan.bmp'' class='controlPanelNotSelected'></a> " +
			"					&nbsp;&nbsp;&nbsp;<span style='vertical-align:middle;'>Freehand Polyline</span> " +
			"				</td> " +
			"			</a> " +
			"		</tr> " +
			"		<tr height='15px'> " +
			"			<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelFreePolygon);'> " +
			"				<td id='controlPanelFreePolygon' style='font-size:8pt;text-decoration:none;'> " +
			"					<a href='javascript:toggleMode(" + map + "," + nav + "," + draw + ",controlPanelFreePolygon);' style='vertical-align:middle;'><img alt='Freehand Polygon'  src='../images/pan.bmp'' class='controlPanelNotSelected'></a> " +
			"					&nbsp;&nbsp;&nbsp;<span style='vertical-align:middle;'>Freehand Polygon</span> " +
			"				</td> " +
			"			</a> " +
			"		</tr> " +
			"	</table> " +
			"</div> " +
			"<table style='background-color:#4C4545;border:1px solid black;padding:0;spacing:0;margin:0;color:white' width='150px;'> " +
			"	<a  href='javascript:toggleTool(\"layersList\",\"layersListImg\")'> " +
			"		<tr> " +
			"			<td width='90%'  style='color:white;text-decoration:none;font-size:8pt;font-weight:bold;' >Layer Control </td> " +
			"			<td width='10%'> " +
			"				<a  href='javascript:toggleTool(\"layersList\",\"layersListImg\")'><img id='layersListImg' src='../images/down_arrow.jpg'  style='width:8,height:8; border:none;'></a> " +
			"			</td> " +
			"		</tr> " +
			"	</a> " +
			"</table> " +
			"<div id='layersList' style='display:\"none\";'> " +
			"	<table style='background-color:white;border:1px solid black;padding:0;spacing:0;margin:0' width='150px;'> " +
			"		<tr> " +
			"			<td style='font-size:8pt'>"+ layers +"</td> " +
			"		</tr> " +
			"	</table> " +
			"</div>");
		YAHOO.controlPanel.container.panel.render(container);
 }
 
 function toggleControlPanel(action){
	if (action == "hide"){
		YAHOO.controlPanel.container.panel.hide();
		document.getElementById('controlPanelLink').href = "javascript:toggleControlPanel('show')";
		document.getElementById('controlPanelArrowLink').href = "javascript:toggleControlPanel('show')";
		document.getElementById('controlPanelArrowImg').src = "../images/left_arrow.jpg";
	}
	else{
		YAHOO.controlPanel.container.panel.show();
		document.getElementById('controlPanelLink').href = "javascript:toggleControlPanel('hide')";
		document.getElementById('controlPanelArrowLink').href = "javascript:toggleControlPanel('hide')";
		document.getElementById('controlPanelArrowImg').src = "../images/right_arrow.jpg";
	}
 }

function toggleTool(toolDiv,toolImg){
	if (document.getElementById(toolDiv).style.display == 'inline'){
		 document.getElementById(toolDiv).style.display = 'none' ;
		 document.getElementById(toolImg).src = '../images/down_arrow.jpg'; 
	}
	else {
		document.getElementById(toolDiv).style.display = 'inline' ;
		document.getElementById(toolImg).src = '../images/up_arrow.jpg';
	}
}

function toggleMode(map, nav, draw, mode){
	draw.deactivate(); 
	nav.deactivate();
	switch (mode.id) {
		case "controlPanelPan":
			map.showZoomSlider();
			nav.activate(esri.toolbars.Navigation.PAN);
			 break;
		case "controlPanelZoomIn":
			map.showZoomSlider();
			nav.activate(esri.toolbars.Navigation.ZOOM_IN);
			 break;
		case "controlPanelZoomOut":
			map.showZoomSlider();
			nav.activate(esri.toolbars.Navigation.ZOOM_OUT);
			 break;
		case "controlPanelPoint":
			map.hideZoomSlider();
			draw.activate(esri.toolbars.Draw.POINT);
			 break;
		case "controlPanelMultiPoint":
			map.hideZoomSlider();
			draw.activate(esri.toolbars.Draw.MULTI_POINT);
			break;
		case "controlPanelLine":
			map.hideZoomSlider();
			draw.activate(esri.toolbars.Draw.LINE);
			break;
		case "controlPanelPolyline":
			map.hideZoomSlider();
			draw.activate(esri.toolbars.Draw.POLYLINE);
			break;
		case "controlPanelPolygon":
			map.hideZoomSlider();
			draw.activate(esri.toolbars.Draw.POLYGON);
			break;
		case "controlPanelFreePolyline":
			map.hideZoomSlider();
			draw.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
			break;
		case "controlPanelFreePolygon":
			map.hideZoomSlider();
			draw.activate(esri.toolbars.Draw.FREEHAND_POLYGON);
			break;
	}

	document.getElementById('controlPanelZoomIn').className="";
	document.getElementById('controlPanelZoomOut').className="";
	document.getElementById('controlPanelPan').className="";
	document.getElementById('controlPanelPoint').className="";
	document.getElementById('controlPanelMultiPoint').className="";
	document.getElementById('controlPanelLine').className="";
	document.getElementById('controlPanelPolyline').className="";
	document.getElementById('controlPanelPolygon').className="";
	document.getElementById('controlPanelFreePolyline').className="";
	document.getElementById('controlPanelFreePolygon').className="";
	mode.className="controlPanelSelected";
}