// JavaScript Document

	
	var iconWhite = new GIcon();
      iconWhite.image = "images/whitemarker.png";
      iconWhite.shadow = "images/shadow_marker.png";
      iconWhite.iconSize = new GSize(32, 43);
      iconWhite.shadowSize = new GSize(54, 43);
      iconWhite.iconAnchor = new GPoint(8, 43);
      iconWhite.infoWindowAnchor = new GPoint(32, 2);
      iconWhite.infoShadowAnchor = new GPoint(18, 25);
      iconWhite.transparent = "images/markertran.png";
      iconWhite.printImage = "images/whitemarker.gif";
      iconWhite.mozPrintImage = "images/whitemarker.gif";
	
	var iconGreen = new GIcon();
      iconGreen.image = "images/grmarker.png";
      iconGreen.shadow = "images/shadow_marker.png";
      iconGreen.iconSize = new GSize(32, 43);
      iconGreen.shadowSize = new GSize(54, 43);
      iconGreen.iconAnchor = new GPoint(8, 43);
      iconGreen.infoWindowAnchor = new GPoint(32, 2);
      iconGreen.infoShadowAnchor = new GPoint(14, 25);
      iconGreen.transparent = "images/markertran.png";
      iconGreen.printImage = "images/grmarker.gif";
      iconGreen.mozPrintImage = "images/grmarker.gif";

   var iconYellow = new GIcon();
      iconYellow.image = "images/yellmarker.png";
      iconYellow.shadow = "images/shadow_marker.png";
      iconYellow.iconSize = new GSize(32, 43);
      iconYellow.shadowSize = new GSize(54, 43);
      iconYellow.iconAnchor = new GPoint(8, 43);
      iconYellow.infoWindowAnchor = new GPoint(32, 2);
      iconYellow.infoShadowAnchor = new GPoint(14, 25);
      iconYellow.transparent = "images/markertran.png";
      iconYellow.printImage = "images/yellmarker.gif";
      iconYellow.mozPrintImage = "images/yellrmarker.gif";

var iconRed = new GIcon();
      iconRed.image = "images/redmarker.png";
      iconRed.shadow = "images/shadow_marker.png";
      iconRed.iconSize = new GSize(32, 43);
      iconRed.shadowSize = new GSize(54, 43);
      iconRed.iconAnchor = new GPoint(8, 43);
      iconRed.infoWindowAnchor = new GPoint(32, 2);
      iconRed.infoShadowAnchor = new GPoint(18, 25);
      iconRed.transparent = "images/markertran.png";
      iconRed.printImage = "images/redmarker.gif";
      iconRed.mozPrintImage = "images/redmarker.gif";
	  
var iconCyan = new GIcon();
      iconCyan.image = "images/cyanmarker.png";
      iconCyan.shadow = "images/shadow_marker.png";
      iconCyan.iconSize = new GSize(32, 43);
      iconCyan.shadowSize = new GSize(54, 43);
      iconCyan.iconAnchor = new GPoint(8, 43);
      iconCyan.infoWindowAnchor = new GPoint(32, 2);
      iconCyan.infoShadowAnchor = new GPoint(18, 25);
      iconCyan.transparent = "images/markertran.png";
      iconCyan.printImage = "images/cyanmarker.gif";
      iconCyan.mozPrintImage = "images/cyanmarker.gif";
	  
var iconPin = new GIcon();
      iconPin.image = "images/pinmarker.png";
      iconPin.shadow = "images/shadow-pinmarker.png";
      iconPin.iconSize = new GSize(16, 45);
      iconPin.shadowSize = new GSize(39, 45);
      iconPin.iconAnchor = new GPoint(0, 39);
      iconPin.infoWindowAnchor = new GPoint(8, 1);
      iconPin.infoShadowAnchor = new GPoint(0, 39);
      iconPin.transparent = "images/markertran.png";
      iconPin.printImage = "images/pinmarker.gif";
      iconPin.mozPrintImage = "images/pinmarker.gif";
	  

    var customIcons = [];
    customIcons["white"] = iconWhite;
	customIcons["green"] = iconGreen;
	customIcons["amber"] = iconYellow;
    customIcons["red"] = iconRed;
	customIcons["cyan"] = iconCyan;
	customIcons["pin"] = iconPin;


    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(65.5, 18), 5);
		 map.addControl(new GMapTypeControl());
		 map.addMapType(G_SATELLITE_3D_MAP);
     	 map.addControl(new GLargeMapControl());
        map.enableContinuousZoom();
		
var otherOpts = { 
          buttonStartingStyle: {display:'block',color:'black',background:'white',width:'7em',textAlign:'center',
            fontFamily:'Verdana',fontSize:'12px',fontWeight:'bold',border:'1px solid gray',paddingBottom:'1px',cursor:'pointer'},
          buttonHTML: 'Drag Zoom',
          buttonZoomingHTML: 'Drag a region on the map (click here to reset)',
          buttonZoomingStyle: {background:'yellow'},
          backButtonHTML: 'Drag Zoom Back',  
          backButtonStyle: {display:'none',marginTop:'3px',background:'#FFFFC8'},
          backButtonEnabled: true
        } 
        map.addControl(new DragZoomControl({}, otherOpts, {}), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(90,7)));

        GDownloadUrl("tunnels_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 district = markers[i].getAttribute("district");
            var road = markers[i].getAttribute("road");
			var length = markers[i].getAttribute("length");
			var lighting = markers[i].getAttribute("lighting");
			var comments = markers[i].getAttribute("comments");
			var image = markers[i].getAttribute("image");
			var altroute = markers[i].getAttribute("altroute");
			var moreinfo = markers[i].getAttribute("moreinfo");
			var moreinfolink = markers[i].getAttribute("moreinfolink");
			var contributor = markers[i].getAttribute("contributor");
			var url = markers[i].getAttribute("url");
            var type = markers[i].getAttribute("type");
			var balimg = markers[i].getAttribute("balimg");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, district, road, length, lighting, comments, image, altroute, moreinfo, moreinfolink, contributor, url, type, balimg);
            map.addOverlay(marker);
          }
        });
      }
    }


    function createMarker(point, name, district, road, length, lighting, comments, image, altroute, moreinfo, moreinfolink, contributor, url, type, balimg) {
      var marker = new GMarker(point, customIcons[type]);
      var html =  '<div><p class="infowindow"><img src=' + balimg + ' width=50 height=50 hspace=10 vspace=10 align="right"><b>Name : ' + name + '</b> <br/><b>Route : </b>' + road + '<br/><b>Length : </b>' + length + '<br/><b>Lighting : </b>' + lighting + '<br/><b>Comments : </b>' + comments + '<br/><img src=' + image + ' width=230 height=173 hspace=10 vspace=10><br/><b>Alternative route : </b>' + altroute + '<br/><b>Additional info. : </b><a href=' + moreinfolink + ' target="_blank">' + moreinfo + '</a><br/><b>Contributor : </b><a href=' + url + ' target="_blank">' + contributor + '</a></p></div>';
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }