var carte = L.map('carte').setView([ 47.219127, 2.558149 ], 8);
//var carte = L.map('carte');
L.tileLayer('https://api.mapbox.com/styles/v1/blackmeridian/cli0fjrsx02a101r08uhn2cpn/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYmxhY2ttZXJpZGlhbiIsImEiOiJjbG11Zzc5bXgwMW13MmtwZW1scDQxcTg5In0.0OqZG-PQP1Ui9w7NSyyVWQ', {

  maxZoom: 18,
  attribution: 'bjbeditions.com &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
  '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}).addTo(carte);

carte.whenReady(function() {
  setTimeout(function() {
    $(".carte-loader").removeClass("carte-loader");
  }, 1000);
});

var iconStandard = L.icon({iconUrl: 'https://next-assets.bjbeditions.com.black-meridian.fr/assets/js/leaflet/images/marker-icon.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -41]});
var markerList = [];
var bounds = [];
var stores = $("#evenements-list");
var marker;
var markerCluster = L.markerClusterGroup({
	spiderfyOnMaxZoom: true,
	showCoverageOnHover: false,
	zoomToBoundsOnClick: true,
	maxClusterRadius:1,
	singleMarkerMode:true
}); // à commenter pour désactiver markerCluster

console.log(geojson.features)

for (var i = 0; i < geojson.features.length; i++) {
  markerList.push(marker = L.marker(geojson.features[i].geometry.coordinates, {icon: iconStandard}));
  bounds.push(geojson.features[i].geometry.coordinates);

  html = "";

  if(geojson.features[i].fields.pagetitle) {
    html += "<b>" + geojson.features[i].fields.pagetitle + "</b>";
  }

  if(geojson.features[i].fields.contact_zipcode || geojson.features[i].fields.contact_city) {
    html += "<span class=\"d-flex text-icon\">";
    html += "<i class=\"material-icons\">room</i>";
    html += "<span>";
  }


  if(geojson.features[i].fields.contact_housenumber) {
    html += geojson.features[i].fields.contact_housenumber + " ";
  }

  if(geojson.features[i].fields.contact_street) {
    html += geojson.features[i].fields.contact_street + " ";
  }

  if(geojson.features[i].fields.contact_housenumber || geojson.features[i].fields.contact_street) {
    html += "<br />";
  }

  if(geojson.features[i].fields.contact_zipcode) {
    html += geojson.features[i].fields.contact_zipcode + " ";
  }

  if(geojson.features[i].fields.contact_city) {
    html += geojson.features[i].fields.contact_city + " ";
  }

  if(geojson.features[i].fields.contact_zipcode || geojson.features[i].fields.contact_city) {
    html += "</span>";
    html += "</span>";
  }

  if(geojson.features[i].href) {
    html += "<div class=\"button\"><a href=\"" + geojson.features[i].href + "\" class=\"btn btn-primary text-white\" target=\"_blank\">Détails</a></div>";
  }

  marker.bindPopup(html);
  marker.item = i;

  var item = $("<div class='item' />").html(marker._popup._content).attr("data-index", i)

  $('<a href="#" class="btn btn-primary text-white localiser" target="_blank">Localiser</a>').prependTo($(".button", item));

  $(item).appendTo($(".inner", stores));

  $(".localiser", item).on("click", function(e) {
    e.preventDefault();

    $(".active", stores).toggleClass("active", false);
    $(this).closest(".item").toggleClass("active", true);
    $(this).trigger("blur");

    marker = markerList[$(this).closest(".item").attr("data-index")];

    carte.setView([marker.getLatLng().lat, marker.getLatLng().lng], 17);
    setTimeout(function() {
      marker.openPopup();
    }, 200);
  });

  marker.on('click', function(e) {
    carte.setView([this.getLatLng().lat, this.getLatLng().lng]);
    item = $(".item", stores).eq(this.item);
    $(".active", stores).toggleClass("active", false);
    $(item).toggleClass("active", true);
    $(stores).animate({scrollTop: Math.ceil($(item).position().top) + 1}, 200, "easeInOutCubic");
  });

  // marker.addTo(carte); // à décommenter pour désactiver markerCluster
   markerCluster.addLayer(marker); // à commenter pour désactiver markerCluster
}

carte.addLayer(markerCluster); // à commenter pour désactiver markerCluster

/*carte.eachLayer(function(layer) {
  console.log(layer)
  if(layer instanceof L.Marker && layer._popup) {
    var item = $("<div class='item' />").html(layer._popup._content).appendTo($(".inner", stores));

    $(item).on("click", function() {
      $(".active", stores).toggleClass("active", false);
      $(item).toggleClass("active", true);

      carte.setView([layer.getLatLng().lat, layer.getLatLng().lng]);
      setTimeout(function() {
        layer.openPopup();
      }, 200);
    });

    layer.on('click', function(e) {
      carte.setView([layer.getLatLng().lat, layer.getLatLng().lng]);

      $(".active", stores).toggleClass("active", false);
      $(item).toggleClass("active", true);
      $(stores).scrollTop(Math.ceil($(item).position().top) + 1);
    });
  }
});*/

$(stores).toggleClass("loaded", true);
$(stores).innerHeight($("#carte").height());

carte.fitBounds(bounds);

// champ recherche
var osmGeocoder = new L.Control.OSMGeocoder({
  placeholder: 'Rechercher un lieu',
  collapsed: false,
  text: 'Lancer'
  }
);
carte.addControl(osmGeocoder);

var timer_resize;

$(window).resize(function() {
  clearTimeout(timer_resize);

  setTimeout(function() {
    $(stores).innerHeight($("#carte").height());
  }, 200);
}).trigger("resize");