//<![CDATA[
    // Create a base icon for all of our markers that specifies the
	// shadow, icon dimensions, etc.
	var baseIcon = new GIcon();
	//baseIcon.shadow = 'http://www.google.com/mapfiles/shadow50.png';
         baseIcon.shadow = 'icons/schatten.png';
	baseIcon.iconSize = new GSize(19, 21);
	baseIcon.shadowSize = new GSize(47, 21);
	baseIcon.iconAnchor = new GPoint(10, 21);
	baseIcon.infoWindowAnchor = new GPoint(19, 1);
	baseIcon.infoShadowAnchor = new GPoint(19, 1);
  	baseIcon.image = 'icons/icon0.png';

    var customIcons = [];
    customIcons["0"] = new GIcon(baseIcon);
    customIcons["0"].image = 'icons/icon0.png';
    customIcons["1"] = new GIcon(baseIcon);
    customIcons["1"].image = 'icons/icon1.png';
    customIcons["2"] = new GIcon(baseIcon);
    customIcons["2"].image = 'icons/icon2.png';
    customIcons["3"] = new GIcon(baseIcon);
    customIcons["3"].image = 'icons/icon3.png';

	var map;
	
	var imgUrl = "img/";
    var iconUrl = "icons/";

    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        //map.addControl(new GScaleControl());
        //map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(47.3690239, 8.5380326), 13);
        
        //reset drop down list once the maps has been dragged
      	GEvent.addListener(map, 'dragend', function() {
			 document.getElementById('navigation').selectedIndex=0;
			 
		});

        GDownloadUrl("genxml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var infos = markers[i].getAttribute("infos");
            var rating = markers[i].getAttribute("rating");
            var link = markers[i].getAttribute("link");
            var img1 = markers[i].getAttribute("img1");
            var img2 = markers[i].getAttribute("img2");
            var img3 = markers[i].getAttribute("img3");
            //var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var cleanness = markers[i].getAttribute("cleanness");   
            var paper = markers[i].getAttribute("paper");
            var soap = markers[i].getAttribute("soap");  
            var towels = markers[i].getAttribute("towels");  
            var dryer = markers[i].getAttribute("dryer");  
            var accessible = markers[i].getAttribute("accessible"); 
            var ctable = markers[i].getAttribute("ctable"); 
            
            var marker = createMarker(point, name, address, infos, rating, link, img1, img2, img3, cleanness, paper, soap, towels, dryer, accessible, ctable);
                    map.addOverlay(marker);
          }
        });
      }
      //hide foto frame
      document.getElementById("imgZoom").style.display = "none";
    }

    function createMarker(point, name, address, infos, rating, link, img1, img2, img3, cleanness, paper, soap, towels, dryer, accessible, ctable) {
      	var marker = new GMarker(point, customIcons[rating]);
      	
      	
      	var html = "<div id=\"bubbleHeader\">" + name + "</div><div id=\"bubbleAddress\">" + address + "</div>";
      	
      	if(infos != "")
      	{
      		html += "<div id=\"bubbleInfo\"><b>Remarks</b>: " + infos + "</div>"; 
      	}
      	
      	html += "<div id=\"bubbleAttributes\">Cleanness: " + cleanness + "/10<br />";
      	html += "<img id=\"checkbox\" src='" + iconUrl + getCheckboxImg(paper) + "'/>Toilet paper <br />";
      	html += "<img id=\"checkbox\" src='" + iconUrl + getCheckboxImg(soap) + "'/>Soap <br />";
      	html += "<img id=\"checkbox\" src='" + iconUrl + getCheckboxImg(towels) + "'/>Towels<br />";
      	//alert("Hallo");
      	html += "<img id=\"checkbox\" src='" + iconUrl + getCheckboxImg(dryer) + "'/>Hand dryer<br />";
      	html += "<img id=\"checkbox\" src='" + iconUrl + getCheckboxImg(accessible) + "'/>Handicapped accessible<br />";
      	html += "<img id=\"checkbox\" src='" + iconUrl + getCheckboxImg(ctable) + "'/>Changing table</div>";
      	
      	
      	//only add div if at least one image exists
      	if(img1 != "")
      	{
      		html += "<div class=\"img\">";
      		html += "<a href=\"javascript:imagePopUp2('" + imgUrl  + img1 + "');\"><img src='" + imgUrl + img1 + "' height='50'/></a>";
      	}
      	
      	if(img2 != "")
      	{
      		html += "<a href=\"javascript:imagePopUp2('" + imgUrl  + img2 + "');\"><img src='" + imgUrl + img2 + "'  height='50'/></a>";
      	}
      	
      	if(img3 != "")
      	{
      		html += "<a href=\"javascript:imagePopUp2('" + imgUrl  + img3 + "');\"><img src='" + imgUrl + img3 + "'  height='50'/></a>";
      	}
      	
      	if(img1 != "")
      	{
      		html += "</div>";
      	}
      	
      	
      	if(link != "")
      	{
      	html += "<div><a id=\"bubbleLink\" target=\"_blank\" href=\"" + link + "\">View Website</a></div>";
      	}
      	
      	
      	GEvent.addListener(marker, 'click', function() {
        	marker.openInfoWindowHtml(html);
      	});
      	
      	GEvent.addListener(marker, 'infowindowclose', function(){var img=document.getElementById("imgMagnified").firstChild; if(img) {document.getElementById("imgMagnified").removeChild(img); document.getElementById("imgZoom").style.display = "none";} });

      	return marker;
    }
    
    function getCheckboxImg(checked) {
    	if(checked > 0)
      	{
      		return "checked.png";
      	} else {
      		return "unchecked.png";
      	}
    }
    
    
    
    var geocoder = new GClientGeocoder();
	
	//Navigate to region selected by the user via the drop down list
	function showRegion(address) {
		var zoom = 12;
		if(address != "") 
		{
		  	geocoder.getLatLng(
		    address,
		    function(point) {
		      if (!point) {
		        alert(address + " not found");
		      } else {
		        map.setCenter(point, zoom);
		      }
		    }
		  );
		}
	}
    
    
 	//opens opoup to fit and display the given image
 	function imagePopUp(imgPath, title) {
 		image = new Image()
  		image.src = imgPath;
   
		html = "<html><head><title>" + title + "</title>" +  "</head><body style=\"margin: 0px 0px; \">" +  "<img src='" + imgPath + "'></body></html>"; 
		popup=window.open('','imgagePopup','toolbar=no,location=no, directories=no,menubar=no,status=no,scrollbars=no,resizable=no,width=' + image.width + ',height='+ image.height); 
		popup.document.open();
		popup.document.write(html);
		popup.document.close();
		popup.focus();
	}
	
	function imagePopUp2(imgPath, title) {
		var img = document.getElementById("imgMagnified").firstChild;
		if(img) {
			document.getElementById("imgMagnified").removeChild(img);
		} 
		img = document.createElement("IMG");
		img.setAttribute('src',imgPath);
		document.getElementById("imgMagnified").appendChild(img);
		
		if(document.getElementById("imgZoom").style.display == "none") {
			document.getElementById("imgZoom").style.display = "block";
		}
	
		/*var img = document.getElementById("imgZoom").firstChild;
		if(img) {
			document.getElementById("imgZoom").removeChild(img);
		} 
		img = document.createElement("IMG");
		img.setAttribute('src',imgPath);
		img.setAttribute('id','imgMagnified');
		img.setAttribute('class','imgMagnified');
		document.getElementById("imgZoom").appendChild(img);*/
	}

    //]]>