// start position for the map (hardcoded here for simplicity)
  var lat = 52.1;
  var lon = 5.4;
  var zoom = 8; 
  var map;

function mapinit() {

  var map_controls = [ new OpenLayers.Control.Navigation(),
                       new OpenLayers.Control.PanPanel(),
                       new OpenLayers.Control.ZoomPanel(),
		       new OpenLayers.Control.LayerSwitcher(),
		       new OpenLayers.Control.Permalink("Permalink", "")
                     ];

  //On load errors tiles will become the set color
  OpenLayers.Util.onImageLoadErrorColor = "transparent";

  // complex object of type OpenLayers.Map
  map = new OpenLayers.Map("map", {controls: map_controls, theme: 'styles/openlayers.css', maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508), numZoomLevels: 18, maxResolution: 156543, units: 'm', displayProjection: new OpenLayers.Projection("EPSG:4326"), projection: new OpenLayers.Projection("EPSG:900913")});

  //definition of base layer
  var layerTileNL        = new OpenLayers.Layer.OSM("OpenStreetMap", "http://tile.openstreetmap.nl/tiles/${z}/${x}/${y}.png", {numZoomLevels: 19});
  var layerGSAT          = new OpenLayers.Layer.Google("Google Satelliet", {type: G_SATELLITE_MAP, numZoomLevels: 20, sphericalMercator:true});

  //definition of datalayers
  var layerBVB           = new OpenLayers.Layer.OSM("Schapen/Geiten Bedrijven", "http://tiles.mijndev.openstreetmap.nl:8080/bvb/${z}/${x}/${y}.png", {attribution: '', numZoomLevels: 19, isBaseLayer:false, visibility:true});
  var layerQkoorts       = new OpenLayers.Layer.OSM("Risico gebieden", "http://tiles.mijndev.openstreetmap.nl:8080/qkoorts/${z}/${x}/${y}.png", {attribution: '', numZoomLevels: 19, isBaseLayer:false, visibility:true});

  var vaccinStyleMap     = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({fillColor: "yellow", fillOpacity: 0.5, strokeColor: "green"},OpenLayers.Feature.Vector.style["default"]));
  var verwijderdStyleMap = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({fillColor: "green", fillOpacity: 0.9, strokeColor: "green", pointRadius: 4}, OpenLayers.Feature.Vector.style["default"]));
  
  var rundStyleMap = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({fillColor: "orange", fillOpacity: 0.5, strokeColor: "red", pointRadius: 6}, OpenLayers.Feature.Vector.style["default"]));
  var geitStyleMap = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({fillColor: "orange", fillOpacity: 0.5, strokeColor: "purple", pointRadius: 6}, OpenLayers.Feature.Vector.style["default"]));
  var schaapStyleMap = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({fillColor: "orange", fillOpacity: 0.5, strokeColor: "blue", pointRadius: 6}, OpenLayers.Feature.Vector.style["default"]));
  
  var vaccinatiegebied = new OpenLayers.Layer.GML("Vaccinatiegebied", "data/vaccinatiegebied.kml", 
                                {
                                  styleMap: vaccinStyleMap,
                                  projection: new OpenLayers.Projection("EPSG:4326"),
                                  format: OpenLayers.Format.KML,
				  visibility: false
                                });
  var getroffen_schaap       = new OpenLayers.Layer.GML("Schapen Q-koorts", "data/qkoorts-schaap.kml", 
                                {
				  styleMap: schaapStyleMap,
                                  projection: new OpenLayers.Projection("EPSG:4326"),
                                  format: OpenLayers.Format.KML
                                });
   
  var getroffen_geit         = new OpenLayers.Layer.GML("Geiten Q-koorts", "data/qkoorts-geit.kml", 
                                {
				  styleMap: geitStyleMap,
                                  projection: new OpenLayers.Projection("EPSG:4326"),
                                  format: OpenLayers.Format.KML
                                });
 
  var getroffen_be_rund = new OpenLayers.Layer.GML("Runderen Q-koorts (België)", "data/belgie-rund.kml", 
                                {
				  styleMap: rundStyleMap,
                                  projection: new OpenLayers.Projection("EPSG:4326"),
                                  format: OpenLayers.Format.KML
                                });
  
  var getroffen_be_schaap = new OpenLayers.Layer.GML("Schapen Q-koorts (België)", "data/belgie-schaap.kml", 
                                {
				  styleMap: schaapStyleMap,
                                  projection: new OpenLayers.Projection("EPSG:4326"),
                                  format: OpenLayers.Format.KML
                                });
  
  var getroffen_be_geit = new OpenLayers.Layer.GML("Geiten Q-koorts (België)", "data/belgie-geit.kml", 
                                {
				  styleMap: geitStyleMap,
                                  projection: new OpenLayers.Projection("EPSG:4326"),
                                  format: OpenLayers.Format.KML
                                });

  var verwijderd = new OpenLayers.Layer.GML("Verwijderd van Lijst", "data/verwijderd.kml", 
                                {
                                  styleMap: verwijderdStyleMap,
                                  projection: new OpenLayers.Projection("EPSG:4326"),
                                  format: OpenLayers.Format.KML
                                });

          var stations = new OpenLayers.Layer.GML("RIVM/KNMI", "data/stations.kml",
               {
                projection: new OpenLayers.Projection("EPSG:4326"),
                format: OpenLayers.Format.KML,
                formatOptions: {
                  extractStyles: true,
                  extractAttributes: true
                },
		visibility: false
               });
 
  
  map.addLayers([layerTileNL, layerGSAT, layerBVB, layerQkoorts, stations, getroffen_schaap, getroffen_geit, getroffen_be_rund, getroffen_be_schaap, getroffen_be_geit, verwijderd, vaccinatiegebied]);
  
  // create a control panel to display multiple controls
  var panel = new OpenLayers.Control.PanPanel({div: document.getElementById("navPanel")});
  map.addControl(panel);

  selectControl = new OpenLayers.Control.SelectFeature(getroffen_schaap, {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
  map.addControl(selectControl);
  selectControl.activate();
  
  selectControl = new OpenLayers.Control.SelectFeature(getroffen_geit, {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
  map.addControl(selectControl);
  selectControl.activate();
  
  // center map
  if (!map.getCenter()) {
    map.setCenter(new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), zoom);
  }
}

// initialise the 'map' object
$(document).ready(function() {
        // Expand Panel
        $("#open").click(function(){
                $("div#panel").slideDown("slow");

        });

        // Collapse Panel
        $("#close").click(function(){
                $("div#panel").slideUp("slow");
        });

        // Switch buttons from "Log In | Register" to "Close Panel" on click
        $("#toggle a").click(function () {
                $("#toggle a").toggle();
        });

  var width = 800;

  $.ui.dialog.defaults.bgiframe = true;
  $("#dialog").dialog({ zIndex: 1101, resizable: false, position: 'center', width: width, minWidth: width, buttons: { "Ok": function() { $(this).dialog("close"); } } });
  
  $('#besmettingen').dataTable( {
    "bProcessing": true,
    "sAjaxSource": 'data/besmettingen.js',
    "oLanguage": {
      "sLengthMenu": "Toon _MENU_ regels per pagina",
      "sZeroRecords": "Niets te tonen",
      "sInfo": "_START_ tot _END_ van totaal _TOTAL_ regels",
      "sInfoEmtpy": "Geen resultaten",
      "sSearch": "Zoek",
      "oPaginate": {
        "sFirst": "Eerste",
        "sNext": "Volgende",
        "sPrevious": "Vorige",
        "sLast": "Laatste"
      },
      "sInfoFiltered": "(gefilterd van _MAX_ resultaten)"
    }
  });
});

//-----------------------------------
function onFeatureUnselect(feature) {
  map.removePopup(feature.popup);
  feature.popup.destroy();
  feature.popup = null;
}

function onPopupClose(evt) {
  selectControl.unselect(selectedFeature);
}

function onFeatureSelect(feature) {
  selectedFeature = feature;

  /* It would be nice for the RIVM data to first check if the dataset is actually available for this specific feature */
  // datasource_id = feature.fid.match(datasource)[2];

        popup = new OpenLayers.Popup.FramedCloud("chicken", 
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     new OpenLayers.Size(400,200),
                                     "<div style='font-size:.8em; width: auto;'><h3>"+feature.attributes.name+"</h3>"+feature.attributes.description+"</div>",
                                     null, true, onPopupClose);
        
  
  feature.popup = popup;
        map.addPopup(popup);
  popup.autoSize = true; 
}

function handleZoom(e) {
  document.getElementById('mapzoom').value = map.getZoom();
}

function generateHTML() {
  var marker = markers.markers;

  if (marker.length == 1) {
    var lonlat = marker[0].lonlat.clone();
    var marker = true;
  } else {
    var lonlat = map.center.clone();
    var marker = false;
  }
  lonlat = lonlat.transform(map.projection, map.displayProjection);

  document.getElementById('bottomblock').style.visibility = 'visible';
  document.getElementById('bottomblock').style.height = 300;
  document.getElementById('myhtml').rows = 10;
  document.getElementById('myhtml').cols = 81;

  var width = document.getElementById('mapwidth').value;
  var height = document.getElementById('mapheight').value;
  var zoom = document.getElementById('mapzoom').value;

  var czoom = document.getElementById('c_zoom').checked;
  var cmove = document.getElementById('c_move').checked;
  var cscale = document.getElementById('c_scale').checked;

  document.getElementById('myhtml').value = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n' +
  "<html xmlns=\"http://www.w3.org/1999/xhtml\">\n" +
  "<head>\n" + 
  '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />\n' +
  "<title>Kaartje - Openstreetmap</title>\n" +
  "<script src=\"http://mijn.openstreetmap.nl/api/1.2/osm.php\" type=\"text/javascript\"></script>\n" +
  "</head>\n" +
  "<body onload=\"init('mymap'," + lonlat.lon + "," + lonlat.lat + "," + zoom + "," + cmove + "," + czoom + "," + cscale + "," + marker + ");\">\n" +
  "<div id=\"mymap\" class=\"osm\" style=\"width: " + width + "px; height: " + height + "px;\" />\n" +
  "</body>\n" +
  "</html>\n";

}

function generatePopUp() {
  var marker = markers.markers;

  var url = "example.php?";
  var width = document.getElementById('mapwidth').value;
  var height = document.getElementById('mapheight').value;
  var zoom = document.getElementById('mapzoom').value;

  if (marker.length == 1) {
    var lonlat = marker[0].lonlat.clone();
    lonlat = lonlat.transform(map.projection, map.displayProjection);
    url += "marker=true&";
  } else {
      var lonlat = map.center.clone();
    lonlat = lonlat.transform(map.projection, map.displayProjection);
    url += "marker=false&";
  }

  var czoom = document.getElementById('c_zoom').checked;
  var cmove = document.getElementById('c_move').checked;
  var cscale = document.getElementById('c_scale').checked;

  url += "w=" + width + "&";
  url += "h=" + height + "&";
  url += "z=" + zoom + "&";

  url += "lon=" + lonlat.lon + "&";
  url += "lat=" + lonlat.lat + "&";

  url += "czoom=" + czoom + "&";
  url += "cmove=" + cmove + "&";
  url += "cscale=" + cscale;

  window.open(url, 'VoorbeeldKaart', "width="+width+",height="+height);
}

function removeMarker() {
  markers.clearMarkers();

  document.getElementById('but_rmmarker').disabled = true;
        document.getElementById('but_center').disabled = true;
}

function centerOnMarker() {
  var marker = markers.markers;

  if (marker.length === 0) {
    return;
  }

  var lonlat = marker[0].lonlat.clone();
  var zoom = document.getElementById('mapzoom').value;

  map.setCenter(lonlat, zoom);
}