Proj4js.defs["EPSG:900913"] = "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs";

/*OpenLayers.Util.onImageLoadError = function() {
	this.src = "/kaart/waterkaart/404.png";
};*/

var projWGS84 = new OpenLayers.Projection("EPSG:4326");
var projMerc = new OpenLayers.Projection("EPSG:900913");

var map;

function niceScale() {
	var scale = this.map.getScale();
	if (!scale) {
		return;
	}
	if (scale >= 9500 && scale <= 950000) {
		scale = Math.round(scale / 1000) + "K";
	} else if (scale >= 950000) {
		scale = Math.round(scale / 1000000) + "M";
	} else {
		scale = Math.round(scale);
	}
	return "1 : " + scale;
}

function niceDegrees(coord) {
	var deg = Math.floor(coord);
	var min = (coord - deg) * 60;
	return deg + "&deg; " + min.toFixed(2) + "'";
}

function niceFormat(lonLat) {
	return niceDegrees(lonLat.lat) + " NB " + niceDegrees(lonLat.lon) + " OL, " + niceScale.call(this) + " (Z" + this.map.getZoom() + ")";
};

function get_osm_url(bounds) {
	var res = this.map.getResolution();
	var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
	var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
	var z = this.map.getZoom();
	var path = z + "/" + x + "/" + y + "." + this.type;
	var url = this.url;
	if (url instanceof Array) {
		url = this.selectUrl(path, url);
	}
	return url + path;
}

function style_betonning(feature) {
	var img = "afbeeldingen/" + feature.attributes["code"] + ".gif";
	feature.style = OpenLayers.Util.extend({"externalGraphic": img, "graphicWidth": 25, "graphicHeight": 65, "graphicXOffset": -13, "graphicYOffset": -56}, OpenLayers.Feature.Vector.style['default']);
}

function openMapPopup(marker, description) {
	var popup = new OpenLayers.Popup.FramedCloud("markerPopup", marker.lonlat, null, description, marker.icon, true);
	map.addPopup(popup);
}

function initMap() {
	OpenLayers.Feature.Vector.style['default'].cursor = 'pointer';

	var extent = new OpenLayers.Bounds(2.7984557419334006, 50.62642256377723, 8.4, 53.954129036190224);
	extent.transform(projWGS84, projMerc);
	map = new OpenLayers.Map('map', {
			displayProjection: projWGS84,
			projection: projMerc,
			maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
			restrictedExtent: extent,
			numZoomLevels: 16,
			maxResolution: 156543,
			units: 'm',
			controls: [
				new OpenLayers.Control.MouseDefaults(),
				new OpenLayers.Control.LayerSwitcher(),
				new OpenLayers.Control.PanZoomBar(),
				new OpenLayers.Control.MousePosition({formatOutput: niceFormat}),
				new OpenLayers.Control.MousePosition({formatOutput: niceFormat, element: document.getElementById("headerMousePosition")}),
				new OpenLayers.Control.CoordBorders()
			]
		});

	// Water layer
	var layerWater = new OpenLayers.Layer.TMS("Waterkaart", "/kaart/waterkaart/", {type:'png', getURL: get_osm_url, border: 1});
	// Google Layer
	var layerGSatellite = new OpenLayers.Layer.Google("Google satelliet", {sphericalMercator: true, type: G_SATELLITE_MAP});
	var layerGNormal = new OpenLayers.Layer.Google("Google maps", {sphericalMercator: true, type: G_NORMAL_MAP});
	var layerGHybride = new OpenLayers.Layer.Google("Google hybrid", {sphericalMercator: true, type: G_HYBRID_MAP});
	// Bing Virtual Earth
	var layerVEshaded = new OpenLayers.Layer.VirtualEarth("Bing Shaded", {sphericalMercator: true, type: VEMapStyle.Shaded});
	var layerVEhybrid = new OpenLayers.Layer.VirtualEarth("Bing Hybrid", {sphericalMercator: true, type: VEMapStyle.Hybrid});
	var layerVEaerial = new OpenLayers.Layer.VirtualEarth("Bing Aerial", {sphericalMercator: true, type: VEMapStyle.Aerial});
	// Openstreetmap
	var layerMapnik = new OpenLayers.Layer.TMS("Openstreetmap", "http://tile.openstreetmap.org/mapnik/", {type:'png', getURL: get_osm_url, border: 1});
	// Mapoverlay
	var layerOverlay = new OpenLayers.Layer.TMS("Overlay", "/kaart/overlay/", {type:'png', getURL: get_osm_url, border: 1, isBaseLayer: false, displayInLayerSwitcher: false});
	var layerMarkers = new OpenLayers.Layer.Markers("Markers", {displayInLayerSwitcher: true});

	// Zorg dat layerGSatellite de zichtbaarheid van layerOverlay beïnvloed
	layerGSatellite._display = layerGSatellite.display;
	layerGSatellite.display = function(display) {
		layerGSatellite._display(display);
		layerOverlay.setVisibility(display);
	};

	map.addLayers([layerGNormal, layerGHybride, layerGSatellite, layerVEshaded, layerVEhybrid, layerVEaerial, layerMapnik]);
	map.setBaseLayer(layerMapnik);

	if (!map.getCenter()) { // Zoom naar laatste trace
		Bounds.transform(projWGS84, projMerc);
		map.zoomToExtent(Bounds);
	}
	loadTraces(Traces); // Laad traces

	//if (etsMarker !== undefined) 
	//{ // Voeg marker toe
	//	etsMarker.location.transform(projWGS84, projMerc);
	//	var feature = new OpenLayers.Feature(layerMarkers, etsMarker.location);
	//	var marker = feature.createMarker();
	//	layerMarkers.addMarker(marker);
	//	marker.events.register("click", marker, function() { openMapPopup(marker, etsMarker.description); });
	//}

	// Voeg marker layer als laatste toe zodat deze laag bovenop zit en klikbaar is
	//map.addLayer(layerMarkers);

	map.addControl(new OpenLayers.Control.Permalink());
}

function loadTraces(groups) {
	var switcher = map.getControlsByClass("OpenLayers.Control.LayerSwitcher")[0];
	switcher.loadTraces(groups);
}

function growMap() {
	document.documentElement.lastChild.className = "largemap"; // Class of html body

	var map = document.getElementById("map");
	map.style.top = 0;
}

function shrinkMap() {
	document.documentElement.lastChild.className = "smallmap"; //Class of html body

	var map = document.getElementById("map");
	map.style.top = document.getElementById("header").clientHeight + "px";
}

function initPositions() {
	/* Initialiseer gegokte posities */
	document.getElementById("map").style.top = document.getElementById("header").clientHeight + "px";
	document.getElementById("map-grow").style.top = document.getElementById("header").clientHeight + "px";
	document.getElementById("left").style.top = document.getElementById("header").clientHeight + "px";

	var headerMousePosition = document.getElementById("headerMousePosition");
	headerMousePosition.textContent = "N/A"; // headerMousePosition moet al een regel bevatten om de hoogte te kunnen berekenen
	headerMousePosition.style.top = document.getElementById("header").clientHeight - headerMousePosition.clientHeight - 3 + "px";
}

function init() {
	/* Doe de initialisatie */
	initPositions(); // Initialiseer eerst de posities, anders kan de synchronisatie tussen de verschillende lagen van de kaart stuk gaan
	initMap();
}