// Return XML
function grabGraphXML(data) {
	var $points = $(data).find("point");
	var route_id = $(data).find("route_id").eq(0).text();
	var altitude_data = [];
	var heartrate_data = [];
	$points.each(function(i) {
		var $point = $(this);
	
		var altitude = parseFloat($point.find('altitude').eq(0).text());
		var heartrate = parseFloat($point.find('heartrate').eq(0).text());
		var distance = (parseFloat($point.find('distance').eq(0).text()))/1000;
		altitude_data.push([distance,altitude]);
		heartrate_data.push([distance,heartrate]);
	});

	var altitude_line_data = { 
		label: "Altitude", 
		data: altitude_data, 
		lines: { show: true, fill: true },
		color:'#7D7EE8'
	};

	var heartrate_line_data = { 
		label: "Heart Rate", 
		data: heartrate_data, 
		lines: { show: true, fill: true }, 
		color:'#FF0000'
	};
	
	var options = {
		legend: { position: "se" },
		yaxis: { tickFormatter: altitude_format },
		xaxis: {
			tickFormatter: distance_format,
			ticks: 7
		},
		grid: {
			clickable: true,
			backgroundColor: '#FFFFFF',
			borderWidth: 0.5,
			color: '#444444'
		}
	};
	
	$.plot($("#graph"), [ heartrate_line_data, altitude_line_data ], options);
	$("#graph").bind("plotclick", function (e, pos) {
		$('#graph-loading p').text('Loading map info..');
		$('#graph-loading').show();
		grabGraphPoint(pos.x, route_id);
	});
	$('#graph-loading').animate( {opacity: 'hide' },1500);
}

function altitude_format(val, axis) { return ''; }
function distance_format(val, axis) { return val + "km"; }


function grabGraphPoint(distance, route_id) {
	var url = '/routes/'+route_id+'.xml';

	$.ajax({
        type: "GET",
        url: url,
        dataType: "xml",
        success: function(data) {
			var points = data.getElementsByTagName("point");
			for(var i=0; i < points.length; i++) {
				if(distance < points[i].getElementsByTagName('distance')[0].firstChild.nodeValue/1000) {
					if(altitudeMarker != null)
						map.removeOverlay(altitudeMarker);
					// Create the icon for the end point
					var icon = new GIcon();
					icon.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
					icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
					icon.iconSize = new GSize(12, 20);
					icon.shadowSize = new GSize(22, 20);
					icon.iconAnchor = new GPoint(6, 20);
					icon.infoWindowAnchor = new GPoint(5, 1);

					var lat = points[i].getElementsByTagName('latitude')[0].firstChild.nodeValue;
					var lng = points[i].getElementsByTagName('longitude')[0].firstChild.nodeValue;
					var time = points[i].getElementsByTagName('elapsedtime')[0].firstChild.nodeValue;
					var heartrate = new Number(points[i].getElementsByTagName('heartrate')[0].firstChild.nodeValue);
					var altitude = new Number(points[i].getElementsByTagName('altitude')[0].firstChild.nodeValue);
					distance = new Number(distance);
					
					altitudeMarker = new GMarker(new GLatLng(lat, lng), icon);

					$('#overlayAltitude').remove();
					var infoShell = document.createElement('div');
					infoShell.id = "overlayAltitude";
					infoShell.className = "overlay";
					infoShell.innerHTML = '<div class="inner"><a href="#close" onclick="closeInfo(\'Altitude\'); return false;" id="close" class="close">Close</a><p><strong>Heart Rate:</strong> '+heartrate.toFixed(2)+'bpm</p><p><strong>Altitude:</strong> '+altitude.toFixed(2)+'m</p><p><strong>Distance:</strong> '+distance.toFixed(2)+'km</p><p><strong>Time:</strong> '+time+'</p></div>';
					map.getPane(G_MAP_MARKER_PANE).appendChild(infoShell);
					var markerPosition = map.fromLatLngToDivPixel(altitudeMarker.getPoint());
					var overlayBottom = parseInt(markerPosition.y)-(infoShell.offsetHeight+20);
					var overlayLeft = parseInt(markerPosition.x)-110;
					infoShell.style.top = overlayBottom+"px";
					infoShell.style.left = overlayLeft+"px";
					infoShell.style.visibility = "visible";
					map.panTo(altitudeMarker.getPoint());

					GEvent.addListener(altitudeMarker, "click", function() {
						$('#overlayAltitude').show();
						map.panTo(altitudeMarker.getPoint());
					});

					map.addOverlay(altitudeMarker);
					$('#graph-loading').animate( {opacity: 'hide' },1500);
					return true;
				}
			}
		}
	});
}