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()
})