function sortNumber(a,b){
        return a.distance - b.distance;
    }

//deze dealers.js wordt gebruikt in de voorkant
//laat alle dealers zien uit de DB + centreer op eigen woonplaats
//dealers zijn niet draggable!

var map = null;
var geocoder = null;
var address = null;
var markers = new Array();
var distances = null;


    $().ready(function(){
        initialize();
        markDealers();   
         
    });

    //zoek knop is ingedrukt
    function submit(){
        address = $('#plaats').val();
            if(address.length != ''){
                showAddress(address);
            }
        return false;
    }

    
    //initialiseer map + controls
    function initialize() {         
        map = new GMap2(document.getElementById("smallpix"));
        point = new GLatLng(52.263236,7.0064815);
        map.setCenter(point, 10); // default address 
        map.addControl(new GSmallMapControl());
        geocoder = new GClientGeocoder();  
    }

    
    // Dealer markers inladen  
    function markDealers(){ 
    map.clearOverlays();
        // Create a base icon for all of our markers that specifies the shadow, icon dimensions, etc.
        var baseIcon = new GIcon(G_DEFAULT_ICON);
        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.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);
        
            // Creates a marker whose info window displays the letter corresponding to the given index.
            function createMarker(point, index, arr) {
              // Create a lettered icon for this point using our icon class
              var letter = String.fromCharCode("A".charCodeAt(0) + index);
              var letteredIcon = new GIcon(baseIcon);
              letteredIcon.image = "http://www.google.com/mapfiles/marker.png";

              // Set up our GMarkerOptions object
              markerOptions = { icon:letteredIcon, draggable:false };
              var marker = new GMarker(point, markerOptions);
              
              //Marker Events
              GEvent.addListener(marker, "click", function(mypoint) { 
                marker.openInfoWindowHtml(
                '<span class="maps_info">'+
                    '<h2>'+ arr[1] +'</h2> <br />' +
                    '<b>Adres:</b> '+ arr[2] +'<br />' +
                    '<b>Postcode:</b> '+ arr[4] +' <br />' +
                    '<b>Plaats:</b> '+ arr[5] +' <br />' +
                    '<b>Telefoon:</b> '+ arr[6] +' <br />'+
                    '</span>'                  
                    //'<b>Coordinaten:</b> '+ arr[7] +' , '+ arr[8] +' <br />' 
                );                        
              });
                                                                     
              return marker;
              }
        
        var dealerInfo = $('input[name=dealers]');
        // loop through each inputfld
        $(dealerInfo).each(function(key, arr){
            arr = $(arr).val().split('|');
                var latlng = new GLatLng(arr[7], arr[8]);
                map.addOverlay(createMarker(latlng, arr[0], arr));          
                markers.push(latlng);
        });    

    }

                                  
    function showAddress(address) {  
      distances = new Array();
      
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
                for(i=0;i<markers.length;i++){
                    distance = point.distanceFrom(markers[i]);
                    distances.push({
                        'pointer'  :markers[i], 
                        'distance' :point.distanceFrom(markers[i])
                    });
                }

                distances.sort(sortNumber);
                map.setCenter(distances[0].pointer, 10);
            }
          }
        );
      }
    }