// forward declarations to be sure variables are accesable throughout whole page

// Hier Icon
var icon = new GIcon();
icon.image = "kaart/hier25.png";
icon.iconSize = new GSize(25, 25);
icon.iconAnchor = new GPoint(12, 12);
icon.infoWindowAnchor = new GPoint(12, 9);

// HierHelden Icon
var icon2 = new GIcon();
icon2.image = "kaart/hier25wit.png";
icon2.iconSize = new GSize(25, 25);
icon2.iconAnchor = new GPoint(12, 12);
icon2.infoWindowAnchor = new GPoint(12, 9);

// HierSterren Icon
var icon3 = new GIcon();
icon3.image = "kaart/ster.png";
icon3.iconSize = new GSize(25, 25);
icon3.iconAnchor = new GPoint(12, 12);
icon3.infoWindowAnchor = new GPoint(12, 9);

var vlinderIcon = new GIcon();
//icon.image = "kaart/hier25.png";
vlinderIcon.image = "kaart/vlinders/vlinder.png";
vlinderIcon.iconSize = new GSize(25, 25);
vlinderIcon.iconAnchor = new GPoint(12, 12);
vlinderIcon.infoWindowAnchor = new GPoint(12, 9);

// Nieuwe actie Icon
var actieIcon = new GIcon();
actieIcon.image = "kaart/nieuweAktie.png";
actieIcon.shadow = "kaart/shadow50.png";
actieIcon.iconSize = new GSize(20, 34);
actieIcon.iconAnchor = new GPoint(10, 34);
actieIcon.infoWindowAnchor = new GPoint(15, 10);

// Greenpeace Spaarlampje Icon
var lampjeIcon = new GIcon();
lampjeIcon.image = "kaart/witlampje.png";
lampjeIcon.iconSize = new GSize(30, 51);
lampjeIcon.iconAnchor = new GPoint(15, 25);
lampjeIcon.infoWindowAnchor = new GPoint(15, 25 );

// Greenpeace Spaarlampje Icon
var leaIcon = new GIcon();
leaIcon.image = "kaart/LiveEarhAlertIcon.png";
leaIcon.iconSize = new GSize(50, 50);
leaIcon.iconAnchor = new GPoint(25, 25);
leaIcon.infoWindowAnchor = new GPoint(25, 10 );

// global GMarker for new klimaatactie (will be draggable)
var newActieMarker;

// global variable which holds the GoogleMap object
var map;

function createHierMap(){
	// Hier Map
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(52.119999, 5.600), 7);
	map.setMapType(G_SATELLITE_MAP); // G_NORMAL_MAP G_HYBRID_TYPE G_SATELLITE_MAP
}

//**************************************************************
//	voor het tonen van de akties
//**************************************************************

var actieDivsHtml = "<br>";
var activeMarkerId = -1;
var activeMarker = -1;
var gmarkers = [];
var nrOfDivs = 0;
var htmls = [];
var mi = 0;

  // A function to create the marker and set up the event window
  function createMarker(point,title,html,id,fotoid,fotopad) {
    var marker;
    var info='';
    if(fotopad.length>0){
    		 // helden marker
         marker = new GMarker(point, icon2);
         // 'rewrite' title to be 'Hier-Helden foto '
         title = "Hier-Helden foto ";
    }
    else if(title.indexOf('Vlinderwaarneming')==0 && getQueryVariable('fuseaction')=='kaart.vlinderInvoer'){
    	// vlinder marker
      	marker = new GMarker(point, vlinderIcon);
    }
    else{
      	// default: hier marker
      	marker = new GMarker(point, icon);
    }

    
    info += '<i class="iinfo">' + title + '</i>';
    info += '<br/><span class="info">' + html + '</span>';
    
    // either 'click' or 'mouseover' event
    GEvent.addListener(marker, "mouseover", function() {
      marker.openInfoWindowHtml(info);
    });
    
    gmarkers[mi] = marker;
    //
    // stuff to show in info balloon:
    htmls[mi] = info;
    //
    // stuff to show in actie-lists
    var omschrijving = ""; //show only title, no omschrijving 
    // or
    // html.substr(0, 100).replace("<br>", " ", "gm");
    actieDivsHtml += '<a onmouseover="infoClick(' + mi + ')" class="noarrow" href="javascript:infoClick(' + mi + ')"> &nbsp;+&nbsp;' + title + '</a>'+ omschrijving + '!!<br/>';
    if (activeMarkerId == id){
    	activeMarker = mi;}
    mi++;
    return marker;
  }


// This function picks up the click and opens the corresponding info window
function infoClick(i) {
	infomove=true; // there can be a move, but it's only a 'info-move' aka: do not get new acties from server
  gmarkers[i].openInfoWindowHtml(htmls[i]);
}

// show a numbered div (for actie pages)
function showdiv(divnr){
	for (var x = 0; x <= nrOfDivs; x++){
		if (document.getElementById(x)){
			document.getElementById(x).style.display = "none";
			linkelement = document.getElementById('a'+x);
			if (divnr == x){
				linkelement.style.textDecoration = "none";
				linkelement.style.color = "black";
			}else{
				linkelement.style.textDecoration = "underline";
				linkelement.style.color = "#6bb017";
			}
		}
		currentVisibleDiv = divnr;
	}
	document.getElementById(divnr).style.display = "block";
}

// always get all acties when moving or zooming
// but NOT when the move is just a infowindow move!!
var infomove=false;
var recentActiesReceived = false;
var newMarkersList ; // list with new acties

  // A function to read all actie data and show them on the map as markers
  function getActiesAndShowMarkers(url) {
	if (document.getElementById("acties")){
		document.getElementById("acties").innerHTML = "<br/><b>Momentje, even de meest recente klimaatacties ophalen ...</b><br/><br/>";
	}
    var request = GXmlHttp.create();
		request.open("GET", url, true);
		request.onreadystatechange = function() {
        if (request.readyState == 4) {
		        var xmlDoc = request.responseXML;
		        // obtain the array of markers and loop through it
		        var newMarkersList = xmlDoc.documentElement.getElementsByTagName("marker");
		
		        // hide the info window, otherwise it stays open where the removed marker used to be
		        map.getInfoWindow().hide();
		        
		        // remove all old marker stuff:
		        map.clearOverlays();
		        // but if there is a marker of us, put it on again
		        if (newActieMarker!=null){
			        map.addOverlay(newActieMarker);
			    		newActieMarker.enableDragging();
		        }
		        
		    	gmarkers = [];
		    	html = [];
		    	
		      	var thisMarker;
		      	nrOfDivs = Math.ceil(newMarkersList.length/10);
		      	var currentVisibleDiv = 0;
		
		    // actieDivsHtml = actielist, 'global for page'
				actieDivsHtml = '<br>';
				
				// all divs with acties page by page div
		        for (var i = 0; i < newMarkersList.length; i++) {
		          var divnr = Math.floor(i/10);
		          thisMarker = newMarkersList[i];
		
		          if (i==0){
		          	// first div with acties is visible:
		          	actieDivsHtml += ('<!-- start of div with id: ' + divnr + ' --><div id="'+divnr+'" class="actielijst" style="display:block">');
		          }
		          else if (i%10==0){
		          	//	all other divs with acties are non visible:
		          	actieDivsHtml += ('<!-- start of div with id: ' + divnr + ' --><div id="'+divnr+'" class="actielijst" style="display:none">');
		          }
		          var marker = createMarker(new GLatLng(
		          							parseFloat(thisMarker.getAttribute("lat")),
		          							parseFloat(thisMarker.getAttribute("lng"))),
		          							thisMarker.getAttribute("label"), 
		          							thisMarker.getAttribute("html"),
		          							thisMarker.getAttribute("id"),
		          							thisMarker.getAttribute("foto_id"),
		          							thisMarker.getAttribute("foto_pad")
		          							);
		          map.addOverlay(marker);
		
		          // close div every 10th link
		          if (i%10==9){
		          	actieDivsHtml+="</div><!-- closing of div with id: " + divnr + " -->";
		          }
		        }
		        // closing div if the last block wasn't closed (in case of smaller set then  10)
		        if (i%10!=9){
		        	actieDivsHtml+="</div> <!-- closing of last acties div -->";
		        }
		        
		    
		    // line of 'page links', only if there are more then one page:
				if(newMarkersList.length>10){
					actieDivsHtml += '<span style="text-align:center;"><p style="color:#6bb017;">&nbsp;&lt;&nbsp;';
					for (var i = 0; i < newMarkersList.length; i=i+10){
						var divnr = Math.floor(i/10);
						actieDivsHtml += '<a href="javascript:showdiv(' + divnr + ');" id="a' +
							divnr + '" class="noarrow" style="display:inline; text-decoration:underline;">';
						actieDivsHtml += (divnr+1); // pages for users start with 1 (not with zero)
						actieDivsHtml += '</a> ';
					}
					actieDivsHtml += "&nbsp;&gt;&nbsp;</p></span><br/><br/>";
				}    
		        
		    if(newMarkersList.length==0){
					actieDivsHtml = '<br/><b>Uhm niks gevonden, probeer een ander gebied of zoekterm...</b>';
				}

        // put the assembled actieDivsHtml contents into the sidebar div
        if (document.getElementById("acties")){
        	document.getElementById("acties").innerHTML = actieDivsHtml;
        }
		        
		        // if there is an 'activemarker': show it's infowindow
			    if (activeMarker>=0 && gmarkers[activeMarker]){
			    	infomove=true;
			    	gmarkers[activeMarker].openInfoWindowHtml(htmls[activeMarker]);
			    }


					//  RD 23mei2007 adding 'Greenpeace Spaarlamp akties'
					var marker = new GMarker(new GLatLng(52.582,5.285), lampjeIcon);
					var greenpeaceinfo = '<i class="iinfo">(Bijna) 1 miljoen spaarlampen</i>';
				  greenpeaceinfo += '<br/><span class="info">De 1 miljoen spaarlampen campagne van Greenpeace is afgelopen.<br/> ';
				  greenpeaceinfo += 'Nederland massaal aan de spaarlamp. <br/>En daarmee het klimaat een flinke hand helpen. <br/>';
				  greenpeaceinfo += 'Dat wilde Greenpace met deze campagne bereiken. En dat is gelukt! <br/>';
				  greenpeaceinfo += 'Er zijn 862.545 spaarlampen ingedraaid door 5.168 particulieren en <br/>';
				  greenpeaceinfo += '150 organisaties.  Producenten melden daarnaast een explosieve <br/>'; 
				  greenpeaceinfo += 'toename van het aantal verkochte spaarlampen.<br/>';
				  greenpeaceinfo += 'Meer weten over Greenpeace? Ga naar www.greenpeace.nl<br/>';
				  greenpeaceinfo += '<br/><img height="54" src="kaart/images/logogreenpeace.jpg" /></span>';
					GEvent.addListener(marker, "mouseover", function() {
				      marker.openInfoWindowHtml(greenpeaceinfo);
				    });
				  map.addOverlay(marker);	
				  
				  				  
				  //  RD 18 juli 2007 adding 'live earth alert akties'
					var marker = new GMarker(new GLatLng(52.5, 5.17), leaIcon);
					var leainfo = '<i class="iinfo">LIVE EARTH ALERT</i>';
				  leainfo += '<br/><span class="info">Op 7/7/7 kwamen meer dan 18.000 bezoekers naar LIVE EARTH ALERT<br/> ';
				  leainfo += ' in het Westerpark te Amsterdam. <br/>';
				  leainfo += '16.264 mensen uitten hun bezorgdheid over het Klimaatprobleem <br/> en spraken  hun intentie uit voortaan te willen bijdragen aan  <br/> de oplossing er van.  <br/>';
				  leainfo += '<br/><img height="50" src="kaart/LiveEarhAlertIcon.png" /></span>';
					GEvent.addListener(marker, "mouseover", function() {
				      marker.openInfoWindowHtml(leainfo);
				    });
				  map.addOverlay(marker);	
				  
	    
          zetSterren();
          
          if(eersteKeer && ballonTonen){
			  eersteKeer=false;
			  var randomnumber=Math.floor(Math.random()*newMarkersList.length)
			  while(!newMarkersList[randomnumber]){
				  randomnumber=Math.floor(Math.random()*newMarkersList.length);
			  }
			  infoClick(randomnumber);
		  }
              
	  }
    }
    request.send(null);
  }

//**************************************************************
//	voor het zoeken van de akties
//**************************************************************

// submit een van de velden
function submitZoekveld(){
	if ($('postcode').value !=''){
		document.pcform.submit();
	}
	else if ($('plaats').value !=''){
		document.plaatsform.submit();
	}
	else if ($('search') && $('search').value !=''){
		document.txtform.submit();
	}
	else{
		alert ('voer eerst een zoekterm in');
	}
}

// form handling for search text form
function searchTxtZoom(){
	search = document.txtform.search.value;
	url = 'kaart/db.php?search='+search;
	getActiesAndShowMarkers(url);
}


//**************************************************************
//	voor het zoeken van de plaats bij het invoeren
//**************************************************************

// form handling for postcode
function postcodeZoom(postcode){
	var pc;
	// determine pc4 value: either from querystring or from form input field
	if (postcode){
		pc = ''+postcode;
	}
	else{
		pc = document.pcform.postcode.value;
	}
	// pc4 validity check
	if (pc.length!=4){
		alert("Niet voldoende informatie, geef de eerste VIER cijfers van uw postcode.");
		return;
	}
	else if (isNumeric(pc)){
		url = 'kaart/db.php?pcbb='+pc;
		GDownloadUrl(url, zoomToBox);
	}
	else{
		alert("Probleem met invoer, geef alleen de eerste vier CIJFERS van uw postcode.");
		return;	
	}
}		

// form handling for plaats(id)
function plaatsZoom(plaatsid){
	setPlaatsValue();
	url = 'kaart/db.php?pid='+plaatsid;
	GDownloadUrl(url, zoomToBox);
}

// form handling plaatsnaam search
function plaatsInput(keyEvent){
	 if (keyEvent.keyCode==13){
		// we hit return, form will submit with selected option using normal form action
		setPlaatsValue(); // set plaats naam first 
	}
	else if (keyEvent.keyCode==40 && document.plaatsform.plaatsen){
		// if the key-pressed was a arrow-down (40), set focus to 'plaatsen':
		document.plaatsform.plaatsen.focus();
		setPlaatsValue();
	}
	else{
		// take partial plaatsnaam, and submit it to retrieve the possible options
		partialplaats = document.plaatsform.plaats.value;
		if (partialplaats.length>=0){
			url = 'kaart/db.php?pp='+partialplaats;
			GDownloadUrl(url, showOptions);
		}
	}
}

// put received Select-element with plaats options into the div to show a new plaats-options element
function showOptions(receivedSelectElementPlusOptions){
	document.getElementById("plaatsoptions").innerHTML = receivedSelectElementPlusOptions;
	document.getElementById("plaatsoptions").style.display = "block";
	// set first option on 'selected' if there is more then 1 option
	if(document.getElementById('plaatsen')){
		document.getElementById('plaatsen').selectedIndex=0;
	}
}

// set value of 'plaats' to currently selected plaats from 'plaatsen'-options
function setPlaatsValue(){
	if (document.getElementById('plaatsen')){
		selected = document.getElementById('plaatsen').selectedIndex;
		if (document.all) { // IE;
			document.getElementById('plaats').value = document.getElementById('plaatsen')[selected].innerText;
  		} 
  		else{ // non-IE
    		document.getElementById('plaats').value = document.getElementById('plaatsen')[selected].textContent;
    	}
	}
	else{
		alert("Niets gevonden wat begint met '" + document.getElementById('plaats').value + "', probeer iets anders.");
	}
}


// tijdelijke hack voor IE / Google bug
// zie http://groups.google.com/group/Google-Maps-API/browse_thread/thread/d6a4d6069607b37e/53dab759a9f796a2#53dab759a9f796a2
function unloadIE(){
	try{
		GUnload();
	}
	catch(e){
		//nothing
	}
}

// to free javascript memory, see http://www.google.com/apis/maps/documentation/#Memory_Leaks
if (window.attachEvent){ //IE exclusive method for binding an event
  window.attachEvent("onunload", unloadIE);}
else if (window.addEventListener){ //DOM method for binding an event
  window.addEventListener("unload", GUnload, false);}
else if (document.getElementById){ //support older modern browsers
  window.onunload=GUnload;
}