//If the browser is not Javascript enabled/capable, then let the user know that the map cannot be displayed....
if( !GBrowserIsCompatible() )
{	alert("Sorry, your browser does not support the mapping API");
	exit;
}

var eventCache = new Array();
var gmarkers = [];
var htmls = [];
var nodes = [];
var i = 0;
var html2 = "";
var map = null;
var lastClick = -1;

function EventCache(obj, type, fn)
{	this.obj = obj;
	this.type = type;
	this.fn = fn;
}

function addEvent(obj, type, fn)
{	if(obj.addEventListener)
	{	obj.addEventListener(type, fn, false);
	}
	else
	{	obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
		obj.attachEvent( "on"+type, fn);
	}
	eventCache[eventCache.length] = new EventCache(obj, type, fn);
}

function clearEvents()
{	for (var i = 0; i < eventCache.length; i++)
	{	var evt = eventCache[i];
		try
		{	if (evt.obj && evt.fn)
            {	if (evt.obj.removeEventListener)
                    evt.obj.removeEventListener(evt.type, evt.fn, true);
                else
                    evt.obj.detachEvent("on"+evt.type, evt.fn);
            }
        }
        catch (e)
		{	alert("Error on " + i + " : " + e.message);
        }
    }
}
addEvent(window, "unload", clearEvents);

//Highlight the table row in the sidepanel...activated from the click inside the marker info window
function highlight(a)
{	if (lastClick != -1)
	{	document.getElementById(lastClick).style.background = "none";
	}
	document.getElementById(a).style.background = "#FFCC00";
	document.getElementById(a).scrollIntoView(false);
	lastClick = a;
}

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

//Call this function from body onLoad event in HTML output
function load(lg)
{	var map = new GMap2(document.getElementById("map"));

	switch( lg )
	{	case 'de': var tmp = "Daten werden geladen"; break;
		case 'es': var tmp = "Cargando los datos"; break;
		case 'fr': var tmp = "Chargement des données"; break;
		default: var tmp = "Loading data";
	}
//	loader.show( tmp, true);
	document.getElementById('sidecontent').innerHTML = tmp;
	map.addControl(new GSmallMapControl());
	map.addControl(new GScaleControl());
	map.setCenter( new GLatLng(-13.22, -72.393), 14);
	map.setMapType(G_SATELLITE_MAP);

	//This function creates the map markers
	function createMarker( point, type, title, html, img, lg, cId, zoom )
	{	var info1 = '<div style="overflow:auto; max-height:300px; width:320px">'+html+'</div>';

		//Create the Google icon based on the iconType
		var pticon = new GIcon();
		pticon.image = "icons/" + type + ".png";
		pticon.iconSize		= new GSize(30, 30);
		pticon.iconAnchor	= new GPoint(15, 15);
		pticon.infoWindowAnchor	= new GPoint(15, 15);
		var icon = new GIcon(pticon); imgclass = "PtIcon";

		// The marker is created with the GPoint (first variable passed to function) and the icon created above.
		//This generates the tooltip and graphic representation of the marker (i.e., icon)
		var marker = new GMarker(point, {title:title, icon:pticon});

       		//Attach an event listener to the marker.  Show information in the info window.
		GEvent.addListener(marker, "click", function()
		{	marker.openInfoWindowHtml(info1);
			highlight(cId);
	        });

		//Remove highlight of the table rows in the side panel when the info window is closed.
		GEvent.addListener(marker, "infowindowclose", function()
		{	document.getElementById(cId).style.background="none";
		});

		//HTML for the sidebar DATA window
		//This can be modified with your own CSS...
		gmarkers[i] = marker;
		htmls[i] = info1;
		if( img == undefined || img == '' )	dispimg = '&nbsp;';
		else					dispimg = '<img src="photos/'+img+'" border="0"/>';

		html2 += '<tr id="'+cId+'" onClick="highlight(\''+cId+'\');findMarker(\''+i+'\')" style="cursor:pointer">';
		html2 += '<td style="padding-bottom:4px; padding-top:4px; border-bottom: 2px solid #0000FF;">';
		html2 += '<table width="100%"><tr><td valign="top">';
		html2 += '<img src="'+pticon.image+'" align="left" alt="'+imgclass+'">' + html1 + '</td>';
		html2 += '<td align="right">'+dispimg+'</td></tr></table>';
		html2 += '</td></tr>';
		i++;
	        return marker;
	}

	GDownloadUrl( "get_xml.php", function(data)
	{	var xml = GXml.parse(data);

		var markers = xml.documentElement.getElementsByTagName("trek");
		var points = [];
		for( var i=0; i<markers.length; i++)
		{	points[i] = new GLatLng(
				parseFloat(markers[i].getAttribute("lat")),
				parseFloat(markers[i].getAttribute("lng")) );
			var altitude = markers[i].getAttribute("alt");
		}
		map.addOverlay(new GPolyline(points, "#00FF00", 6, 0.5));

		var items = xml.documentElement.getElementsByTagName("lieu");
		gmarkers = new Array( items.length );

		for( var i=0; i<items.length; i++)
		{	var point = new GLatLng(
				parseFloat(items[i].getElementsByTagName("point")[0].getAttribute("lat")),
				parseFloat(items[i].getElementsByTagName("point")[0].getAttribute("lng")) );

			var altitude = items[i].getElementsByTagName("point")[0].getAttribute("alti");
			if( altitude != null )
			{	alt_mt = Math.floor( altitude );
				alt_ft = Math.floor( altitude/0.3048 );
				switch( lg )
				{	case 'de': altitude = "Höhen: " + alt_mt + " m"; break;
					case 'es': altitude = "Altitude: " + alt_mt + " msnm"; break;
					case 'fr': altitude = "Altitude: " + alt_mt + " m"; break;
					default:   altitude = "Altitude: " + alt_ft + " ft (" + alt_mt + " m)";
				}
				altitude = '<div class="itemalti">' + altitude + '</div>';
			}
			else
				altitude = '';

			var type = items[i].getElementsByTagName("point")[0].getAttribute("type");
			var title = items[i].getElementsByTagName("titre")[0];
			if( title.getAttribute(lg) != null )	title = title.getAttribute(lg);
			else					title = title.getAttribute('xx');

			var desc = items[i].getElementsByTagName("desc")[0];
			if( desc == undefined )
				desc = '';
			else
			{	desc = desc.getAttribute(lg);
				while( desc.search( "{" ) > 0 )	desc = desc.replace( "{", "<" );
				while( desc.search( "}" ) > 0 )	desc = desc.replace( "}", ">" );
				desc = '<div class="itemdesc">' + desc + '</div>';
			}

			var photo = items[i].getElementsByTagName("photo")[0];
			if( photo == undefined )	photo = '';
			else				photo = photo.firstChild.nodeValue;

			var disp = items[i].getElementsByTagName("url")[0];
			if( disp == undefined )	disp = title;
			else			disp = '<a href="'+disp.firstChild.nodeValue+'" target="_blank">'+title+'</a>';

			var zoomin = items[i].getElementsByTagName("zoomin")[0];
			if( zoomin == undefined )	zoomin = 1;
			else				zoomin = zoomin.firstChild.nodeValue;

			var url = items[i].getElementsByTagName("url")[0];
			if( url == undefined )	disp = title;
			else
			{	url = url.firstChild.nodeValue.replace( "$lg$", lg );
				disp = '<a href="'+url+'" target="_blank">'+title+'</a>';
			}

			html1  = '<div class="itemtitle">' + disp + '</div>' + altitude + desc;

			var marker = createMarker( point, type, title, html1, photo, lg, 'click'+i, zoomin );

			switch( lg )
			{	case 'de': var tmp = "Daten werden geladen"; break;
				case 'es': var tmp = "Cargando los datos"; break;
				case 'fr': var tmp = "Chargement des données"; break;
				default: var tmp = "Loading data";
			}
			document.getElementById('sidecontent').innerHTML = tmp+'... '+Math.round(items.length/i*100)+'%';
			map.addOverlay(marker);
		}
        

		switch( lg )
		{	case 'de': var tmp = "Klicken Sie auf einen Ort auf der Liste, um diesen auf der Karte zu finden."; break;
			case 'es': var tmp = "Haga clic en un lugar de la lista para ubicarlo en el mapa"; break;
			case 'fr': var tmp = "Cliquez sur un lieu de la liste pour le situer sur la carte"; break;
			default:   var tmp = "Click on a location of the list to locate it on the map";
		}
		document.getElementById("sidecontent").innerHTML = '<div style="font-size:12px" align="left">'+tmp+'<table cellspacing="0">' + html2 + '</table>';
	});
}