wp-gpx-maps/WP-GPX-Maps.js

/*

	WP-GPX-Maps

*/

var t;
var funqueue = [];
var infowindow;
var mapLoading = false;
var CustomMarker;

var wrapFunction = function(fn, context, params) {
    return function() {
        fn.apply(context, params);
    };
}

function wpgpxmaps(params)
{
	funqueue.push( wrapFunction(_wpgpxmaps, this, [params]));
	unqueue();
}

function unqueue()
{
	if (google == undefined || google.maps == undefined || Highcharts == undefined)
	{
		t = setTimeout("unqueue()",200);
	}
	else
	{
		setup();
		while (funqueue.length > 0) {
			(funqueue.shift())();   
		}
	}
}

function setup()
{

	CustomMarker = function( map, latlng, src, img_w, img_h) {
		this.latlng_ = latlng;
		this.setMap(map);
		this.src_ = src;
		this.img_w_ = img_w;
		this.img_h_ = img_h;
	}

	CustomMarker.prototype = new google.maps.OverlayView();

	CustomMarker.prototype.draw = function() {
	
		var me = this;

		// Check if the el has been created.
		var el = this.img_;
		if (!el) {

			this.img_ = document.createElement('img');
			el = this.img_;
			el.style.cssText = "width:"+(this.img_w_/3)+"px;height:"+(this.img_h_/3)+"px;";
			el.setAttribute("class", "myngimages");
			el.setAttribute("lat",this.latlng_.lat());
			el.setAttribute("lon",this.latlng_.lng());
			el.src=this.src_;

			google.maps.event.addDomListener(el, "click", function(event) {
				google.maps.event.trigger(me, "click", el);
			});	
			
			google.maps.event.addDomListener(el, "mouseover", function(event) {
				var _t = el.style.top.replace('px','');
				var _l = el.style.left.replace('px','');
				jQuery(el).animate({
					height: me.img_h_,
					width : me.img_w_,
					top   : _t - (me.img_h_ / 3),
					left  : _l - (me.img_w_ / 3),
					'z-index' : 100
				  }, 100);
			});

			google.maps.event.addDomListener(el, "mouseout", function(event) {
				jQuery(el).animate({
					height: me.img_h_ / 3,
					width: me.img_w_ / 3,
					top   : me.orig_top,
					left  : me.orig_left,
					'z-index' : 1
				  }, 100);
			});	

			// Then add the overlay to the DOM
			var panes = this.getPanes();
			panes.overlayImage.appendChild(el);
		}

		// Position the overlay 
		var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
			if (point) {
			  el.style.left = point.x + 'px';
			  el.style.top = point.y + 'px';
			  this.orig_left = point.x;
			  this.orig_top = point.y;
			}
	};

	CustomMarker.prototype.remove = function() {
		// Check if the overlay was on the map and needs to be removed.
		if (this.img_) {
		  this.img_.parentNode.removeChild(this.img_);
		  this.img_ = null;
		}
	};

}

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}


function _wpgpxmaps(params)
{

	var targetId = params.targetId;
	var mapType = params.mapType;
	var mapData = params.mapData;
	var graphDist = params.graphDist;
	var graphEle = params.graphEle;
	var graphSpeed = params.graphSpeed;
	var graphHr = params.graphHr;
	var graphCad = params.graphCad;
	var graphGrade = params.graphGrade;
	var waypoints = params.waypoints;
	var unit = params.unit;
	var unitspeed = params.unitspeed;
	var color1 = params.color1;
	var color2 = params.color2;
	var color3 = params.color3;
	var color4 = params.color4;
	var color5 = params.color5;
	var color6 = params.color6;
	var chartFrom1 = params.chartFrom1;
	var chartTo1 = params.chartTo1;
	var chartFrom2 = params.chartFrom2;
	var chartTo2 = params.chartTo2;
	var startIcon = params.startIcon;
	var waypointIcon = params.waypointIcon;
	var endIcon = params.endIcon;
	var currentIcon = params.currentIcon;
	var zoomOnScrollWheel = params.zoomOnScrollWheel;
	var lng = params.langs;
	var pluginUrl = params.pluginUrl;
	
	// Unit of measure settings
	var l_s;
	var l_x;
	var l_y;
	var l_grade = { suf : "%", dec : 1 };
	var l_hr = { suf : "", dec : 0 };
	var l_cad = { suf : "", dec : 0 };
	
	var el = document.getElementById("wpgpxmaps_" + targetId);
	var el_map = document.getElementById("map_" + targetId);
	var el_chart = document.getElementById("chart_" + targetId);
	var el_report = document.getElementById("report_" + targetId);
	
	var mapWidth = el_map.style.width;
	
	var mapTypeIds = [];
	for(var type in google.maps.MapTypeId) {
		mapTypeIds.push(google.maps.MapTypeId[type]);
	}
	mapTypeIds.push("OSM1");
	mapTypeIds.push("OSM2");
	mapTypeIds.push("OSM3");
	mapTypeIds.push("OSM4");
	mapTypeIds.push("OSM5");
	mapTypeIds.push("OSM6");
	
	var ngImageMarkers = [];
	
	switch (mapType)
	{
		case 'TERRAIN': { mapType = google.maps.MapTypeId.TERRAIN; break;}
		case 'SATELLITE': { mapType = google.maps.MapTypeId.SATELLITE; break;}
		case 'ROADMAP': { mapType = google.maps.MapTypeId.ROADMAP; break;}
		case 'OSM1': { mapType = "OSM1"; break;}
		case 'OSM2': { mapType = "OSM2"; break;}
		case 'OSM3': { mapType = "OSM3"; break;}
		case 'OSM4': { mapType = "OSM4"; break;}
		case 'OSM5': { mapType = "OSM5"; break;}
		case 'OSM6': { mapType = "OSM6"; break;}
		default: { mapType = google.maps.MapTypeId.HYBRID; break;}
	}

	var map = new google.maps.Map(el_map, {
		mapTypeId: mapType,
		scrollwheel: (zoomOnScrollWheel == 'true'),
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
			mapTypeIds: mapTypeIds
		}
	}); 
	
	map.mapTypes.set("OSM1", new google.maps.ImageMapType({
		getTileUrl: function(coord, zoom) {
			return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
		},
		tileSize: new google.maps.Size(256, 256),
		name: "OSM",
		alt : "Open Street Map",
		maxZoom: 18
	}));
	
	map.mapTypes.set("OSM2", new google.maps.ImageMapType({
		getTileUrl: function(coord, zoom) {
			return "http://a.tile.opencyclemap.org/cycle/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
		},
		tileSize: new google.maps.Size(256, 256),
		name: "OCM",
		alt : "Open Cycle Map",
		maxZoom: 18
	}));
	
	map.mapTypes.set("OSM4", new google.maps.ImageMapType({
		getTileUrl: function(coord, zoom) {
			return "http://a.tile2.opencyclemap.org/transport/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
		},
		tileSize: new google.maps.Size(256, 256),
		name: "OCM-Tran",
		alt : "Open Cycle Map - Transport",
		maxZoom: 18
	}));
	
	map.mapTypes.set("OSM5", new google.maps.ImageMapType({
		getTileUrl: function(coord, zoom) {
			return "http://a.tile3.opencyclemap.org/landscape/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
		},
		tileSize: new google.maps.Size(256, 256),
		name: "OCM-Land",
		alt : "Open Cycle Map - Landscape",
		maxZoom: 18
	}));
	
	map.mapTypes.set("OSM6", new google.maps.ImageMapType({
		getTileUrl: function(coord, zoom) {
			return "http://tile2.maptoolkit.net/terrain/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
		},
		tileSize: new google.maps.Size(256, 256),
		name: "MTK-Terr",
		alt : "MapToolKit - Terrain",
		maxZoom: 18
	}));

	
	// FULL SCREEN BUTTON
	var controlDiv = document.createElement('div');
	controlDiv.style.padding = '5px';

	// Set CSS for the control border
	var controlUI = document.createElement('img');
	controlUI.src = pluginUrl + "/wp-gpx-maps/img/goFullScreen.png";
	controlUI.style.cursor = 'pointer';
	controlUI.title = lng.goFullScreen;
	controlDiv.appendChild(controlUI);

	// Setup the click event listeners
	google.maps.event.addDomListener(controlUI, 'click', function(event) {
		var isFullScreen = (controlUI.isfullscreen == true);
		var fullScreenCss = "position: absolute;left:0;top:0;";
		var mapDiv = map.getDiv();
		var center = map.getCenter();
		
		if (isFullScreen)
		{
			map.setOptions( { scrollwheel : (zoomOnScrollWheel == 'true') } );
			jQuery(mapDiv).css("position", 'relative').
			  css('top', 0).
			  css("width", controlUI.googleMapWidth).
			  css("height", controlUI.googleMapHeight).
			  css("z-index", '');
			google.maps.event.trigger(map, 'resize');
			map.setCenter(center);
			controlUI.src = pluginUrl + "/wp-gpx-maps/img/goFullScreen.png";	
			controlUI.title = lng.gofullscreen;
		}
		else
		{
			map.setOptions( { scrollwheel : true } );		
			controlUI.googleMapWidth = jQuery(mapDiv).css('width');
			controlUI.googleMapHeight = jQuery(mapDiv).css('height');		
			jQuery(mapDiv).css("position", 'fixed').
			  css('top', 0).
			  css('left', 0).
			  css("width", '100%').
			  css("height", '100%').
			  css("z-index", '100');
			jQuery("#wpadminbar").each(function(){
				jQuery(mapDiv).css('top', jQuery(this).height());
			});
			google.maps.event.trigger(map, 'resize');
			map.setCenter(center);
			controlUI.src = pluginUrl + "/wp-gpx-maps/img/exitFullFcreen.png";
			controlUI.title = lng.exitFullFcreen;
		}
		controlUI.isfullscreen = !isFullScreen;
		return false;			
	});
	
	controlDiv.index = 1;
	map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
	
	var bounds = new google.maps.LatLngBounds();
	
	// Print WayPoints
	if (waypoints != '')
	{

		var image = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/flag.png',
			new google.maps.Size(32, 32),
			new google.maps.Point(0,0),
			new google.maps.Point(16, 32)
		);
		var shadow = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/flag.shadow.png',
			new google.maps.Size(59, 32),
			new google.maps.Point(0,0),
			new google.maps.Point(16, 32)
		);
		
		if (waypointIcon!='')
		{
			image = new google.maps.MarkerImage(waypointIcon);
			shadow = '';
		}		
		
		for (i=0; i < waypoints.length; i++) 
		{
			var lat= waypoints[i][0];
			var lon= waypoints[i][1];
			addWayPoint(map, image, shadow, lat, lon, waypoints[i][2], waypoints[i][3]);
			bounds.extend(new google.maps.LatLng(lat, lon));
		}
	}
	
	// Print Images
	
	jQuery("#ngimages_" + targetId).attr("style","display:block;position:absolute;left:-50000px");
	jQuery("#ngimages_" + targetId + " span").each(function(){
	
		var imageLat  = jQuery(this).attr("lat");
		var imageLon  = jQuery(this).attr("lon");
		
		jQuery("img",this).each(function() {
		
			jQuery(this).load(function(){

				var imageUrl  = jQuery(this).attr("src");
				var img_w = jQuery(this).width();
				var img_h = jQuery(this).height();
				
				imageLat = imageLat.replace(",", ".");
				imageLon = imageLon.replace(",", ".");
				
				var p = new google.maps.LatLng(imageLat, imageLon);
				bounds.extend(p);

				var mc = new CustomMarker(map, p, imageUrl, img_w, img_h );
				
				ngImageMarkers.push(mc);
				
				google.maps.event.addListener(mc, "click", function(div) {
					var lat = div.getAttribute("lat");
					var lon = div.getAttribute("lon");
					var a = getClosestImage(lat,lon,targetId).childNodes[0];			
					if (a)
					{
						a.click();
					}
				});

			});
		
			if (jQuery(this).width() + jQuery(this).height() > 0)
			{
				jQuery(this).trigger("load");
			}

		});
	
	});
	
	/*
	
	// Nextgen Pro Lightbox FIX
	var _xx = jQuery("#ngimages_" + targetId + " .nextgen_pro_lightbox");
	if (_xx.length > 0)
	{
	
		var rnd1 = Math.random().toString(36).substring(7);
		var rnd2 = Math.random().toString(36).substring(7);
	
		//get first gallery without images
		for (var _temp in galleries) {  
			var _gal = galleries[_temp];
			
			if (_gal.source == "random_images" && _gal.wpgpxmaps != true )
			{
			
				_gal.source == "galleries";
				_gal.wpgpxmaps = true;
				_transient_id = _temp.replace("gallery_","")
				_gal["entity_ids"] = [];
				_gal["image_ids"] = [];
				_gal["gallery_ids"] = [96];
				for (var i=0;i<_xx.length;i++)
				{ 
					var __xx = jQuery(_xx[i]);
					__xx.attr("data-nplmodal-gallery-id", _transient_id);
					_gal["image_ids"].push(__xx.attr("data-image-id"));			
				}
				break;
			}
		}
	}
	*/
	
	if ( jQuery("#ngimages_" + targetId + " span").length > 0 )
	{
	
		// Set CSS for the control border
		var controlUIhi = document.createElement('img');
		controlUIhi.src = pluginUrl + "/wp-gpx-maps/img/hideImages.png";
		controlUIhi.style.cursor = 'pointer';
		controlUIhi.title = lng.hideImages;
		controlDiv.appendChild(controlUIhi);

		// Setup the click event listeners
		google.maps.event.addDomListener(controlUIhi, 'click', function(event) {
			var isImagesHidden = (controlUIhi.isImagesHidden == true);
			var fullScreenCss = "position: absolute;left:0;top:0;";
			var mapDiv = map.getDiv();
			var center = map.getCenter();
			
			if (isImagesHidden)
			{
				for (var i=0; i<ngImageMarkers.length; i++) {
					ngImageMarkers[i].setMap(map);
				}			
				controlUIhi.src = pluginUrl + "/wp-gpx-maps/img/hideImages.png";	
				controlUIhi.title = lng.hideImages;
			}
			else
			{
				for (var i=0; i<ngImageMarkers.length; i++) {
					ngImageMarkers[i].setMap(null);
				}			
				controlUIhi.src = pluginUrl + "/wp-gpx-maps/img/showImages.png";
				controlUIhi.title = lng.showImages;
			}
			controlUIhi.isImagesHidden = !isImagesHidden;
			return false;			
		});

	}
	
	
	// Print Track
	if (mapData != '')		
	{
		var points = [];
		var lastCut=0;
		var polylinenes = [];
		var polyline_number=0;
		var color=0;
		for (i=0; i < mapData.length; i++) 
		{	
			if (mapData[i] == null)
			{
			

					color=color1[polyline_number % color1.length];


				var poly = new google.maps.Polyline({
					path: points.slice(lastCut,i),
					strokeColor: color,
					strokeOpacity: .7,
					strokeWeight: 4,
					map: map
				});
				polylinenes.push(poly);
				lastCut=i;
				polyline_number= polyline_number +1;
				//var p = new google.maps.LatLng(mapData[i-1][0], mapData[i-1][1]);
				//points.push(p);
				//bounds.extend(p);
			}
			else
			{
				var p = new google.maps.LatLng(mapData[i][0], mapData[i][1]);
				points.push(p);
				bounds.extend(p);			
			}
		}
		
		if (points.length != lastCut)
		{
				if ( polyline_number < color1.length)
				{
					color=color1[polyline_number];
				}
				else
				{
					color=color1[color1.length-1];
				}
			var poly = new google.maps.Polyline({
				path: points.slice(lastCut),
				strokeColor: color,
				strokeOpacity: .7,
				strokeWeight: 4,
				map: map
			});
			polylinenes.push(poly);			
			currentPoints = [];
            polyline_number= polyline_number +1;
		}
		
		if (startIcon != '')
		{
			var startIconImage = new google.maps.MarkerImage(startIcon);
			var startMarker = new google.maps.Marker({
					  position: points[0],
					  map: map,
					  title: "Start",
					  animation: google.maps.Animation.DROP,
					  icon: startIconImage,
					  zIndex: 10
				  });

		}

		if (endIcon != '')
		{
			var endIconImage = new google.maps.MarkerImage(endIcon);
			var startMarker = new google.maps.Marker({
					  position: points[ points.length -1 ],
					  map: map,
					  title: "Start",
					  animation: google.maps.Animation.DROP,
					  icon: endIconImage,
					  zIndex: 10
				  });
		
		}

		var first = getItemFromArray(mapData,0)
		
		if (currentIcon == '')
		{
			currentIcon = "http://maps.google.com/mapfiles/kml/pal4/icon25.png";
		}
		
		var current = new google.maps.MarkerImage(currentIcon,
			new google.maps.Size(32, 32),
			new google.maps.Point(0,0),
			new google.maps.Point(16, 16)
		);
		
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(first[0], first[1]),
			title:"Start",
			icon: current,
			map: map,
			zIndex: 10
		});
		
		for (i=0; i < polylinenes.length; i++) 
		{	

			google.maps.event.addListener(polylinenes[i],'mouseover',function(event){
				if (marker)
				{
					marker.setPosition(event.latLng);	
					marker.setTitle(lng.currentPosition);
					if (hchart)
					{
						var tooltip = hchart.tooltip;
						var l1 = event.latLng.lat();
						var l2 = event.latLng.lng();
						var ci = getClosestIndex(mapData,l1,l2);
						var items = [];
						var seriesLen = hchart.series.length;
						for(var i=0; i<seriesLen;i++)
						{
							items.push(hchart.series[i].data[ci]);
						}
						if (items.length > 0)
							tooltip.refresh(items);
					}
				}
			});		
		}
	}
	
	map.setCenter(bounds.getCenter()); 
	map.fitBounds(bounds);
	
	var controlUIcenter = null;
	var idFirstCenterChanged = true;
	
	google.maps.event.addListener(map, 'center_changed', function() {

		if (idFirstCenterChanged == true)
		{
			idFirstCenterChanged = false;
			return;
		}
	
		if (controlUIcenter == null)
		{
			// Set CSS for the control border
			controlUIcenter = document.createElement('img');
			controlUIcenter.src = pluginUrl + "/wp-gpx-maps/img/backToCenter.png";
			controlUIcenter.style.cursor = 'pointer';
			controlUIcenter.title = lng.backToCenter;
			controlDiv.appendChild(controlUIcenter);

			// Setup the click event listeners
			google.maps.event.addDomListener(controlUIcenter, 'click', function(event) {
				map.setCenter(bounds.getCenter()); 
				map.fitBounds(bounds);
				controlDiv.removeChild(controlUIcenter);
				controlUIcenter = null;
				return false;			
			});		
		}

	});
	
	var graphh = jQuery('#hchart_' + params.targetId).css("height");
	
	if (graphDist != '' && (graphEle != '' || graphSpeed != '' || graphHr != '' || graphCad != '') && graphh != "0px")
	{

		var valLen = graphDist.length;
	
		var l_y_arr = [];
		
		if (unit=="1")
		{
			l_x = { suf : "mi", dec : 1 };
			l_y = { suf : "ft", dec : 0 };
		}
		else if (unit=="2")
		{
			l_x = { suf : "km", dec : 1 };
			l_y = { suf : "m", dec : 0 };
		}
		else if (unit=="3")
		{
			l_x = { suf : "NM", dec : 1 };
			l_y = { suf : "m", dec : 0 };
		}		
		else if (unit=="4")
		{
			l_x = { suf : "mi", dec : 1 };
			l_y = { suf : "m", dec : 0 };
		}
		else
		{
			l_x = { suf : "m", dec : 0 };
			l_y = { suf : "m", dec : 0 };
		}
		
		var nn = 1111.1;
		var _nn = nn.toLocaleString();
		var _nnLen = _nn.length;
		var decPoint = _nn.substring(_nnLen - 2, _nnLen - 1);
		var thousandsSep = _nn.substring(1, 2);
		
		if (decPoint == "1")
			decPoint = ".";
			
		if (thousandsSep == "1")
			thousandsSep = "";		
			
		// define the options
		var hoptions = {
			chart: {
				renderTo: 'hchart_' + params.targetId,
				type: 'area',
				events: {
					selection: function(event) {

						if (event.xAxis) {
						
							el_report.innerHTML = 'Zoom: '+ (event.xAxis[0].min).toFixed(l_x.dec) + ' ' + l_x.suf + ' -> '+ (event.xAxis[0].max).toFixed(decPoint) + ' ' + l_x.suf + '<br />';						
						
							var seriesLength = event.currentTarget.series.length;
						
							for (var i = 0; i < seriesLength; i++) {
							
								var dataX = {value: 0, count: 0};
								
								var serie = event.currentTarget.series[i];
								var points = serie.points;
								var min = event.xAxis[0].min, max = event.xAxis[0].max;
								
								for (var j = 0; j < points.length; j++) {
									if (points[j].x >= min && points[j].x <= max) {
										dataX.value += points[j].y;
										dataX.count +=1;
									}
								}
								
								var name = serie.name;
								
								if (name == lng.altitude) {
									el_report.innerHTML += name + ' avg: ' + (dataX.value / dataX.count).toFixed(l_y.dec) + " " + l_y.suf + "<br />";
								} else if (name == lng.speed) {
									el_report.innerHTML += name + ' avg: ' + (dataX.value / dataX.count).toFixed(l_s.dec) + " " + l_s.suf + "<br />";
								} else if (name == lng.grade) {
									el_report.innerHTML += name + ' avg: ' + (dataX.value / dataX.count).toFixed(l_grade.dec) + " " + l_grade.suf + "<br />";
								} else if (name == lng.cadence) {
									el_report.innerHTML += name + ' avg: ' + (dataX.value / dataX.count).toFixed(l_cad.dec) + " " + l_cad.suf + "<br />";
								} else if (name == lng.heartRate) {
									el_report.innerHTML += name + ' avg: ' + (dataX.value / dataX.count).toFixed(l_hr.dec) + " " + l_hr.suf + "<br />";
								} else
								{
									el_report.innerHTML += serie.name + ' avg: ' + dataX.value / dataX.count + "<br />";
								}

							}

							el_report.innerHTML += "<br />"
							
						} else {
							el_report.innerHTML = '';
						}
					}
				},
				zoomType: 'x'
			},
			title: {
				text: null
			},
			xAxis: {
				type: 'integer',
				//gridLineWidth: 1,
				//tickInterval: 1000,
				labels: {
					formatter: function() {
						return Highcharts.numberFormat(this.value, l_x.dec,decPoint,thousandsSep) + l_x.suf;
					}
				}
			},
			yAxis: [],
			legend: {
				align: 'center',
				verticalAlign: 'top',
				y: -5,
				floating: true,
				borderWidth: 0
			},
			tooltip: {
				shared: true,
				crosshairs: true,
				formatter: function() {
					if (marker)
					{
						var hchart_xserie = hchart.xAxis[0].series[0].data;
						for(var i=0; i<hchart_xserie.length;i++){
							var item = hchart_xserie[i];
							if(item.x == this.x)
							{
								var point = getItemFromArray(mapData,i)
								if (point)
								{
									marker.setPosition(new google.maps.LatLng(point[0],point[1]));
								}
								marker.setTitle(lng.currentPosition);
								i+=10000000;
							}
						}			
					}
					var tooltip = "<b>" + Highcharts.numberFormat(this.x, l_x.dec,decPoint,thousandsSep) + l_x.suf + "</b><br />"; 
					for (i=0; i < this.points.length; i++)
					{
						tooltip += this.points[i].series.name + ": " + Highcharts.numberFormat(this.points[i].y, l_y_arr[i].dec,decPoint,thousandsSep) + l_y_arr[i].suf + "<br />"; 					
					}
					return tooltip;
				}
			},
			plotOptions: {
				area: {
					fillOpacity: 0.1,
					connectNulls : true,
					marker: {
						enabled: false,
						symbol: 'circle',
						radius: 2,
						states: {
							hover: {
								enabled: true
							}
						}
					}					
				}
			},
			credits: {
				enabled: false
			},	
			series: []
		};
	
		if (graphEle != '')
		{
			
			var eleData = [];
			var myelemin = 99999;
			var myelemax = -99999;
	
			for (i=0; i<valLen; i++) 
			{
				if (graphDist[i] != null)
				{
					var _graphEle = graphEle[i];
					eleData.push([graphDist[i],_graphEle]);
					if (_graphEle > myelemax) 
						myelemax = _graphEle; 
					if (_graphEle < myelemin) 
						myelemin = _graphEle;
				}
			}

			var yaxe = { 
				title: { text: null },
				labels: {
					align: 'left',
					formatter: function() {
						return Highcharts.numberFormat(this.value, l_y.dec,decPoint,thousandsSep) + l_y.suf;
					}
				}
			}
	
			if ( chartFrom1 != '' )
			{
				yaxe.min = chartFrom1;
				yaxe.startOnTick = false;
			}
			else { 
				yaxe.min = myelemin; 
			}
			
			if ( chartTo1 != '' )
			{
				yaxe.max = chartTo1;
				yaxe.endOnTick = false;
			}
			else { 
				yaxe.max = myelemax; 
			}
								
			hoptions.yAxis.push(yaxe);
			hoptions.series.push({
									name: lng.altitude,
									lineWidth: 1,
									marker: { radius: 0 },
									data : eleData,
									color: color2,
									yAxis: hoptions.series.length
								});			
			
			l_y_arr.push(l_y);
		}
		
		if (graphSpeed != '')
		{
			
			if (unitspeed == '5') // knots
			{
				l_s = { suf : "knots", dec : 2 };
			} 
			else if (unitspeed == '4') // min/miles
			{
				l_s = { suf : "min/mi", dec : 2 };
			} 
			else if (unitspeed == '3') // min/km
			{
				l_s = { suf : "min/km", dec : 2 };
			} 
			else if (unitspeed == '2') // miles/h
			{
				l_s = { suf : "mi/h", dec : 0 };
			} 
			else if (unitspeed == '1') // km/h
			{
				l_s = { suf : "km/h", dec : 0 };
			} 
			else
			{
				l_s = { suf : "m/s", dec : 0 };
			}
			
			var speedData = [];
		
			for (i=0; i<valLen; i++) 
			{
				if (graphDist[i] != null)
					speedData.push([graphDist[i],graphSpeed[i]]);
			}

			var yaxe = { 
				title: { text: null },
				labels: {
					//align: 'right',
					formatter: function() {
						return Highcharts.numberFormat(this.value, l_s.dec,decPoint,thousandsSep) + l_s.suf;
					}
				},
				opposite: true
			}
						
			if ( chartFrom2 != '' )
			{
				yaxe.min = chartFrom2;
				yaxe.startOnTick = false;				
			}
			
			if ( chartTo2 != '' )
			{
				yaxe.max = chartTo2;
				yaxe.endOnTick = false;				
			}
								
			hoptions.yAxis.push(yaxe);
			hoptions.series.push({
									name: lng.speed,
									lineWidth: 1,
									marker: { radius: 0 },
									data : speedData,
									color: color3,
									yAxis: hoptions.series.length
								});			
			
			l_y_arr.push(l_s);
		}
		
		if (graphHr != '')
		{
			
			var hrData = [];
		
			for (i=0; i<valLen; i++) 
			{
				if (graphDist[i] != null)
				{
					var c = graphHr[i];
					if (c==0)
						c = null;
					hrData.push([graphDist[i],c]);				
				}
			}

			var yaxe = { 
				title: { text: null },
				labels: {
					//align: 'right',
					formatter: function() {
						return Highcharts.numberFormat(this.value, l_hr.dec,decPoint,thousandsSep) + l_hr.suf;
					}
				},
				opposite: true
			}

			hoptions.yAxis.push(yaxe);
			hoptions.series.push({
									name: lng.heartRate,
									lineWidth: 1,
									marker: { radius: 0 },
									data : hrData,
									color: color4,
									yAxis: hoptions.series.length
								});			
			
			l_y_arr.push(l_hr);
		}
		
		if (graphCad != '')
		{
			
			var cadData = [];
		
			for (i=0; i<valLen; i++) 
			{
				if (graphDist[i] != null)
				{
					var c = graphCad[i];
					if (c==0)
						c = null;
					cadData.push([graphDist[i],c]);
				}
			}

			var yaxe = { 
				title: { text: null },
				labels: {
					//align: 'right',
					formatter: function() {
						return Highcharts.numberFormat(this.value, l_cad.dec,decPoint,thousandsSep) + l_cad.suf;
					}
				},
				opposite: true
			}
								
			hoptions.yAxis.push(yaxe);
			hoptions.series.push({
									name: lng.cadence,
									lineWidth: 1,
									marker: { radius: 0 },
									data : cadData,
									color: color5,
									yAxis: hoptions.series.length
								});			
			
			l_y_arr.push(l_cad);
		}

		if (graphGrade != '')
		{
			
			var cadData = [];
		
			for (i=0; i<valLen; i++) 
			{
				if (graphDist[i] != null)
				{
					var c = graphGrade[i];
					if (c==0)
						c = null;
					cadData.push([graphDist[i],c]);
				}
			}

			var yaxe = { 
				title: { text: null },
				labels: {
					//align: 'right',
					formatter: function() {
						return Highcharts.numberFormat(this.value, l_grade.dec,decPoint,thousandsSep) + l_grade.suf;
					}
				},
				opposite: true
			}
								
			hoptions.yAxis.push(yaxe);
			hoptions.series.push({
									name: lng.grade,
									lineWidth: 1,
									marker: { radius: 0 },
									data : cadData,
									color: color6,
									yAxis: hoptions.series.length
								});			
			
			l_y_arr.push(l_grade);
		}

		var hchart = new Highcharts.Chart(hoptions);
	
	}
	else  {
		jQuery("#hchart_" + params.targetId).css("display","none");
	}
	
}

function addWayPoint(map, image, shadow, lat, lon, title, descr)
{
	var p = new google.maps.LatLng(lat, lon);
	var m = new google.maps.Marker({
						  position: p,
						  map: map,
						  title: title,
						  animation: google.maps.Animation.DROP,
						  shadow: shadow,
						  icon: image,
						  zIndex: 5
					  });
	google.maps.event.addListener(m, 'mouseover', function() {
		if (infowindow)
		{
			infowindow.close(); 		
		}
		var cnt = '';	
		if (title=='')
		{
			cnt = "<div style='text-align:center;'>" + unescape(descr) + "</div>";
		}
		else
		{
			cnt = "<div style='font-size:0.8em; text-align:center;'><b>" + title + "</b><br />" + unescape(descr) + "</div>";
		}
		infowindow = new google.maps.InfoWindow({ content: cnt});
		infowindow.open(map,m);
	});	
}

function getItemFromArray(arr,index)
{
	try
	{
	  return arr[index];
	}
	catch(e)
	{
		return [0,0];
	}
}


function getClosestIndex(points,lat,lon)
{
	var dd=10000;
	var ii=0;
	for (i=0; i < points.length; i++) 
	{
		if (points[i]==null)
			continue;
	
		var d = dist(points[i][0], points[i][1], lat, lon);
		if ( d < dd )
		{
			ii = i;
			dd = d;
		}
	}
	return ii;
}

function getClosestImage(lat,lon,targetId)
{
	var dd=10000;
	var img;
	var divImages = document.getElementById("ngimages_"+targetId);
	var img_spans = divImages.getElementsByTagName("span");   
	for (var i = 0; i < img_spans.length; i++) {   
		var imageLat = img_spans[i].getAttribute("lat");
		var imageLon = img_spans[i].getAttribute("lon");	
					
		imageLat = imageLat.replace(",", ".");
		imageLon = imageLon.replace(",", ".");
		
		var d = dist(imageLat, imageLon, lat, lon);
		if ( d < dd )
		{
			img = img_spans[i];
			dd = d;
		}		
	}
	return img;
}

function isNumeric(input){
    var RE = /^-{0,1}\d*\.{0,1}\d+$/;
    return (RE.test(input));
}

function dist(lat1,lon1,lat2,lon2)
{
	// mathematically not correct but fast
	var dLat = (lat2-lat1);
	var dLon = (lon2-lon1);
	return Math.sqrt(dLat * dLat + dLon * dLon);
}