console.log(' %c pp_draw v.0.1 ' ,'font-family:monospace;font-size:20px;color:darkblue;');
console.log(' %c peppepalma @4/2019 ' ,'font-family:monospace;font-size:11px;color:tomato;');
console.info("%cATTENZIONE", "color:Tomato", "\nla libreria presenta le seguenti dipendenze:\n - leaflet.pm.min.js \n - leaflet-control-button-group.js \n - leaflet.table.js \n - leaflet.shpfile.js \n - supagrid.js è stata modifica nella funzione relativa al focus   ")
//################################################################################


function getProperties(f) {
     return f.properties;
}


map.doubleClickZoom.disable();

map.pm.setPathOptions({
  color: 'orange',
  fillColor: 'green',
  fillOpacity: 0.4,
});

var table_control = new L.control.Table({});



function addToList(layer){ // NB: aggiungi alla lista
  layer.addTo(map);
  var r = /(.*)\.[^.]+$/;
  var _nameLayer = r.exec(fileName);
  if (_nameLayer!=null) {
      tempFileName = _nameLayer[1];
    } else {
      tempFileName ="senza nome";
    }

  panelLayers.addOverlay({active: true, name:tempFileName, layer: layer},tempFileName,"dati locali");
  //list.enableButton(7);
  console.log("Layer ("+tempFileName+") aggiunto alla lista")
  makeLyrArrList();
}


var                 fields = [];
var          arrLoadedItem = [];
var    lyrLoadedItem = lyrLoadedItem || L.geoJson(null, {
                pointToLayer: function(feature, latlng) {
                  return new L.circle(latlng, {
                  	   radius:12,
                  	fillOpacity: 0.85
                  })
                },
                pmIgnore: false,
                onEachFeature: function (feature, layer){

                  layer.on({
                         click:function (e) {
                           var geom = feature.geometry;
                           if (! map.pm.globalRemovalEnabled()){
                           if (globalSelect!=true)  { // FIXME: trovare come bloccare il delete
                             lyrSelected.addData(geom);
                             lyrSelected.bringToFront();
                             lyrSelected.setStyle(selectedStyleOption);
                             lyrSelected.addTo(map);
                           } else {
                             lyrSelectedItem.addData(geom);
                             lyrSelectedItem.bringToFront();
                             lyrSelectedItem.setStyle(selectSTyleOption);
                             lyrSelectedItem.addTo(map);
                           }
                         }
                             attivaBottoni();
                         }
                     });
                   if (feature.properties) {
                      layer.bindPopup("id: "+feature.properties.id);
                  }
                }
              });
// ############################################################### MODIFICATO
var  lyrSelectedItem = lyrSelectedItem || L.geoJson(null, {
              pointToLayer: function(feature, latlng) {
                return new L.circle(latlng, {
                  radius: 16,
                  fillOpacity: 0.85
                })
              },
              pmIgnore: true,
              onEachFeature: function (feature, layer){
                  layer.on({
                         click:function (e) {
                           console.log("lyrSelectedItem-->")
                           lyrSelectedItem.removeLayer(e.target._leaflet_id);

                         }
                     });
                }
            });
var lyrSelected = lyrSelected || L.geoJson(null,  {
              pointToLayer: function(feature, latlng) {
                return new L.circle(latlng, {
                  radius: 16,
                  fillOpacity: 0.85
                })
              },
              pmIgnore: true,
              onEachFeature: function (feature, layer){
                  layer.on({
                         click:function (e) {
                           console.log("lyrSelected-->")
                           lyrSelected.removeLayer(e.target._leaflet_id);

                         }
                     });
                }
            });
// #############################################################################


var jsnSelectedItem;
var lyrLoadedItemBuffer = L.geoJson(null, { pmIgnore: false});
var jsnLoadedItemBuffer;
var lyrLoadedItemEnvelop;
var jsnLoadedItemEnvelop;
var  selectSTyleOption = {color :'yellow',weight: 7, dashArray: '6 3', fillOpacity: 0};




//########## file da disco #######################################################
//########################################################## NB: save file on disk
function saveSingleFile() {
var json = lyrLoadedItem.toGeoJSON();
json.propToView = propToView;
var data =  JSON.stringify(json, null, 4);
console.log(data)
//console.log(data)
var blob = new Blob( [ data ], {
  type: 'application/json'
  });
url = URL.createObjectURL( blob );
var link = document.createElement( 'a' );
link.setAttribute( 'href', url );
link.setAttribute( 'download', saveFileName );
var event = document.createEvent( 'MouseEvents' );
event.initMouseEvent( 'click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent( event );

}

function zoomToXY(){

var coordinate =  $("#xycoords").val().split(",");
console.log(coordinate[0],coordinate[1])

    zoomTo(coordinate[0],coordinate[1],17,1)
}

function readSingleFile(e) {
    var file = e.target.files[0];
    if (!file) {
      return;
    }
    fileName = file.name;
    var r = /(.*)\.[^.]+$/;
    var _nameLayer = r.exec(fileName);
    tempFileName = _nameLayer[1];

    console.log("file path: ",file.name)
    var reader = new FileReader();
    if (file.name.slice(-3) === 'zip') {

//########################################################## NB: load file from disk
//###### load zip file #################################
      reader.onload = function(e) {
          var contents = e.target.result;

          shp(contents).then(function(geojson){
            if (! jQuery.isEmptyObject(lyrLoadedItem._layers)) {
                  panelLayers.removeLayer({name:tempFileName ,layer: lyrLoadedItem});
                  lyrLoadedItem.clearLayers();
              }
              console.log("zip loaded... ");
              for (var item in geojson.features){
                var feature = geojson.features[item];
                    feature.properties.id = L.stamp(geojson.features[item]);
                    feature.properties._modified = false;
                    feature._polygonId = L.stamp(geojson.features[item]);
              }
              lyrLoadedItem.addData(geojson);
              addToList(lyrLoadedItem);
              setActive();
          });

      }
      reader.readAsArrayBuffer(file);

    } else if (file.name.slice(-4) === 'json'){
        //###### load geoJSON file #############################
        reader.onload = function(e) {
              var contents = e.target.result;
              var geojson = JSON.parse(contents)
              if (! jQuery.isEmptyObject(lyrLoadedItem._layers)) {
                  panelLayers.removeLayer({name:tempFileName ,layer: lyrLoadedItem});
                  lyrLoadedItem.clearLayers();
              }
              console.log("json loaded... ");
              lyrLoadedItem.addData(geojson);
              lyrLoadedItem.eachLayer(function(eve){
                  var jsnFeature = eve.feature;
                  jsnFeature.properties._modified = false;
                  eve._polygonId =   jsnFeature.properties.id;
              })
              addToList(lyrLoadedItem);
              setActive();

        };
        reader.readAsText(file);
  } else  if (file.name.slice(-3) === 'gpx') {
  //###### load gpx file #######################################################
        reader.onload = function(e) {
            var contents = e.target.result;
            console.log ("gpx file loaded...");
            if (! jQuery.isEmptyObject(lyrLoadedItem._layers)) {
                panelLayers.removeLayer({name:tempFileName ,layer: lyrLoadedItem});
                lyrLoadedItem.clearLayers();
            }
            //propToView =  [];
            var gpxLoadedItem = new L.GPX(contents, {async: true, marker_options: {
                                                  startIconUrl: './src/css/img/pin-icon-start.png',
                                                  endIconUrl: './src/css/img/pin-icon-end.png',
                                                  shadowUrl: './src/css/img/pin-shadow.png'}})
                .on('loaded', function(e) {
                      map.fitBounds(e.target.getBounds());
                      alert("distanza: "+gpxLoadedItem.get_distance()+"\ntempo: "+gpxLoadedItem.get_duration_string(gpxLoadedItem.get_total_time()));

                      jsnLoadedItem = gpxLoadedItem.toGeoJSON().features[0].geometry;

                      for (var item in jsnLoadedItem.features){
                        var feature = jsnLoadedItem.features[item];
                            feature.properties.id = L.stamp(jsnLoadedItem.features[item]);
                            feature.properties._modified = false;
                            feature._polygonId = feature.properties.id;
                            if (feature.geometry.type!="Point") {
                              var dist = gpxLoadedItem.get_distance()/1000;
                              dist = dist.toFixed(2)+" km ";
                              feature.properties.descrizione = "distanza: "+dist+"\ntempo: "+gpxLoadedItem.get_duration_string(gpxLoadedItem.get_total_time())
                            } else {
                              feature.properties.descrizione = "start/stop";
                            }
                      }

                    lyrLoadedItem.addData(jsnLoadedItem);
                    addToList(lyrLoadedItem);
                    });

          };
        reader.readAsText(file);
      }
//##############################################################################

}

//############################################################ NB: display table
/*
 * PURPOSE : Crea la lista dei valori degli attributi partendo dalle properties
             e le rappresenta in una Tabella
 *  PARAMS : geojson -
 * RETURNS : function -
 *   NOTES : la tabella viene preparata mediante la libreria Supagrid.js . Fare
             attenzione alle modifiche apportate alla libreria... modificata la
             funzione on.change()
 */

function displayContents(geojson) {

   fields = [];
    if (!geojson || !geojson.geometry &&
        (!geojson.features || !geojson.features.length)) {
        } else {
        rows = geojson.geometry ? [geojson.properties] : geojson.features.map(getProperties); // dati in tabella
    }
       for( var j in rows[0] ) {

         if (($.inArray(j, noFieldsArr.filter(function(string){return string !="id";}) )<0 ) && (j.charAt(0)!="_"))  {
           fields.push(j.replace(/ /g,"_")); // lista nome campi
         }
       }
        // crea tabella

       var table = new Supagrid({
         fields: fields,
         id_field: ((fields.indexOf("id")>0)?"id":fields[0]),
         data: rows,
         on: {
            change: function(obj) {
              console.log("table change: ",obj);
              bindPop(lyrLoadedItem);
          },
            focus: function(obj) {
              console.log("table focus: ",obj);
              findFeature(lyrLoadedItem,obj);
          }
        }
       })
      var my_table = table;

      lyrLoadedItem.on('popupopen',function(e){
        feature = e.layer.feature;
        console.log("popup open: ", feature.properties[((fields.indexOf("id")>0)?"id":fields[0])])
        my_table.focus(feature.properties[((fields.indexOf("id")>0)?"id":fields[0])]);

      });
    table_control.visibile = true;
    table_control.addTo(map);
    table_control.addTable(my_table.supagrid,'my_table',fileName)
    // $("#closeTable").click(function() {
    //   alert("close")
    // });
    $(table_control.getContainer()).appendTo(".leaflet-control-container:first");

    }

    function findFeature(layer,obj){
        jsnLoadedItem = layer.toGeoJSON();
        lyrLoadedItem.eachLayer(function(lyr) {
            highlightFeature(lyr,obj);
        });
    }


    function highlightFeature(layer,obj) {
      //if (layer.feature.geometry.type!="Point")  layer.setStyle({color: '#3388ff'})
      layer.setStyle({color: '#3388ff'})
      if (layer.feature._polygonId==obj){
         layer.setStyle({color :'tomato'});
    	   //if (layer.feature.geometry.type!="Point") layer.setStyle({color :'tomato'});
      }
      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
			     lyrLoadedItem.bringToFront();
		  }
    }

    function resetFeature() {
      lyrLoadedItem.eachLayer(function(item) {
        console.log("Reset style: ",item.feature.geometry.type)
        item.setStyle({color: '#3388ff'})
      //  if (item.feature.geometry.type!="Point") item.setStyle({color: '#3388ff'})
      });
      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
      //     lyrSelectedItem.bringToFront();
      }
    }



//###########################################################################
//#####  BUTTUN LIST ########################################## NB: bottoni funzioni

function creaDrawTools(){
      // aggiungi bottone editor
console.log("PMOptions",jQuery.isEmptyObject(PMOptions))
      if (jQuery.isEmptyObject(PMOptions)) PMOptions =  {
      drawMarker: true,
      drawPolygon: true,
      editPolygon: false,
      drawPolyline: true,
      drawCircle: false,
      deleteLayer: true,
      editMode:false
      };
        if (leggiCookie("draw") == "drawON")  map.pm.addControls(PMOptions);

}
// aggiungi bottone funzioni
    var myButtons = [

    						{icon:'bacon',
                    hoverColor: 'red',
                    title: "Crea Buffer",
                    //text:'Set marker',
                    separatorBefore:true,
                    containerBefore:false,
                    onClick:bufferButton,
                    hidden:true
                },
    						{icon:'object-group',
                    hoverColor: 'red',
                    title: "Unione",
                    //text:'Set marker',
                    separatorBefore:false,
                    containerBefore:false,
                    onClick:unionButton,
                    hidden:true
                },
    						{icon:'ruler',
                    hoverColor: 'red',
                    title: "Misura",
                    separatorBefore:false,
                    containerBefore:false,
                    onClick:misureButton
                },
    						{icon:'clone',
                    hoverColor: 'red',
                    title: "Incolla",
                    separatorBefore:true,
                    containerBefore:false,
                    onClick:copyButton
                },
                {icon:'expand-arrows-alt',
                    hoverColor: 'red',
                    title: "Zoom to..",
                    containerBefore:false,
                    onClick:extendButton
                },
    						{icon:'hand-pointer',
                    hoverColor: 'red',
                    title: "Seleziona",
                    separatorBefore:false,
                    containerBefore:false,
                    onClick:selectButton,
                    selectable: true,
                    disabled: false
                },
    						{icon:'trash-alt',
                    hoverColor: 'red',
                    title: "Annulla selezione",
                    separatorBefore:false,
                    containerBefore:false,
                    onClick:clearSelect
                }

    					]

  var list =  new L.Control.ButtonGroup({
    					horizontal:false,
    					separateButtons: false,
    					small: false,
    					equalWidth: true,
    					buttons: myButtons
    				})

            list.addTo(map);


//##############################################################################
//#####  AZIONI DI DEFAULT SU MAPPA  ###########################################
//############################################################### NB: map events
map.on('click', function (e) {
  //  lyrSelectedItem.clearLayers();      // CANCELLA I SELEZIONATI
  //  lyrLoadedItemBuffer.clearLayers();      // CANCELLA I BUFFER
 });

 map.on('dblclick', function (e) {

    lyrSelectedItem.clearLayers();      // CANCELLA I SELEZIONATI
    lyrLoadedItemBuffer.clearLayers();      // CANCELLA I BUFFER
  })
  lyrSelectedItem.on('contextmenu',function(e){
      lyrSelectedItem.removeLayer(e.layer._leaflet_id);
  })
  lyrSelected.on('contextmenu',function(e){
      lyrSelected.removeLayer(e.layer._leaflet_id);
  })
//##############################################################################
//#####  AGGIUNGI FILE FROM DISK ###############################################
//############################################################### NB: loadButton
var fileButton = L.control.custom({
  //  position: 'topright',
    content : '<label class="leaflet-panel-layers-grouplabel"><span class="leaflet-panel-layers-title">Carica file dal disco <a type="button" onClick="goHelp(1);"><i class="fas fa-question-circle"></i></a></span></label>'+
        '<div class="leaflet-panel-layers-item">' +
        '<input type="file" id="file-input" class="topcoat-button" name="file-input" accept="text/json"/>' +
        '</div>'+
        '<span style="font-size:0.9em">Solo file nei formati <b>json</b> e <b>shp</b></span>',
    classes : 'leaflet-panel-layers-group',
    style   :
    {   margin: '0px 5px 0px 0px',
        padding: '5px 5px 5px 5px'  },
    datas   :
    {
        'foo': 'load',
    },
    events:
    {  click: function(e){  },
        dblclick: function(e){   },
        contextmenu: function(e){  }
    }
}).addTo(map);



//########################################################## NB: saveButton
var saveButton = L.control.custom({
  //  position: 'topright',
    content : '<label class="leaflet-panel-layers-grouplabel"><span class="leaflet-panel-layers-title">Salva file su disco </label>'+
        '<div class="leaflet-panel-layers-item">' +
        '<input type="button" id="file-save" class="topcoat-button" name="file-save" value="Salva JSON" />' +
        '</div>',
    classes : 'leaflet-panel-layers-group',
    style   :
    {   margin: '0px 5px 0px 0px',
        padding: '5px 5px 5px 5px'  },
    datas   :
    {
        'foo': 'save',
    },
    events:
    {  click: function(e){  },
        dblclick: function(e){   },
        contextmenu: function(e){  }
    }
}).addTo(map);


//#####  AGGIUNGI XY coord ###############################################
//########################################################## NB: xycoords
var xycoords = L.control.custom({
  //  position: 'topright',
    content : '<label class="leaflet-panel-layers-grouplabel"><span class="leaflet-panel-layers-title">coordinate X,Y <a type="button" onClick="goHelp(1);"><i class="fas fa-question-circle"></i></a></span></label>'+
        '<div class="leaflet-panel-layers-item">' +
        '<input type="text" id="xycoords" name="xycoords"/>' +
          '<input type="button" id="xy-zoom" class="topcoat-button" name="xy-zoom" value="zoom!" />' +
        '</div>',
    classes : 'leaflet-panel-layers-group',
    style   :
    {   margin: '0px 5px 0px 0px',
        padding: '5px 5px 5px 5px'  },
    datas   :
    {
        'foo': 'xy',
    },
    events:
    {  click: function(e){  },
        dblclick: function(e){   },
        contextmenu: function(e){  },
    }
}).addTo(map);



//#############################################################################/
//### sposta controllo nel PANNELLO DESTRO #####################################
//############################################################################
// $("<div>", {class: 'mapbuttons2 leaflet-panel-layers-overlays',id: 'fileWidget'}).appendTo( ".leaflet-panel-layers" );
$("<div>", {class: 'mapbuttons2 leaflet-panel-layers-overlays',id: 'fileWidget'}).appendTo( "#pannello" );
// $(fileButton.getContainer()).appendTo(".mapbuttons2");
$(fileButton.getContainer()).appendTo("#pannello");
//$("<div>", {class: 'mapbuttons3 leaflet-panel-layers-overlays'}).appendTo( ".leaflet-panel-layers" );
// $(saveButton.getContainer()).appendTo(".mapbuttons2");
$(saveButton.getContainer()).appendTo("#pannello");

// $("<div>", {class: 'mapbuttons3 leaflet-panel-layers-overlays',id: 'xycoordsWidget'}).appendTo( ".leaflet-panel-layers" );
// $(xycoords.getContainer()).appendTo(".mapbuttons3");
$('<div >', {class: 'mapbuttons3 leaflet-panel-layers-overlays', id:'xycoordsWidget', style:'display:none'}).appendTo( "#pannello" );
$(xycoords.getContainer()).appendTo("#pannello");
//#############################################################################


//#############################################################################/
//### AGGIUNGI BOTTONE AL PANNELLO sinistro #####################################/
//############################################################ NOTE: clearSelect
function clearSelect(){
  lyrSelectedItem.clearLayers();
  $("#infoBanner").html("Selezioni eliminate")
  $("#infoBanner").show();
  setTimeout(function() { $("#infoBanner").hide(); }, 4000);
  console.log("Selezione eliminata")
}

function selectButton(){
 if (globalSelect == true) {
   globalSelect = false;
 } else {
   globalSelect = true;
 }


}

//############################################################ NB: copyButton
function copyButton(){
  var jsnSelectedItem = lyrSelectedItem.toGeoJSON();

console.log("jsnSelectedItem",jsnSelectedItem);


  for (var item in jsnSelectedItem.features) {
        var feature = jsnSelectedItem.features[item];
        var property = feature.properties;
        property.id = L.stamp(feature);
        property._lastChange = new Date();
        property._operation = "copied";
        property._modified = true;

        feature._polygonId =   property.id;
      //  propToInput = [];
        for (var prop in property) {
        if (prop!="id")  addProp(prop);
        }
    };
  //   addProp("id");
     addProp("_lastChange");
     addProp("_operation");
     addProp("_modified");

    lyrLoadedItem.addData(jsnSelectedItem);
    lyrSelectedItem.clearLayers();
    jsnLoadedItem = lyrLoadedItem.toGeoJSON();
    //  console.log("jsnLoadedItem->",jsnLoadedItem.features)

    if (!map.hasLayer(lyrLoadedItem)) {
       lyrLoadedItem.addTo(map);
       panelLayers.addOverlay({active: true, name:tempFileName, layer: lyrLoadedItem},tempFileName,"dati locali");
    //  list.enableButton(7);
       console.log("Layer ("+tempFileName+") aggiunto alla lista")
       //SetZIndexByTitle($(fileName));
       setActive();
    }
}


//############################################################ NOTE: stampaButton

function stampaButton(){

  $("#preview div#snapshot").html("<img src='./images/preloader.gif' />")
  sidebar.open("preview");
leafletImage(map, doImage);
}

//############################################################ NOTE: rimuovi

function rimuovi(layerId){
var layer = map._layers[layerId];
var Layers = panelLayers._layers;
$.each(Layers,function( index,value ) {
    if (value.id==layerId) {
      var layerDef = {name:value.name,layer:value.layer};
      panelLayers.removeLayer({name:value.name, layer:layerDef});
      map.removeLayer(value.layer);
      lyrLoadedItem.clearLayers();
      console.log("Layer ("+value.name+") eliminato!")
    }
});


}
//############################################################ NOTE: semplify

function semplify(layerId){


  var layer = map._layers[layerId];
  var geojson = layer.toGeoJSON();
  var options = {tolerance: 0.003, highQuality: true};
  var simplified = turf.simplify(geojson, options);

  lyrLoadedItem.clearLayers();
  lyrLoadedItem.addData(simplified);
}
//############################################################ NOTE: centroide

function centroide(layerId){
  var layer = map._layers[layerId];
  var geojson = layer.toGeoJSON();
  var _layers = geojson.features;
  lyrSelectedItem.clearLayers();
    _layers.forEach(function(element,index){
        var centri = turf.centroid(element, element.properties);
        lyrSelectedItem.addData(centri);
    });
  lyrSelectedItem.setStyle(selectSTyleOption);
}
//############################################################ NOTE: centerOfMass

function centroDiMassa(layerId){
  var layer = map._layers[layerId];
  var geojson = layer.toGeoJSON();
  var _layers = geojson.features;
  lyrSelectedItem.clearLayers();
    _layers.forEach(function(element,index){
        var centri = turf.centerOfMass(element, element.properties);
        lyrSelectedItem.addData(centri);
    });
  lyrSelectedItem.setStyle(selectSTyleOption);
}


//############################################################ NOTE: propertiesButton

function propertiesButton(id, map, button, buttonGroup, selected){
/* PURPOSE : Azioni legate alla pressione del pulsante per la gestione degli attributi. Viene generate la lista degli attributi
 *           e inserito i comandi per aggiungi, rimuovi e bindToPopup
 *  PARAMS :  -
 * RETURNS :  -
 *   NOTES :
 */
    geojson = lyrLoadedItem.toGeoJSON();
    fields = [];
      if (!geojson || !geojson.geometry &&
          (!geojson.features || !geojson.features.length)) {
          } else {
          rows = geojson.geometry ? [geojson.properties] : geojson.features.map(getProperties); // dati in tabella
      }
         for( var j in rows[0] ) {
            fields.push(j); // lista nome campi
         }
  //  console.log( "fields: ",fields);
        html = "<h2> Lista degli attributi </h2> <br/>";
        html += '<table>';
        html += '<tr><th style="font-weight: 900;">&nbsp;</th><th>descrizione</th><th width="15%""><span style="font-size: 1.2em; color: Dodgerblue;"><i onClick="addProperty()" class="fas fa-plus"></i></span></th></tr>';
        $.each(fields, function(i, field) {
        if (!noFieldsArr.includes(field))  html += '<tr><td style="text-align: center;">'+(i+1)+'</td><td style="font-weight: bold;">'+field+'</td><td><span style="font-size: 1.5em; color: Tomato;"><i onClick="removeProperty('+i+')" class="fas fa-times"></i></span>&nbsp;<span style="font-size: 1.4em; color: green;"><i onClick="addToPopup('+i+')" class="fas'+((propToView.indexOf(fields[i])>-1)?" fa-eye":" fa-eye-slash")+'"></i></span></td></tr>';
        });
        html += '</table>';
        $("#home div").html(html)
        sidebar.open("home");

}

function bindPop(layer){/*
 * PURPOSE : Effettua il bind delle properties di ogni field sul relativo popup
 *  PARAMS :  layer - è la feature da bindare
 * RETURNS :  -
 *   NOTES : propToView è l'array delle proprieta di visualizzare
 */
  layer.eachLayer(function(item){
    var properties = item.feature.properties;
    var html = "";
    propToView.forEach(function(entry) {
      html += entry+": "+properties[entry]+"<br>";
    });
    item.bindPopup(html);
  });

}

function addToPopup(prop){
    var geojson = lyrLoadedItem.toGeoJSON();
    var index = propToView.indexOf(fields[prop]);
    if (index < 0) {
        propToView.push(fields[prop]);
    } else{
      propToView.splice(index,1)
    }

    lyrLoadedItem.clearLayers();
    lyrLoadedItem.addData(geojson);

    bindPop(lyrLoadedItem);
    propertiesButton();
}


function removeProperty(prop){
  console.log("removeProperty: ",prop)
    var geojson = lyrLoadedItem.toGeoJSON();
    turf.propEach(geojson, function (currentProperties, featureIndex) {
    //  console.log(Object.keys(currentProperties)[prop],featureIndex );
      delete currentProperties[Object.keys(currentProperties)[prop]];
    });
    var index = propToView.indexOf(fields[prop]);
    if (index > 0)   propToView.splice(index,1)

    lyrLoadedItem.clearLayers();
    lyrLoadedItem.addData(geojson);
    propertiesButton();
}

function addProperty(){

    var prop = prompt("Inserisci il nome del campo", "nota");
    addProp(prop);
    propertiesButton();
}

function addProp(prop){
    var geojson = lyrLoadedItem.toGeoJSON();
    var index = propToInput.indexOf(prop);
    if (index < 0)  {
        var data = [];
        data.id= prop;
        data.label = prop;
        data.type = 't';
        data.default = '';
       if ((prop.charAt(0)!="_")) propToInput.push(data);
    } else {
      console.log(prop, " già esiste!")
    }

/*    turf.propEach(geojson, function (currentProperties, featureIndex) {
     console.log("currentProperties",prop,currentProperties );

   });
*/
  //console.log("propToInput",propToInput)
  lyrLoadedItem.clearLayers();
  lyrLoadedItem.addData(geojson);
}

//############################################################ NOTE: tableButton
// function tableButton(id, map, button, buttonGroup, selected){
//   //  jsnLoadedItem = lyrLoadedItem.toGeoJSON();
//     if (id.selected) {
//     //    displayContents(jsnLoadedItem);
//         table_control.on();
//         // table_control.visibile = true;
//         console.log("table visible: ", table_control.visibile)
//     } else {
//       resetFeature();
//       table_control.off();
//       // table_control.visibile = false;
//       console.log("table visible: ", table_control.visibile)
//     };
// }
//############################################################ NOTE: misureButton
function misureButton(){

if (!jQuery.isEmptyObject(lyrSelectedItem._layers)) {
  jsnSelectedItem = lyrSelectedItem.toGeoJSON();
  lyrSelectedItem.clearLayers();
} else if (!jQuery.isEmptyObject(lyrSelected._layers)) {
  jsnSelectedItem = lyrSelected.toGeoJSON();
    lyrSelected.clearLayers();
  } else {
  return false; // TODO: aggiungere una geometria puntuale con la posizione xy
}


    var feature = jsnSelectedItem.features[0].geometry;
    if ((feature.type=="Polygon")) {
        var polygon = turf.polygon(feature.coordinates);
        var area = turf.area(polygon);
        var line = turf.polygonToLine(polygon);
        var length = turf.length(line, {units: 'meters'});
        alert ("Area = "+ area.toFixed(2) + " metri quadrati \nPerimetro = "+length.toFixed(2)+" metri");
    } else if ((feature.type=="MultiPolygon")) {
        var polygon = turf.multiPolygon(feature.coordinates);
        var area = turf.area(polygon);
        var line = turf.polygonToLine(polygon);
        var length = turf.length(line, {units: 'meters'});
        alert ("Area = "+ area.toFixed(2) + " metri quadrati\n Perimetro = "+length.toFixed(2)+" metri");
        //alert ("Area = "+ area + " metri quadrati")
    } else if  ((feature.type=="LineString")) {
        var explode = turf.explode(feature);
        var line = turf.lineString(feature.coordinates);
        var length = turf.length(line, {units: 'meters'});
        alert ("Lunghezza = "+ length.toFixed(2) + " metri")
    } else if  ((feature.type=="MultiLineString")) {
        var line = turf.multiLineString(feature.coordinates);
        var length = turf.length(line, {units: 'meters'});
        alert ("Lunghezza = "+ length.toFixed(2) + " metri")
    }

}
//############################################################ NOTE: bufferButton
function bufferButton(){
  var km = prompt("Inserisci la dimenzione del buffe in km", "0.5");
  if (isNaN(parseFloat(km)) || !isFinite(km)) {
    alert ("Spiritoso! ...deve essere un NUMERO!")
    return
  }
  if (!jQuery.isEmptyObject(lyrSelectedItem._layers)) {
    var lyrItemBuffer = lyrSelectedItem;
    console.log("buffer alla selezione");
  }
   km = parseFloat(km);
  // jsnLoadedItemBuffer = turf.buffer(lyrItemBuffer.toGeoJSON(),km, 'meters');

  jsnLoadedItemBuffer = turf.buffer(lyrItemBuffer.toGeoJSON(),km, {units: 'kilometers'});
  lyrLoadedItemBuffer = L.geoJSON(jsnLoadedItemBuffer);

  lyrSelectedItem.clearLayers();
  lyrSelectedItem.addData(jsnLoadedItemBuffer);
  lyrSelectedItem.setStyle(selectSTyleOption);

}
//############################################################ NOTE: unionButton
function unionButton(){
  if (!jQuery.isEmptyObject(lyrSelectedItem._layers)) {
    var lyrItemUnion = lyrSelectedItem;
    console.log("unione della selezione");
    var jsnLoadedItemUnion = {};
    turf.featureEach(lyrItemUnion.toGeoJSON(), function (currentFeature, featureIndex) {
      if (featureIndex == 0) {
          jsnLoadedItemUnion = currentFeature;
      } else {
        jsnLoadedItemUnion =  turf.union(jsnLoadedItemUnion,currentFeature);
      }
    });
}

  lyrSelectedItem.clearLayers();
  lyrSelectedItem.addData(jsnLoadedItemUnion);
  lyrSelectedItem.setStyle(selectSTyleOption);

}

//############################################################ NOTE: extendButton
function extendButton(){

  if (!jQuery.isEmptyObject(lyrSelectedItem._layers)) {
    var lyrLoadedItemEnvelop = lyrSelectedItem;
    console.log("Extend alla selezione");
  } else {
    var lyrLoadedItemEnvelop = lyrLoadedItem;
    console.log("Extend al layer");
  }

  jsnLoadedItemEnvelop = turf.envelope(lyrLoadedItemEnvelop.toGeoJSON());
  var arrBbox = turf.bbox(jsnLoadedItemEnvelop);
  var bbox =[[arrBbox[1],arrBbox[0]],[arrBbox[3],arrBbox[2]]];
  map.fitBounds(bbox);
  //lyrLoadedItemEnvelop = L.geoJSON(jsnLoadedItemEnvelop,{style:{color:'gray', fillOpacity:0.2}});
  //panelLayers.addOverlay({group: "Road layers",name:'<b>Envelop</b> di Loaded data' ,layer: lyrLoadedItemEnvelop});
}

//######### DRAW #################################################################
//############################################################## NB: pm:create

map.on('pm:drawstart', e => {
  globalEdit = true;
});

map.on('pm:drawend', e => {
  //globalEdit = false;
});
map.on('pm:create',function(e) {
  var item = e.layer;
  var jsnItem = item.toGeoJSON();
  //jsnItem.properties = jsnItem.properties || {} ;

  jsnItem.properties.id          = L.stamp(item);
  jsnItem.properties._lastChange = new Date();
  jsnItem.properties._operation = "insert";
  jsnItem.properties._modified   = false;
  jsnItem._polygonId             = jsnItem.properties.id;


//    addProp("id");
    addProp("_lastChange");
    addProp("_operation");
    addProp("_modified");

//console.log("jsnItem->",jsnItem)
  var content = '<form >';
  $.each(propToInput, function(i, prop) {
      content += '<label style="width:150px;" for="'+prop.id+'">'+prop.label+' </label><input id="'+prop.id+'" name="'+prop.id+'"/><br>';
  });
    content +='</form>';
     map.fire('modal', {
       title: 'Inserimento dati',
       content: content,
       template: ['<div class="modal-header"><h3>{title}</h3></div>',
         '<div class="modal-body">{content}</div>',
         '<div class="modal-footer">',
         '<button class="topcoat-button--large {OK_CLS}">{okText}</button>',
         '<button class="topcoat-button--large {CANCEL_CLS}">{cancelText}</button>',
         '</div>'
       ].join(''),
       okText: 'Ok',
       cancelText: 'Annulla',
       OK_CLS: 'modal-ok',
       CANCEL_CLS: 'modal-cancel',
       width: 500,
       onShow: function(evt) {
         var modal = evt.modal;
         L.DomEvent
           .on(modal._container.querySelector('.modal-ok'), 'click', function() {
            // alert('you pressed ok');
             $.each(propToInput, function(i, prop) {
               jsnItem.properties[prop.id] = $("#"+prop.id).val();
                 content += '<label style="width:150px;" for="'+prop.id+'">'+prop.label+' </label><input id="'+prop.id+'" name="'+prop.id+'"/><br>';
             });
             modal.hide();
             globalEdit = false;
           })
           .on(modal._container.querySelector('.modal-cancel'), 'click', function() {
             alert('You pressed cancel');
             modal.hide();
             globalEdit = false;
           });
       }
     });

  lyrLoadedItem.addData(jsnItem);
  map.removeLayer(item);
  console.log("feature creata... ");
//if ($(lyrLoadedItem._layers).length>0) {
//  lyrLoadedItem.addTo(map);
  if (!map.hasLayer(lyrLoadedItem)) {
    addToList(lyrLoadedItem);
    setActive();
  }
//}


});

//lyrLoadedItem.pm.enable();

//############################################################## NB: pm:cut
map.on('pm:cut',function(e) {
  var originalLayer = e.originalLayer;
  var layer = e.layer;
  var jsnLayer = layer.toGeoJSON();
  var jsnFeature = jsnLayer.features[0];

  jsnFeature.properties._lastChange = new Date();
  jsnFeature.properties._operation = "update";
  jsnFeature.properties._modified = true;
  jsnFeature._polygonId =   jsnFeature.properties.id;
  map.removeLayer(layer);
  lyrLoadedItem.removeLayer(originalLayer);
  lyrLoadedItem.addData(jsnFeature);
  globalEdit = !globalEdit;
});

//############################################################## NB: pm:edit
var modificato = false;
lyrLoadedItem.on('contextmenu',function(e){

  var layer = e.layer;
  var json = layer.toGeoJSON();

  layer.pm.toggleEdit({
    //allowSelfIntersection: false
  });
  console.log("Edit mode... ",layer.pm.enabled());
  if (!layer.pm.enabled()) LayerRefresh(layer,json,modificato);

 layer.on('pm:edit', e => {
//    var lyrLayer = e.target;
//    var jsnLayer = lyrLayer.toGeoJSON();
  });

  layer.on('pm:markerdragend', e => {
    var lyrLayer = e.target;
    var jsnLayer = lyrLayer.toGeoJSON();
    console.log("layer modificato(1)... ",jsnLayer._polygonId)
    modificato = true;
    LayerModified(lyrLayer,jsnLayer);

  });
  layer.on('pm:vertexadded', e => {
    var lyrLayer = e.target;
    var jsnLayer = lyrLayer.toGeoJSON();
    console.log("layer modificato(2)... ",jsnLayer._polygonId)
    modificato = true;
    LayerModified(lyrLayer,jsnLayer);

  });
  layer.on('pm:vertexremoved', e => {
    var lyrLayer = e.target;
    var jsnLayer = lyrLayer.toGeoJSON();
    console.log("layer modificato.(3).. ",jsnLayer._polygonId)
    modificato = true;
    LayerModified(lyrLayer,jsnLayer);
  });

})

//############################################################## NB: pm:drag

      lyrLoadedItem.on('pm:dragend',function(e) {
        var _lyrLayer = e.target;
        var _jsnLayer = _lyrLayer.toGeoJSON();
        console.log("Layer spostato!",e);
        lyrLoadedItem.clearLayers();
        LayerRefresh(lyrLoadedItem,_jsnLayer,true);
        //LayerModified(lyrLoadedItem,jsnLayer);


      })

      // lyrLoadedItem.on('pm:globaldrawmodetoggled', e => {
      //   console.log("---globaldrawmodetoggled",lyrLoadedItem.pm.toggleGlobalDragMode());
      // });

function LayerRefresh(lyr,jsn,stato){
    if (stato) {
      console.log("layer refresh... ",jsn._leaflet_id)
      lyrLoadedItem.removeLayer(lyr);
      lyrLoadedItem.addData(jsn);
      modificato = false;
    }
}

function LayerModified(lyr,jsn){
  console.log("layer salvato... ",jsn._polygonId)
  jsn.properties._lastChange = new Date();
  jsn.properties._operation = "update";
  jsn.properties._modified = true;
  modificato = true;
}
//############################################################## NB: pm:remove
map.on('pm:remove',function(e) {
  var layer = e.layer
  console.log("feature eliminata... ")
  lyrLoadedItem.removeLayer(layer);
});
//#################################################################################



$(document).ready(function () {

//  creaDrawTools();
  document.getElementById('file-input').addEventListener('change', readSingleFile, false);
  document.getElementById( 'file-save' ).addEventListener( 'click', saveSingleFile);
  document.getElementById( 'xy-zoom' ).addEventListener( 'click', zoomToXY);

});