var map;
    var geocoder;
    var allowListener = true;
    var sector = 0;
    var trefwoord = 0;
    var kwaliteit = 0;
    var baseIcon;
    var base = 'http://www.faronet.be/map';
  
    function getUrlVars() {
      var vars = [], hash;
      var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
      for(var i = 0; i < hashes.length; i++)
      {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
      }
      return vars;
    }

    function load() {
      if (GBrowserIsCompatible()) {
        geocoder = new GClientGeocoder();
        map = new GMap2(document.getElementById('map'));
        //map.disableDragging();
        //map.disableDoubleClickZoom();
        map.disableScrollWheelZoom();
        map.addControl(new GMapTypeControl());
        map.addControl(new GSmallMapControl());
        map.setCenter(new GLatLng(51.00, 4.2352294921875), 8);
        
        baseIcon = new GIcon(G_DEFAULT_ICON);
        //baseIcon.shadow = base + "/img/icons/shadow.png";
        baseIcon.iconSize = new GSize(20, 34);
        //baseIcon.shadowSize = new GSize(37, 34);
        baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        
        if (location.search != "") {
	        var querystring = location.search.substr(1);
        }
        
        //initiele data laden en tonen
        if ( querystring != '' ) {
          var searchUrl = 'xml.php?' + querystring;
          createLocations(searchUrl, true);
        }
        else {
          alert('Er kan geen data getoond worden.');
        }
        
        //listeners toevoegen indien geactiveerd
        if ( getUrlVars()['framePanning'] == 1 ) {
          //haal nieuwe data op bij drag
          GEvent.addListener(map,"dragend", function(){searchLocationsByBounds();});
          //haal nieuwe data op bij zoom
          GEvent.addListener(map,"zoomend", function(){searchLocationsByBounds();});
        }
      }
    }
    
   //search locations by map-boundary
   function searchLocationsByBounds(bounds) {
     if (allowListener) {
       getSector();
       getTrefwoord();
       getKwaliteit();
       createLocations(createBoundsUrl(), false);
     }
   }
   
   function createBoundsQueryString() {
     var bounds = map.getBounds();
   
     var SW = bounds.getSouthWest();
     var NE = bounds.getNorthEast();
     
     var box_north = NE.lat();
     var box_south = SW.lat();
     var box_west  = SW.lng();
     var box_east  = NE.lng();
     
     var name = getUrlVars()['search_string'];
   
     var querystring = 'type=bounds&bounds=' + box_north + ',' + box_south + ',' + box_east + ',' + box_west + '&sector=' + sector + '&kwaliteit=' + kwaliteit + '&trefwoord=' + trefwoord + '&search_string=' + name;   
       
     return querystring;
   }
   
   function createBoundsUrl() {
     var querystring = createBoundsQueryString();
     var searchUrl = 'xml.php?' + querystring;
     
     return searchUrl;   
   }
   
   //define sector
   function getSector() {
     sector = getUrlVars()['sector'];
   }
   
   //define trefwoord
   function getTrefwoord() {
     trefwoord = getUrlVars()['trefwoord'];
   }

   //define kwaliteit
   function getKwaliteit() {
     kwaliteit = getUrlVars()['kwaliteit'];
   }


   //generate markers and list from an xml return
   function createLocations(searchUrl, setZoom) {
     GDownloadUrl(searchUrl, function(data) {
       var xml = GXml.parse(data);
       var markers = xml.documentElement.getElementsByTagName('marker');
       map.clearOverlays();

       var bounds = new GLatLngBounds();
       for (var i = 0; i < markers.length; i++) {
         var name = markers[i].getAttribute('name');
         var address = markers[i].getAttribute('address');
         var url = markers[i].getAttribute('url');
         var phone = markers[i].getAttribute('phone');
         var distance = parseFloat(markers[i].getAttribute('distance'));
         var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                                 parseFloat(markers[i].getAttribute('lng')));
         
         var mainsector = markers[i].getAttribute('mainsector');
         var subsector = markers[i].getAttribute('subsector');
         var omschrijving = markers[i].getAttribute('omschrijving');
         
         var marker = createMarker(point, name, address, url, phone, mainsector, subsector, omschrijving);
         map.addOverlay(marker);
         bounds.extend(point);
       }

       if (setZoom) {
         map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
       }       
     });
   }
    
    //maak een marker
    function createMarker(point, name, address, url, phone, mainsector, subsector, omschrijving) {
      var letteredIcon = new GIcon(baseIcon);
      
      var letter = 'E';
      var color = 'blue';
      
      if ( mainsector == 50 ) {
        letter = 'L';
      }
      else {
        switch (subsector) {
          case '7':
          case '8':
          case '9':
            letter = 'A';
            break;
          case '5':
            letter = 'M';
            break;
          case '6':
            letter = 'L';
            break;
          case '2':
            letter = 'B';
            break;
          case '3':
            letter = 'D';
            break;
          default:
            letter = 'E';
        }
      }
      
      letteredIcon.image = base + "/img/icons/alfabet/" + color + "_Marker" + letter + ".png";

      // Set up our GMarkerOptions object
      markerOptions = { icon:letteredIcon };
    
      var marker = new GMarker(point, markerOptions);
      var html = '<div style="width: 250px; height: 120px; overflow: auto;"><b>' + name + '</b> <br />' +
                 address + '<br /><br />' +
                 '<b>Telefoon:</b> ' + phone + '<br />' +
                 '<b>Url:</b> ' + url + '<br /><br />' +
                 '<em>' + omschrijving + '</em></div>';
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html, {maxWidth : 300});
        //opts = {maxWidth : 300};
        //marker.marker.openInfoWindowHtml(data, opts);
      });
      return marker;
    }