//<![CDATA[

if (GBrowserIsCompatible()) {

	var uniMarkers = []; // stores the markers for the partner, which are to be displayed on the map
	var htmls = []; // stores the html for each marker, which is displayed, when clicked on the marker or the sidebar entry
	var i = 0; // index connecting markers and html	
	var sideBarHtml = "";
	// ==== first part of the select box ===
	var select_html = '<select onChange="handleSelected(this)" style="width: 100%;">' + '<option selected> - '+ ddText +' - <\/option>';
	var map;

	function createMarker(point, name, country, html) {
		// var marker = new GMarker(point, markerOptions); // e.g. used to load a custom marker image
		var marker = new GMarker(point);
		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml(html);
		});
		uniMarkers[i] = marker;
		htmls[i] = html;
		sideBarHtml += "<div style='margin-bottom: 3px; padding: 2px;' class='markerLink'><a href='javascript:sideClick("+i+")'>"+country+", "+name+"</a></div>";
		// ======= Add the entry to the select box =====
		select_html += '<option> ' + country + ', ' + name + '<\/option>';
		i++;
		return marker;
	}
	
	// ======= This function handles selections from the select box ====
	// === If the dummy entry is selected, the info window is closed ==
	function handleSelected(opt) {
		var i = opt.selectedIndex - 1; 
		if (i > -1) {
			GEvent.trigger(uniMarkers[i],"click");
		}
		else {
			map.closeInfoWindow();
		}
	}


	function sideClick(id) {
		uniMarkers[id].openInfoWindowHtml(htmls[id]);
	}

	$(document).ready(function() {
		map = new GMap2(document.getElementById('map'));
		
		// creates the HM Icon
		/* not needed atm
		var hmIcon = new GIcon(G_DEFAULT_ICON);
		hmIcon.image = pinHM;
		hmIcon.shadow = pinHMshadow;
		hmIcon.iconSize = new GSize(20,34);
		hmIcon.shadowSize = new GSize(37,34);
		hmIcon.iconAnchor = new GPoint(10,34);
		hmIcon.infoWindowAnchor = new GPoint(10,0);
		hmIcon.printImage = pinHMprintImage;
		hmIcon.mozPrintImage = pinHMmozPrintImage;
		hmIcon.printShadow = pinHMprintShadow;
		hmIcon.transparent = pinHMtransparent;
		hmIcon.imageMap = [12,3,13,4,13,5,14,6,15,7,15,8,16,9,16,10,17,11,17,12,17,13,15,14,18,15,17,16,16,17,16,18,14,19,13,20,12,21,12,22,12,23,11,24,11,25,11,26,11,27,11,28,11,29,10,30,10,31,10,32,10,33,9,33,9,32,9,31,9,30,9,29,9,28,9,27,9,26,9,25,8,24,8,23,8,22,7,21,7,20,6,19,5,18,3,17,3,16,2,15,5,14,4,13,4,12,3,11,3,10,2,9,2,8,2,7,4,6,6,5,9,4,11,3];
		*/
						
		// Richtet das GMarkerOptions-Objekt ein
		//markerOptions = { icon:hmIcon };
		
		// add control elements for zoom, map-type etc...
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.enableScrollWheelZoom();
		
		map.setCenter(new GLatLng(0,0),0); // initial setup for bounding box creation
		var bounds = new GLatLngBounds();
		
		GDownloadUrl(mapPage, function(markerRAW) { // mapPage is defined in section Template JS. xml generation of page on which map is displayed containing marker infos.
			var markerXML = GXml.parse(markerRAW);
			var rootTag = $(markerXML).find("markers");
			var allMarkers = rootTag.children();
			allMarkers.each(function(i) {
				// extract data for each marker
				var lat = parseFloat($(this).find("lat").text());
				var lng = parseFloat($(this).find("lng").text());
				var localPoint = new GLatLng(lat, lng);
				var html = $(this).find("html").text();
				var label = $(this).find("label").text();
				var country = $(this).find("country").text();
				
				bounds.extend(localPoint);
				
				//create marker with extracted values
				var marker = createMarker(localPoint, label, country, html);
				map.addOverlay(marker);
			});
			
			// ===== final part of the select box =====
			if(!fullWidth) { // fullwidht is set in pageTemplate according to page type
				select_html += '<\/select>';
				document.getElementById("selection").innerHTML = select_html;
			} else {
				$("#side_bar").html(sideBarHtml);
			}

			// ===== determine the zoom level from the bounds =====
			map.setZoom(map.getBoundsZoomLevel(bounds));

			// ===== determine the centre from the bounds ======
			map.setCenter(bounds.getCenter());
			
			// var markerXML = GXml.parse(markerRAW);
			// $("#side_bar").html(markerRAW);
		});
	});
}

//]]>