//Naples.com
var xmldata = "";
	  var map;
      var gmarkers = [];
	  var side_bar_html = "";
      var htmls = [];
      var i = 0;
      var to_htmls = [];
      var from_htmls = [];
	  var comlat = "";
	  var comlng = "";
	  var comzoom = "";
	  	  
	  
	  function wait(delay){
string=mvclick(0);
setTimeout(string,delay);
}
	  
	  
	    function mvclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }
	  function tohere(i) {
        gmarkers[i].openInfoWindowHtml(to_htmls[i]);
      }
      function fromhere(i) {
        gmarkers[i].openInfoWindowHtml(from_htmls[i]);
      }
	  
function load(xmldata,comlat,comlng,comzoom) {
var side_bar_html = "";
var i = 0;
 // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(comlat, comlng),comzoom);
map.clearOverlays();

var icon = new GIcon();
icon.image = "markerpp.gif";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
      icon.iconSize = new GSize(20, 34);
      icon.shadowSize = new GSize(37, 34);
     icon.iconAnchor = new GPoint(9, 34);
      icon.infoWindowAnchor = new GPoint(9, 2);
      icon.infoShadowAnchor = new GPoint(18, 25);
      icon.transparent = "http://www.google.com/intl/en_ALL/mapfiles/markerTransparent.png";
      icon.printImage = "markerpp.gif";
      icon.mozPrintImage = "markerpp.gif";
	  
	  
	//Should fix long lists, but breaks when used to much
		//var sidedom = document.getElementById("side_bar")
		//sidedom.style.height="300";
		//sidedom.style.overflow="auto";
	
	  
if (GBrowserIsCompatible()) {
      // this variable will collect the html which will eventualkly be placed in the side_bar
     

      // A function to create the marker and set up the event window
      function createMarker(point,name,html,icon) {
        var marker = new GMarker(point,icon);
        marker.tooltip = "<div class='tooltip'>"+ html +"</div>";
        // The info window version with the "to here" form open
        to_htmls[i] = '<div class="iwfix">' + html + '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +
           '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
           '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT">' +
           '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
                  // "(" + name + ")" + 
           '"/></div>';
        // The info window version with the "to here" form open
        from_htmls[i] = '<div class="iwfix">' + html + '<div class="iwfix"><br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +
           '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
           '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT">' +
           '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
                  // "(" + name + ")" + 
           '"/></div>';
        // The inactive version of the direction info
        html = '<div class="iwfix">' + html + '<br>Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a></div>';

        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
		GEvent.addListener(marker,"mouseover", function() {
          showTooltip(marker);
        });        
        GEvent.addListener(marker,"mouseout", function() {
		tooltip.style.visibility="hidden"
        });
		
     
		
		
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        htmls[i] = html;
        // add a line to the side_bar html
		 bounds = map.getBounds();
		if (bounds.contains(marker.getPoint())) {
        side_bar_html += '<span><img src="wharrow.jpg"/><a class="sidebarlinks" href="javascript:mvclick(' + i + ')">' + name + '</a></span><br>';
		}
		i++;
        return marker;
		
		  
      }

      // ====== This function displays the tooltip ======
      // it can be called from an icon mousover or a side_bar mouseover
      function showTooltip(marker) {
      	tooltip.innerHTML = marker.tooltip;
	var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
	var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
	var anchor=marker.getIcon().iconAnchor;
	var width=marker.getIcon().iconSize.width;
	var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width,- offset.y + point.y +anchor.y)); 
	pos.apply(tooltip);
	tooltip.style.visibility="visible";
      }

 // ====== set up marker mouseover tooltip div ======
      var tooltip = document.createElement("div");
      document.getElementById("map").appendChild(tooltip);
      tooltip.style.visibility="hidden";


      // Read the data from xmldata
      var request = GXmlHttp.create();
      request.open("GET", xmldata, true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
          // 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 geocoder = new GClientGeocoder();
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var html = markers[i].getAttribute("html");
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,html,icon);
			 // create the clusterer
			  
			  if (bounds.contains(marker.getPoint())) { 

			 map.addOverlay(marker);
			  }
			 }
          // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;
		  if (document.getElementById("side_bar").innerHTML == "") {
	document.getElementById("side_bar").style.display = "none";
	}
	else {
	document.getElementById("side_bar").style.display = "block";
	}
        }
      }
      request.send(null);
    }

    else {
      alert("Sorry, Naples.com's Google Maps API is not compatible with your browser");
    }
	    
      //Thanks to www.econym.demon.co.uk/googlemaps/
     	
}