var map;                                                                                                                                                                  
var lon="";                                                                                                                                                               
var lat="";                                                                                                                                                               
var zoom="";                                                                                                                                                              
var markers;

OpenLayers.Util.onImageLoadErrorColor="transparent";

function myFormat(lonLat) {
        var digits = parseInt(this.numdigits);
        var newHtml =                         
                "Lon: " +                     
                lonLat.lon.toFixed(digits) +  
                " Lat: " +                    
                lonLat.lat.toFixed(digits) +                                                                                                                                        
                " Zoom: " +                                                                                                                                                         
                this.map.getZoom();                                                                                                                                                 
        return newHtml;                                                                                                                                                             
};                                                                                                                                                                                  

function init(name,lon,lat,zoom){
        var center = center = new OpenLayers.LonLat(lon,lat);
        map = new OpenLayers.Map(               
                name,                           
                {                               
                        maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
                        numZoomLevels: 18,                                                      
                        maxResolution: 156543,                                                  
                        units: 'm',                                                             
                        controls:[                                                              
                                new OpenLayers.Control.MouseDefaults(),                         
                                new OpenLayers.Control.Attribution({displayClass: "olAttribution"}),
				new OpenLayers.Control.ScaleLine({bottomOutUnits: ""}),
				new OpenLayers.Control.PanZoomBar()
                        ],                                                                         
                        displayProjection: new OpenLayers.Projection("EPSG:4326"),                 
                        projection: new OpenLayers.Projection("EPSG:900913")                       

                });

        var layerMapnik = new OpenLayers.Layer.TMS(
                "Mapnik",
                ["http://tile.openstreetmap.nl/tiles/"],
                {
                        type:'png',
                        getURL:get_osm_url,
                        attribution: 'Map data &copy; 2010 <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a><br /><a href="http://openstreetmap.org">OpenStreetMap.org</a> contributors',
			transitionEffect: 'resize'
                }
        );

        map.addLayers([layerMapnik]);

        map.setCenter(center.transform(map.displayProjection, map.projection), zoom);
        map.addControl(new OpenLayers.Control.Permalink());

        markers=new OpenLayers.Layer.Markers("Markers");
        map.addLayer(markers);

	map.events.register('click', map, handleMapClick);
	map.events.register('zoomend', map, handleZoom);
}

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 handleMapClick(e) {
  	markers.clearMarkers();
	var lonlat = map.getLonLatFromViewPortPx(e.xy);
	markers.addMarker(new OpenLayers.Marker(lonlat));

	var newlonlat = lonlat.clone();
	newlonlat = newlonlat.transform(map.projection, map.displayProjection);

	document.getElementById('but_rmmarker').disabled = false;
	document.getElementById('but_center').disabled = false;

}

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);
}