//<![CDATA[
var map = null;
var bounds = null;
var markers = [];

function initialize() {
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		map.setMapType(G_PHYSICAL_MAP);
		map.setCenter(new GLatLng(52.110933,5.217476), 7);
		map.addControl(new GSmallMapControl());
		//map.addControl(new GMapTypeControl());
		map.enableDoubleClickZoom();
		
		locationMarker = new GIcon();
		locationMarker.image = linkprefix + "images/GMap/icon.gif";
		locationMarker.iconSize = new GSize(73,24);
		locationMarker.iconAnchor = new GPoint(69,11);
		locationMarker.infoWindowAnchor = new GPoint(69,11);
		locationMarker.shadow = linkprefix + "images/GMap/icon_shade.png";
		locationMarker.shadowSize = new GSize(73, 24);
		
		homeMarker = new GIcon();
		homeMarker.image = linkprefix + "images/GMap/home.gif";
		homeMarker.iconSize = new GSize(22,30);
		homeMarker.iconAnchor = new GPoint(10,27);
		homeMarker.shadow = linkprefix + "images/GMap/home_shade.png";
		homeMarker.shadowSize = new GSize(22, 30);
		
		bounds = new GLatLngBounds();
		
		$('straat').focus();
	}
}

// Creates a marker at the given point with the given number label
function createMarker(point,text,title) {	
	var opts = {
		"icon": locationMarker,
		"title": title
	};
	
	var marker = new GMarker(point,opts);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(text,{maxWidth:300});
	});
	markers.push(marker);
	
	return marker;
}

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

function setNewLocation(location) {
	$('straat').value = '';
	$('huisnummer').value = '';
	$('plaats').value = location;
	getLocation();
}

function getLocation() {
	this.blur();
	var zoekstring = '';
	
	var straat = $('straat').value;
	var huisnr = $('huisnummer').value;
	var plaats = $('plaats').value;
	
	if(straat != '') {
		zoekstring += straat;
	}
	if(huisnr != '') {
		if(zoekstring != '') zoekstring += ' ';
		zoekstring += huisnr;
	}
	if(plaats != '') {
		if(zoekstring != '') zoekstring += ', ';
		zoekstring += plaats;
	}
	
	if(zoekstring == '') {
		$('resultaat').innerHTML = '<h2>Verkooppunten</h2><p>Je vindt de dichtsbijzijnde verkooppunten door in de bovenstaande velden je gegevens in te voeren.</p><p class="error">Je hebt geen gegevens ingevuld. Vul je gegevens in en klik op zoeken.</p>';
	}
	else {
		// Haal de XML binnen
		var url = linkprefix + 'XML/verkooppunten.php';
		var pars = 'zoekstring=' + zoekstring;
		
		var myAjax = new Ajax.Request(
		url, 
		{
			method: 'post',
			parameters: pars,
			onComplete: showResponse = function(request) {
				var response = request.responseXML;
				var status = getSingleData(response,'status');
				var message = getSingleData(response,'message');
				
				// De map leeghalen van een eventuele vorige request
				map.clearOverlays();
				bounds = new GLatLngBounds();
				markers = [];

				if(status == 1) {
					map.setCenter(new GLatLng(52.110933,5.217476), 7);
					$('resultaat').innerHTML = '<h2>Verkooppunten</h2>' + message;
				}
				else if(status == 2) {
					$('resultaat').innerHTML = '<h2>Verkooppunten</h2>' + message;
					
					// Lees alle locaties in
					var root = response.documentElement;
					var locaties = root.getElementsByTagName('locatie');
					var naam = null;
					var lon = null;
					var lat = null;
					
					var html = '<table>';
					html += '<tbody>';
					for(i = 0; i < locaties.length; i++) {
						var naam = getNodeValue(locaties.item(i), 'naam');
						var lon = getNodeValue(locaties.item(i), 'lon');
						var lat = getNodeValue(locaties.item(i), 'lat');
						
						html += '<tr onclick="setNewLocation(\'' + naam + '\')" class="naam">';
						html += '<td><span class="naam">' + naam + '</span></td>';
						html += '</tr>';
						
						if(i == locaties.length-1) {							
							// tabel afmaken en neerzetten
							html += '</tbody>';
							html += '</table>';
							
							$('resultaat').innerHTML += html;
						}
					}
				}
				else {					
					// Map op de locatie zetten
					var lat = getSingleData(response,'lat');
					var lon = getSingleData(response,'lon');
					
					var center = new GLatLng(lat,lon);
					//map.setCenter(center, 10);
					var opts = {
						"icon": homeMarker
					};
					var marker = new GMarker(center,opts);
					map.addOverlay(marker);
					
					bounds.extend(center);
					
					// Lees alle locaties in
					var root = response.documentElement;
					var locaties = root.getElementsByTagName('locatie');
					var naam = null;
					var straat = null;
					var huisnummer = null;
					var postcode = null;
					var plaats = null;
					var telefoon = null;
					var url = null;
					var afstand = null;
					var lon = null;
					var lat = null;
					
					$('resultaat').innerHTML = '';
					
					var html = '<table>';
					html += '<thead>';
					html += '<tr>';
					html += '<th>Winkel</th>';
					html += '<th class="afstand">Afstand</th>';
					html += '<tr>';
					html += '</thead>';
					html += '<tbody>';
					for(i = 0; i < locaties.length; i++) {
						var naam = getNodeValue(locaties.item(i), 'naam');
						var straat = getNodeValue(locaties.item(i), 'straat');
						var huisnummer = getNodeValue(locaties.item(i), 'huisnummer');
						var postcode = getNodeValue(locaties.item(i), 'postcode');
						var plaats = getNodeValue(locaties.item(i), 'plaats');
						var telefoon = getNodeValue(locaties.item(i), 'telefoon');
						var url = getNodeValue(locaties.item(i), 'url');
						var afstand = getNodeValue(locaties.item(i), 'afstand');
						var lon = getNodeValue(locaties.item(i), 'lon');
						var lat = getNodeValue(locaties.item(i), 'lat');
						
						html += '<tr onclick="myclick(' + i + ')" class="naam">';
						html += '<td colspan="2"><span class="naam">' + naam + '</span></td>';
						html += '</tr>';
						html += '<tr>';
						html += '<td>' + straat + ' ' + huisnummer +'<br />' + postcode + ' &nbsp;' + plaats.toUpperCase() + '</td>';
						html += '<td class="afstand">' + afstand + ' km</td>';
						html += '<tr>';
						
						var point = new GLatLng(lat,lon);
						var text = "";
						text += "<h4>"+naam+"</h4>"+straat+" "+huisnummer+"<br />"+postcode+" "+plaats+"<br />";
						if(telefoon != '-') text += "T: "+telefoon+"<br />";
						text += "- <a href=\"http://maps.google.nl/maps?saddr=" + zoekstring + "&daddr="+straat+"+"+huisnummer+",+"+postcode+",+"+plaats+"\" target=\"_blank\">Routebeschrijving</a><br />";
						if(url != '-') text += "- <a href=\""+url+"\" target=\"_blank\">Ga naar de website</a>";
						
						var Marker = createMarker(point,text,naam);
						map.addOverlay(Marker);
						
						bounds.extend(point);
						
						if(i == locaties.length-1) {
							// Zoomen naar markers
							map.setZoom(map.getBoundsZoomLevel(bounds));
							map.setCenter(bounds.getCenter());
							
							// tabel afmaken en neerzetten
							html += '</tbody>';
							html += '</table>';
							
							$('resultaat').innerHTML = html;
						}
					}
				}
			}
		});
	}
}

function checkKeyCode(evt) {
	var charCode = (evt.which) ? evt.which : event.keyCode;
	return charCode;
}

function checkGetLocation(event) {
	var keyCode = checkKeyCode(event);
	if(keyCode == 13) {
		if($('straat').value != '' || $('huisnummer').value != '' || $('plaats').value != '') getLocation();	
	}
}
//]]>