/* globals $, jQuery, L */
var RapportoMarker = L.Circle.extend({ options: { originalData: 0 } })

function viewMap () {
  var map = L.map('mapid').setView([43.797, 11.2400], 11)
  // Set up the OSM layer
  L.tileLayer(
    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  ).addTo(map)
  $.getJSON('/api/rapporti/get', function (data) {
    for (var i in data.rapporti) {
      var p = data.rapporti[i]
      var marker = new RapportoMarker([p.lat, p.lng], {
        color: p.colore,
        fillColor: p.colore,
        fillOpacity: 0.3,
        radius: p.radius,
        originalData: p
      })
      marker.addTo(map).bindPopup(p.explaination)
      marker.off('click')
      marker.on('click', onMarkerClicked)
    }
  })
  function onMarkerClicked (evt) {
    console.log('T', this)
    var data = evt.target.options.originalData
    var rid = data.rid
    $('#dialog').html('<div class="explaination"></div><div class="actions"></div>')
    $('#dialog .explaination').text(data.explaination)
    $('#dialog .actions').html('<button class="btn-elimina">Elimina</button>')
    $('#dialog').attr('title', rid)
    $('#dialog').data('rid', rid)
    $('#dialog').data('marker', this)
    $('#dialog').dialog({
      modal: true,
      beforeClose: function (event, ui) {
        $('#dialog').dialog('destroy')
        $('#dialog')[0].outerHTML = '<div id="dialog"></div>'
      }
    })
  }

  $('body').on('click', '.btn-elimina', function onCancella (evt) {
    var rid = $('#dialog').data('rid')
    console.log('cancelliamo?', rid)
    $.post('/api/rapporti/delete', { rid: rid }, function () {
      map.removeLayer($('#dialog').data('marker'))
      $('#dialog').dialog('close')
    })
  })
}
jQuery(function ($) {
  $('#mapid').css('height', $(window).height() - 200)
  viewMap()
})