//<![CDATA[
    var map = null;
    var markers = [];
    var infoWindow;
    var locationSelect;
	var locationList;
	var stationfindertopleft;
	var myDomain = document.domain;	
	var AantalLI = 0;

    function load() {
		map = new google.maps.Map(document.getElementById("stationfinder-bottomleft"), {
		//map = new google.maps.Map(document.getElementById("stationfindermap"), {												
        center: new google.maps.LatLng(51.872503,4.373846), //inzoomen op nederland
        zoom: 13,
        mapTypeId: 'roadmap',
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
      });
			
      infoWindow = new google.maps.InfoWindow();
	  
	  locationList = document.getElementById("locationList"); 
      locationSelect = document.getElementById("locationSelect"); 
      locationSelect.onchange = function() {
        var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
        if (markerNum != "none"){
          google.maps.event.trigger(markers[markerNum], 'click');  
        }
      };
   }
   
   function showMap()
   {
	  	clearLocations();
		
		//update info top left
		var stationfindertopleft = document.getElementById("stationfinder-topleft");
		stationfindertopleft.innerHTML = "";	
		stationfindertopleft.style.visibility = "hidden";
		stationfindertopleft.style.display = "none";
		
		//update picture
		var stationfindertopright = document.getElementById("stationfinder-topright");
		stationfindertopright.innerHTML = "";
		stationfindertopright.style.visibility = "hidden";
		stationfindertopright.style.display = "none";
		
		var stationfinderbottomright = document.getElementById("stationfinder-bottomright");
		stationfinderbottomright.style.visibility = "hidden";
		stationfinderbottomright.style.display = "none";
		
	    stationfinderbottomleft = document.getElementById("stationfinder-bottomleft");
		stationfinderbottomleft.style.visibility = "visible";
		stationfinderbottomleft.style.width = "620px";
		stationfinderbottomleft.style.height = "480px";
		stationfinderbottomleft.style.border ="10px solid #e1e1e1";
		
		
		
		 map = new google.maps.Map(document.getElementById("stationfinder-bottomleft"), {
		//map = new google.maps.Map(document.getElementById("stationfindermap"), {												
        center: new google.maps.LatLng(51.872503,4.373846), //inzoomen op duitsland
        zoom: 13,
        mapTypeId: 'roadmap',
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
      });
		
	   var center2 =  new google.maps.LatLng(51.872503,4.373846);
	   searchLocationsNear(center2,1);
	   }

   function searchLocations() {
	var strCountry = document.getElementById('country').value;
    var strCity = document.getElementById('city').value;
    var strPostcode = document.getElementById('postcode').value;
    var address = "";
    if (strPostcode.length > 0) address += strPostcode + ", ";
    if (strCity.length > 0) address += strCity + ", ";
    if (strCountry.length > 0) address += strCountry + ", "; 
  
    //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,0);
       } else {
         alert(address + ' not found');
       }
     });
   }

   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 = "See all results:";
     locationSelect.appendChild(option);
	 
	 locationList.innerHTML = "";
	 
	 // wis de lijst
	 AantalLI = 0;
	 
   }

   function searchLocationsNear(center,showmap) {
     clearLocations(); 
	 

     //var radius = document.getElementById('radiusSelect').value;
	 var radius = 25000; //miles !! = 100km
     var searchUrl = '../../scripts/phpsqlsearch_genxml.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 navname = markerNodes[i].getAttribute("navname");
		 var city = markerNodes[i].getAttribute("city");
		 var postcode = markerNodes[i].getAttribute("postcode");
		 var country = markerNodes[i].getAttribute("country");
         var address = markerNodes[i].getAttribute("address");
		 var info = markerNodes[i].getAttribute("info");
		 var diesel = markerNodes[i].getAttribute("diesel");
		 var dieselnxt = markerNodes[i].getAttribute("dieselnxt");
		 var eurosuper95 = markerNodes[i].getAttribute("eurosuper95");
		 var eurosuper98 = markerNodes[i].getAttribute("eurosuper98");
		 var lpg = markerNodes[i].getAttribute("lpg");
		 var benzine = markerNodes[i].getAttribute("benzine");
		 var picture = markerNodes[i].getAttribute("picture");
		 var icon = markerNodes[i].getAttribute("icon");
         var distance = parseFloat(markerNodes[i].getAttribute("distance"));
         var latlng = new google.maps.LatLng(
              parseFloat(markerNodes[i].getAttribute("lat")),
              parseFloat(markerNodes[i].getAttribute("lng")));

         createOption(name, distance, i);
		 AantalLI = AantalLI + 1;
		 if(AantalLI < 5) {
		 createListItem(name,address,postcode,city,distance,i);
		 }
         createMarker(latlng, name,navname,postcode,city,country,address,info,picture,icon,diesel,dieselnxt,eurosuper95,eurosuper98,lpg,benzine);
         bounds.extend(latlng);
       }
       map.fitBounds(bounds);
	   
	   var locationTitle = document.getElementById("locationTitle"); 
	   locationTitle.style.visibility = "visible";
	   
       /*
	   locationSelect.style.visibility = "visible";
       locationSelect.onchange = function() {
         var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
         google.maps.event.trigger(markers[markerNum], 'click');
       };
	   */
	   locationList.style.visibility = "visible";   

			if(showmap == 0) {
				   google.maps.event.trigger(markers[0], 'click');  
			}
      });
    }
	
	
	 function createListItem(name,address,postcode,city,distance, num) {
      var optionli = document.createElement("li");
      //optionli.value = num;
      optionli.innerHTML = "<a href='#' onclick=\"google.maps.event.trigger(markers["+ num +"],'click')\" ><h3>" + name + "</h3><p>" + address + ", " + postcode + " " + city + " (" + (distance * 1.609).toFixed(1) + " km)</p></a>";
      locationList.appendChild(optionli);
    }

	
	 function number_format (number, decimals, dec_point, thousands_sep){
	if (isNaN(number) || number=='') number = 0;

	var decimals 		= decimals != undefined ? decimals : 2,
		dec_point		= dec_point != undefined ? dec_point : ',',
		thousands_sep	= thousands_sep != undefined ? thousands_sep : '.',
		negative		= number<0;

	if (negative) number *= -1;

	var left 	= parseInt(number, 10);
	var splitter = number.toString().split(".");
	if (splitter[1] == undefined || splitter[1] == 0) {
		var right = 0;	
	} else {
		var	right	= Math.round(parseFloat(number.toString().replace(/^\d+./, '0.')) * Math.pow(10, decimals));
	}


	left  = left.toString().split('').reverse().join('')
			.match(/\d{3}|\d{1,2}/g)
			.join(thousands_sep)
			.split('').reverse().join('');

	right = (right / Math.pow(10,decimals)).toString().replace(/^\d+./, '').toString();

	// if setted decimals are 3 and the 3rd decimal is 0, then make decimals 2 in stead of 3
	if (right.length < 3 && decimals == 3) { decimals = 2; }
	if (right.length < decimals) for (var iRight=right.length; iRight < decimals; iRight++) right += '0';
	return (negative?'-':'')+left+dec_point+right;
}
	
	
	
  
    function createMarker(latlng, name, navname, postcode, city,country, address,info,picture,icon,diesel,dieselnxt,eurosuper95,eurosuper98,lpg,benzine) {
      var html = "<b>" + name + "</b> <br/>" + address +"<br/>" + postcode + " " + city;
      var marker = new google.maps.Marker({
        map: map,
        position: latlng,
		title:"Show info",
		icon: "/images/tankstations/" + icon + ".png"
      });
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker); 
		
		//update info top left
		var stationfindertopleft = document.getElementById("stationfinder-topleft");
		stationfindertopleft.innerHTML = "<h1>" + name + "</h1><br /><p>" + address + "<br />" + postcode + " " + city + "<br /></p><p>" + info + "</p>";	
		stationfindertopleft.style.visibility = "visible";
		stationfindertopleft.style.display = "inline";
		
		//update picture
		var stationfindertopright = document.getElementById("stationfinder-topright");
		stationfindertopright.innerHTML = "<img src='" + picture + "' />";
		stationfindertopright.style.visibility = "visible";
		stationfindertopright.style.display = "inline";
		
		var stationfinderbottomright = document.getElementById("stationfinder-bottomright");
		stationfinderbottomright.style.visibility = "visible";
		stationfinderbottomright.style.display = "inline";
		
		var stationfinderbottomleft = document.getElementById("stationfinder-bottomleft");
		stationfinderbottomleft.style.visibility = "visible";
		stationfinderbottomleft.style.width = "300px";
		stationfinderbottomleft.style.height = "270px";
		stationfinderbottomleft.style.border ="0px";
		
		
		
		//update price	
		var stationfinderbenzine = document.getElementById("stationfinder-benzine");
		if (benzine != "0.0000") {
	   	stationfinderbenzine.style.visibility = "visible"; stationfinderbenzine.style.display = "inline";
		var i;
		cijfer = number_format(benzine,3,'.','');
			for (i = 0; i < cijfer.length; i++) {
				var benzinedigit = document.getElementById("benzinedigit" + i);
				if (cijfer.charAt(i) == '.'){
					benzinedigit.src  = "/images/tankstations/Dot.png";
					} else {
					benzinedigit.src  = "/images/tankstations/" + cijfer.charAt(i) + ".png";
					}	
			 }
		} else { stationfinderbenzine.style.visibility = "hidden"; stationfinderbenzine.style.display = "none";}
		
		
		var stationfindereurosuper95 = document.getElementById("stationfinder-eurosuper95"); 
		if (eurosuper95 != "0.0000") {
	   	stationfindereurosuper95.style.visibility = "visible"; stationfindereurosuper95.style.display = "inline";
		var i;
		cijfer = number_format(eurosuper95,3,'.','');
			for (i = 0; i < cijfer.length ; i++) {
				var eurosuper95digit = document.getElementById("eurosuper95digit" + i);
				if (cijfer.charAt(i) == '.'){
					eurosuper95digit.src  = "/images/tankstations/Dot.png";
					} else {
					eurosuper95digit.src  = "/images/tankstations/" + cijfer.charAt(i) + ".png";
					}	
			 }
		} else { stationfindereurosuper95.style.visibility = "hidden"; stationfindereurosuper95.style.display = "none"; }
		
		var stationfindereurosuper98 = document.getElementById("stationfinder-eurosuper98"); 
		if (eurosuper98 != "0.0000") {
	   	stationfindereurosuper98.style.visibility = "visible"; stationfindereurosuper98.style.display = "inline";
		var i;
		cijfer = number_format(eurosuper98,3,'.','');
			for (i = 0; i < cijfer.length; i++) {
				var eurosuper98digit = document.getElementById("eurosuper98digit" + i);
				if (cijfer.charAt(i) == '.'){
					eurosuper98digit.src  = "/images/tankstations/Dot.png";
					} else {
					eurosuper98digit.src  = "/images/tankstations/" + cijfer.charAt(i) + ".png";
					}	
			 }
		} else { stationfindereurosuper98.style.visibility = "hidden"; stationfindereurosuper98.style.display = "none";}
		
		var stationfinderdiesel = document.getElementById("stationfinder-diesel"); 
		if (diesel != "0.0000") {
	   	stationfinderdiesel.style.visibility = "visible"; stationfinderdiesel.style.display = "inline";
		var i;
		cijfer = number_format(diesel,3,'.','');
			for (i = 0; i < cijfer.length; i++) {
				var dieseldigit = document.getElementById("dieseldigit" + i);
				if (cijfer.charAt(i) == '.'){
					dieseldigit.src  = "/images/tankstations/Dot.png";
					} else {
					dieseldigit.src  = "/images/tankstations/" + cijfer.charAt(i) + ".png";
					}	
			 }
		} else { stationfinderdiesel.style.visibility = "hidden"; stationfinderdiesel.style.display = "none";}
		
		var stationfinderdieselnxt = document.getElementById("stationfinder-dieselnxt"); 
		if (dieselnxt != "0.0000") {
	   	stationfinderdieselnxt.style.visibility = "visible";stationfinderdieselnxt.style.display = "inline";
		var i;
		cijfer = number_format(dieselnxt,3,'.','');
			for (i = 0; i < cijfer.length; i++) {
				var dieselnxtdigit = document.getElementById("dieselnxtdigit" + i);
				if (cijfer.charAt(i) == '.'){
					dieselnxtdigit.src  = "/images/tankstations/Dot.png";
					} else {
					dieselnxtdigit.src  = "/images/tankstations/" + cijfer.charAt(i) + ".png";
					}	
			 }
		} else { stationfinderdieselnxt.style.visibility = "hidden"; stationfinderdieselnxt.style.display = "none"; }
		
		var stationfinderlpg = document.getElementById("stationfinder-lpg"); 
		if (lpg != "0.0000") {
	   	stationfinderlpg.style.visibility = "visible";stationfinderlpg.style.display = "inline";
		var i;
		cijfer = number_format(lpg,3,'.','');
			for (i = 0; i < cijfer.length; i++) {
				//alert ("i is:" + i + " en charat i is:" + cijfer.charAt(i))
				var lpgdigit = document.getElementById("lpgdigit" + i);
				if (cijfer.charAt(i) == '.'){
					lpgdigit.src  = "/images/tankstations/Dot.png";
					} else {
					lpgdigit.src  = "/images/tankstations/" + cijfer.charAt(i) + ".png";
					}	
			 }
		} else { stationfinderlpg.style.visibility = "hidden"; stationfinderlpg.style.display = "none";}
		
		
		
		//update form
		var searchpostcode = document.getElementById("postcode");
		searchpostcode.value = postcode;
		var searchcity = document.getElementById("city");
		searchcity.value = city;
		
		
		
		
		
      });
	 
      markers.push(marker);
    }
	
	function formatNum(num, len) {
		 var numStr = "" + num;
		 while (numStr.length < len) {
			 numStr = "0" + numStr;
		 }
		 return numStr
	 }

	
	function showprice(price) {
		return ("<h1>" + price + "</h1>");	
		
		}
	

  
   
   
   function createOption(name, distance, num) {
      var option = document.createElement("option");
      option.value = num;
      option.innerHTML = name + " ( " + (distance * 1.609).toFixed(1) + " km )";
      locationSelect.appendChild(option);
    }

    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() {}

//]]>