var map;

// Creates a marker at the given point with the given number label
function createMarker(site, display_info) {
  var icon = new GIcon();
  icon.image = "/images/marker.png";
  //icon.shadow = "/images/shadow.png";
  icon.iconSize = new GSize(20, 34);
  //icon.shadowSize = new GSize(22, 20);
  icon.iconAnchor = new GPoint(10, 34);
  icon.infoWindowAnchor = new GPoint(5, 1);
  var marker = new GMarker(new GLatLng(site['lat'], site['lng']), icon);
  GEvent.addListener(marker, "click", function() {
    if (map.getZoom() < 9){
      map.setZoom(9);
    }
    map.panTo(marker.getPoint());    
    var infoHtml = "<h6>" + site["name"] + "</h6>" +
      "<p>" + site["address"] + "<br />"
    if (display_info){
      infoHtml = infoHtml + "<a href=\"sites/" + site["id"] + "\">Learn more about the site</a>. "
    }
    infoHtml = infoHtml + "<a href=\"javascript:map.setZoom(15);\">Zoom in</a> or <a href=\"javascript:map.setZoom(4);\">zoom out</a>.</p>" +
      "</div>"
    marker.openInfoWindowHtml(infoHtml);
  });
  return marker;
}

function loadMap(){
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.enableDoubleClickZoom();
    map.addControl(new GLargeMapControl()); 
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(-28,134), 4);
   
    sites.each(function(site){
      map.addOverlay(createMarker(site, true)); 
    });
    Event.observe(window, 'unload', GUnload);
  }
}

function loadSiteMap(site){
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.enableDoubleClickZoom();
    map.addControl(new GLargeMapControl()); 
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(site['lat'],site['lng']), 16);
   
    map.addOverlay(createMarker(site, false)); 
    Event.observe(window, 'unload', GUnload);
  }
}