var gmarkers = [];
var htmls = [];
var i = 0;
var side_bar_html = '<h2>Projecten</h2><ul class="klaplijst">';
var jscript = '<script type="text/javascript">function hide(object) { alert("hoi"); object.style.visibility="hidden"; }</script>';

function initialize(parentnr) {

  if (GBrowserIsCompatible()) {
  
    // creating the elemetary object GMap2 and getting the DOM object
    var map = new GMap2(document.getElementById("map_projectencanvas"));
    
	// initializing the map ((latitude, longitude), zoom level)    
	map.setCenter(new GLatLng(51.36435879953543,6.147022247314453),14);
	var bounds = new GLatLngBounds();
	
	//creating custom icon
	var antaresIcon = new GIcon();
	antaresIcon.image = "/Pub/Config/Iconen/Google_Maps_Icoon_1.html";
	//antaresIcon.image = "http://www.thuisbijantares.nl/images/corporate/gmantred.png";
	antaresIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	antaresIcon.iconSize = new GSize(20, 31);
    antaresIcon.shadowSize = new GSize(22, 20);
    antaresIcon.iconAnchor = new GPoint(6, 20);
    antaresIcon.infoWindowAnchor = new GPoint(5, 1);
	
	markerOptions = { icon:antaresIcon };
	
	// default map controls
    var customUI = map.getDefaultUI();
    customUI.controls.scalecontrol = false;
    map.setUI(customUI);

	// setting the map type: G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, G_PHYSICAL_MAP 
    map.setMapType(G_NORMAL_MAP);
	//alert(parentnr);
    // getting the markers form the xml
	GDownloadUrl("http://www.thuisbijantares.nl/?id=1534&parentnr="+parentnr, function(data, responseCode) {    
    var xml = GXml.parse(data);  
		
    var towns = xml.documentElement.getElementsByTagName("town"); 
		
    for (var i = 0; i < towns.length; i++) { 	
	
	// adds a town to the side_bar html
	side_bar_html += '<li><a class="klaplink" href="#">' + towns[i].getAttribute("value") + '</a><div class="klapcontent">';
	
	var markers = towns[i].getElementsByTagName("marker");	
	
	for (var ii = 0; ii < markers.length; ii++) {
	 
	var balloontext = GXml.value(markers[ii].getElementsByTagName("infowindow")[0]);
	var title = markers[ii].getAttribute("title");
	var itemnr = markers[ii].getAttribute("itemnr");
	var point = new GLatLng(parseFloat(markers[ii].getAttribute("lat")),parseFloat(markers[ii].getAttribute("lng")));

	// creating the InfoWindow (balloon)
	var marker = createMarker(point,balloontext,title,itemnr);
	map.addOverlay(marker);
	 	  	  	 
	// determining centerpoint of the map and zoom level
	bounds.extend(point);				 	  	  
	
	} // end for ii
	
	// add some html to the side_bar
	side_bar_html += '<br /></div></li>'	
	document.getElementById("projecten").innerHTML = side_bar_html;
	
	} // end for i
	
	// add some html to the side_bar
	side_bar_html += '</ul>'
	document.getElementById("projecten").innerHTML = side_bar_html;

	//zoom niveau
	map.setZoom(map.getBoundsZoomLevel(bounds)-1);	
		
	//het centreren van de kaart
	map.setCenter(bounds.getCenter());
	     // .uitklap lijst
    $j('#zieook ul.klaplijst div.klapcontent').addClass('open').prev('a').toggle(function(){
      $j(this).parent().addClass('open').find('div.klapcontent').animate({height:'show',opacity:'show'});
    },function(){
      $j(this).parent().removeClass('open').find('div.klapcontent').slideUp();
	});
	});		
	
	}
	else {
	// not browser compatible
	alert("Sorry, the Google Maps API is not compatible with this browser");
	}

	}	
	
	// create marker and set up event window
	function createMarker(point,html,label,itemnr){	
	var marker = new GMarker(point, markerOptions);
	GEvent.addListener(marker, "click", function() {
	marker.openInfoWindowHtml(html,{maxWidth:400});
			marker.setImage("/Pub/Config/Iconen/Google_Maps_Icoon_2.html");
      });
	GEvent.addListener(marker, "infowindowclose", function() {
    marker.setImage("/Pub/Config/Iconen/Google_Maps_Icoon_1.html");
      });
	
	// save the info we need to use later for the side_bar
	gmarkers[i] = marker;
	htmls[i] = html;
		
	// add a project to the side_bar html
    side_bar_html += '<a href="/smartsite.net?id=' + itemnr + '" onmouseover="myclick(' + i + ')">' + label + '</a>';
	document.getElementById("projecten").innerHTML = side_bar_html;
	
	i++;
	return marker;
    }

    // This function picks up the click and opens the corresponding info window
    function myclick(i) {
	GEvent.trigger(gmarkers[i], "click");
    }