// lat and long for center view - this is because Google needs us to specify 
// centrepoint before we add points and ask for satellite view
var MAP_CENTRE = new GLatLng(54, -3.5);

// variable for current colour
var current_colour;

// variable for map
var map;

function load_map (colour) {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    // set initial centre view
    map.setCenter(MAP_CENTRE, 6);

    // allow mouse wheel to zoom
    // map.enableScrollWheelZoom();

    // show markers
    //show_pointers(colour, true);
    for (index in markers) {
      show_pointers(index, true, true);
    }

    var centre = new GLatLng(54, -4);
    map.setCenter(centre, 5);

    // set to satellite view
    map.setMapType(G_HYBRID_TYPE);
  }
}

function show_pointers (colour, initial, keep_old) {
  if (colour != current_colour) {
    // hide current markers
	  if (!keep_old) {
      map.clearOverlays();
	  }

    // add markers
    var min_lat, max_lat, min_lng, max_lng;
    for (index in markers[colour]) {
      add_point(map, colour, index);

      if (!min_lat || markers[colour][index].lat < min_lat) min_lat = markers[colour][index].lat;
      if (!max_lat || markers[colour][index].lat > max_lat) max_lat = markers[colour][index].lat;
      if (!min_lng || markers[colour][index].lng < min_lng) min_lng = markers[colour][index].lng;
      if (!max_lng || markers[colour][index].lng > max_lng) max_lng = markers[colour][index].lng;
    }

    // zoom
    var bounds = new GLatLngBounds(new GLatLng(min_lat, min_lng), new GLatLng(max_lat, max_lng));
    var zoom_level = map.getBoundsZoomLevel(bounds);
    zoom_level = (zoom_level > 10) ? 10 : zoom_level;

    if (!initial) {
      map.setZoom(zoom_level);
    }

    // set centre view
    var centre = new GLatLng((min_lat + max_lat) / 2, (min_lng + max_lng) / 2)
    if (!initial) {
      map.panTo(centre);
    }

    // set zoom and centre here if initial
    if (initial) {
      // map.setCenter(centre, zoom_level);
    }

    // mark as current
    current_colour = colour;
  }
}

function add_point (map, colour, index) {
  var content = markers[colour][index];
  var point = new GLatLng(content.lat, content.lng);
  var icon = new GIcon();

  icon.image = "/images/community/map/icons/markers/" + colour + ".png";
  icon.iconSize = new GSize(24, 24);
  icon.iconAnchor = new GPoint(12, 12);
  icon.infoWindowAnchor = new GPoint(5, 1);

  var marker = new GMarker(point, icon);
  map.addOverlay(marker);

  var html  = '<div class="title">' + content.title.toUpperCase() + ' - added by ' + content.name + '</div>'
            + '<div class="content">' 
            + '<img src="/data/map/' + content.image.id + '.jpg" width="' + content.image.width + '" height="' + content.image.height + '" class="photo" />'
            + '<p>' + content.description + '</p>'
            + '</div>';

  GEvent.addListener(marker, "click",
                     function() {
                       marker.openInfoWindowHtml('<div class="map-bubble map-bubble-' + colour + '">' + html + '</div>', {maxWidth : 300});
                     }
                    );

  GEvent.addListener(marker, "dragend",
                     function() {
                       var point = this.getPoint();
                       alert(point.lat() + ' ' + point.lng());
                     }
                    );
}

onunload = GUnload;