function marker_options() {
  var tinyIcon = new GIcon();
  tinyIcon.image = '/gfx/gm_btn1.png';
  tinyIcon.shadow = "/gfx/gm_shadow.png";
  tinyIcon.iconSize = new GSize(22, 22);
  tinyIcon.shadowSize = new GSize(22, 20);
  tinyIcon.iconAnchor = new GPoint(6, 20);
  tinyIcon.infoWindowAnchor = new GPoint(5, 1);
  return { icon:tinyIcon };
}

function create_marker(map, gebied, options, titel, page, lat, lon, iconnr) {
  var point  = new GLatLng(lat, lon);
  // var titel = "Trefpunt";
  options.icon.image = '/gfx/gm_btn' + iconnr + '.png';
  var marker = new GMarker(point, options);
  map.addOverlay(marker);
  var location = gebied + '/' + page;
  var myHtml = '<h2><a href="' + location + '">' + titel + '</a></h2><img id="foto_maps" src="/foto/' + gebied + '/' + page + '.jpg" width="100" height="66"/>';
  var newPoint = new GLatLng(lat + 0.0004, lon);
  
  
  GEvent.addListener(marker, "mouseover", function() {
    marker.setImage('/gfx/gm_btn' + iconnr + '_mo.png');
    map.openInfoWindowHtml(newPoint, myHtml);
  });
  
  GEvent.addListener(marker, "mouseout", function() {
    marker.setImage('/gfx/gm_btn' + iconnr + '.png');
    // map.closeInfoWindow();
  }); 
  
  GEvent.addListener(marker, "click", function() {    
    map.openInfoWindowHtml(newPoint, myHtml);
  }); 

}

function create_polygon(map, gebied, click) {
  var points = gebieden[gebied].polygon;
  // var npoints = points.map(function(e) { return new GLatLng(e[0], e[1]); });
  var npoints = [];
  for (var i=0; i<points.length; i++) {
    npoints.push(new GLatLng(points[i][0], points[i][1]));
  }
  // alert(gebied);
  var color = gebieden[gebied].kleur;
  var polygon = new GPolygon(npoints, color, 2, 1, color, 0.1);
  if (click) {
    GEvent.addListener(polygon, "click", click);
  }
  map.addOverlay(polygon);
}

$(document).ready(function() {
  var gebied = $('div#map').attr('gebied');

  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    var center = new GLatLng(gebieden[gebied].center[0], gebieden[gebied].center[1]); 
    map.addControl(new GSmallMapControl());
    map.setCenter(center, gebieden[gebied].zoom);
    
    var options = marker_options();
    for (var i=0; i < accommodaties[gebied].length; i++) {
      var a = accommodaties[gebied][i];
      create_marker(map, gebied, options, a[0], a[1], a[2], a[3], i+1);
    }
    create_polygon(map, gebied);  
  }
});