/**
 * @author mb
 */

 $(document).ready(function() {
   

   $(".legenda a").click(function() {
     $(".legenda a").removeClass('selected');
     $(this).addClass('selected');
   });
 });
var map;
 var side_bar_html = "";
    
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var i = 0;

var iconVoorbereiding = new GIcon(); 
iconVoorbereiding.image = 'assets/gfx/google/voorbereiding.png';
iconVoorbereiding.shadow = 'assets/gfx/google/project_shadow.png';
iconVoorbereiding.iconSize = new GSize(15, 17);
iconVoorbereiding.shadowSize = new GSize(15, 17);
iconVoorbereiding.iconAnchor = new GPoint(7.0, 8.0);
iconVoorbereiding.infoWindowAnchor = new GPoint(7.0, 8.0);

var iconPionier = new GIcon();
iconPionier.image = "assets/gfx/google/pioniers.png";
iconPionier.shadow = "assets/gfx/google/pioniers_shadow.png";
iconPionier.iconSize = new GSize(13, 22);
iconPionier.shadowSize = new GSize(13, 22);
iconPionier.iconAnchor = new GPoint(5.0, 9.0);
iconPionier.infoWindowAnchor = new GPoint(5.0, 9.0);

var iconGerealiseerd = new GIcon(); 
iconGerealiseerd.image = 'assets/gfx/google/gerealiseerd.png';
iconGerealiseerd.shadow = 'assets/gfx/google/project_shadow.png';
iconGerealiseerd.iconSize = new GSize(15, 17);
iconGerealiseerd.shadowSize = new GSize(15, 17);
iconGerealiseerd.iconAnchor = new GPoint(7.0, 8.0);
iconGerealiseerd.infoWindowAnchor = new GPoint(7.0, 8.0);
    
var iconActief = new GIcon(); 
iconActief.image = 'assets/gfx/google/actief.png';
iconActief.shadow = 'assets/gfx/google/project_shadow.png';
iconActief.iconSize = new GSize(15, 17);
iconActief.shadowSize = new GSize(15, 17);
iconActief.iconAnchor = new GPoint(7.0, 8.0);
iconActief.infoWindowAnchor = new GPoint(7.0, 8.0);

var customIcons = [];
customIcons["pionier"] = iconPionier;
customIcons["voorbereiding"] = iconVoorbereiding;
customIcons["gerealiseerd"] = iconGerealiseerd;
customIcons["actief"] = iconActief;


selectedlist=new Array();


function markersHide(type){
  // map.closeInfoWindow();
    map.getInfoWindow().hide() 

    for (var i=0;i<gmarkers.length;i++) {
      marker=gmarkers[i];
       marker.hide();
     if(type=='all'){
       marker=gmarkers[i];
       marker.show();
     }
     if (gmarkers[i].type==type)  {
      var marker = gmarkers[i];
      if (marker.isHidden()) {
          marker.show();
      } else {
          marker.hide();
      } 
    } 
  }
  
}
function loadGoogleMap() {
  if (GBrowserIsCompatible()) {
     
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(52.261433597272266, 5.284423828125), 7);
    map.setMapType(G_SATELLITE_MAP);
    loadMarkers();
    

  }
}

function loadMarkers() {
  map.clearOverlays();
  GDownloadUrl("assets/php/xml_ajax_maps_admin.php", function(data) {
    var xml = GXml.parse(data);
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      if(markers[i].getAttribute("markertype")=='user') {
       //var id = markers[i].getAttribute("id");
        var adres = markers[i].getAttribute("adres");
        var type = markers[i].getAttribute("type");
        
        //kijk nu hoeveel er zijn van een bepaalde gemeente (=adres)
         var aantal = markers[i].getAttribute("aantal");
       
        var soort = markers[i].getAttribute("soort");
   
          var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
        

        var marker = addUsermarker(point, adres, type, aantal, id);
        map.addOverlay(marker);
      }
      if(markers[i].getAttribute("markertype")=='project') {
        var id = markers[i].getAttribute("id");
        var projectnaam = markers[i].getAttribute("projectnaam");
        var omschrijving = markers[i].getAttribute("omschrijving");
        var locatie = markers[i].getAttribute("locatie");
        var afbeelding = markers[i].getAttribute("afbeelding");
        var url = markers[i].getAttribute("url");
        var type = markers[i].getAttribute("type");
  
        var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
        var marker = addProjectmarker(point, projectnaam, omschrijving, locatie, type, afbeelding,url, id);
        map.addOverlay(marker);
         document.getElementById("projectenoverzicht").innerHTML = ' <h2><span>Actieve projecten:</span></h2>'+side_bar_html;
      }
    }
  });
}    
function addUsermarker(point, adres, type, aantal, id){
  var marker = new GMarker(point, customIcons[type]);
  //het aantal belangstellenden wordt geclusterd per 20. Dus bepalen welke groep de aantallen zitten
  if(aantal<20)belangstellendentekst="<19 belangstellenden";
  if(aantal<50 && aantal>=20)belangstellendentekst="20-49 belangstellenden";
  if(aantal<100 && aantal>=50)belangstellendentekst="50-99 belangstellenden";
  if(aantal>=100)belangstellendentekst=">100 belangstellenden";

  var html = "<h1>Pioniers</h1><p><strong>Gemeente: </strong>" + adres + "</p><p>"+belangstellendentekst+"</p>";						 
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
  gmarkers[i] = marker;
  gmarkers[i].type = type;
  i++;
  return marker;
}

function addProjectmarker(point, projectnaam, omschrijving, locatie, type, afbeelding,url, id){
  //marker = new GMarker(center, {icon: new GIcon(G_DEFAULT_ICON, "bigmarker.png"), draggable: true});

  var marker = new GMarker(point, {icon:customIcons[type]});
  //var html = "<div style='height:180px'><h1>"+projectnaam+"</h1><h2>"+locatie+"</h2><p>"+omschrijving+"</p><p><img src='"+afbeelding+"' /></p><p><a href='http://"+url+"' target='_blank'>Ga naar de projectwebsite</a></p></div>";
  if(afbeelding.length==0){
    var html = "<div><h1>"+projectnaam+"</h1><h2>"+locatie+"</h2><p>"+omschrijving+"</p><p><img src='"+afbeelding+"' /></p>";
  } else {
    var html = "<div style='height:200px'><h1>"+projectnaam+"</h1><h2>"+locatie+"</h2><p>"+omschrijving+"</p><p><img src='"+afbeelding+"' /></p>";
  }
  
  if(url.length!=0) html += "<p><a href='http://"+url+"' target='_blank'>Ga naar de projectwebsite</a></p>";
  
  html += "</div>";
  			 
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
 // save the info we need to use later for the side_bar
  gmarkers[i] = marker;
  gmarkers[i].type = type;
  // add a line to the side_bar html
 
  side_bar_html += '<div class="projecten"><h3 class="projectnaam">'+projectnaam+'</h3>';
  side_bar_html += '<span class="plaats">'+locatie+'</span>';
  side_bar_html += '<span class="zoom"><a title="zoom" href="javascript:myclick(' + i + ')">&lt;zoom</a></span>';
  if(url!='')side_bar_html += '<span class="url"><a target="_blank" href="http://'+url+'" alt="'+url+'">&nbsp;|&nbsp;naar de website&gt;</a></span>';
  side_bar_html += '</div>';
  
  i++;
  
  return marker;
}
// This function picks up the click and opens the corresponding info window
 function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
}