// JavaScript Document
   //<![CDATA[
		 
//--------AJAX------------------->			  
function createRequestObject() {
	var ro;
	if (navigator.appName == "Microsoft Internet Explorer") {
		ro = new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		ro = new XMLHttpRequest();
	}
	return ro;
}

var http = createRequestObject();


//-----Export Details Data------------->
function export_detail() {
	
	car = document.detail.truck.value;
	date = document.detail.date.value;
	date2 = document.detail.date2.value;
	
	window.open('xml/export.php?car='+car+'&date='+ date+'&date2='+date2);
	//http.onreadystatechange = ex_detail;
	//	alert(uid+ " " + vid);
	//http.send(null);
}


function ex_detail() {
	if (http.readyState == 4) {

	//car = http.responseText;
	//alert(http.responseText);

	//	document.getElementById(car).innerHTML = 'UNIT ' + car + ' UPDATED';

	}
}


//----Setup Icons ------------------->
	var iconng = new GIcon(); 
	iconng.image = "images/icons/nogo.png"; 
	iconng.iconSize = new GSize(22, 40); 
	iconng.iconAnchor = new GPoint(10, 30); 
	iconng.infoWindowAnchor = new GPoint(5, 1); 

	 //---Vars for Arrays and functions
	  var side_bar_html = "";
	  var gmarkers = [];
	  var raypoint = [];
      var htmls = [];
      var i = 0;
	  var d = 0;
	  var circlepoint =[];
	  var bas_cal,dp_cal,ms_cal;      
	  
	  ///--Replay Vars ETC----->
	  var stopper;
		 var map;
		 var markers;
		 var marker;
		 var timeOut = 200;  // length to wait till next point is plotted
		 var i = 0;
		 
		 // for display
		 var loadingMessage;
		 var distanceMessage;
		 var speedMessage;
		 var cspeedMessage;
		 var timeMessage;
		 var bRowColor = false;
		 var checkPointCount = 1;
		 
		 // for distance calculations
		 var distance = 0;
		 var checkPoint; 
		 var checkPointDistance = 0;
		 
		 // for time calculations
		 var currentTime = 0;
		 var lastTime = 0;
		 var totalTime = 0;
		 
		 // for speed calculations
		 var averageSpeed;
	///--END Replay Vars ETC----->
	
	
	//---Start Replay Functions ----->
	function onLoad() {

	// kill if safari
	var detect = navigator.userAgent.toLowerCase();
	if((detect.indexOf("safari") + 1)) {
        alert("This currently crashes Safari.  We apologize, and are working on a fix.")
    }
	else {
    loadingMessage = document.getElementById('progress');
	distanceMessage = document.getElementById('distanceMessage');
	speedMessage = document.getElementById("speedMessage");
	cspeedMessage = document.getElementById("cspeedMessage");
	timeMessage = document.getElementById('timeMessage');
    map = new GMap(document.getElementById("map"));
	control = new GSmallMapControl();
		
	map.addControl(control);
	map.addControl(new GMapTypeControl());
	//map.centerAndZoom(new GPoint(-82.45126, 27.94351), 4);
			
	//loadInfo();
	}
}

function initButtons(){
document.getElementById("showStats").onclick=function(){
	document.getElementById("stats").style.display = "block";
	document.getElementById("showStats").style.display = "none";
	document.getElementById("hideStats").style.display = "block";
}
document.getElementById("hideStats").onclick=function(){
	document.getElementById("stats").style.display = "none";
	document.getElementById("showStats").style.display = "block";
	document.getElementById("hideStats").style.display = "none";
}
}

function initCheckpoint(){
ctrl = document.getElementById("cpDistance");
ctrl.onchange=function(){document.getElementById("checkpoints").submit();}
checkPoint = ctrl.options[ctrl.selectedIndex].value;
}

// LOAD THE XML FILE AND PLOT THE FIRST POINT //
function loadInfo(){			 
	var request = GXmlHttp.create();
	
	car = document.replay.truck.value;
	date = document.replay.date.value;
	
	
	
	request.open("GET", "xml.php?VID="+car+"&date="+date, true);
	request.onreadystatechange = function() {
	if (request.readyState == 4) {
		var xmlDoc = request.responseXML;
		markers = xmlDoc.documentElement.getElementsByTagName("Trackpoint");
		plotPoint()
	}
  }
  request.send(null);
}


function stopReplay(){
	
stopper = 0;

}


function plotPoint(){
	if (i < markers.length ) {			
		var Lat = markers[i].getElementsByTagName("Latitude");
		var Lng = markers[i].getElementsByTagName("Longitude");
		var speed = markers[i].getElementsByTagName("Speed");
		var street = markers[i].getElementsByTagName("Street");
		var suburb = markers[i].getElementsByTagName("Suburb");
			
		Lat = Lat[0].firstChild.nodeValue;
		Lng = Lng[0].firstChild.nodeValue;
		speed = speed[0].firstChild.nodeValue;
		street = street[0].firstChild.nodeValue;
		suburb = suburb[0].firstChild.nodeValue;
		var point = new GPoint(Lng, Lat);
	
		marker = createMarkerreplay(point,i,markers.length,speed,street,suburb);
			
		if (i < markers.length  && i != 0){
			
			var Lat1 = markers[i-1].getElementsByTagName("Latitude");
			var Lng1 = markers[i-1].getElementsByTagName("Longitude");
				
			Lat1 = Lat1[0].firstChild.nodeValue;
			Lng1 = Lng1[0].firstChild.nodeValue;
					
			var point1 = new GPoint(Lng1, Lat1);

			var points=[point, point1];
			
			//RECENTER MAP EVERY FIVE POINTS
			if (i%5==0){map.recenterOrPanToLatLng(point, 2000);}
			///////Original Stuff Blue First half Red the rest				
			/*if (i < markers.length/2){
				map.addOverlay(new GPolyline(points, "#0000ff",3,1));
			}
			else{
				map.addOverlay(new GPolyline(points, "#ff0000",3,1));
			}*/
			
			///Diferent color line for different speeds
			if (speed > 0 && speed <= 50 ){
				map.addOverlay(new GPolyline(points, "#0000ff",3,1));
			}
			
			if (speed > 51 && speed <= 100 ){
				
				map.addOverlay(new GPolyline(points, "#098100",3,1));
			}
			if (speed > 101){
				map.addOverlay(new GPolyline(points, "#ff0000",3,1)); // Sort this out!
			
			}
			calculateDistance(Lng, Lat, Lng1, Lat1)
		}
		
		
		
	    loadingPercentage(i);
		distanceMessage.innerHTML=Math.round(distance*100)/100 + " Kilometers";
		
		//Thanks to Walter Blume for helping out with this conditional statement
		if (i < markers.length - 1){
            window.setTimeout(plotPoint,timeOut);
            calculateTime(i);
            averageSpeed = Math.round((distance / (totalTime/3600))*100)/100;
			 cspeedMessage.innerHTML = speed + " kph ";
            speedMessage.innerHTML = averageSpeed + " kph ";
        }
        else {
            calculateTime(i);
            averageSpeed = Math.round((distance / (totalTime/3600))*100)/100;
			cspeedMessage.innerHTML = speed + " kph ";
            speedMessage.innerHTML = averageSpeed + " kph ";
            createStat("End", distance, timeMessage.innerHTML.replace(" secs", ""), speedMessage.innerHTML.replace(" kph", ""), cspeedMessage.innerHTML );
        }

		i++;
	}
	if(stopper == 0){
		markers =0;	
		}
}

// GET THE APPROPRIATE MARKER FOR START, FINISH, CHECKPOINT, AND LINE
function createMarkerreplay(point, i, markerLength,speed,street,suburb) {

	var icon = new GIcon();
	icon.shadow = "images/mm_20_shadow.png";
	icon.iconSize = new GSize(12, 20);
	icon.shadowSize = new GSize(22, 20);
	icon.iconAnchor = new GPoint(6, 18);    
	icon.infoWindowAnchor = new GPoint(9, 5);
						
	if (i == 0 ){
		map.centerAndZoom(point, 4);
		icon.image = "images/mm_20_green.png";
		var marker = new GMarker(point,icon);
		map.addOverlay(marker);
		GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml("Start "+ street+" "+suburb);});
		createStat("Start", 0, 0, 0);
		return marker;
	} else if(i == markers.length ){
		icon.image = "images/mm_20_red.png";
		var marker = new GMarker(point,icon);
		map.addOverlay(marker);
		GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml("Finish");});
		map.recenterOrPanToLatLng(point, 2000);
		return marker;
	}		
	
		
	if (speed == 0){
		icon.image = "images/mm_20_yellow.png";
		var distance1 = checkPointDistance;
		var marker = new GMarker(point,icon);
		map.addOverlay(marker);
		/*GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(distance1);});*/
		createStat("Checkpoint " + checkPointCount, distance, totalTime, averageSpeed, speed); 
		//createStat("Checkpoint " + checkPointCount, distance, totalTime, speed);
		checkPointDistance = 0;
		checkPointCount += 1;
	}	

	if (checkPointDistance - checkPoint >= 0 && checkPoint != 0){
		icon.image = "images/mm_20_yellow.png";
		var distance1 = checkPointDistance;
		var marker = new GMarker(point,icon);
		//map.addOverlay(marker);
		GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(distance1);});
		createStat("Checkpoint " + checkPointCount, distance, totalTime, averageSpeed, speed); 
	//createStat("Checkpoint " + checkPointCount, distance, totalTime, speed);
		checkPointDistance = 0;
		checkPointCount += 1;
	}
	else{
		var marker = new GMarker(point, icon);
	}
		
	
		
		
	return marker;
}

function createStat(pointName, distance, time, speed, cspeed){
	var tbody;
	
	if(speed==0){
		block = 1;
	} else {
		block = 0;	
	}
	
	if(pointName != "End") {
		tbody = document.getElementById("statsTable").getElementsByTagName("tbody")[0];
	}
	else {
		tbody = document.getElementById("statsTable").getElementsByTagName("tfoot")[0];
	}

	row = document.createElement("tr");
	if(bRowColor == true && pointName != "End") {
		row.className = "alt";
		bRowColor = false;
	}
	else {
		bRowColor = true;
	}
	pName = document.createElement("td");
	pName.innerHTML = pointName;
	dName = document.createElement("td");
	dName.innerHTML = Math.round(distance*100)/100 +' Kilometers';
	tName = document.createElement("td");
	tName.innerHTML = convertSeconds(time);
	sName = document.createElement("td");
	sName.innerHTML = speed +' kph';
	cName = document.createElement("td");
	cName.innerHTML = cspeed +' kph';
	row.appendChild(pName);
	row.appendChild(dName);
	row.appendChild(tName);
	row.appendChild(sName);
	row.appendChild(cName);
	tbody.appendChild(row);
}

// LOADING BAR //
function loadingPercentage(currentPoint){
	var percentage = Math.round((currentPoint/(markers.length - 1)) * 100);
	loadingMessage.style.width = percentage +"%"; 
}

// Function based on Vincenty formula 
// Website referenced: http://www.movable-type.co.uk/scripts/LatLongVincenty.html
// Thanks Chris Veness for this!
//Also a big thank you to Steve Conniff for taking the time to intruoduce to this more accurate method of calculating distance

function calculateDistance(point1y, point1x, point2y, point2x) {  // Vincenty formula

  traveled = LatLong.distVincenty(new LatLong(point2x, point2y), new LatLong(point1x, point1y));
  traveled = traveled * 0.001;  // Convert to miles from meters

  distance = distance + traveled;
  checkPointDistance = checkPointDistance + traveled;
}



/*
 * LatLong constructor:
 *
 *   arguments are in degrees, either numeric or formatted as per LatLong.degToRad
 *   returned lat -pi/2 ... +pi/2, E = +ve
 *   returned lon -pi ... +pi, N = +ve
 */
function LatLong(degLat, degLong) {
  if (typeof degLat == 'number' && typeof degLong == 'number') {  // numerics
    this.lat = degLat * Math.PI / 180;
    this.lon = degLong * Math.PI / 180;
  } else if (!isNaN(Number(degLat)) && !isNaN(Number(degLong))) { // numerics-as-strings
    this.lat = degLat * Math.PI / 180;
    this.lon = degLong * Math.PI / 180;
  } else {                                                        // deg-min-sec with dir'n
    this.lat = LatLong.degToRad(degLat);
    this.lon = LatLong.degToRad(degLong);
  }
}

/*
 * Calculate geodesic distance (in m) between two points specified by latitude/longitude.
 *
 * from: Vincenty inverse formula - T Vincenty, "Direct and Inverse Solutions of Geodesics on the 
 *       Ellipsoid with application of nested equations", Survey Review, vol XXII no 176, 1975
 *       http://www.ngs.noaa.gov/PUBS_LIB/inverse.pdf
 */
LatLong.distVincenty = function(p1, p2) {
  var a = 6378137, b = 6356752.3142,  f = 1/298.257223563;
  var L = p2.lon - p1.lon;
  var U1 = Math.atan((1-f) * Math.tan(p1.lat));
  var U2 = Math.atan((1-f) * Math.tan(p2.lat));
  var sinU1 = Math.sin(U1), cosU1 = Math.cos(U1);
  var sinU2 = Math.sin(U2), cosU2 = Math.cos(U2);
  var lambda = L, lambdaP = 2*Math.PI;
  var iterLimit = 20;
  while (Math.abs(lambda-lambdaP) > 1e-12 && --iterLimit>0) {
    var sinLambda = Math.sin(lambda), cosLambda = Math.cos(lambda);
    var sinSigma = Math.sqrt((cosU2*sinLambda) * (cosU2*sinLambda) + 
      (cosU1*sinU2-sinU1*cosU2*cosLambda) * (cosU1*sinU2-sinU1*cosU2*cosLambda));
    if (sinSigma==0) return 0;  // co-incident points
    var cosSigma = sinU1*sinU2 + cosU1*cosU2*cosLambda;
    var sigma = Math.atan2(sinSigma, cosSigma);
    var alpha = Math.asin(cosU1 * cosU2 * sinLambda / sinSigma);
    var cosSqAlpha = Math.cos(alpha) * Math.cos(alpha);
    var cos2SigmaM = cosSigma - 2*sinU1*sinU2/cosSqAlpha;
    var C = f/16*cosSqAlpha*(4+f*(4-3*cosSqAlpha));
    lambdaP = lambda;
    lambda = L + (1-C) * f * Math.sin(alpha) *
      (sigma + C*sinSigma*(cos2SigmaM+C*cosSigma*(-1+2*cos2SigmaM*cos2SigmaM)));
  }
  if (iterLimit==0) return NaN  // formula failed to converge
  var uSq = cosSqAlpha * (a*a - b*b) / (b*b);
  var A = 1 + uSq/16384*(4096+uSq*(-768+uSq*(320-175*uSq)));
  var B = uSq/1024 * (256+uSq*(-128+uSq*(74-47*uSq)));
  deltaSigma = B*sinSigma*(cos2SigmaM+B/4*(cosSigma*(-1+2*cos2SigmaM*cos2SigmaM)-
    B/6*cos2SigmaM*(-3+4*sinSigma*sinSigma)*(-3+4*cos2SigmaM*cos2SigmaM)));
  s = b*A*(sigma-deltaSigma);
  s = s.toFixed(3); // round to 1mm precision
  return s;
}


// PARSE TIME FROM XML AND THEN FIND THE DIFFERENCE BETWEEN LAST MEASUREMENT WITH RUNNING TOTAL //
function calculateTime(i)
{
	currentTime = markers[i].getElementsByTagName("Time");
	currentTime = currentTime[0].firstChild.nodeValue;
	speed = markers[i].getElementsByTagName("Speed");
	speed = speed[0].firstChild.nodeValue;
		if (i > 0 ){
		
		//	if(speed==0){
			lastTime = markers[i-1].getElementsByTagName("Time");
			lastTime = lastTime[0].firstChild.nodeValue;
		
			//begin year/month/day
			var largeDate = currentTime.split("T");
			var date = largeDate[0];
			date = date.split("-");
			var beforeYear = date[0];
			var beforeDay = date[2];
			//beforeDay = beforeDay.replace("0","");
			var beforeMonth = date[1];
			//beforeMonth = beforeMonth.replace("0","");
		
			//end year/month/day
			var largeDate1 = lastTime.split("T");
			var date1 = largeDate1[0];
			date1 = date1.split("-");
			var afterYear = date1[0];
			var afterDay = date1[2];
			//afterDay = afterDay.replace("0","");
			var afterMonth = date1[1];
			//afterMonth = afterMonth.replace("0","");
		
			//begin hour/min/seconds
			var after = largeDate[1].replace("T","");
			after = largeDate[1].replace("Z","");	
		
			afterArray = after.split(":");
			var hour = afterArray[0];
			var minute = afterArray[1];
			var second = afterArray[2];
		
			//end hour/min/seconds
			var after1 = largeDate1[1].replace("T","");
			after1 = largeDate1[1].replace("Z","");	
		
			afterArray1 = after1.split(":");
			var hour1 = afterArray1[0];
			var minute1 = afterArray1[1];
			var second1 = afterArray1[2];
		
			var before =new Date(beforeYear, beforeMonth, beforeDay, hour, minute, second);
			var after =new Date(afterYear, afterMonth, afterDay, hour1, minute1, second1);
			var seconds = 1000;
			var secondsBetween = Math.ceil((before.getTime()-after.getTime())/(seconds));
			totalTime = totalTime + secondsBetween;
			timeMessage.innerHTML=convertSeconds(totalTime); 
		//} Enable this for speed 0
	}
}

function convertSeconds(seconds) {
	 //find hours
	 if(seconds > 3600) {
		hours = Math.round(((seconds / 3600)*10)/10) - Math.round((((seconds % 3600)*10)/3600)/10);
		seconds = seconds - (hours * 3600);
		hours += " hrs ";
	 }
	 else {
		hours = "";
	 }
	 //find minutes
	 if(seconds > 60) {
		minutes = Math.round(((seconds / 60)*10)/10) - Math.round((((seconds % 60)*10)/60)/10);
		seconds = seconds - (minutes * 60);
		minutes += " mins ";
	 }
	 else {
		minutes = "";
	 }
	
	return hours + minutes + seconds + " secs ";
}
///-End Replay Functions

//----If browser is OK------------------>
    if (GBrowserIsCompatible()) { 
	    
		//--Must List ths twice--->
		var gmarkers = [];
		
		
		//Setup Default Icons
		 var Icon = new GIcon(G_DEFAULT_ICON);
		 Icon.image = "images/icons/iconb.png";

      // Display the map, with some controls and set the initial location 
		  var map = new GMap2(document.getElementById("map"));
		  map.addControl(new GLargeMapControl());
		  map.addControl(new GMapTypeControl());
		  map.setCenter(new GLatLng(-33.8700666667,150.91),9);
	  
		// -- Setup Arrow Icons
		  var arrowIcon = new GIcon();
		  arrowIcon.iconSize = new GSize(24,24);
		  arrowIcon.shadowSize = new GSize(1,1);
		  arrowIcon.iconAnchor = new GPoint(12,12);
		  arrowIcon.infoWindowAnchor = new GPoint(0,0);
	  
	  
	  function geoadmin(){		
   		var center = new GLatLng(-33.8, 151.1);
			map.setCenter(center, 10);
			//retrieveMarkers();
			marker = new GMarker(center, {icon: new GIcon(G_DEFAULT_ICON, "images/icons/iconb.png"), draggable: true});
			
			GEvent.addListener(marker, "dragstart", function() {
			  map.closeInfoWindow();
			  });
			
			GEvent.addListener(marker, "dragend", function() {
			  document.getElementById('lat').value = marker.getPoint().lat();
			  document.getElementById('lng').value = marker.getPoint().lng();
			 
			});
			
			map.addOverlay(marker);
		  // arrays to hold copies of the markers and html used by the side_bar
		  // because the function closure trick doesnt work there
			}
	
	
	
	// === Returns the bearing in degrees between two points. ===
      // North = 0, East = 90, South = 180, West = 270.
      var degreesPerRadian = 180.0 / Math.PI;
      function bearing( from, to ) {
        // See T. Vincenty, Survey Review, 23, No 176, p 88-93,1975.
        // Convert to radians.
        var lat1 = from.latRadians();
        var lon1 = from.lngRadians();
        var lat2 = to.latRadians();
        var lon2 = to.lngRadians();

        // Compute the angle.
        var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
        if ( angle < 0.0 )
		 angle  += Math.PI * 2.0;

        // And convert result to degrees.
        angle = angle * degreesPerRadian;
        angle = angle.toFixed(1);

        return angle;
      }
       
	   
	   function centerMarker() {
			marker.setPoint(new GLatLng(map.getCenter().lat(), map.getCenter().lng()))
		  document.getElementById('lat').value = marker.getPoint().lat();
		  document.getElementById('lng').value = marker.getPoint().lng();
		//alert(new GLatLng(map.getCenter().lat(), map.getCenter().lng()));
		
		}
		
		function centerMarker2() {
			marker.setPoint(new GLatLng(map.getCenter().lat(), map.getCenter().lng()))
		  document.getElementById('lat').value = marker.getPoint().lat();
		  document.getElementById('lng').value = marker.getPoint().lng();

		drawCircle(new GLatLng(map.getCenter().lat(), map.getCenter().lng()),200,50);
		
		}
		
		function saveMarker() {
			var ra=Math.floor(Math.random()*11000000000000000000)	; 
			var lat   = document.getElementById('lat').value;
			var lng   = document.getElementById('lng').value;
			var title = document.getElementById('title').value;
			//var desc  = document.getElementById('desc').value;
			var rad2  = document.getElementById('rad').value;
		//	var str;
			var gadate = document.getElementById('gapopup_container').value;
			var gadate2 = document.getElementById('gapopup_container2').value;
			var vehicle = document.getElementById('tr').value;
			var user = document.getElementById('user').value;
			
			var a = lat;
			var b = lng;
			
			var request = GXmlHttp.create();

			//open the request to storeMakres.php on your server
			request.open('GET', 'storeMarker.php?lat='+lat+'&long='+lng+'&rad='+rad2+'&name='+title+'&date='+gadate2+'&date2='+gadate+'&vehicle='+vehicle+'&user='+user+'&ra='+ra, true);
			request.onreadystatechange = function() {
			   if (request.readyState == 4) {
					//the request in complete


            //check to see if it was an error or success
           
                //Create a new marker and add it's info window.
            //createMarker(new GLatLng(lat, lng), title);
			//drawCircle(new GLatLng(marker.getPoint().lat(), marker.getPoint().lng()),rad2/1000,30);
						map.closeInfoWindow();
						map.clearOverlays();
					//alert(raypoint[i]);
					    retrieveMarkers(vehicle);
						map.addOverlay(marker);
						document.getElementById('title').value ='';
						map.closeInfoWindow();
					
			   		} //--End If
    			
				} //-End OnreadyState Function
    		
			request.send(null);
  
		} //-End Function
		
		
	function deleteMarker(id,i) {	
	var ra=Math.floor(Math.random()*11000000000000000000)	 ;
			var request = GXmlHttp.create();
			var vehicle = document.getElementById('tr').value;
			//open the request to storeMakres.php on your server
			request.open('GET', 'deleteMarker.php?id='+id+'&ra='+ra, true);
			request.onreadystatechange = function() {
			   if (request.readyState == 4) {

           		map.closeInfoWindow();
				map.clearOverlays();
			
          		retrieveMarkers(vehicle);
		 		map.addOverlay(marker);
      			} //-End If
    		}//-End Statechange Function
    	request.send(null);
  
	} //End Function
		
function updatemarkers(car) {		
		map.closeInfoWindow();
		map.clearOverlays();
			
        retrieveMarkers(car);
	 	map.addOverlay(marker);
		}
		
function retrieveMarkers(car) {
	var ra=Math.floor(Math.random()*11000000000000000000)	 ;
    var request = GXmlHttp.create();
	
    //tell the request where to retrieve data from.
    request.open('GET', 'd2.php?vehicle='+car+'&ra='+ra, true);

    //tell the request what to do when the state changes.
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
              var xmlDoc = request.responseXML;

              var markers = xmlDoc.documentElement.getElementsByTagName("marker");
			
              for (var i = 0; i < markers.length; i++) {
			//  alert(i);
					var id = markers[i].getAttribute("id");
                   var lng = markers[i].getAttribute("lng");
                   var lat = markers[i].getAttribute("lat");
				   var rad = markers[i].getAttribute("rad");
				   var name = markers[i].getAttribute("name");
				    var from = markers[i].getAttribute("vfrom");
					 var to = markers[i].getAttribute("vto");
				    var vehicle = markers[i].getAttribute("vehicle");
				
				   var del = '<div style="font-size:12px" align="left"><b>NAME:</b> '+
				   				name+
							'<br><b>VEHICLE:</b> '+
							vehicle+
							'<br><b>RADIUS</b> '+
							rad+
							'm<br><b>FROM:</b> '+ from+'<br><b>TO:</b>'+to+
								
				   '</div><br><div align="right"><a class="cam" href="#" onclick="deleteMarker('+id+','+i+')">Delete</a></div>';
                   //check for lng and lat so MSIE does not error
                   //on parseFloat of a null value
                   if(lng && lat) {
                      var latlng = new GLatLng(parseFloat(lat),parseFloat(lng));

                    /*  var html = '<div><b>Found</b> '
                            + markers[i].getAttribute("found")
                            + '</div><div><b>Left</b> '
                            + markers[i].getAttribute("left")
                            + '</div>';

                      var iconImage =  markers[i].getAttribute("icon");*/
                      var marker = createMarkerg(latlng, del);
					drawCircle(latlng,rad,30);
                     map.addOverlay(marker);
				
                   }
              } //for
        } //if
    } //function
	
    request.send(null);
	
}

	   
	   
	  function drawCircle(center, radius, nodes, liColor, liWidth, liOpa, fillColor, fillOpa)
	{
	// Esa 2006
		//calculating km/degree
		var latConv = center.distanceFrom(new GLatLng(center.lat()+0.1, center.lng()))/0.1;
		var lngConv = center.distanceFrom(new GLatLng(center.lat(), center.lng()+0.1))/0.1;
		//Loop 
		var points = [];
		var step = parseInt(360/nodes)||10;
		for(var i=0; i<=360; i+=step)
		{
	var pint = new GLatLng(center.lat() + (radius/latConv * Math.cos(i * Math.PI/180)), center.lng() + 
		(radius/lngConv * Math.sin(i * Math.PI/180)));
		points.push(pint);
		//bounds.extend(pint); //this is for fit function 
		}
			  liColor ='#f32424'
		fillColor = fillColor||liColor||'#f32424';
		liWidth = liWidth||2;
		var poly = new GPolygon(points,liColor,liWidth,liOpa,fillColor,fillOpa);
		map.addOverlay(poly);
 //document.write(lngConv);
	}
	   
	   
      // === A function to create the arrow head at the end of the polyline ===
      function arrowHead(points) {
        // == obtain the bearing between the last two points
        var p1=points[points.length-1];
        var p2=points[points.length-2];
        var dir = bearing(p2,p1);
        // == round it to a multiple of 3 and cast out 120s
        var dir = Math.round(dir/3) * 3;
        while (dir >= 120) {dir -= 120;}
        // == use the corresponding triangle marker 
        arrowIcon.image = "http://www.google.com/intl/en_ALL/mapfiles/dir_"+dir+".png";
        map.addOverlay(new GMarker(p1, arrowIcon));
      }
      
      // === A function to put arrow heads at intermediate points
      function midArrows(points) {
		  
		  
       	 for (var i=1; i < points.length-1; i++) {  
		 
          var p1=points[i-1];
          var p2=points[i+1];
          var dir = bearing(p1,p2);
          // == round it to a multiple of 3 and cast out 120s
          var dir = Math.round(dir/3) * 3;
          while (dir >= 120) {dir -= 120;}
          // == use the corresponding triangle marker 
          arrowIcon.image = "http://www.google.com/intl/en_ALL/mapfiles/dir_"+dir+".png";
          var arrow = new GMarker(points[i], arrowIcon);
		
		  map.addOverlay(arrow);
		GEvent.addListener(arrow, "click", function() {
          arrow.openInfoWindowHtml('lll');
        });
			//createMarker(points[i]);
		 
        }
      }

      
      // A function to create the marker and set up the event window
      function createMarker(point,name,html,baldat) {
        var marker = new GMarker(point,Icon);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(baldat);
        });
		
		// Switch icon on marker mouseover and mouseout
        GEvent.addListener(marker, "mouseover", function() {
          marker.setImage("images/icons/iconr.png");
        });
        GEvent.addListener(marker, "mouseout", function() {
          marker.setImage("images/icons/iconb.png");
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
		raypoint[i] = point;
        htmls[i] = baldat;
        // add a line to the side_bar html
        side_bar_html += html;
		 // side_bar_html += html +'<td><a href="javascript:myclick(' + i + ')">GO</a></td></tr>';
        i++;
        return marker;
      }
	  
	  
	  function createMarkerg(point,cdat) {
        var circlemarker = new GMarker(point,iconng);
      GEvent.addListener(circlemarker, "click", function() {
          circlemarker.openInfoWindowHtml(cdat);
        });
		
		// Switch icon on marker mouseover and mouseout
       /* GEvent.addListener(marker, "mouseover", function() {
          marker.setImage("images/icons/iconr.png");
        });
        GEvent.addListener(marker, "mouseout", function() {
          marker.setImage("images/icons/iconb.png");
        });*/
        // save the info we need to use later for the side_bar
     
		circlepoint[d] = point;
        
		 // side_bar_html += html +'<td><a href="javascript:myclick(' + i + ')">GO</a></td></tr>';
       d++;
        return circlemarker;
      }
	  
	
	  
	  
	  
	   function midArrows2(point1,point2,speed) {
		  
		  
       	
		 var pp =speed;
          var p1=point1;
          var p2=point2;
          var dir = bearing(p1,p2);
          // == round it to a multiple of 3 and cast out 120s
          var dir = Math.round(dir/3) * 3;
          while (dir >= 120) {dir -= 120;}
          // == use the corresponding triangle marker 
         //arrowIcon.image = "http://www.google.com/intl/en_ALL/mapfiles/dir_"+dir+".png";
			arrowIcon.image = "images/arrows/dot21.png";
		  var pointarr = new GLatLng(p1);
		  var arrow = new GMarker(p1, arrowIcon);
		
		 
		GEvent.addListener(arrow, "click", function() {
          arrow.openInfoWindowHtml(pp);
        });
			//createMarker(points[i]);
		 
		 return arrow;
        
      }




 function midArrows3(point1,speed,course) {
		  
		  
       	
		 var pp =speed+course;
          var p1=point1;
      
          var dir = course;
          // == round it to a multiple of 3 and cast out 120s
          var dir = Math.round(dir/3) * 3;
          while (dir >= 120) {dir -= 120;}
          // == use the corresponding triangle marker 
         //arrowIcon.image = "http://www.google.com/intl/en_ALL/mapfiles/dir_"+dir+".png";
 arrowIcon.image = "images/arrows/arrow2.png";
		  var pointarr = new GLatLng(p1);
		  var arrow = new GMarker(p1, arrowIcon);
		
		 
		GEvent.addListener(arrow, "click", function() {
          arrow.openInfoWindowHtml(pp);
        });
			//createMarker(points[i]);
		 
		 return arrow;
        
      }

      
      // A function to create the marker and set up the event window
      function createMarker2(point,name,html,baldat) {
        var marker = new GMarker(point,Icon);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(baldat);
        });
		
		// Switch icon on marker mouseover and mouseout
        GEvent.addListener(marker, "mouseover", function() {
          marker.setImage("images/icons/iconr.png");
        });
        GEvent.addListener(marker, "mouseout", function() {
          marker.setImage("images/icons/iconb.png");
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
		raypoint[i] = point;
        htmls[i] = baldat;
        // add a line to the side_bar html
        side_bar_html += html;
		 // side_bar_html += html +'<td><a href="javascript:myclick(' + i + ')">GO</a></td></tr>';
        i++;
        return marker;
      }
	  


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


	  
	  function clear_space(){
		  	
		var gmarkers = 0;
	var raypoint = 0;
    var htmls = 0;
     i=0;
	 	d = 0;
			map.clearOverlays(); 
		  
		  side_bar_html = "";
		
		 
		  document.getElementById("side_bar").innerHTML = side_bar_html;
		  document.getElementById("current_bar").innerHTML = side_bar_html;
		 // GetCurrent();
	  }
	   
function GetOverspeed(){
	
	clear_space();
		gmarkers = [];
	  raypoint = [];
       htmls = [];
	
	var car
	var date
	var ospeed
	
	if(document.overspeed.truck.value==''){
	car = 0;
	date = 0;
	ospeed = 0;
	} else {
		car = document.overspeed.truck.value;
		date = document.overspeed.date.value;
		ospeed = document.overspeed.ospeed.value;
	}
	
	
	map.clearOverlays(); 
    var request = GXmlHttp.create();
      request.open("GET", "xml/overspeed.php?car="+car+'&date='+date+'&ospeed='+ospeed, true);
      request.onreadystatechange = function() {
		   if (request.readyState == 1) {
			   
			 document.getElementById('loading1').style.visibility = 'hidden'; // SR - 2010-09-19 change from visible to hidden
			// document.getElementById('light').style.display='block';
			 document.getElementById('fade').style.display= 'none'; // SR - 2010-09-19 change from block to none
		   }
			   
		
        if (request.readyState == 4) {
			 document.getElementById('loading1').style.visibility = 'hidden';
			 //document.getElementById('light').style.display='none';
			 document.getElementById('fade').style.display='none';
			side_bar_html = "";
			var bounds = new GLatLngBounds();
          	var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
          	var markers = xmlDoc.documentElement.getElementsByTagName("marker");
       /*  side_bar_html += "<table id=\"test1\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"rowstyle-alt colstyle-alt no-arrow\">";
		   side_bar_html += "					<thead>";
			 side_bar_html += "					<tr>";
			 side_bar_html += "						<th>Street</th>";
			 side_bar_html += "						<th>Suburb</th>";
			 side_bar_html += "						<th>Suburb</th>";
			 side_bar_html += "						<th>Suburb</th>";
			 side_bar_html += "						<th class=\"sortable-numeric\">Suburb</th>";
			 side_bar_html += "					</tr>";
			 side_bar_html += "				</thead>";*/
		  var titlebar = '<table><tr><th>Street</th><th class="sortable-numeric">Suburb</th></tr></table>';
		 
		 if(markers.length == 0){
			 side_bar_html = '<div class="nodata">NO DATA TO DISPLAY</div>';
			 
		 }
			
	
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var street = markers[i].getAttribute("street");
			var suburb = markers[i].getAttribute("suburb");
			var date = markers[i].getAttribute("date");
			var time = markers[i].getAttribute("time");
			var speed = markers[i].getAttribute("speed");
			var class1;
			 var sbdat = '';
				if(i%2==0)   {
				
				class1 = 'current';
				
			} else {
				
				class1 = 'current1';	
			}
			
		
			
			sbdat +='<table onclick="myclick(' + i + ')" onmouseover="gmarkers['+i+'].setImage(\'images/icons/iconr.png\'); this.className=\'on\';" onmouseout="gmarkers['+i+'].setImage(\'images/icons/iconb.png\'); this.className=\''+class1+'\';" class="'+class1+'"   width="100%"><tr style="color:white"><td><b>DATE:</b> '+date+'    <b>TIME:</b> '+time+'</td></tr><tr><td><b>LOCATION:</b> '+street+' ,'+suburb+'</td></tr><tr><td><b>SPEED:</b> '+speed+'</td></tr></table>';
			
		
			
			var baldat = '';
			baldat +='<table class="balloon">';
			baldat +='<tr >';
			baldat +='<td><b>DATE: </b></td><td>'+date+'</td>';
			baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>TIME: </b></td><td>'+time+'</td>';
			baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>STREET: </b></td><td>'+street+'</td>';
				baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>SUBURB: </b></td><td>'+suburb+'</td>';
				baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>SPEED: </b></td><td>'+speed+'</td>';
			baldat +='</tr>';
			baldat +='</table>';
			
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,sbdat,baldat);
            map.addOverlay(marker);
			//bounds.extend(point);
          }
		  //side_bar_html += "</table>";
          // put the assembled side_bar_html contents into the side_bar div
		  
          document.getElementById("side_bar").innerHTML = side_bar_html;
		  
         
    
          // ========= Now process the polylines ===========
          var lines = xmlDoc.documentElement.getElementsByTagName("line");
          // read each line
          for (var a = 0; a < lines.length; a++) {
            // get any line attributes
            var colour = lines[a].getAttribute("colour");
            var width  = parseFloat(lines[a].getAttribute("width"));
            // read each point on that line
            var points = lines[a].getElementsByTagName("point");
			
            var pts = [];
			var lspds = [];
		
            for (var i = 0; i < points.length; i++) {
               pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                                   parseFloat(points[i].getAttribute("lng")));
			   
			   lspds[i] =points[i].getAttribute("speed");
			  
			  bounds.extend(pts[i]);
			 
            }
			for (var j = 1; j < pts.length-1; j++) {
			 var arr = midArrows2(pts[j-1],pts[j+1],'<span style="font-size:12px;"><b>SPEED: </b>'+lspds[j-1]+'kph</span>');
			   map.addOverlay(arr);
			}
            map.addOverlay(new GPolyline(pts,colour,width));
			
			
          }
		  map.setZoom(map.getBoundsZoomLevel(bounds));
		  map.setCenter(bounds.getCenter());
          // ================================================    
		   
        }
      }
	 
      request.send(null);	
	
}


function GetDetail(){
	
	clear_space();
		gmarkers = [];
	  raypoint = [];
       htmls = [];
	
	var car
	var date
	var date2

	
	if(document.detail.truck.value==''){
	car = 0;
	date = 0;
	
	date2 = 0;
	} else {
		car = document.detail.truck.value;
		date = document.detail.date.value;
		date2 = document.detail.date2.value;
	}
	
	
	map.clearOverlays(); 
    var request = GXmlHttp.create();
      request.open("GET", "xml/detail.php?car="+car+'&date='+date+'&date2='+date2, true);
      request.onreadystatechange = function() {
		   if (request.readyState == 1) {
			   
			 document.getElementById('loading1').style.visibility = 'hidden'; // SR - 2010-09-19 change from visible to hidden
			// document.getElementById('light').style.display='block';
			 document.getElementById('fade').style.display= 'none'; // SR - 2010-09-19 change from block to none
		   }
			   
		
      if (request.readyState == 4) {
			 document.getElementById('loading1').style.visibility = 'hidden';
			 //document.getElementById('light').style.display='none';
			 document.getElementById('fade').style.display='none';
			side_bar_html = "";
			var bounds = new GLatLngBounds();
          	var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
          	var markers = xmlDoc.documentElement.getElementsByTagName("marker");
       /*  side_bar_html += "<table id=\"test1\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"rowstyle-alt colstyle-alt no-arrow\">";
		   side_bar_html += "					<thead>";
			 side_bar_html += "					<tr>";
			 side_bar_html += "						<th>Street</th>";
			 side_bar_html += "						<th>Suburb</th>";
			 side_bar_html += "						<th>Suburb</th>";
			 side_bar_html += "						<th>Suburb</th>";
			 side_bar_html += "						<th class=\"sortable-numeric\">Suburb</th>";
			 side_bar_html += "					</tr>";
			 side_bar_html += "				</thead>";*/
		  var titlebar = '<table><tr><th>Street</th><th class="sortable-numeric">Suburb</th></tr></table>';
		 
		 if(markers.length == 0){
			 side_bar_html = '<div class="nodata">NO DATA TO DISPLAY</div>';
			 
		 }
			
	
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var street = markers[i].getAttribute("street");
			var suburb = markers[i].getAttribute("suburb");
			var date = markers[i].getAttribute("date");
			var time = markers[i].getAttribute("time");
			var speed = markers[i].getAttribute("speed");
			var class1;
			 var sbdat = '';
				if(i%2==0)   {
				
				class1 = 'current';
				
			} else {
				
				class1 = 'current1';	
			}
			
		
			
			sbdat +='<table onclick="myclick(' + i + ')" onmouseover="gmarkers['+i+'].setImage(\'images/icons/iconr.png\'); this.className=\'on\';" onmouseout="gmarkers['+i+'].setImage(\'images/icons/iconb.png\'); this.className=\''+class1+'\';" class="'+class1+'"   width="100%"><tr style="color:white"><td><b>DATE:</b> '+date+'    <b>TIME:</b> '+time+'</td></tr><tr><td><b>LOCATION:</b> '+street+' ,'+suburb+'</td></tr><tr><td><b>SPEED:</b> '+speed+'</td></tr></table>';
			
		
			
			var baldat = '';
			baldat +='<table class="balloon">';
			baldat +='<tr >';
			baldat +='<td><b>DATE: </b></td><td>'+date+'</td>';
			baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>TIME: </b></td><td>'+time+'</td>';
			baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>STREET: </b></td><td>'+street+'</td>';
				baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>SUBURB: </b></td><td>'+suburb+'</td>';
				baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>SPEED: </b></td><td>'+speed+'</td>';
			baldat +='</tr>';
			baldat +='</table>';
			
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,sbdat,baldat);
            map.addOverlay(marker);
			//bounds.extend(point);
          }
		  //side_bar_html += "</table>";
          // put the assembled side_bar_html contents into the side_bar div
		  
          document.getElementById("side_bar").innerHTML = side_bar_html;
		  
         
    
          // ========= Now process the polylines ===========
        var lines = xmlDoc.documentElement.getElementsByTagName("line");
          // read each line
          for (var a = 0; a < lines.length; a++) {
            // get any line attributes
            var colour = lines[a].getAttribute("colour");
            var width  = parseFloat(lines[a].getAttribute("width"));
            // read each point on that line
            var points = lines[a].getElementsByTagName("point");
			
            var pts = [];
			var lspds = [];
		
            for (var i = 0; i < points.length; i++) {
               pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                                   parseFloat(points[i].getAttribute("lng")));
			   
			   lspds[i] =points[i].getAttribute("speed");
			  
			  bounds.extend(pts[i]);
			 
            }

			for (var j = 1; j < pts.length-1; j++) {
			 var arr = midArrows2(pts[j-1],pts[j+1],'<span style="font-size:12px;"><b>SPEED: </b>'+lspds[j-1]+'kph</span>');
			   map.addOverlay(arr);
			}
            map.addOverlay(new GPolyline(pts,colour,width));
			
			
          }
		  map.setZoom(map.getBoundsZoomLevel(bounds));
		  map.setCenter(bounds.getCenter());
          // ================================================    
		   
        }
      }
	 
      request.send(null);	
	
}


function GetGeo(){
	
	clear_space();
		gmarkers = [];
	  raypoint = [];
       htmls = [];
	
	var car
	var date
	

	
	
		car = document.geo.truck.value;
		date = document.geo.date.value;
	

	
	
	map.clearOverlays(); 
    var request = GXmlHttp.create();
      request.open("GET", "xml/geo.php?car="+car+'&date='+date, true);
      request.onreadystatechange = function() {
		   if (request.readyState == 1) {
			   
			 document.getElementById('loading1').style.visibility = 'hidden'; // SR - 2010-09-19 change from visible to hidden
			// document.getElementById('light').style.display='block';
			 document.getElementById('fade').style.display= 'none'; // SR - 2010-09-19 change from block to none
		   }
			   
		
      if (request.readyState == 4) {
			 document.getElementById('loading1').style.visibility = 'hidden';
			 //document.getElementById('light').style.display='none';
			 document.getElementById('fade').style.display='none';
			side_bar_html = "";
			var bounds = new GLatLngBounds();
          	var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
          	var markers = xmlDoc.documentElement.getElementsByTagName("marker");
			var cammarkers = xmlDoc.documentElement.getElementsByTagName("cmarker");
       /*  side_bar_html += "<table id=\"test1\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"rowstyle-alt colstyle-alt no-arrow\">";
		   side_bar_html += "					<thead>";
			 side_bar_html += "					<tr>";
			 side_bar_html += "						<th>Street</th>";
			 side_bar_html += "						<th>Suburb</th>";
			 side_bar_html += "						<th>Suburb</th>";
			 side_bar_html += "						<th>Suburb</th>";
			 side_bar_html += "						<th class=\"sortable-numeric\">Suburb</th>";
			 side_bar_html += "					</tr>";
			 side_bar_html += "				</thead>";*/
		  var titlebar = '<table><tr><th>Street</th><th class="sortable-numeric">Suburb</th></tr></table>';
		 
		 if(markers.length == 0){
			 side_bar_html = '<div class="nodata">NO DATA TO DISPLAY</div>';
			 
		 }
		 
		// var cpoint_0  = new GLatLng(-12.433391485358168,130.92304229736328);
		// drawCircle(cpoint_0, 500, 30);
			  for (var c = 0; c < cammarkers.length; c++) {
				  
			var clat = parseFloat(cammarkers[c].getAttribute("lat"));
            var clng = parseFloat(cammarkers[c].getAttribute("lng"));
            var cpoint = new GLatLng(clat,clng);
            var crad = cammarkers[c].getAttribute("rad");
			var cname = cammarkers[c].getAttribute("name");
			
		//	alert('POINT '+cpoint+' RAD '+crad);
			drawCircle(cpoint,crad,30);
           // map.addOverlay(marker);
		   var cdat = '';
		   cdat +='<table>';
		   cdat +='	<tr>';
		   cdat +='		<td align="center" colspan="2"><b>GEO FENCE</b></td>';
		   cdat +='	</tr>';
		   cdat +=' <tr>';
		   cdat +=' 	<td><b>NAME:</b></td>';
		   cdat +='		<td>'+cname+'</td>';
		   cdat +=' </tr>';
		    cdat +=' <tr>';
		   cdat +=' 	<td><b>RADIUS:</b></td>';
		   cdat +='		<td>'+crad+'m</td>';
		   cdat +=' </tr>';
		   cdat +='</table>';
		   
		   
		    var c2marker = createMarkerg(cpoint,cdat);
            map.addOverlay(c2marker);
		 
			  }
	
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var street = markers[i].getAttribute("street");
			var suburb = markers[i].getAttribute("suburb");
			var date = markers[i].getAttribute("date");
			var time = markers[i].getAttribute("time");
			var speed = markers[i].getAttribute("speed");
			var class1;
			 var sbdat = '';
				if(i%2==0)   {
				
				class1 = 'current';
				
			} else {
				
				class1 = 'current1';	
			}
			
		
			
			sbdat +='<table onclick="myclick(' + i + ')" onmouseover="gmarkers['+i+'].setImage(\'images/icons/iconr.png\'); this.className=\'on\';" onmouseout="gmarkers['+i+'].setImage(\'images/icons/iconb.png\'); this.className=\''+class1+'\';" class="'+class1+'"   width="100%"><tr style="color:white"><td><b>DATE:</b> '+date+'    <b>TIME:</b> '+time+'</td></tr><tr><td><b>LOCATION:</b> '+street+' ,'+suburb+'</td></tr><tr><td><b>SPEED:</b> '+speed+'</td></tr></table>';
			
		
			
			var baldat = '';
			baldat +='<table class="balloon">';
			baldat +='<tr >';
			baldat +='<td><b>DATE: </b></td><td>'+date+'</td>';
			baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>TIME: </b></td><td>'+time+'</td>';
			baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>STREET: </b></td><td>'+street+'</td>';
				baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>SUBURB: </b></td><td>'+suburb+'</td>';
				baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>SPEED: </b></td><td>'+speed+'</td>';
			baldat +='</tr>';
			baldat +='</table>';
			
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,sbdat,baldat);
            map.addOverlay(marker);
			//bounds.extend(point);
          }
		  //side_bar_html += "</table>";
          // put the assembled side_bar_html contents into the side_bar div
		  
          document.getElementById("side_bar").innerHTML = side_bar_html;
		  
         
    
          // ========= Now process the polylines ===========
        var lines = xmlDoc.documentElement.getElementsByTagName("line");
          // read each line
          for (var a = 0; a < lines.length; a++) {
            // get any line attributes
            var colour = lines[a].getAttribute("colour");
            var width  = parseFloat(lines[a].getAttribute("width"));
            // read each point on that line
            var points = lines[a].getElementsByTagName("point");
			
            var pts = [];
			var lspds = [];
		
            for (var i = 0; i < points.length; i++) {
               pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                                   parseFloat(points[i].getAttribute("lng")));
			   
			   lspds[i] =points[i].getAttribute("speed");
			  
			  bounds.extend(pts[i]);
			 
            }
			for (var j = 1; j < pts.length-1; j++) {
			 var arr = midArrows2(pts[j-1],pts[j+1],'<span style="font-size:12px;"><b>SPEED: </b>'+lspds[j-1]+'kph</span>');
			   map.addOverlay(arr);
			}
            map.addOverlay(new GPolyline(pts,colour,width));
			
			
          }
		  map.setZoom(map.getBoundsZoomLevel(bounds));
		  map.setCenter(bounds.getCenter());
          // ================================================    
		   
        }
      }
	 
      request.send(null);	
	
}




function GetIdle(){
	
	clear_space();
		gmarkers = [];
	  raypoint = [];
       htmls = [];
	var car = document.idle.truck.value;
	var date = document.idle.date.value;
	var itime = document.idle.itime.value;
	map.clearOverlays(); 
    var request = GXmlHttp.create();
      request.open("GET", "xml/idle.php?car="+car+'&date='+date+'&itime='+itime, true);
      request.onreadystatechange = function() {
		   if (request.readyState == 1) {
			   
			 document.getElementById('loading1').style.visibility = 'hidden'; // SR - 2010-09-19 change from visible to hidden
			// document.getElementById('light').style.display='block';
			 document.getElementById('fade').style.display= 'none'; // SR - 2010-09-19 change from block to none
		   }
			   
		
        if (request.readyState == 4) {
			 document.getElementById('loading1').style.visibility = 'hidden';
			 //document.getElementById('light').style.display='none';
			 document.getElementById('fade').style.display='none';
			side_bar_html = "";
			var bounds = new GLatLngBounds();
          	var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
          	var markers = xmlDoc.documentElement.getElementsByTagName("marker");
      
		 
		 if(markers.length == 0){
			 side_bar_html = '<div class="nodata">NO DATA TO DISPLAY</div>';
			 
		 }
			
	
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var street = markers[i].getAttribute("street");
			var suburb = markers[i].getAttribute("suburb");
			var date = markers[i].getAttribute("date");
			var time = markers[i].getAttribute("time");
			var itime = markers[i].getAttribute("itime");
			var atime = markers[i].getAttribute("atime");
			var dtime = markers[i].getAttribute("dtime");
			var class1;
			 var sbdat = '';
				if(i%2==0)   {
				
				class1 = 'current';
				
			} else {
				
				class1 = 'current1';	
			}
			
		
			
			sbdat +='<table onclick="myclick(' + i + ')" onmouseover="gmarkers['+i+'].setImage(\'images/icons/iconr.png\'); this.className=\'on\';" onmouseout="gmarkers['+i+'].setImage(\'images/icons/iconb.png\'); this.className=\''+class1+'\';" class="'+class1+'"   width="100%"><tr style="color:white"><td><b>DATE:</b> '+date+'    <b>IDLE TIME:</b> '+itime+'</td></tr><tr><td><b>LOCATION:</b> '+street+' ,'+suburb+'</td></tr><tr><td></td></tr><tr><td><b>ARRIVED: </b>'+atime+'    <b>DEPARTED: </b>'+dtime+'</td></tr></table>';
			
		
			
			var baldat = '';
			baldat +='<table class="balloon">';
			baldat +='<tr>';
			baldat +='<td><b>DATE: </b></td><td>'+date+'</td>';
			baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>IDLE TIME: </b></td><td>'+itime+'</td>';
			baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>STREET: </b></td><td>'+street+'</td>';
				baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>SUBURB: </b></td><td>'+suburb+'</td>';
				baldat +='</tr>';
			baldat +='<td><b>ARRIVAL TIME: </b></td><td>'+atime+'</td>';
				baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<tr>';
			baldat +='<td><b>DEPARTED: </b></td><td>'+dtime+'</td>';
				baldat +='</tr>';
			baldat +='<tr>';
			baldat +='</table>';
			
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,sbdat,baldat);
            map.addOverlay(marker);
			//bounds.extend(point);
          }
		  //side_bar_html += "</table>";
          // put the assembled side_bar_html contents into the side_bar div
		  
          document.getElementById("side_bar").innerHTML = side_bar_html;
		  
         
    
          // ========= Now process the polylines ===========
          var lines = xmlDoc.documentElement.getElementsByTagName("line");
          // read each line
          for (var a = 0; a < lines.length; a++) {
            // get any line attributes
            var colour = lines[a].getAttribute("colour");
            var width  = parseFloat(lines[a].getAttribute("width"));
            // read each point on that line
            var points = lines[a].getElementsByTagName("point");
			
            var pts = [];
			var lspds = [];
		
            for (var i = 0; i < points.length; i++) {
               pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                                   parseFloat(points[i].getAttribute("lng")));
			   
			   lspds[i] =points[i].getAttribute("speed");
			  
			  bounds.extend(pts[i]);
			 
            }
			for (var j = 1; j < pts.length-1; j++) {
			 var arr = midArrows2(pts[j-1],pts[j+1],'<span style="font-size:12px;"><b>SPEED: </b>'+lspds[j-1]+'kph</span>');
			   map.addOverlay(arr);
			}
            map.addOverlay(new GPolyline(pts,colour,width));
			
			
          }
		  map.setZoom(map.getBoundsZoomLevel(bounds));
		  map.setCenter(bounds.getCenter());
          // ================================================    
		   
        }
      }
	 
      request.send(null);	
	
}




function GetCurrent(){
	clear_space();
	var gmarkers = [];
	  raypoint = [];
       htmls = [];
   
	

	map.clearOverlays(); 
    var request = GXmlHttp.create();
	var iefix = "?t=" + new Date().getTime();
      request.open("GET", "xml/current.php" + iefix, true);
      request.onreadystatechange = function() {
		   if (request.readyState == 1) {
			   
			 document.getElementById('loading1').style.visibility = 'hidden'; // SR - 2010-09-19 change from visible to hidden
			// document.getElementById('light').style.display='block';
			 document.getElementById('fade').style.display= 'none'; // SR - 2010-09-19 change from block to none
		   }
			   
		
        if (request.readyState == 4) {
			 document.getElementById('loading1').style.visibility = 'hidden';
			 //document.getElementById('light').style.display='none';
			 document.getElementById('fade').style.display='none';
			side_bar_html = "";
			var bounds = new GLatLngBounds();
          	var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
          	var markers = xmlDoc.documentElement.getElementsByTagName("marker");
         /* side_bar_html += "<table id=\"test1\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"rowstyle-alt colstyle-alt no-arrow\">";
		   side_bar_html += "					<thead>";
			 side_bar_html += "					<tr>";
			 side_bar_html += "						<th>Street</th>";
			 side_bar_html += "						<th>Suburb</th>";
			 side_bar_html += "						<th>Suburb</th>";
			 side_bar_html += "						<th>Suburb</th>";
			 side_bar_html += "						<th class=\"sortable-numeric\">Suburb</th>";
			 side_bar_html += "					</tr>";
			 side_bar_html += "				</thead>";
		  var titlebar = '<table><tr><th>Street</th><th class="sortable-numeric">Suburb</th></tr></table>';*/
		  
		
	
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var street = markers[i].getAttribute("street");
			var suburb = markers[i].getAttribute("suburb");
			var date = markers[i].getAttribute("date");
			var time = markers[i].getAttribute("time");
			var speed = markers[i].getAttribute("speed");
			var vehicle = markers[i].getAttribute("vehicle");
			var cam = markers[i].getAttribute("cam");
			var course = markers[i].getAttribute("course");
				var spimg = markers[i].getAttribute("spimg");
				var ago = markers[i].getAttribute("ago");
			var class1;
			var sbdat = '';
			if(i%2==0)   {
				
				class1 = 'current';
				
			} else {
				
				class1 = 'current1';	
			}
			sbdat +='<table onclick="myclick(' + i + ')" onmouseover="gmarkers['+i+'].setImage(\'images/icons/iconr.png\'); this.className=\'on\';" onmouseout="gmarkers['+i+'].setImage(\'images/icons/iconb.png\'); this.className=\''+class1+'\';" class="'+class1+'"   width="100%" >';
			sbdat +='			<tr>';
			sbdat +='				<td><span class="vehicle">UNIT: '+vehicle+'</span>    </td>';
			//sbdat +='				<td align="right">'+cam+'</td>';
			sbdat +='			</tr>';
			sbdat +='			<tr>';
			sbdat +='				<td>'+street+', '+suburb+'</td>';
			sbdat +='			</tr>';
			sbdat +='			<tr>';	
			sbdat +='				<td>'+ago+'</td>';
		
			sbdat +='			</tr>';
			sbdat +='			<tr>	';
			sbdat +='				<td><img src="'+spimg+'" />'+speed+'</td>';
		//	sbdat +='			<td><a href="javascript:myclick(' + i + ')">GO</a></td>';
			sbdat +='			</tr>';
			sbdat +='		 </table>';
			sbdat +='		 <div class="sep"></div>';
		//	} else {
				
				//sbdat +='<tr ><td>'+date+'</td><td>'+time+'</td><td>'+street+'</td><td>'+suburb+'</td><td>'+speed+'</td>';
		//	}
			var baldat = '';
			baldat +='<table class="balloon">';
			baldat +='<tr>';
			baldat +='<td><b>VEHICLE: </b></td><td>'+vehicle+'</td>';
			baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>DATE: </b></td><td>'+date+'</td>';
			baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>TIME: </b></td><td>'+time+'</td>';
			baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>STREET: </b></td><td>'+street+'</td>';
			baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>SUBURB: </b></td><td>'+suburb+'</td>';
			baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>SPEED: </b></td><td>'+speed+'</td>';
			baldat +='</tr>';
			baldat +='<tr>';
			baldat +='<td><b>COURSE: </b></td><td>'+course+'</td>';
			baldat +='</tr>';
/*			baldat +='<tr>';
			baldat +='<td colspan="2"> <a class="cam" href="#" onclick="myLightWindow.activateWindow({href:\''+cam+'\',  lightwindow_type:\'external\', params: \'lightwindow_width=800,lightwindow_height=600\', title:\'TRAFFIC CAMERA \'});">Traffic Camera</a></td>';
		//	baldat +='<td><a href="#" onclick="javascript: myLightWindow.activateWindow({href: \'http: \'cam\', title: \'Waiting for the show to start in Las Vegas\', author: \'Jazzmatt\', caption: \'Mmmmmm Margaritas! And yes, this is me...\', left: 300});" value="Launch it from this Button!" /></td>';
		//	baldat +='<td colspan="2"> <a href="#" onclick="popup('+cam+')">Traffic Camera</a></td>';
			baldat +='</tr>';*/
			baldat +='</table>';
		 var arr = midArrows3(point,'<span style="font-size:12px;"><b>SPEED: </b>'+speed+'kph</span>',course);
			 //  map.addOverlay(arr);
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,sbdat,baldat);
            map.addOverlay(marker);
			
			bounds.extend(point);
          }
		  //side_bar_html += "</table>";
          // put the assembled side_bar_html contents into the side_bar div
		  map.setZoom(map.getBoundsZoomLevel(bounds));
		  map.setCenter(bounds.getCenter());
          document.getElementById("current_bar").innerHTML = side_bar_html;
		  
         
    
          // ========= Now process the polylines ===========
          var lines = xmlDoc.documentElement.getElementsByTagName("line");
          // read each line
          for (var a = 0; a < lines.length; a++) {
            // get any line attributes
            var colour = lines[a].getAttribute("colour");
            var width  = parseFloat(lines[a].getAttribute("width"));
            // read each point on that line
            var points = lines[a].getElementsByTagName("point");
            var pts = [];
            for (var i = 0; i < points.length; i++) {
               pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                                   parseFloat(points[i].getAttribute("lng")));
			   //bounds.extend(pts[i]);
            }
            map.addOverlay(new GPolyline(pts,colour,width));
			midArrows(pts);
			
          }
		  
          // ================================================    
		   
        }
      }
	 
      request.send(null);	
	
}
 

    }
    
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    //]]>