OverlayMessage = function ( container )
    {
    // Terminology:
    // +-----------------+
    // |wrapper          |
    // |+---------------+|
    // ||container      ||
    // ||   +-------+   ||
    // ||   |overlay|   ||
    // ||   +-------+   ||
    // ||               ||
    // |+---------------+|
    // +-----------------+

    // Get the parent.
    var parent = container.parentNode;

    // Make the wrapper div.
    var wrapper = document.createElement( 'div' );
    wrapper.style.cssText = container.style.cssText;
    parent.insertBefore( wrapper, container );

    // Move the container into the wrapper.
    parent.removeChild( container );
    wrapper.appendChild( container );
    container.style.cssText = 'position: relative; width: 100%; height: 100%;';

    // Add the overlay div.
    this.overlay = document.createElement( 'div' );
    wrapper.appendChild( this.overlay );

    this.backgroundColor = '#fff';
    this.borderColor = '#ccc';

    this.overlay.style.position = 'relative';
    this.overlay.style.top = '-55%';
    this.overlay.style.backgroundColor = this.backgroundColor;
    this.overlay.style.width = '50px';
    this.overlay.style.textAlign = 'center';
    this.overlay.style.marginLeft = 'auto';
    this.overlay.style.marginRight = 'auto';
    this.overlay.style.padding = '5px';
    this.overlay.style.borderWidth = '1px';
    this.overlay.style.borderStyle = 'ridge';
    this.overlay.style.borderColor = this.borderColor;
    this.overlay.style.zIndex = '100';
    this.overlay.style.opacity = '.75';
    this.overlay.style.filter = 'alpha(opacity=75)';

    this.overlay.style.display = 'none';
    };




OverlayMessage.prototype.Set = function ( message )
    {
    this.overlay.innerHTML = message;

    this.overlay.style.display = '';
    };


OverlayMessage.prototype.Clear = function ()
    {
    this.overlay.style.display = 'none';
    };


OverlayMessage.prototype.SetBackgroundColor = function ( color )
    {
    this.backgroundColor = this.overlay.style.backgroundColor = color;
    };


OverlayMessage.prototype.SetBorderColor = function ( color )
    {
    this.borderColor = this.overlay.style.borderColor = color;
    };
    
		var customIcons = [];
			var iconBlue = new GIcon(G_DEFAULT_ICON); 
    		iconBlue.image = '/images/markers/mm_20_blue.png';
    		iconBlue.shadow = '/images/markers/mm_20_shadow.png';
    		iconBlue.iconSize = new GSize(12, 20);
    		iconBlue.shadowSize = new GSize(22, 20);
    		iconBlue.iconAnchor = new GPoint(6, 20);
    		iconBlue.infoWindowAnchor = new GPoint(5, 1);
    		customIcons["app"] = iconBlue;
		
			var iconRed = new GIcon(G_DEFAULT_ICON); 
    		iconRed.image = '/images/markers/mm_20_red.png';
    		iconRed.shadow = '/images/markers/mm_20_shadow.png';
    		iconRed.iconSize = new GSize(12, 20);
    		iconRed.shadowSize = new GSize(22, 20);
    		iconRed.iconAnchor = new GPoint(6, 20);
    		iconRed.infoWindowAnchor = new GPoint(5, 1);
    		customIcons["villa"] = iconRed;
		
			var iconGreen = new GIcon(G_DEFAULT_ICON); 
    		iconGreen.image = '/images/markers/mm_20_green.png';
    		iconGreen.shadow = '/images/markers/mm_20_shadow.png';
    		iconGreen.iconSize = new GSize(12, 20);
    		iconGreen.shadowSize = new GSize(22, 20);
    		iconGreen.iconAnchor = new GPoint(6, 20);
    		iconGreen.infoWindowAnchor = new GPoint(5, 1);
    		customIcons["agri"] = iconGreen;
		
			var iconYellow = new GIcon(G_DEFAULT_ICON); 
    		iconYellow.image = '/images/markers/mm_20_yellow.png';
    		iconYellow.shadow = '/images/markers/mm_20_shadow.png';
    		iconYellow.iconSize = new GSize(12, 20);
    		iconYellow.shadowSize = new GSize(22, 20);
    		iconYellow.iconAnchor = new GPoint(6, 20);
    		iconYellow.infoWindowAnchor = new GPoint(5, 1);
    		customIcons["bb"] = iconYellow;
		
		

     if (GBrowserIsCompatible()) {
      // display the loading message
      var om = new OverlayMessage(document.getElementById('map'));      
      om.Set('<img src="/images/loader.gif" />');
    
      // arrays to hold copies of the markers used by the side_bar
      // because the function closure trick doesnt work there
      var idmarkers = [];
      var i = 0;

      // A function to create the marker and set up the event window
      function createMarker(id, point, type, html) {
  
        var marker = new GMarker(point, customIcons[type]);
        
       GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        
		// save the info we need to find this marker
      	idmarkers[id.toLowerCase()] = marker;
        
        i++;
        return marker;
      }


      // showMarker, call the event to trigger opening markers window
      function showMarker (id) {
    	 GEvent.trigger(idmarkers[id],"click");
      }
      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
       
		map.setMapType(G_NORMAL_MAP);      
		map.setCenter(new GLatLng(43.60364,10.774326), 9);
      // Read the data from genxml.php file
      var request = GXmlHttp.create();
      
      request.open("GET", "/includes/ajax.calls.php?locationXML=1", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var id = markers[i].getAttribute("id");
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var type = markers[i].getAttribute("type");
       		var title = markers[i].getAttribute("name");
       		var url = markers[i].getAttribute("url");             
       		var img = markers[i].getAttribute("img");
       		
       		var html = "<div class='window'><a href='" + url + "'><img src='" + img + "' align='left' style='height: 100%' /></a><a href='" + url + "'><b>" + title + "</b></a><br /></div>";
       		
            // create the marker
            var marker = createMarker(id, point, type, html);
            map.addOverlay(marker);
          } // End of for
          om.Clear(); // Clear the loading message
        } // End of request.readychange
      } // End of onready request
      request.send(null);
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }