var map;
	//var mgr; // do not use: does not support show(), hide() functionality
	//var BASICclubsLarge = [];
	//var BASICclubsSmall = [];
	//var ADVclubsLarge = [];
	//var ADVclubsSmall = [];
	//var ELITEclubsSmall = [];
	//var ELITEclubsLarge = [];
	
	var allMarkers = [];
	// objects in allMarkers must have the following properties:
	//  .marker = gMarker object
	//  .isLarge = true | false (is gIcon is a large icon or not)
	//  .type = 'A' | 'E' | 'B' (Club Type, begin advanced, elite or basic)
	//  .stars = 0...5 (numbers of club stars, between 0 and 5 - note 5+ will be stored as 6 if required)
	
	var optionStars = 0;
	var optionType = '-';
	
	// star images
	var maxStars = 5;

function focusBelgie() {
	map.setCenter(new GLatLng(50.70515564735687,4.339599609375), 8);
	var SW = new GLatLng(49.82735281650853,2.252197265625);
	var NE = new GLatLng(51.56682701546225,6.427001953125);
	var Belgium = new GLatLngBounds(SW,NE);
	var zoomLevelForBelgium = map.getBoundsZoomLevel(Belgium);
	map.setZoom(zoomLevelForBelgium);
}

function focusDeutschland() {
	map.setCenter(new GLatLng(51.5,10.0),8);
	map.setZoom(6);
}

function initialize() { 
if (GBrowserIsCompatible()) 
{ 
	// show map
	document.getElementById('map_canvas').style.visibility = 'visible';
	document.getElementById('map_canvas').style.height = '525px';
	

	map = new GMap2(document.getElementById("map_canvas"));
	map.setCenter(new GLatLng(50.70515564735687,4.339599609375), 8);
//	map.setUIToDefault(); 
	map.setMapType(G_PHYSICAL_MAP);
	map.addControl(new GSmallZoomControl3D());
//	map.addControl(new GMenuMapTypeControl());
//	map.addControl(new GScaleControl());
//	map.addControl(new GOverviewMapControl());
	
	var SW = new GLatLng(49.82735281650853,2.252197265625);
	var NE = new GLatLng(51.56682701546225,6.427001953125);
	var Belgium = new GLatLngBounds(SW,NE);
	//var zoomLevelForBelgium = map.getBoundsZoomLevel(Belgium);
	//map.setZoom(zoomLevelForBelgium+1);
	map.enableContinuousZoom();
	//map.disableDoubleClickZoom();
	
	 GEvent.addListener(map,"zoomend", function (previousLevel, newLevel) {
	 		visualise();	
	});

/*
 GEvent.addListener(map,"moveend", function () {
	 
	window.status = "Zoom level = " + map.getZoom() + " Center = " + map.getCenter() + " box: SWlat = " + map.getBounds().getSouthWest().lat() + " SWlong = " + map.getBounds().getSouthWest().lng() +
	" NWlat = " + map.getBounds().getNorthEast().lat() + " NWlong= " + map.getBounds().getNorthEast().lng();
	
});
*/
	// load the markers from the xml files
	loadFromXML("BASICdata.xml", 'Basic');
	loadFromXML("ADVANCEDdata.xml", 'Advanced');
	loadFromXML("ELITEdata.xml", 'Elite');
	loadFromXML("PREVIOUSAUDITSdata.xml", 'Older');
	loadFromXML("DEUTSCHLANDdata.xml",'Deutschland');
	loadFromXML("FINLANDdata.xml",'Finland');
} 
else {
	// niet ondersteunde browser
	var divlayer = document.getElementById('notsupportedbrowser');
	divlayer.style.visibility = 'visible';
	divlayer.style.height = '';
}
} 

function loadFromXML(XMLfile, clubType) {
	// large football icon
	var largeIcon = new GIcon(G_DEFAULT_ICON);
		largeIcon.image = "http://www.footpass.be/pics/voetbal.png";
		largeIcon.shadow = "http://www.footpass.be/pics/voetbal_schaduw.png";
		largeIcon.iconSize = new GSize(27, 27);
		largeIcon.shadowSize = new GSize(39, 39);
		largeIcon.iconAnchor = new GPoint(5, 22);
		largeIcon.infoWindowAnchor = new GPoint(19, 2);

	// small football icon
	var smallIcon = new GIcon(G_DEFAULT_ICON);
		smallIcon.image = "http://www.footpass.be/pics/voetbal_small.png";
		smallIcon.shadow = "http://www.footpass.be/pics/voetbal_small_schaduw.png";
		smallIcon.iconSize = new GSize(13, 13);
		smallIcon.shadowSize = new GSize(19, 19);
		smallIcon.iconAnchor = new GPoint(5, 11);
		smallIcon.infoWindowAnchor = new GPoint(8, 2);

	// ensure the options are read - necessary after a page refresh
	getOptionValues();

	// download and parse the XML data file
	GDownloadUrl(XMLfile, function(data, responseCode) {  
		//parse the data
		var xml = GXml.parse(data);  
		// get the marker elements
		var markers = xml.documentElement.getElementsByTagName("marker");
		var aMarker;
		// process the marker elements in the xml file
		for (var i = 0; i < markers.length; i++) 
		{    
			// get the location in the attributes lat and lng
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
			                 parseFloat(markers[i].getAttribute("lng")));
			var name = markers[i].getAttribute("name");
			var stars = markers[i].getAttribute("stars");
			
			// set the content HTML to a default value			                     
			var contentHTML = "<p>unknown</p>";
			// get the <marker><contentHTML> element and get the nodeValue
			if (markers[i].getElementsByTagName("contentHTML").length > 0) {
				contentHTML = markers[i].getElementsByTagName("contentHTML")[0].firstChild.nodeValue;
			} 
			
			// create a marker and add it to the array and on the map
			aMarker = createMarker(point, largeIcon , contentHTML, name  );
			map.addOverlay(aMarker);
			
			// objects in allMarkers must have the following properties:
			//  .marker = gMarker object
			//  .isLarge = true | false (is gIcon is a large icon or not)
			//  .type = 'A' | 'E' | 'B' (Club Type, begin advanced, elite or basic)
			//  .stars = '0' ... '5' '5+' (numbers of club stars, between 0 and 5 or 5+)
			var obj = new Object();
			obj.marker = aMarker;
			obj.isLarge = false;
			obj.type = clubType;
			obj.stars = stars;
			allMarkers.push(obj);
			if (!mustBeShown(obj)) {
				aMarker.hide();
			}
			
			
			// create Small marker and add it ot the array and on the map
			aMarker= createMarker(point, smallIcon, contentHTML, name );
			map.addOverlay(aMarker);
			
			// objects in allMarkers must have the following properties:
			//  .marker = gMarker object
			//  .isLarge = true | false (is gIcon is a large icon or not)
			//  .type = 'Advanced' | 'Elite' | 'Basic' | 'Older' (Club Type, begin advanced, elite or basic)
			//  .stars = '0' ... '5' '5+' (numbers of club stars, between 0 and 5 or 5+)
			var obj = new Object();
			obj.marker = aMarker;
			obj.isLarge = true;
			obj.type = clubType;
			obj.stars = stars;
			allMarkers.push(obj);

			if (!mustBeShown(obj)) {
				aMarker.hide();
			}


		}
		
		// add the markers to the markermanager
		//mgr.addMarkers(clubsLarge, 10, 16);
		//mgr.addMarkers(clubsSmall, 0, 9);
		//mgr.refresh();
	  });
	  
	  // done
	  return true;
}

/*
function createMarker(map, mgr, point, divlayer) {

	var baseIcon = new GIcon(G_DEFAULT_ICON);
		baseIcon.image = "http://www.footpass.be/pics/voetbal.png";
		baseIcon.shadow = "http://www.footpass.be/pics/voetbal_schaduw.png";
		baseIcon.iconSize = new GSize(27, 27);
		baseIcon.shadowSize = new GSize(39, 39);
		baseIcon.iconAnchor = new GPoint(5, 22);
		baseIcon.infoWindowAnchor = new GPoint(19, 2);

	var smallIcon = new GIcon(G_DEFAULT_ICON);
		smallIcon.image = "http://www.footpass.be/pics/voetbal_small.png";
		smallIcon.shadow = "http://www.footpass.be/pics/voetbal_small_schaduw.png";
		smallIcon.iconSize = new GSize(13, 13);
		smallIcon.shadowSize = new GSize(19, 19);
		smallIcon.iconAnchor = new GPoint(5, 11);
		smallIcon.infoWindowAnchor = new GPoint(8, 2);
		
	var markerLarge = new GMarker(point,{ icon:baseIcon });
	var markerSmall = new GMarker(point,{ icon:smallIcon });

GEvent.addListener(markerLarge , "click", 
	function() {
		var content=document.getElementById(divlayer);
		//map.setZoom(13);
		//map.setCenter(point);
		markerLarge.openInfoWindowHtml(content.innerHTML);
		/*
		if (map.getZoom() > 13) { 
			map.setZoom(13);
		}
		*//*
	}
);

GEvent.addListener(markerSmall, "click", 
	function() {
		var content=document.getElementById(divlayer);
		//map.setZoom(9);
		//map.setCenter(point);
		markerSmall.openInfoWindowHtml(content.innerHTML);
	}
);

GEvent.addListener(markerSmall, "dblclick", 
	function() {
		var content=document.getElementById(divlayer);
		
		map.setZoom(13);

		markerSmall.openInfoWindowHtml(content.innerHTML);
		
		map.setCenter(point);
	}
);


mgr.addMarker(markerLarge, 10, 16);
mgr.addMarker(markerSmall, 0, 9);
mgr.refresh();
//map.addOverlay(markerLarge);
//map.addOverlay(markerSmall);

return true;
}
*/

function createMarker(point, theIcon, contentHTML, theTitle) {

	var aMarker = new GMarker(point,{ icon:theIcon, title:theTitle });

	GEvent.addListener(aMarker, "click", 
		function() {
			
			aMarker.openInfoWindowHtml(contentHTML);
		}
	);

	return aMarker;
}


function animate() {        
	map.panTo(new GLatLng(37.4569, -122.1569));  
}

function visualise() {
	// Show/Hide the desired gMarkers
	// rules:
	//  1. ZoomLevel >= 10: show Large Markers, hide Small Markers and vice versa
	//  2. Stars = 0: show all; Stars = 1: show clubs with one or more stars; etc
	//  3. type = A: show only Advanced clubs; type = B: show only Basic clubs; type = E: show only Elite clubs; type = - : show all

	// Ensure parameters are set correct
	getOptionValues();
	
	// run through the lists of markers
	for (var i = 0; i < allMarkers.length; i++) {
		if (mustBeShown(allMarkers[i])) {
			allMarkers[i].marker.show();
		} else {
			allMarkers[i].marker.hide();
		}
	}
	
	// close the info window
	map.closeInfoWindow();
	
}

function mustBeShown(markerObject) {
	// evaluate if the markerObject must be shown.
	// rules:
	//  1. ZoomLevel >= 10: show Large Markers, hide Small Markers and vice versa
	//  2. Stars = 0: show all; Stars = 1: show clubs with one or more stars; etc
	//  3. type = A: show only Advanced clubs; type = B: show only Basic clubs; type = E: show only Elite clubs; type = - : show all

	// marker object must have the following properties:
	//  .marker = gMarker object
	//  .isLarge = true | false (is gIcon is a large icon or not)
	//  .type = 'A' | 'E' | 'B' (Club Type, begin advanced, elite or basic)
	//  .stars = 0...5 (numbers of club stars, between 0 and 5 - 5+ will be modelled as 6 if required)

	var result = true;
	
	// 1. zoom level
	if ( (map.getZoom() >= 10) && (markerObject.isLarge == true) ) {
		return false;
	}
	
	if ( (map.getZoom() < 10) && (markerObject.isLarge == false) ) {
		return false;
	}
	
	// 2. type
	if (optionType != '-') {
		if (optionType != markerObject.type) {
			return false;
		}
	}
	
	// 3. stars
	// check
	if (optionStars > markerObject.stars) return false;
	
	// All checks passed
	return true;	
}

function showHide(showIt, clubsLarge, clubsSmall) {
	if (map.getZoom >= 10) {


	for (var i = 0; i < clubsLarge.length; i++) {
		if (showIt == 1) {
			clubsLarge[i].show();
		} else {
			clubsLarge[i].hide();
		}
	}

	} else {
	}


	for (var i = 0; i < clubsSmall.length; i++) {
		if (showIt == 1) {
			clubsSmall[i].show();
		} else {
			clubsSmall[i].hide();
		}
	}
}

function getOptionValues() {

/*
var radioGrp = document['forms']['frmOptions']['radClubStars'];
for(i=0; i < radioGrp.length; i++){
    if (radioGrp[i].checked == true) {
        optionStars = radioGrp[i].value;
        break;
    }
}
*/

var radioGrp = document['forms']['frmOptions']['radClubType'];
for(i=0; i < radioGrp.length; i++){
    if (radioGrp[i].checked == true) {
        optionType = radioGrp[i].value;
        break;
    }
}
}

function getClassName(starNumber) {
	if (starNumber <= optionStars) {
		return "star_Selected";
	} else {
		return "star_notSelected";
	}
}

// click on a star
function handleStarClick(starNumber) {
	//star1.src=star_selected.src;
	optionStars = starNumber;
	
	
	// set the images
	for (var i = 1; i <= maxStars ; i++) {
		document.getElementById("imgStar"+i).className = getClassName(i);	
	}	
	
	visualise();
}

// mouseover on a star
function handleStarMouseover(starNumber) {
	// set the images
	for (var i = 1; i <= maxStars ; i++) {
		if (i <= starNumber) {
			document.getElementById("imgStar"+i).className = "star_Hover";
		} else {
			document.getElementById("imgStar"+i).className = "star_notSelected";	
		}
	}	
}

// mouseout a star
function handleStarMouseout(starNumber) {
	// set the images
	for (var i = 1; i <= maxStars ; i++) {
			document.getElementById("imgStar"+i).className = getClassName(i);	
	}	
}