//var cssNode=document.createElement('link');
//cssNode.type='text/css';
//cssNode.rel='stylesheet';
//cssNode.href='../../maps/clustermarker/HtmlControl/HtmlControl.css';
//document.getElementsByTagName("head")[0].appendChild(cssNode);

var map, cluster, eventListeners=[], markersArray=[], icon;

function myOnload(url) {
	if (GBrowserIsCompatible()) {
		map=new GMap2(document.getElementById('map'));
		map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7)));
		map.addControl(new GSmallMapControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 28)));
		
		GEvent.addListener(map, 'zoomend', function() { map.closeInfoWindow(); });
		
		//	add an HtmlControl containing a couple of form elements
		//	see http://googlemapsapi.martinpearman.co.uk/htmlcontrol for more info on HtmlControl
		var html='<div class="htmlControl" style="padding:0px 3px 3px 3px;background:white;border:1px solid #001B41;border-bottom:2px solid #001B41;border-right:2px solid #001B41;">Groepering: <input type="checkbox" checked="checked" onclick="toggleClustering()" /></div>';
		var control=new HtmlControl(html);
		map.addControl(control, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,7)));
		
		function myClusterClick(args) {
			cluster.defaultClickAction=function(){
				map.setCenter(args.clusterMarker.getLatLng(), map.getBoundsZoomLevel(args.clusterMarker.clusterGroupBounds))
				delete cluster.defaultClickAction;
			}
			var html='<div style="height:6em; overflow:auto; width:24em"><strong>'+args.clusteredMarkers.length+' leden:</strong><br />';
			for (i=0; i<args.clusteredMarkers.length; i++) {
				html+='<a href="javascript:cluster.triggerClick('+args.clusteredMarkers[i].index+')">'+args.clusteredMarkers[i].getTitle()+'</a><br />';
			}
			html+='<span><i><a href="javascript:void(0)" onclick="cluster.defaultClickAction()">Zoom</a> in om deze leden te tonen</i></span></div>';
			//	args.clusterMarker.openInfoWindowHtml(html);
			map.openInfoWindowHtml(args.clusterMarker.getLatLng(), html);
		}
		
		//	create a ClusterMarker
		cluster=new ClusterMarker(map, {clusterMarkerTitle:'Klik voor meer info over %count personen' , clusterMarkerClick:myClusterClick });
		
		icon=new GIcon();
		icon.shadow='http://static.netwerklounge.be/images/maps/icon_shadow.png';
		icon.shadowSize=new GSize(37, 34);
		icon.iconSize=new GSize(20, 34);
		icon.iconAnchor=new GPoint(10, 30);
		icon.infoWindowAnchor=new GPoint(10, 8);
		
		selectExample(url);
	}
}

function newMarker(markerLocation, voornaam, naam, address,nick,foto, markerIcon) {
	var html = '<div style="float:right;margin-right:10px;"><img height="30px" src="'+foto+'" /></div><strong><a href="/'+nick+'" title='+voornaam+' '+naam+'>'+voornaam+' '+naam+'</a></strong><br />'+address;
	var marker=new GMarker(markerLocation, {title:voornaam+' '+naam, icon:markerIcon});
	eventListeners.push(GEvent.addListener(marker, 'mouseover', function() {
		marker.openInfoWindowHtml(html);
	}));
	return marker;
}


function createTabbedMarker(point,htmls,labels) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          // adjust the width so that the info window is large enough for this many tabs
          if (htmls.length > 2) {
            htmls[0] = '<div style="width:'+htmls.length*88+'px">' + htmls[0] + '<\/div>';
          }
          var tabs = [];
          for (var i=0; i<htmls.length; i++) {
            tabs.push(new GInfoWindowTab(labels[i],htmls[i]));
          }
          marker.openInfoWindowTabsHtml(tabs);
        });
        return marker;
      }



function toggleClustering() {
	cluster.clusteringEnabled=!cluster.clusteringEnabled;
	cluster.refresh(true);
}

function selectExample(url){
	processIt=function(file, code){
		if(code===200){
			markersArray=[];
			for(i=eventListeners.length-1; i>=0; i--){
				GEvent.removeListener(eventListeners[i]);
			}
			eventListeners=[];
			eval(file);
			var marker, newIcon, j=1, title, lat, lng;

			for (var i=0; i<json.length; i++) {
				newIcon=new GIcon(icon, 'http://static.netwerklounge.be/images/maps/icon_'+j+'.png');
				lat=Math.round(json[i].lat*100)/100;
				lng=Math.round(json[i].lng*100)/100;
				voornaam=json[i].voornaam;
				naam=json[i].naam;
				address=json[i].address;
				nick=json[i].nick;
				var letter=nick.charAt(0);
				if(json[i].foto)
				{
					foto = 'http://static.netwerklounge.be/'+letter+'/'+nick+'/'+nick+'_m.jpg';
				}
				else{
					foto = 'http://static.netwerklounge.be/images/matrixo_0.jpg';
				}
				marker=newMarker(new GLatLng(json[i].lat, json[i].lng), voornaam, naam, address,nick, foto, newIcon);

				markersArray.push(marker);
				j++;
				if (j>26) {
					j=1;
				}
			}
			cluster.removeMarkers();
			cluster.addMarkers(markersArray);
			cluster.fitMapToMarkers();
			map.savePosition();
			
			json=[];
		} else {
			GLog.write('Marker data retrieval failed. Error code: '+code);
		}
	};

	
	GDownloadUrl(url, processIt);
	
}



	function bigmap(){
		var map;
		map = document.getElementById('map');
		//minheight opslaan
		if (document.getElementById('mapknop').innerHTML=="Grotere map"){
			document.getElementById('mapknop').innerHTML="Kleinere map";
			map.style.height='500px';
		}
		else{
			document.getElementById('mapknop').innerHTML="Grotere map";
			map.style.height='200px';
		}
	}