function ClusterManager() {
	mapIcons["markers"] = {};
	mapIcons["markers"]["detail"] = new GIcon();
	mapIcons["markers"]["detail"].image = '/images/icon/marker-detail.png';
	mapIcons["markers"]["detail"].iconSize = new GSize(23, 30);
	mapIcons["markers"]["detail"].iconAnchor = new GPoint(12, 30);
	mapIcons["markers"]["detail"].infoWindowAnchor = new GPoint(10, 10);
	mapIcons["markers"]["detail"].shadow = '/images/icon/marker-detail-shadow.png';
	mapIcons["markers"]["detail"].shadowSize = new GSize(36, 28);		
	
	mapIcons["markers"]["cluster"] = new GIcon();
	mapIcons["markers"]["cluster"].image = '/images/icon/marker-cluster.png';
	mapIcons["markers"]["cluster"].iconSize = new GSize(28, 35);
	mapIcons["markers"]["cluster"].iconAnchor = new GPoint(14, 35);
	mapIcons["markers"]["cluster"].infoWindowAnchor = new GPoint(14, 17);
	mapIcons["markers"]["cluster"].shadow = '/images/icon/marker-cluster-shadow.png';
	mapIcons["markers"]["cluster"].shadowSize = new GSize(46, 35);
}

ClusterManager.prototype.initialize = function() {
	mapInit({});
	
	this.w = parseInt(eleId('map-canvas').offsetWidth);
	this.h = parseInt(eleId('map-canvas').offsetHeight);
	
	this.mapBound = new BoundControl(100);
	
	GEvent.addListener(map, "dragend", function() {
		map.closeInfoWindow();
		clManager.refresh();
	});
	GEvent.addListener(map, "zoomend", function() {
		map.closeInfoWindow();
		clManager.refresh();
	});
	
	clManager.refresh();
}
ClusterManager.prototype.refresh = function() {
	var sw = this.mapBound.getSw(map);
	var swLat = sw.lat();
	var swLng = sw.lng();
	
	var ne = this.mapBound.getNe(map);
	var neLat = ne.lat();
	var neLng = ne.lng();
	
	jxUrl = '/jx.php?map=canvas&sw='+swLat+','+swLng+'&ne='+neLat+','+neLng+'&lvl='+map.getZoom()+'&sc='+this.w+','+this.h;
	jxMan.load('mapcanvas', jxUrl, 'clManager.redraw()');
}
ClusterManager.prototype.redraw = function() {
	map.clearOverlays();
	
	var jxResp = jxMan.get('mapcanvas');

	for (var n = 0; n < jxResp.length; n++) {
		var jxItem = jxResp[ n ];

		if (jxItem.type == 'cluster') {
			var marker = new GMarker(new GLatLng(jxItem.lat, jxItem.lng), {icon: mapIcons["markers"]["cluster"], title: 'Klik hier om de '+jxItem.numof+' foto\'s in deze groep te zien.'});
			marker.lvl = jxItem.lvl;
			marker.midlat = jxItem.midlat;
			marker.midlng = jxItem.midlng;
			
			GEvent.addListener(marker, "click", function() {
				mapToLatLng(this.midlat, this.midlng, this.lvl);
			});
		} else {
			var marker = new GMarker(new GLatLng(jxItem.lat, jxItem.lng), {icon: mapIcons["markers"]["detail"]});
			
			marker.html = '<div id="marker">';
			marker.html += '<a href="'+jxItem.url+'" class="image"><img src="'+jxItem.photo+'" /></a>';
			marker.html += '<a href="'+jxItem.url+'" class="title">'+jxItem.title+'</a>';
			if (jxItem.description) {
				marker.html += '<p>'+jxItem.description+'</p>';
			}
			marker.html += '<div><a href="'+jxItem.url+'">Bekijk foto</a> - <a href="#" onclick="mapToLatLng('+jxItem.lat+','+jxItem.lng+','+jxItem.lvl+');">Zoom in op lokatie</a></div>';
			marker.html += '</div>';
			marker.type = jxItem.type;
			
			GEvent.addListener(marker, "click", function() {
				this.openInfoWindowHtml(this.html);
			});
		}
		
		map.addOverlay(marker);
	}
}

var clManager = new ClusterManager();