var currentCMSMessageShowing = 1;
	var numberCMSMessages = 1;

	var intervalId;
	intervalId = setInterval("changeCMS()", 5000);  // 10 minutes


var current_camera_id = 0;
function refreshCameraStill(cameraID,urlCamera) {
	//alert(cameraID+":"+urlCamera);
	var randomNum = Math.floor(Math.random()*10000000);
	var targetCamera = document.getElementById(cameraID);
	targetCamera.setAttribute("src", urlCamera + "?"+ randomNum.toString());
	}


function removeIncidents()
{
	for (var i = 0; i < markerGroups["incidents"].length; i++) {
       		


       		var marker = markerGroups["incidents"][i];
        	if (marker.isHidden()) 
        	{
          		//polyline.show();
        	} 
        	else 
        	{
          		marker.hide();
          		//polyline.remove();
        	}
        }

}

function refreshIncidents()
{
	var bounds1 = new GLatLngBounds();
	var bounds2 = new GLatLngBounds();
	
	

	for (var i = 0; i < markerGroups["incidents"].length; i++) {
       		
       		var marker = markerGroups["incidents"][i];

		bounds1 = map.getBounds();

		
          	if(bounds1.contains(marker.getPoint())) 
          	{
          		marker.show();

          	}
          	else
          	{
          		marker.hide();
		}
        }

}


function drawIncidents()
{



//draw incidents
	//this creates the point icon
		var baseIcon = new GIcon();
        baseIcon.shadow = "/iteris/images/incidentshadow.png";
        baseIcon.iconSize = new GSize(18, 20);
        baseIcon.shadowSize = new GSize(38, 30);
        baseIcon.iconAnchor = new GPoint(9, 20);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        baseIcon.infoShadowAnchor = new GPoint(0, 0);

		function createMarker(point,type,html,intId) {
			//this controls the image that is used for a point
			var icon = new GIcon(baseIcon);
	if(type == "3")
            	icon.image = "/iteris/images/incident3.gif";
	else if(type == "7")
            	icon.image = "/iteris/images/incident7.gif";
	else if(type == "8")
            	icon.image = "/iteris/images/incident8.gif";
	else if(type == "11")
            	icon.image = "/iteris/images/incident.gif";
        else
            	icon.image = "/iteris/images/incident.gif";
            	
            	
			var marker = new GMarker(point,icon);
			//var marker = new GMarker(point);
			GEvent.addListener(marker, "click", function() {
			//this is what is displayed in the callout box after a point is clicked on
			marker.openInfoWindowHtml(html);
						moveWanted = 0;
						WaitandTurnOffMoveWanted();
			});
			//gmarkers[i] = marker;
			//htmls[i] = html ;
			//i++;
			return marker;
		}


		// This function picks up the click and opens the corresponding info window
		function myclick(i) {
			gmarkers[i].openInfoWindowHtml(htmls[i]);
		}


	randomNum = Math.floor(Math.random()*10000000);

	if(testEnvironment == 1)
		var IncdientsUrl = "./iteris/data/Incidents.xml?" + randomNum.toString();
	else
		var IncdientsUrl = "/iteris/data/Incidents.xml?" + randomNum.toString();

		//This gets the request from
		var request = GXmlHttp.create();
		//request.open("GET", "/iteris/data/Incidents.xml", true);
		request.open("GET", IncdientsUrl, true);


	      request.onreadystatechange = function() {


				if (request.readyState == 4) {
					var xmlDoc = request.responseXML;

					// obtain the array of markers and loop through it
					var markers = xmlDoc.documentElement.getElementsByTagName("Points");

					var bounds3 = new GLatLngBounds();
					bounds3 = map.getBounds();



					for (var i = 0; i < markers.length; i++) {

					var lat = parseFloat(markers[i].getElementsByTagName("LAT")[0].childNodes[0].nodeValue);
					var lng = parseFloat(markers[i].getElementsByTagName("LON")[0].childNodes[0].nodeValue);

					var point = new GLatLng(lat,lng);

						if((bounds3.containsLatLng(point) && filterMarkers == 1) ||  filterMarkers == 0)
						{

								var title = markers[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
								var location = markers[i].getElementsByTagName("LOCATION")[0].childNodes[0].nodeValue;
								var startTime = markers[i].getElementsByTagName("START")[0].childNodes[0].nodeValue;
								var endTime = markers[i].getElementsByTagName("END")[0].childNodes[0].nodeValue;
								var IncType = markers[i].getElementsByTagName("TYPE")[0].childNodes[0].nodeValue;


								var html = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"225\"><tr><td><div width=\"150\" align=\"left\"><font face=\"'Trebuchet MS', Arial Narrow, tahoma\" size=\"1\" color=\"#2c2c2c\"><STRONG>" + title + "</STRONG><BR>" + location + "<BR>Start Time: " + startTime + "<BR>Last Updated: " + endTime +"</font></div></td></tr></table>";

								// create the marker

								var marker = createMarker(point,IncType,html,title);


								//GEvent.addListener(marker, "click",
								//			function() {
								//				this.openInfoWindowHtml(title);
								//	});

								markerGroups["incidents"].push(marker);

								map.addOverlay(marker);
						}


					}

					marker = null;
				}
	      }



      request.send(null);

}






function removeCMS()
{
	for (var i = 0; i < markerGroups["cms"].length; i++) {
       		


       		var marker = markerGroups["cms"][i];
        	if (marker.isHidden()) 
        	{
          		//polyline.show();
        	} 
        	else 
        	{
          		marker.hide();
          		//polyline.remove();
        	}
        }

}

function refreshCMS()
{
	var bounds1 = new GLatLngBounds();
	var bounds2 = new GLatLngBounds();
	
	

	for (var i = 0; i < markerGroups["cms"].length; i++) {
       		
       		var marker = markerGroups["cms"][i];

		bounds1 = map.getBounds();

		
          	if(bounds1.contains(marker.getPoint())) 
          	{
          		marker.show();

          	}
          	else
          	{
          		marker.hide();
		}
        }


document.getElementById("loading").style.display  = "none";
}


function drawCMS()
{



//draw incidents
	//this creates the point icon
		var baseIcon = new GIcon();
        baseIcon.shadow = "/iteris/images/cmsshadow.png";
        baseIcon.iconSize = new GSize(18, 20);
        baseIcon.shadowSize = new GSize(38, 30);
        baseIcon.iconAnchor = new GPoint(9, 10);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        baseIcon.infoShadowAnchor = new GPoint(0, 0);

		function createMarker(point,html,intId) {
			//this controls the image that is used for a point
			var icon = new GIcon(baseIcon);
            icon.image = "/iteris/images/cms.gif";

			var marker = new GMarker(point,icon);
			//var marker = new GMarker(point);
			GEvent.addListener(marker, "click", function() {
			//this is what is displayed in the callout box after a point is clicked on
			//marker.openInfoWindowHtml("<table bgcolor='#1a1a1a' cellpadding='5' cellspacing='5'><tr><td><font face='tahoma' size='1' color='#f2e406'>" + html + "</td></tr></table>");
			marker.openInfoWindowHtml(html);

						moveWanted = 0;
						WaitandTurnOffMoveWanted();


			});



			return marker;
		}


		// This function picks up the click and opens the corresponding info window
		function myclick(i) {
			gmarkers[i].openInfoWindowHtml(htmls[i]);
		}


	randomNum = Math.floor(Math.random()*10000000);

	if(testEnvironment == 1)
		var IncdientsUrl = "./iteris/data/Cms.xml?" + randomNum.toString();
	else
		var IncdientsUrl = "/iteris/data/Cms.xml?" + randomNum.toString();

		//This gets the request from
		var request = GXmlHttp.create();
		//request.open("GET", "/iteris/data/Cms.xml", true);
		request.open("GET", IncdientsUrl, true);


	      request.onreadystatechange = function() {


				if (request.readyState == 4) {
					var xmlDoc = request.responseXML;

					// obtain the array of markers and loop through it
					var markers = xmlDoc.documentElement.getElementsByTagName("Points");

					var bounds3 = new GLatLngBounds();
					bounds3 = map.getBounds();



					for (var i = 0; i < markers.length; i++) {

					var lat = parseFloat(markers[i].getElementsByTagName("LAT")[0].childNodes[0].nodeValue);
					var lng = parseFloat(markers[i].getElementsByTagName("LON")[0].childNodes[0].nodeValue);

					var point = new GLatLng(lat,lng);

								if((bounds3.containsLatLng(point) && filterMarkers == 1) ||  filterMarkers == 0)
								{




										var message = markers[i].getElementsByTagName("MESSAGE")[0].childNodes[0].nodeValue;
										var message2 = markers[i].getElementsByTagName("MESSAGE2")[0].childNodes[0].nodeValue;
										var message3 = markers[i].getElementsByTagName("MESSAGE3")[0].childNodes[0].nodeValue;

										if(message == "none") 	message = "";
										if(message2 == "none") 	message2 = "";
										if(message3 == "none") 	message3 = "";

										var location = markers[i].getElementsByTagName("LOCATION")[0].childNodes[0].nodeValue;




										message = trim(message);

										var intIndexOfMatch = message.indexOf( " " );

										while (intIndexOfMatch != -1){

											message = message.replace( " ", "&nbsp;" )
											intIndexOfMatch = message.indexOf( " " );
										}

										var intIndexOfMatch = message.indexOf( "newline" );

										while (intIndexOfMatch != -1){

											message = message.replace( "newline", "<br />" )
											intIndexOfMatch = message.indexOf( "newline" );
										}








										message2 = trim(message2);

										var intIndexOfMatch = message2.indexOf( " " );

										while (intIndexOfMatch != -1){

											message2 = message2.replace( " ", "&nbsp;" )
											intIndexOfMatch = message2.indexOf( " " );
										}

										var intIndexOfMatch = message2.indexOf( "newline" );

										while (intIndexOfMatch != -1){

											message2 = message2.replace( "newline", "<br />" )
											intIndexOfMatch = message2.indexOf( "newline" );
										}







										message3 = trim(message3);

										var intIndexOfMatch = message3.indexOf( " " );

										while (intIndexOfMatch != -1){

											message3 = message3.replace( " ", "&nbsp;" )
											intIndexOfMatch = message3.indexOf( " " );
										}

										var intIndexOfMatch = message3.indexOf( "newline" );

										while (intIndexOfMatch != -1){

											message3 = message3.replace( "newline", "<br />" )
											intIndexOfMatch = message3.indexOf( "newline" );
										}








										if(message != "" && message2 != ""  && message3 != "")
											var html = "<table width=\"200\" bgcolor=\"#1a1a1a\"  height=\"73\" cellpadding=\"12px\" border=\"0\" class=\"cms\"><tr><td class=\"cms-text\" valign=\"top\"><div id=\"message1\"><font face='tahoma' size='1' color='#f2e406'><STRONG>" + message + "</STRONG></font></div><div id=\"message2\" style=\"display:none;\"><font face='tahoma' size='1' color='#f2e406'><STRONG>" + message2 + "</STRONG></font></div><div id=\"message3\"  style=\"display:none;\"><font face='tahoma' size='1' color='#f2e406'><STRONG>" + message3 + "</STRONG></font></div></td></tr></table><p class=\"timestamp\"><font face='tahoma' size='1' color='#909090'>CMS located " + location + "</p>";

										else if(message != "" && message2 != "")
											var html = "<table width=\"200\" bgcolor=\"#1a1a1a\"  height=\"73\" cellpadding=\"12px\" border=\"0\" class=\"cms\"><tr><td class=\"cms-text\" valign=\"top\"><div id=\"message1\"><font face='tahoma' size='1' color='#f2e406'><STRONG>" + message + "</STRONG></font></div><div id=\"message2\" style=\"display:none;\"><font face='tahoma' size='1' color='#f2e406'><STRONG>" + message2 + "</STRONG></font></div></td></tr></table><p class=\"timestamp\"><font face='tahoma' size='1' color='#909090'>CMS located " + location  + "</p>";

										else if(message != "")
											var html = "<table width=\"200\" bgcolor=\"#1a1a1a\"  height=\"73\" cellpadding=\"12px\" border=\"0\" class=\"cms\"><tr><td class=\"cms-text\" valign=\"top\"><div id=\"message1\"><font face='tahoma' size='1' color='#f2e406'><STRONG>" + message + "</STRONG></font></div></td></tr></table><p class=\"timestamp\"><font face='tahoma' size='1' color='#909090'>CMS located " + location  + "</p>";






										var marker = createMarker(point,html,message);

										markerGroups["cms"].push(marker);

										map.addOverlay(marker);

								}

					}

					marker = null;

				}
	      }



      request.send(null);

}




function removeCameras()
{
	for (var i = 0; i < markerGroups["cameras"].length; i++) {
       		


       		var marker = markerGroups["cameras"][i];
        	if (marker.isHidden()) 
        	{
          		//polyline.show();
        	} 
        	else 
        	{
          		marker.hide();
          		//polyline.remove();
        	}
        }

}

function refreshCameras()
{
	var bounds1 = new GLatLngBounds();
	var bounds2 = new GLatLngBounds();
	
	

	for (var i = 0; i < markerGroups["cameras"].length; i++) {
       		
       		var marker = markerGroups["cameras"][i];

		bounds1 = map.getBounds();

		
          	if(bounds1.contains(marker.getPoint())) 
          	{
          		marker.show();

          	}
          	else
          	{
          		marker.hide();
		}
        }

}


function drawCameras()
{



	var baseIcon = new GIcon();
        baseIcon.shadow = "/iteris/images/incidentshadow.png";
        baseIcon.iconSize = new GSize(18, 20);
        baseIcon.shadowSize = new GSize(38, 30);
        baseIcon.iconAnchor = new GPoint(9, 20);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        baseIcon.infoShadowAnchor = new GPoint(0, 0);







	function createMarker(point,type,html,intId, location) {
	//this controls the image that is used for a point
		var icon = new GIcon(baseIcon);
        icon.image = "/iteris/images/cameras.gif";
			var marker = new GMarker(point,icon);
			//var marker = new GMarker(point);
			marker.tooltip = '<div class="tooltip">'+location+'<\/div>';
			GEvent.addListener(marker, "click", function() {
			//this is what is displayed in the callout box after a point is clicked on
			marker.openInfoWindowHtml("<font face='tahoma' size='1' color='#666666'>" + html);
						moveWanted = 0;
						WaitandTurnOffMoveWanted();
			});
				//***********Tooltip
			 	GEvent.addListener(marker,"mouseover", function() {
				  showTooltip(marker);
				});
				GEvent.addListener(marker,"mouseout", function() {
				tooltip.style.visibility="hidden"
				});
			return marker;
		}


	function createMarker_mkwan(point,type,html,intId, location, cameraID, urlCamera) {
	//this controls the image that is used for a point
		var icon = new GIcon(baseIcon);
        icon.image = "/iteris/images/cameras.gif";
			var marker = new GMarker(point,icon);
			//var marker = new GMarker(point);
			marker.tooltip = '<div class="tooltip">'+location+'<\/div>';
			GEvent.addListener(marker, "click", function() {
			//this is what is displayed in the callout box after a point is clicked on
			current_camera_id=window.setInterval('refreshCameraStill("'+cameraID+'","'+urlCamera+'")',5000);
			marker.openInfoWindowHtml("<font face='tahoma' size='1' color='#666666'>" + html);
						moveWanted = 0;
						WaitandTurnOffMoveWanted();
			});
				//***********Tooltip
			 	GEvent.addListener(marker,"mouseover", function() {
				  showTooltip(marker);
				});
				GEvent.addListener(marker,"mouseout", function() {
				tooltip.style.visibility="hidden"
				});
			return marker;
		}


		// This function picks up the click and opens the corresponding info window
		function myclick(i) {
			gmarkers[i].openInfoWindowHtml(htmls[i]);
		}


	randomNum = Math.floor(Math.random()*10000000);

	//var IncdientsUrl = "/iteris/data/Cameras.xml?" + randomNum.toString();
	if(testEnvironment == 1)
		var IncdientsUrl = "./iteris/data/Cameras.xml?" + randomNum.toString();
	else
		var IncdientsUrl = "/iteris/data/Cameras.xml?" + randomNum.toString();


		//This gets the request from
		var request = GXmlHttp.create();
		//request.open("GET", "/iteris/data/Incidents.xml", true);
		request.open("GET", IncdientsUrl, true);


	      request.onreadystatechange = function() {


				if (request.readyState == 4) {
					var xmlDoc = request.responseXML;

					// obtain the array of markers and loop through it
					var markers = xmlDoc.documentElement.getElementsByTagName("Points");

					var bounds3 = new GLatLngBounds();
					bounds3 = map.getBounds();



					for (var i = 0; i < markers.length; i++) {

					var lat = parseFloat(markers[i].getElementsByTagName("LAT")[0].childNodes[0].nodeValue);
					var lng = parseFloat(markers[i].getElementsByTagName("LON")[0].childNodes[0].nodeValue);

					var point = new GLatLng(lat,lng);

						if((bounds3.containsLatLng(point) && filterMarkers == 1) ||  filterMarkers == 0)
						{



								var title = markers[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
								var location = markers[i].getElementsByTagName("LOCATION")[0].childNodes[0].nodeValue;
								var urlCamera = markers[i].getElementsByTagName("URL")[0].childNodes[0].nodeValue;
								var isStatic = markers[i].getElementsByTagName("STATIC")[0].childNodes[0].nodeValue;
								var url = "";
								//mkwan: change camera display code





if(isStatic==1) {
							randomNum = Math.floor(Math.random()*10000000);
							url = url + "<CENTER>";
							url = url + location;
							url = url + "<TABLE width=\"352\" height=\"288\" style='width:352px; height:288px;' cellpadding='0' cellspacing='0' border='0'>";
							url = url + "<TR>";
							url = url + "<TD valign=\"middle\" style='width:352px; height:288px;'>";
							url = url + "<img id='camera"+randomNum.toString()+"' src='"+urlCamera+"?"+ randomNum.toString()+"' alt='' border='0' width='320' />";
							url = url + "</TD>";
							url = url + "</TR>";
							url = url + "</TABLE>";
							url = url + "</CENTER>";
} else {
							url = url + "<CENTER>";
							url = url + location;
							url = url + "<TABLE width=\"100\" height=\"100%\">";
							url = url + "<TR>";
							url = url + "<TD valign=\"middle\">";
							url = url + "<object id=\"MediaPlayer1\" width=\"280\" height=\"200\" classid=\"CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95\" codebase=\"http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701\"  standby=\"Loading Microsoft® Windows® Media Player components...\" type=\"application/x-oleobject\" align=\"middle\">";
							url = url + "<param name=\"FileName\" value=\"" + urlCamera + "\">";
							url = url + "<param name=\"ShowStatusBar\" value=\"true\">";
							url = url + "<param name=\"showControls\" value=\"false\">";
							url = url + "<param name=\"AutoStart\" value=\"true\">";
							url = url + "<param name=\"DefaultFrame\" value=\"mainFrame\">";
							url = url + "<embed type=\"application/x-mplayer2\" pluginspage = \"http://www.microsoft.com/Windows/MediaPlayer/\" src=\"" + urlCamera + "\" align=\"middle\" width=\"280\" height=\"200\" defaultframe=\"rightFrame\" showStatusbar=\"true\" showControls=\"false\"></embed>";
							url = url + "</object>";
							url = url + "</TD>";
							url = url + "</TR>";
							url = url + "</TABLE>";
							url = url + "</CENTER>";
	
}
								var html = "<div align=\"left\" class=\"bodytext\">" + url + "</div>";
								var marker = createMarker_mkwan(point,title,html,title,location,"camera"+randomNum.toString(),urlCamera);
								markerGroups["cameras"].push(marker);
								map.addOverlay(marker);
						}


					}
					marker = null;


				}
	      }



      request.send(null);

}












function changeCMS() {


	if(document.getElementById("message2") == null && document.getElementById("message3") == null)
	{
		numberCMSMessages = 1;
	}

	else if(document.getElementById("message3") == null)
	{
		numberCMSMessages = 2;
		changeCMSwith2();
	}
	else
	{
		numberCMSMessages = 3;
		changeCMSwith3();
	}

}



function changeCMSwith3() {
	if(currentCMSMessageShowing == 1)
	{
		hidediv("message1");
		showdiv("message2");
		hidediv("message3");
		currentCMSMessageShowing = 2;
	}
	else if(currentCMSMessageShowing == 2)
	{
		hidediv("message1");
		hidediv("message2");
		showdiv("message3");
		currentCMSMessageShowing = 3;
	}
	else
	{
		showdiv("message1");
		hidediv("message2");
		hidediv("message3");
		currentCMSMessageShowing = 1;
	}

}


function changeCMSwith2() {

	if(currentCMSMessageShowing == 1)
	{
		hidediv("message1");
		showdiv("message2");
		currentCMSMessageShowing = 2;
	}
	else{
		showdiv("message1");
		hidediv("message2");
		currentCMSMessageShowing = 1;
	}


}



function hidediv(divname) {


	if (document.getElementById) { // DOM3 = IE5, NS6
	document.getElementById(divname).style.display = 'none';
	}
	else {
	if (document.layers) { // Netscape 4
	document.hideshow.visibility = 'hidden';
	}
	else { // IE 4
	document.all.hideshow.style.visibility = 'hidden';
	}
	}
}

function showdiv(divname) {
	if (document.getElementById) { // DOM3 = IE5, NS6
	document.getElementById(divname).style.display = 'block';
	}
	else {
	if (document.layers) { // Netscape 4
	document.hideshow.visibility = 'visible';
	}
	else { // IE 4
	document.all.hideshow.style.visibility = 'visible';
	}
	}
}