google.load('visualization', '1', { packages : [ 'corechart' ] });

var req;
var plot;  					  			

function loadXMLDoc(url) {
	if (window.XMLHttpRequest) {
		// Firefox, Safari 1.2 or IE 7
		req = new XMLHttpRequest();
		req.onreadystatechange = processReqChange;
		req.open("GET", url, true);
		req.send(null);
	} else if (window.ActiveXObject) {
		// IE older than 7
		req = new ActiveXObject("Microsoft.XMLHTTP");
		if (req) {
    		req.onreadystatechange = processReqChange;
    		req.open("GET", url, true);
    		req.send();
		}
	}
}

function processReqChange() {
	if (req.readyState == 4) {
		if (req.status == 200) {
			response  = req.responseXML.documentElement;
			method    = response.getElementsByTagName('method')[0].firstChild.data;
			result    = response.getElementsByTagName('result')[0].firstChild.data;
			eval(method + '(\'\', result)');
		} else {
   			alert("Error getting data:\n" + req.statusText);
		}
	}
}

function createMarker(point,html,time,distance,split,ah,mh) {
    // FF 1.5 fix
	if (ah == null) {
		html = '<div style="white-space:nowrap;"><b>' + html + '</b><br>Distance: ' + distance + '<br>Time: ' + time + '</div>';
	} else {
	    html = '<div style="white-space:nowrap;"><b>' + html + '</b><br>Distance: ' + distance + ' | Time: ' + time + '<br/>Avg heart rate: ' + ah + '<br/>Max heart rate: ' + mh + '</div>';
	}
    
    var overIcon = new GIcon();
    if (split>0 && split <21) {
    	var splitStr = split+'';
    	overIcon.image = "/LegLoggerWeb/jsp/images/map/green" + splitStr + ".png";
    } else {
		overIcon.image = "/LegLoggerWeb/jsp/images/map/green.png";
    }
	overIcon.iconSize = new GSize(32, 37);
	overIcon.iconAnchor = new GPoint(16, 37);
	overIcon.infoWindowAnchor = new GPoint(16, 5);
	overIcon.infoShadowAnchor = new GPoint(13, 13); 
    
    var marker = new GMarker(point, overIcon);        
	
    GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
    });
    
    return marker;
}

function createStartMarker(point) {
    var overIcon = new GIcon();
	overIcon.image = "/LegLoggerWeb/jsp/images/map/start.png";
	overIcon.iconSize = new GSize(18, 32);
	overIcon.iconAnchor = new GPoint(9, 32);
	overIcon.infoWindowAnchor = new GPoint(9, 5);
	overIcon.infoShadowAnchor = new GPoint(13, 13); 
    var marker = new GMarker(point, overIcon);        
    return marker;
}

function createFinishMarker(point,html,time,distance) {
    // FF 1.5 fix
    html = '<div style="white-space:nowrap;"><b>' + html + '</b><br>Distance: ' + distance + '<br>Time: ' + time + '</div>';
    
    var overIcon = new GIcon();
	overIcon.image = "/LegLoggerWeb/jsp/images/map/finish.png";
	overIcon.iconSize = new GSize(18, 32);
	overIcon.iconAnchor = new GPoint(9, 32);
	overIcon.infoWindowAnchor = new GPoint(9, 5);
	overIcon.infoShadowAnchor = new GPoint(13, 13); 
    
    var marker = new GMarker(point, overIcon);        
	
    GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
    });
    
    return marker;
}
			    
function getMapData(input, response) {
	if (response != '') {
		if (GBrowserIsCompatible()) {
		    // Speed and altitude
		    var heightData = [];			    
			var speedData = [];
			var heartRateData = [];
			var split = 1;

			// Process result 
  			rsp = req.responseXML.documentElement;
  			var map = null;
  			if (document.getElementById("map") != null) {
  				map = new google.maps.Map2(document.getElementById("map"));
  				map.clearOverlays();
  			}
  			
  			var altLabel = 'Altitude (m)';
  			var speedLabel = 'Speed (km/h)';
  			var distanceUnit = ' km';
  			var speedUnit = ' km/h';
  			var altUnit = ' m';
  			var heartRateLabel = 'Heart rate (bpm)';
  			var heartRateUnit = ' bmp';
  			var timeUnit = "";
  			
  			// Get unit and adapt graph labels
  			var customUnit = rsp.getElementsByTagName('unit')[0].firstChild.data;
			if (customUnit == 2) {
  				altLabel = 'Altitude (ft)';
  				speedLabel = 'Speed (mph)';
  				distanceUnit = ' mile';
  				speedUnit = ' mph';
  				altUnit = ' ft';
  			} else if (customUnit == 3) {
  				altLabel = 'Altitude (ft)';
  				speedLabel = 'Speed (kn)';
  				distanceUnit = ' mile';
  				speedUnit = ' kn';
  				altUnit = ' ft';
			}

			var bounds = new GLatLngBounds(); 			
  			var e = rsp.getElementsByTagName('pos');

  			// Check GPS and heart rate
  			var isGPSData = rsp.getElementsByTagName('hasGPSData')[0].firstChild.data;
  			var isHRData = rsp.getElementsByTagName('hasHRData')[0].firstChild.data;

  			var hrData = null;
  			if (isHRData == 1) {
	  			hrData = new google.visualization.DataTable();
				if (isGPSData == 1)
					hrData.addColumn('string', 'Distance' + distanceUnit);
	  			else
	  				hrData.addColumn('string', 'Time');
				hrData.addColumn('number', 'Heart rate' + heartRateUnit);
				hrData.addRows(e.length);
			}
  			
  			if (e[0].getElementsByTagName('lat') == null) {
  				// No GPS data.
  				return;
  			}
  			
  			var polyline = new GPolyline([
				new GLatLng(e[0].getElementsByTagName('lat')[0].firstChild.data, e[0].getElementsByTagName('lng')[0].firstChild.data),
				new GLatLng(e[1].getElementsByTagName('lat')[0].firstChild.data, e[1].getElementsByTagName('lng')[0].firstChild.data)
			], "#ff0000", 3, 0.7);
			
			heightData.push([e[0].getElementsByTagName('dist')[0].firstChild.data, e[0].getElementsByTagName('alt')[0].firstChild.data]);
			heightData.push([e[1].getElementsByTagName('dist')[0].firstChild.data, e[1].getElementsByTagName('alt')[0].firstChild.data]);
			speedData.push([e[0].getElementsByTagName('dist')[0].firstChild.data, e[0].getElementsByTagName('spd')[0].firstChild.data]);
			speedData.push([e[1].getElementsByTagName('dist')[0].firstChild.data, e[1].getElementsByTagName('spd')[0].firstChild.data]);
			if (isHRData == 1) {
				if (isGPSData == 1)
					hrData.setValue(0, 0, e[0].getElementsByTagName('dist')[0].firstChild.data);
				else 
					hrData.setValue(0, 0, e[0].getElementsByTagName('hrt')[0].firstChild.data);
				hrData.setValue(0, 1, parseInt(e[0].getElementsByTagName('hr')[0].firstChild.data));
				if (isGPSData == 1)
					hrData.setValue(1, 0, e[1].getElementsByTagName('dist')[0].firstChild.data);
				else 
					hrData.setValue(1, 0, e[1].getElementsByTagName('hrt')[0].firstChild.data);
				hrData.setValue(1, 1, parseInt(e[1].getElementsByTagName('hr')[0].firstChild.data));
				
				heartRateData.push([e[0].getElementsByTagName('dist')[0].firstChild.data, parseInt(e[0].getElementsByTagName('hr')[0].firstChild.data)]);
				heartRateData.push([e[1].getElementsByTagName('dist')[0].firstChild.data, parseInt(e[1].getElementsByTagName('hr')[0].firstChild.data)]);
			}
			
			bounds.extend(new GLatLng(e[0].getElementsByTagName('lat')[0].firstChild.data, e[0].getElementsByTagName('lng')[0].firstChild.data));
			bounds.extend(new GLatLng(e[1].getElementsByTagName('lat')[0].firstChild.data, e[1].getElementsByTagName('lng')[0].firstChild.data));
			
			if (map != null) {
				map.addOverlay(polyline);	  			
				map.addControl(new GLargeMapControl());
				map.addControl(new GMapTypeControl());
			}
			
			var firstDataType = e[0].getElementsByTagName('tp')[0].firstChild.data;
			if (firstDataType == 'b') {
				var starterPoint = new GLatLng(e[0].getElementsByTagName('lat')[0].firstChild.data, e[0].getElementsByTagName('lng')[0].firstChild.data);
				var startMarker = createStartMarker(starterPoint);
				map.addOverlay(startMarker);
			}
			
  			for(var i=2; i<e.length; i++) {
  				if (isGPSData == 1) {
					heightData.push([e[i].getElementsByTagName('dist')[0].firstChild.data, e[i].getElementsByTagName('alt')[0].firstChild.data]);
	  				speedData.push([e[i].getElementsByTagName('dist')[0].firstChild.data, e[i].getElementsByTagName('spd')[0].firstChild.data]);
	  				
					var point = new GLatLng(e[i].getElementsByTagName('lat')[0].firstChild.data, e[i].getElementsByTagName('lng')[0].firstChild.data);
	  				polyline.insertVertex(i, point);
	  				bounds.extend(point);
	  				
	  				//var leg = e[i].getElementsByTagName('leg')[0].firstChild.data;
	  				var dataType = e[i].getElementsByTagName('tp')[0].firstChild.data;
	  				
	  				if (dataType == 's' || dataType == 'f') {
						// Create a marker
	  					var leg = e[i].getElementsByTagName('leg')[0].firstChild.data;
						var tt = e[i].getElementsByTagName('time')[0].firstChild.data;
	  					var dd = e[i].getElementsByTagName('ldist')[0].firstChild.data;
	  					var ah = null;
	  					var mh = null;
						if (isHRData == 1) {
	  						ah = e[i].getElementsByTagName('ah')[0].firstChild.data;
	  						mh = e[i].getElementsByTagName('mh')[0].firstChild.data;
						}
						
  						var marker;
  						if (dataType == 's') {
  							marker = createMarker(point,leg,tt,dd,split,ah,mh);
  						} else {
  							marker = createFinishMarker(point,leg,tt,dd);	
  						}
  						map.addOverlay(marker);
						split++;
					}
  				}
  				
				if (isHRData == 1) {
					if (isGPSData == 1) {
						hrData.setValue(i, 0, e[i].getElementsByTagName('dist')[0].firstChild.data);
					} else { 
						hrData.setValue(i, 0, e[i].getElementsByTagName('hrt')[0].firstChild.data);
					}
					hrData.setValue(i, 1, parseInt(e[i].getElementsByTagName('hr')[0].firstChild.data));
					
					heartRateData.push([e[i].getElementsByTagName('dist')[0].firstChild.data, parseInt(e[i].getElementsByTagName('hr')[0].firstChild.data)]);
				}
  			}	 
  			
  			// Print altitude and speed in chart
  			if (isGPSData == 1) {
				$.plot($("#altitudespeedchart"), [ { label: altLabel,  data: heightData, lines: { fill: true }, yaxis: 1}, {label: speedLabel,  data: speedData, lines: { fill: true }, yaxis: 2} ], {
	                xaxis: { tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) + distanceUnit }},
					yaxis: { tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) + altUnit }},
					y2axis: { tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) + speedUnit }},
					legend: { position: 'nw' } });

	  			map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
	  			timeUnit = distanceUnit;
			}

  			// Print heart rate in chart
  			if (isHRData == 1 && isGPSData == 0) {
  				var chart = new google.visualization.AreaChart(document.getElementById('heartratechart'));
				chart.draw(hrData, { width : 650, height : 300, pointSize : 0, legend : 'none',
					hAxis : {title : 'Time (HH:MM:SS)'} , 
					vAxis : {title : 'Heart rate (bmp)'}}); 				
			} else if (isHRData == 1 && isGPSData == 1) {
				$.plot($("#heartratechart"), [ { label: heartRateLabel, data: heartRateData, lines: { fill: true }} ], {
	                xaxis: { tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) + timeUnit }},
					yaxis: { tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) + heartRateUnit }},
					legend: { position: 'nw' } });
			}
  			
  			if (isHRData == 1 && rsp.getElementsByTagName('hrZone1') != null) {
  				var zone1 = rsp.getElementsByTagName('hrZone1')[0].firstChild.data;
  				var zone2 = rsp.getElementsByTagName('hrZone2')[0].firstChild.data;
  				var zone3 = rsp.getElementsByTagName('hrZone3')[0].firstChild.data;
  				var zone4 = rsp.getElementsByTagName('hrZone4')[0].firstChild.data;
  				var zone5 = rsp.getElementsByTagName('hrZone5')[0].firstChild.data;

		        var zoneData = new google.visualization.DataTable();
		        zoneData.addColumn('string', 'Zone');
		        zoneData.addColumn('number', 'Percentage of exercise duration (%)');
		        zoneData.addRows(5);
		        zoneData.setValue(0, 0, '1 (<60%)');
		        zoneData.setValue(0, 1, parseInt(zone1));
		        zoneData.setValue(1, 0, '2 (60-70%)');
		        zoneData.setValue(1, 1, parseInt(zone2));
		        zoneData.setValue(2, 0, '3 (70-80%)');
		        zoneData.setValue(2, 1, parseInt(zone3));
		        zoneData.setValue(3, 0, '4 (80-90%)');
		        zoneData.setValue(3, 1, parseInt(zone4));
		        zoneData.setValue(4, 0, '5 (>90%)');
		        zoneData.setValue(4, 1, parseInt(zone5));

  				var zoneChart = new google.visualization.ColumnChart(document.getElementById('heartratezonechart'));
				zoneChart.draw(zoneData, {width: 650, height: 300, legend: 'none', title: 'Heart Rate Zones', hAxis: {title: 'Zone'}, vAxis: {title: 'Percentage of exercise duration (%)'}, colors:['#edc240']});
  			}
		}
	} else {
		// Call server
		var d = new Date();  			
		var curr_min = d.getSeconds(); 
		// Use seconds only to make sure we don't use the cache
		url = '/LegLoggerWeb/leg/editLegAction.do?dispatch=getMapData&id=' + input + '&currentTime=' + curr_min;
		loadXMLDoc(url);
	}
}		

google.load("maps", "2.x");
 
// Call this function when the page has been loaded
function initialize() {
	if (GBrowserIsCompatible()) {
		var map = new google.maps.Map2(document.getElementById("map"));
		map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
	}
}

google.setOnLoadCallback(initialize);