$(function() {
    $.getScript('/static/imio/common.js', function() {
    });

	  /* similar demands */
  if ($('#map-similar').length) {
    var geojsonMarkerOptions = {
      radius: 8,
      fillColor: "#ff2000",
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.8
    };
    $(document).on('wcs:maps-ready', function() {
      $('.qommon-map').each(function() {
        var $map_widget = $(this);
        var map = $map_widget[0].leaflet_map;
        var geojson_url = $('#similar').data('geojson-url');
        var counter = 1;
        var geo_json = null;

        $(map).on('zoomend moveend', function() {
          var similar_list = $('#similar-list');
          similar_list.empty();
          map.eachLayer(function(layer){
            if (layer instanceof L.Marker && map.getBounds().contains(layer.getLatLng())) {
              if (layer.feature && layer.feature.properties.counter) {
                var gnm_url = $('body').data('gnm-url');
                var feature_html = '<div><span class="marker-counter">' +
                    layer.feature.properties.counter + '</span> ' +
                    '<span class="type-probleme">' + layer.feature.properties.type_probleme + '</span> ' +
                    '<span class="message">' + layer.feature.properties.message + '</span> ' +
                    '<span class="datetime">Signalé ' + layer.feature.properties.datetime + '</span>' +
                    '<a class="plus1" href="' + gnm_url + 'gnm/plusone/?ref=' + layer.feature.properties.reference + '">Je confirme</a></div>';
                $(feature_html).appendTo(similar_list);
              }
            }
          });
        });

        if (geojson_data) {
          var geo_json = L.geoJson(geojson_data,
            {
              pointToLayer: function (feature, latlng) {
                var markerStyles = "background-color: #292E48; font-size: 80%;";
                marker = L.divIcon({
                                    iconAnchor: [0, 0],
                                    popupAnchor: [5, -45],
                                    html: '<span style="' + markerStyles + '"><i class="leaflet-marker-icon ' +
                                        '" style="color: white; font-family: inherit; font-weight: bold;' +
                                        '">' + counter + '</i></span>'
                                   });
                feature.properties.counter = counter;
                counter += 1;
                return L.marker(latlng, {icon: marker});
              }
            });
          geo_json.addTo(map);
          $(map).trigger('moveend');
        }
      });
    });
  }

}); /* end */

