var map;
    var geocoder;
	var infoWindow;	
	var markers = [];
	
function load() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(52.16032, 4.49393);
    var myOptions = {
      zoom: 13,
	  maxZoom: 17,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);
	infoWindow = new google.maps.InfoWindow();
	locationSelect = document.getElementById("infowindow");
      locationSelect.onchange = function() {
        var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
        if (markerNum != "none"){
          google.maps.event.trigger(markers[markerNum], 'click');
        }
      };	
	searchNames("alles")
}
  
function searchLocations() {
     var address = document.getElementById('addressInput').value;
	var geocoder = new google.maps.Geocoder();
  geocoder.geocode({address: address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      searchLocationsNear(results[0].geometry.location);
    } else {
      alert(address + ' not found');
    }
  });
  
   }
   
function searchLocationsNear(center) {
  clearLocations();

  var radius = document.getElementById('radius').value;
  var searchUrl = 'database/createxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
  downloadUrl(searchUrl, function(data) {
  var xml = parseXml(data);
  var markerNodes = xml.documentElement.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markerNodes.length; i++) {
   var name 		= markerNodes[i].getAttribute('name');
   var locatie 		= markerNodes[i].getAttribute('locatie');
   var categorie	= markerNodes[i].getAttribute('categorie');
   var latlng = new google.maps.LatLng(
        parseFloat(markerNodes[i].getAttribute("lat")),
        parseFloat(markerNodes[i].getAttribute("lng")));
   var naam	=	name + ", "+ locatie;
    createOption(naam,  i);
    createMarker(latlng, naam, categorie);
    bounds.extend(latlng);
  }
  map.fitBounds(bounds);
 });
}   

function searchNames(n)
{
	clearLocations();
 	var searchUrl = 'database/createxml.php?naam=' + n;
	downloadUrl(searchUrl, function(data) {
	var xml = parseXml(data);
	var markerNodes = xml.documentElement.getElementsByTagName("marker");
	var bounds = new google.maps.LatLngBounds();

   for (var i = 0; i < markerNodes.length; i++) {
	 var name 		= markerNodes[i].getAttribute('name');
	 var categorie	= markerNodes[i].getAttribute('categorie');
	 var adres		= markerNodes[i].getAttribute('adres');
	 var website	= markerNodes[i].getAttribute('website');
	 var locatie	= markerNodes[i].getAttribute('locatie');
	 var kwaliteit	= markerNodes[i].getAttribute('cijfer_kwal');
	 var ambi		= markerNodes[i].getAttribute('cijfer_ambi');
	 var latlng = new google.maps.LatLng(
		parseFloat(markerNodes[i].getAttribute("lat")),
		parseFloat(markerNodes[i].getAttribute("lng")));
	createOption(name,  i);
	createMarker(latlng, name, categorie, adres, locatie, website, kwaliteit, ambi);
	bounds.extend(latlng);
   }
  map.fitBounds(bounds);
 });
}

function createMarker(latlng, name, categorie, adres, locatie, website, kwaliteit, ambi) {
	var icon;
	if(categorie.indexOf("demografie")>-1)
	{
		icon = "icon_geel.png";
	}
	else if(categorie.indexOf("individueel")>-1)
	{
		icon = "icon_oranje.png";
	}
	else if(categorie.indexOf("restaurant")>-1)
	{
		icon = "icon.png";
	}
	var image = new google.maps.MarkerImage('img/' + icon,
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(40, 40),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 20)
	  );
		if(website.length >10) 
			{
				www				=	website;
				website_tekst = '<tr><th>Website:</th><td><a href= "' + www + '" target="_blank" >' + www  + ' </a></td></tr>';
			}
		else
			{website_tekst = ""};
			kwaliteit_tekst = '<tr><th>Kwaliteit:</th><td>' + kwaliteit + '</td></tr>';
			ambi_tekst = '<tr><th>Ambiance/bediening:</th><td>' + ambi + '</td></tr>';
	   		var html = '<table><tr><th>Restaurant:</th><td>' + name + '</td></tr><tr><th>Adres:</th><td>' + adres+ '</td></tr><tr><th>Plaats:</th><td>' + locatie + '</td></tr>'+ website_tekst + kwaliteit_tekst + ambi_tekst + '</table>';
  		var marker = new google.maps.Marker({
   			map: map,
			icon: image,
    		position: latlng
 		 });
  	google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  	});
  	markers.push(marker);
}

function createOption(name,  num) {
  var option = document.createElement("option");
  option.value = num;
  option.innerHTML = name ;
  locationSelect.appendChild(option);
}

function clearLocations() {
  infoWindow.close();
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers.length = 0;

  locationSelect.innerHTML = "";
  var option = document.createElement("option");
  option.value = "none";
  option.innerHTML = "Selecteer een restaurant";
  locationSelect.appendChild(option);
  locationSelect.style.visibility = "visible";
}

function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request.responseText, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

function parseXml(str) {
      if (window.ActiveXObject) {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
      } else if (window.DOMParser) {
        return (new DOMParser).parseFromString(str, 'text/xml');
      }
    }

function doNothing() {}