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 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 iconOrange = new GIcon(); 
iconOrange.image = 'http://labs.google.com/ridefinder/images/mm_20_orange.png';
iconOrange.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconOrange.iconSize = new GSize(12, 20);
iconOrange.shadowSize = new GSize(22, 20);
iconOrange.iconAnchor = new GPoint(6, 20);
iconOrange.infoWindowAnchor = new GPoint(5, 1);

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 iconPurple = new GIcon(); 
iconPurple.image = 'http://labs.google.com/ridefinder/images/mm_20_purple.png';
iconPurple.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconPurple.iconSize = new GSize(12, 20);
iconPurple.shadowSize = new GSize(22, 20);
iconPurple.iconAnchor = new GPoint(6, 20);
iconPurple.infoWindowAnchor = new GPoint(5, 1);

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

var customIcons = [];
customIcons["breed_ondiep"] = iconGreen;
customIcons["breed_getij"] = iconBlue;
customIcons["breed_diep"] = iconOrange;
customIcons["smal_ondiep"] = iconRed;
customIcons["smal_getij"] = iconPurple;
customIcons["smal_diep"] = iconBlack;

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("breed_ondiep");
    show("breed_getij");
    show("breed_diep");
    show("smal_ondiep");
    show("smal_getij");
    show("smal_diep");
    });
}

function createMarker(point, name, windInfo, naamLocatie, landLocatie, wereldLocatie, vaarbaar) {
	var marker = new GMarker(point,{icon:customIcons[vaarbaar],title:"" + name +"" } );
	var html = "<center><b><a href=\/spots/s/id/" + naamLocatie + "\><h1>" + name + "</h1></b></a></center>";	
	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);
	}
}