var iconRed = new GIcon(); 
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);

var iconGreen = new GIcon(); 
iconGreen.image = 'http://labs.google.com/ridefinder/images/mm_20_green.png';
iconGreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconGreen.iconSize = new GSize(12, 20);
iconGreen.shadowSize = new GSize(22, 20);
iconGreen.iconAnchor = new GPoint(6, 20);
iconGreen.infoWindowAnchor = new GPoint(5, 1);

var iconGray = new GIcon(); 
iconGray.image = 'http://labs.google.com/ridefinder/images/mm_20_gray.png';
iconGray.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconGray.iconSize = new GSize(12, 20);
iconGray.shadowSize = new GSize(22, 20);
iconGray.iconAnchor = new GPoint(6, 20);
iconGray.infoWindowAnchor = new GPoint(5, 1);

var iconBlue = new GIcon(); 
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);

var customIcons = [];
customIcons["normaal"] = iconGreen;
customIcons["gemiddeld"] = iconBlue;
customIcons["niet"] = iconGray;
customIcons["expert"] = iconRed;

var gmarkers = [];
    
function markers_laden(landCode,landLat1,landLat2,landLon1,landLon2,landZoom) {

    var map = new GMap2(document.getElementById("map"));
	map.setMapType(G_HYBRID_MAP);		
	map.addControl(new GScaleControl);
	map.addControl(new GLargeMapControl());	
	map.setCenter(new GLatLng(landLat1,landLat2, landLon1,landLon2), landZoom);

	
	
    GDownloadUrl("/inc/page/spots/xml/getxmlspots.php?land=" + landCode, function(data) {
      var xml = GXml.parse(data);
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("naam");
        var windInfo = markers[i].getAttribute("windInfo");
        var vaarbaar = markers[i].getAttribute("vaarbaar");
        var naamLocatie = markers[i].getAttribute("naamLocatie");
        var landLocatie = markers[i].getAttribute("landLocatie");
        var wereldLocatie = markers[i].getAttribute("wereldLocatie");
        var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
        var marker = createMarker(point, name, windInfo, naamLocatie, landLocatie, wereldLocatie, vaarbaar);
        map.addOverlay(marker);
      }
    show("normaal");
    show("gemiddeld");
    hide("niet");
    show("expert");
    });
}

function createMarker(point, name, windInfo, naamLocatie, landLocatie, wereldLocatie, vaarbaar) {
	var marker = new GMarker(point,{icon:customIcons[vaarbaar],title:name + " " + windInfo} );
	var html = "<b><h1>" + name + "</h1></b><span class=\"tijd\">" + windInfo + "kn</span><br/><div class=\"tekst\"><a href=\"/spots/"+wereldLocatie+"/"+landLocatie+"/" + naamLocatie + "\">Bekijk details</a></div><br/>";	
	marker.mycategory = vaarbaar;                                 
	marker.myname = name;
	GEvent.addListener(marker, 'click', function() {
		marker.openInfoWindowHtml(html);
	});

	gmarkers.push(marker);
	return marker;
}

function show(category) {
	for (var i=0; i<gmarkers.length; i++) {
	  if (gmarkers[i].mycategory == category) {
	    gmarkers[i].show();
	  }
	}
	// check the checkbox ==
	document.getElementById(category+"box").checked = true;
}

function hide(category) {
	for (var i=0; i<gmarkers.length; i++) {
	  if (gmarkers[i].mycategory == category) {
	    gmarkers[i].hide();
	    gmarkers[i].closeInfoWindow();
	  }
	}
	// clear the checkbox ==
	document.getElementById(category+"box").checked = false;
	// close the info window, in case its open on a marker that we just hid
	//map.closeInfoWindow();
}


function boxclick(box,category) {
	if (box.checked) {
	  show(category);
	} else {
	  hide(category);
	}
}