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

function load() {
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		geocoder = new GClientGeocoder();
		map.setCenter(new GLatLng(51.589322, 4.774491), 13);
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		var overlayControl = new GOverviewMapControl();
		map.addControl(overlayControl);
		map.enableScrollWheelZoom();
		
		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);
			
		// 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;
		}
	}
	
	var loading = document.getElementById("loading");
	loading.style.visibility = "hidden";
}

function addDroom(latlng, droomID, droomNaam, droomCount, initiatief) {
	if(initiatief == 1) { // Initiatief
		var marker = new GMarker(latlng,icons[2]);
		markerGroups['initiatief'].push(marker);
	} else { // Droom
		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);
}

function toggleGroup(type) {
	for (var i = 0; i < markerGroups[type].length; i++) {
		var marker = markerGroups[type][i];
		if (marker.isHidden()) {
			marker.show();
		} else {
			marker.hide();
		}
	} 
}

function showAddress() {
	var address = document.getElementById('location').value;
	address += ", Breda, The Netherlands";
	
	geocoder.getLatLng(
		address,
		function(point) {
			if (!point) {
				document.getElementById("locationError").innerHTML = "Adres niet gevonden";
			} else {
				document.getElementById("locationError").innerHTML = "";
				map.setCenter(point, 15);
				var marker = new GMarker(point);
			}
		}
	);
}