var icons = [];
var xml = null;
var map = null;
var droom = [];
var gesprek = [];
var markerGroups = { "gesprek": [], "droom": []};
var geocoder = null;

function load() {
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(51.589322, 4.774491), 12);
		//map.addControl(new GSmallMapControl());
		
		icons[0] = new GIcon(); // Droom
		icons[0].image = "modules/googlemaps/images/icon_droom.png";
		icons[0].iconSize = new GSize(30, 39);
		icons[0].iconAnchor = new GPoint(15, 38);
		icons[0].infoWindowAnchor = new GPoint(15, 2);
		icons[1] = new GIcon(); // Stadsgesprek
		icons[1].image = "modules/googlemaps/images/icon_stadsgesprek.png";
		icons[1].iconSize = new GSize(30, 39);
		icons[1].iconAnchor = new GPoint(15, 38);
		icons[1].infoWindowAnchor = new GPoint(15, 2);
		icons[2] = new GIcon(); // Initiatief
		icons[2].image = "modules/googlemaps/images/icon_initiatief.png";
		icons[2].iconSize = new GSize(30, 39);
		icons[2].iconAnchor = new GPoint(15, 38);
		icons[2].infoWindowAnchor = new GPoint(15, 2);
		
		GEvent.addListener(map, "drag", function() {
			map.setCenter(new GLatLng(51.589322, 4.774491), 12);
		});		
			
		// Markers ophalen via AJAX (uit getxml.php)
		GDownloadUrl("modules/googlemaps/getxml.php?" + Math.random(), function(data) {
			xml = GXml.parse(data);
			setTimeout("parseXml()", 165);
		});
	}
}

function parseXml() {
	if(xml.documentElement.getElementsByTagName("stadsgesprekken")[0]) {
		var gesprekken = xml.documentElement.getElementsByTagName("stadsgesprekken")[0].getElementsByTagName("stadsgesprek");
		for (var i = 0; i < gesprekken.length; i++) {
			var id = gesprekken[i].getAttribute("id");
			var naam = gesprekken[i].getAttribute("naam");
			var locatie = gesprekken[i].getAttribute("locatie");
			var vrij = gesprekken[i].getAttribute("vrij");
			var lat = gesprekken[i].getAttribute("lat");
			var lng = gesprekken[i].getAttribute("lng");
			var point = new GLatLng(parseFloat(lat), parseFloat(lng));
			var marker = addStadsgesprek(point, id, naam, locatie, vrij);
			map.addOverlay(marker);
			
			gesprek[id] = [];
			gesprek[id][0] = naam;
			gesprek[id][1] = locatie;
			gesprek[id][2] = vrij;
			gesprek[id][3] = marker;
		}
	}
	
	if(xml.documentElement.getElementsByTagName("dromen")[0]) {
		var dromen = xml.documentElement.getElementsByTagName("dromen")[0].getElementsByTagName("droom");
		for (var i = 0; i < dromen.length; i++) {
			var id = dromen[i].getAttribute("id");
			var naam = dromen[i].getAttribute("naam");
			var count = dromen[i].getAttribute("count");
			var initiatief = dromen[i].getAttribute("initiatief");
			var lat = dromen[i].getAttribute("lat");
			var lng = dromen[i].getAttribute("lng");
			var point = new GLatLng(parseFloat(lat), parseFloat(lng));
			var marker = addDroom(point, id, naam, count, initiatief);
			map.addOverlay(marker);
			
			droom[id] = [];
			droom[id][0] = naam;
			droom[id][1] = count;
			droom[id][2] = initiatief;
			droom[id][3] = marker;
		}
	}
}

function addDroom(latlng, droomID, droomNaam, droomCount, initiatief) {
	if(initiatief == 1) {
		var marker = new GMarker(latlng,icons[2]);
	} else {
		var marker = new GMarker(latlng,icons[0]);
	}
	/*markerGroups['droom'].push(marker);
	GEvent.addListener(marker, "click", function() {
		openDroom(marker, droomID, droomNaam, droomCount, initiatief);
	});*/		
	return marker;
}

function openDroom(marker, droomID, droomNaam, droomCount, initiatief) {
	if(initiatief == 0){
		var show = "<td><img src='images/icons/icon_reacties"+droomCount+".gif' alt='totaal "+droomCount+" reactie(s)' /></td>"
		var type = "Droom";
	}
	else{
		var votes = droomCount - 10;
		var votes_rest = 100-votes;
		var show = "<td><img src='includes/chart.php?data="+votes+"*"+votes_rest+"' alt='' /></td>";
		var type = "Initiatief";
	}
	var html = "<h3 class='droom'>"+type+": " + droomNaam + "</h3>";
	html += "<div><table class='droom'>";
	html += "<tr><td style='width:60px;'>Gesteund:</td>"+show+"</tr>";
	html += "</table></div>";
	html += "<div style='width:250px;text-align:right;'><a href='forum_topic.php?topicID=" + droomID + "'>bekijk "+type+" &gt;</a></div>";
	marker.openInfoWindowHtml(html);
}

function clickDroom(id) {
	var naam = droom[id][0];
	var count = droom[id][1];
	var initiatief = [id][2]
	var marker = droom[id][3];
	
	openDroom(marker, id, naam, count, initiatief);
}

function addStadsgesprek(latlng, gesprekID, gesprekNaam, gesprekLocatie, gesprekVrij) {
	var marker = new GMarker(latlng,icons[1]);
	/*markerGroups['gesprek'].push(marker);
	GEvent.addListener(marker, "click", function() {
		openStadsgesprek(marker, gesprekID, gesprekNaam, gesprekLocatie, gesprekVrij);
	});*/		
	return marker;
}

function openStadsgesprek(marker, gesprekID, gesprekNaam, gesprekLocatie, gesprekVrij) {
	var html = "<h3 class='infowindow'>" + gesprekNaam + "</h3>";
	if(gesprekVrij == 1) {
		var titel = "Vrij stadsgesprek";
	} else {
		var titel = "Thema stadsgesprek";
	}
	html += "<p style='width:250px;'><strong>" + titel + "</strong><br />Klik <a href='stadsgesprek.php?gesprek=" + gesprekID + "'>hier</a> om het stadsgesprek te bekijken.<br />Locatie: " + gesprekLocatie + "</p>";
	marker.openInfoWindowHtml(html);			
}

function clickGesprek(id) {
	var naam = gesprek[id][0];
	var locatie = gesprek[id][1];
	var vrij = gesprek[id][2];
	var marker = gesprek[id][3];
	
	openStadsgesprek(marker, id, naam, locatie, vrij);
}