console.log(' %c pp_addWMS_l v.0.3.0 ' ,'font-family:monospace;font-size:20px;color:darkblue;');
console.log(' %c peppepalma @2023 ' ,'font-family:monospace;font-size:11px;color:tomato;');
console.log( "%cADD WMS service [Aggiunge servizi WMS]", "color:deepskyblue");
console.log( "%cATTENZIONE", "color:Tomato", "\nleaflet-panel-layer.js è stata modificata alla riga 182");


var url = "./mysql2xml.php?mode=read&db=layers&prj="+nomeProgetto;
var txtLayers = $.ajax({
          url: url,

          async: false
       }).responseText;
var jsnGlobalLayers = JSON.parse(txtLayers);

var lyrSelectedItem = lyrSelectedItem || L.geoJson(null,  {
              pointToLayer: function(feature, latlng) {
                return new L.circle(latlng, {
                  radius: 1,
                  fillOpacity: 0.15
                })
              },
              pmIgnore: true,
              onEachFeature: function (feature, layer){
                  layer.on({
                         click:function (e) {
                           lyrSelectedItem.removeLayer(e.target._leaflet_id);
                         }
                     });
                }
            });


            var lyrSelected = lyrSelected || L.geoJson(null,  {
              pointToLayer: function(feature, latlng) {
                return new L.circle(latlng, {
                  radius: 1,
                  fillOpacity: 0.15
                })
              },
              pmIgnore: true,
              onEachFeature: function (feature, layer){
                  layer.on({
                         click:function (e) {

                           lyrSelected.removeLayer(e.target._leaflet_id);

                         }
                     });
                }
          });


      var lyrAttributi = lyrAttributi || L.geoJson(null, { pmIgnore: true});
      var selectSTyleOption = {color :'yellow',weight: 3, dashArray: '6 6', fillOpacity: 0.1};
      var selectedStyleOption = {color :'green',weight: 3,  fillOpacity: 0.1};

        var htmlDefault = "";
            htmlDefault = "<p> Lista dei layer disponibili </p> <br/>";
            htmlDefault += '<table>';
            htmlDefault += '<tr><th style="font-weight: 900;">&nbsp;</th><th>descrizione</th><th width="15%""></th></tr>';
            htmlDefault += '<tr><td style="text-align: center;"> - </td><td style="font-weight: bold;">Nessun dato disponibile</td><td></td></tr>';
            htmlDefault += '</table>';



// #############################################################################
// ########################################################## NB: azioni su map
map.doubleClickZoom.disable();

map.on('click', function(){
    htmlID = "";  // CANCELLA INFO
    lyrSelected.clearLayers();
    $("#context-menu").removeClass("show").hide();
});

map.on('dblclick', function (e) {
     lyrSelectedItem.clearLayers();      // CANCELLA I SELEZIONATI
     lyrSelected.clearLayers();      // CANCELLA I SELEZIONATI
 })
map.on('contextmenu', function(e){

})
 // #############################################################################
 // ########################################################## NB: Set ZIndex

  function SetZIndexByTitle(layerId) {
      var items = panelLayers._items;
      // console.log("items" ,items )
      var layer = map._layers[layerId];
      layer.bringToFront();
      globalActive = {"name":layer._name,"id":layerId};

      $.each(items, function( index, value ) {
          $(value).css("font-weight","normal");
          if (index==layerId) $(value).css("font-weight","bold");
      });

      // console.log(layerId)
      // $("#"+layerId).parent().css("color","red")

      $("#infoBanner").html("Layer in primo piano" )
      $("#infoBanner").show();
      setTimeout(function() { $("#infoBanner").hide(); }, 4000);
      console.log("Layer on top: ",layer._name)
  }

  function SetZIndexByTitleR(layerId) {
       var items = panelLayers._items;
       // console.log("items" ,items )
       var layer = map._layers[layerId];
       layer.bringToBack();


       $.each(items, function( index, value ) {
           $(value).css("font-weight","normal");
       });

       // console.log(layerId)
       // $("#"+layerId).parent().css("color","red")

       $("#infoBanner").html("Layer in secondo piano" )
       $("#infoBanner").show();
       setTimeout(function() { $("#infoBanner").hide(); }, 4000);
       console.log("Layer on top: ",layer._name)
   }




  function SetOpacityLayer(oggetto) {
      var poor = $("#"+oggetto.attr("id")).parent();
      $("#opacitySlider").parent().parent().css("height","20px");
      $("#opacitySlider").parent().remove();
      poor.css("height","40px");
      poor.append('<div style="margin-left:5px"><div id="opacitySlider" style="width:120px" data-slider-id="opacitySlider" type="text" data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="0.5"></div></div>')

      $('#opacitySlider').slider({
         formatter: function(value) {
           map._layers[oggetto[0].id].setOpacity(value)
           return 'trasparenza: ' + value;
        }
      });
  }


  function zoomTo(x,y,z,s){
      map.setView([x,y], z);
      if (s){L.marker([x, y]).addTo(map)
          .bindPopup(s)
          .openPopup();
      }
  }

// #############################################################################
// ########################################################## NB: addLayerButton
var groupOpen = [];
function addLayerButton() {

        makeLyrArrList()
        // var url = "./mysql2xml.php?mode=read&db=layers&prj="+gruppo;
        // var txtLayers = $.ajax({
        //           url: url,
        //
        //           async: false
        //        }).responseText;
        //        var jsnLayers = JSON.parse(txtLayers);
        console.log("jsnGlobalLayers",jsnGlobalLayers)
         var jsnLayers = jsnGlobalLayers;



        if ( !$.isEmptyObject(jsnLayers)) {
          var lyrList = jsnLayers;


          var htmlWMS = "<div style='margin-top: 14px;margin-bottom:4px;height:27px;line-height: 27px;padding: 2px;background: #fff;border: 1px solid rgba(0,0,0,0.3);border-radius: 4px;'>Ricerca testuale: ";
          htmlWMS += "<input type='text' id='searchInTable' placeholder='es. comuni' title='cerca tematismo' style='width:calc(100% - 130px);float: right;'> ";
          htmlWMS += '</div>';
          htmlWMS += '<div id="accordion">';
          htmlWMS += '</div>';//chiede accordion
        }

          $("#wms div").html(htmlWMS);
          sidebar.open("wms");

          createTable(lyrList)

          getLegend();

          if(htmlWMS.length == 0) htmlWMS = htmlDefault ;



          $('.myList').on('show.bs.collapse', function (e) {
            var id = e.target.id;
            if (groupOpen.indexOf(id)<0) groupOpen.push(id)
            // do something…
          });

          $('.myList').on('hide.bs.collapse', function (e) {
            var id = e.target.id;
            var index = groupOpen.indexOf(id);
            if (index>-1) groupOpen.splice(index,1)
            // do something…
          });

          $('#searchInTable').on('keyup', function(){
            var result = lyrList.filter(function(obj, index){
              //console.log(obj.descrizione);
              //console.log($('#searchInTable').val())
              return obj.descrizione.toUpperCase().includes($('#searchInTable').val().toUpperCase()) || obj.layerName.toUpperCase().includes($('#searchInTable').val().toUpperCase());
            })
                createTable(result)
          });


        function createTable(_lyrList){
            console.log("createTable...")
            _lyrList.sort(function (a, b) {
                return a.layerName.localeCompare(b.layerName);
            });

            _lyrList.sort(function (a, b) {
                return a.l_group.localeCompare(b.l_group);
            });
            var htmlWMS_ = "";
            var groupOld = "";
            $.each(_lyrList, function(i, layer) {
                var isOnList = $.inArray(layer.layerName,mapLyrArrList);
                if (groupOld!=layer.l_group) {
                  var groupId = layer.l_group.replace(new RegExp(" ", 'g'), "_");
                  var isShow = $.inArray(groupId,groupOpen)>-1;
                  if(groupOld!="") htmlWMS_ += '</table></div></div></div>';

                   htmlWMS_ += '<div class="card"> <div class="card-header" id="'+groupId+'-h" style="background-color:#2575cb;border:1px solid #cdcdcd;">';
                   htmlWMS_ += '<button class="btn btn-link" data-toggle="collapse" data-target="#'+groupId+'" aria-expanded="'+((isShow)?'true':'false')+'" aria-controls="'+groupId+'" style="color:#fff">'+layer.l_group+'</button>';
                   htmlWMS_ += '</div>';
                   htmlWMS_ += '<div id="'+groupId+'" class="myList collapse '+((isShow)?'in':'')+'" aria-labelledby="'+groupId+'-h" data-parent="#accordion"><div class="card-body">';
                   htmlWMS_ += "<table id='"+groupId+"-t'>";
                  groupOld = layer.l_group;
                }

                htmlWMS_ += '<tr><td style="text-align: center;width:20px">'+(i+1)+'</td><td style="">'+converter.makeHtml('<b><u>'+layer.layerName+"</u>"+((tipo_utente==3)?"  "+layer.layerDenom+" ":"")+'</b><br/>'+layer.descrizione)+'</td><td style="width:25px"><span style="font-size: 1.5em; color: '+((isOnList>=0)?'green':'tomato')+';"><i style="padding-left: 3px!important;" onClick="'+((isOnList<0)?'addWMS':'rmvWMS')+'(&quot;'+layer.workspace+'&quot;,&quot;'+layer.layerName+'&quot;,&quot;'+layer.layerDenom+'&quot;,&quot;'+layer.style+'&quot;,&quot;'+layer.maxzoom+'&quot;,&quot;'+layer.minzoom+'&quot;,&quot;'+layer.l_group+'&quot;,&quot;'+encodeURI(layer.metaURL)+'&quot;,&quot;'+layer.descrizione+'&quot;,&quot;'+layer.l_group+'&quot;)" class="fas '+((isOnList<0)?'fa-eye-slash':'fa-eye')+'"></i></span></td></tr>';


            });

            htmlWMS_ += '</table></div></div></div>';

            $("#accordion").html(htmlWMS_)

          }

}




function getLegend(){
  var mapLyrList = panelLayers._layers;
  var mapLyrArray = $.makeArray( mapLyrList );
 var scala = setScale();
  var htmlLegend = "";
    console.log("mapLyrList",mapLyrList)
      mapLyrList.sort(function (a, b) {

          // return a.legendGroup.localeCompare(b.legendGroup);
      });
      var oldLGroup = "";
        $.each(mapLyrArray, function(i, layer) {
      if ((layer.overlay)){
        if ((layer.layer._source !== undefined)){
            var LDarray = layer.layer._source._overlay.wmsParams.layers.split(",");
            if (!layer.noLegend){
            if (layer.legendGroup!="") {
              if (layer.legendGroup!=oldLGroup) {
                htmlLegend += "<div style='padding-top:10px;'><b>"+layer.legendGroup +"</b> <br/>";
                oldLGroup = layer.legendGroup
              } else {
                htmlLegend += "<div style=''>";
              }

                    htmlLegend += "<div style='padding-left:20px;font-size:0.8em'><b>"+layer.name +"</b> <br/>";
                    if (layer.descrizione!=undefined) htmlLegend += "<small>"+converter.makeHtml(layer.descrizione)+"</small>";
                    htmlLegend += '<img src="'+layer.layer._source._url+'&REQUEST=GetLegendGraphic&VERSION=1.0.0&SCALE='+scala+'&FORMAT=image/png&LAYER='+LDarray+'&STYLE='+layer.layer._source._overlay.wmsParams.styles+'"/><br/>';
                    htmlLegend += "</div></div>";
                } else   {
                      htmlLegend += "<div style='padding-top:10px'><b>"+layer.name +"</b> <br/>";
                    if (layer.descrizione!=undefined) htmlLegend += "<small>"+converter.makeHtml(layer.descrizione)+"</small>";
                    htmlLegend += '<img src="'+layer.layer._source._url+'&REQUEST=GetLegendGraphic&VERSION=1.0.0&SCALE='+scala+'&FORMAT=image/png&LAYER='+LDarray+'&STYLE='+layer.layer._source._overlay.wmsParams.styles+'"/><br/>';
                    htmlLegend += "</div>";
                  }
              }
        }
      }
    });
    htmlLegend += "";
    $("#legend div").html(htmlLegend);

}

// #############################################################################
// ########################################################## NB: addUrlButton
var jsonLayer = null;
var jTitle = "";
var jUrl = "";

// function getSubLayer(i){
//   jsonLayer = jsonLayer[i].Layer;
//   // addUrlButton()
// }


function makeLyrArrList(){
  var mapLyrList = panelLayers._layers;
  var mapLyrArray = $.makeArray( mapLyrList );
mapLyrArrList = [];
  $.map( mapLyrArray, function( val, i ) {
    if (val.overlay)  {
    //  val.l_group = "default";
       mapLyrArrList.push(val.name)
    }
  });


}

// function addUrlButton() {
//
//       makeLyrArrList()
//
//       var htmlWMS = 'scegli una sorgente dati (<b>solo WMS</b>):'
// /*      htmlWMS += '<div style="padding-top: 5px;"><select class="form-control" id="selUrl"><option value="">scegli</option>';
//       htmlWMS += '<option value="https://sit2.regione.campania.it/geoserver/RegioneCampania.Cartografia.Base/wms?service=WMS">cartografia di base - Regione campania</option>';
//       htmlWMS += '<option value="https://sit2.regione.campania.it/geoserver/RegioneCampania.Ambiente/wms?service=WMS">Ambiente - Regione campania</option>';
//       htmlWMS += '<option value="http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/WMS_v1.3/Vettoriali/IBA.map&service=wms">Aree importanti per l\'avifauna</option>';
//       htmlWMS += '<option value="http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/WMS_v1.3/Vettoriali/Carta_geologica.map&service=wms">Carta geologica</option>';
//       htmlWMS += '<option value="http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/WMS_v1.3/Vettoriali/PAI_rischio.map&service=wms">Rischio idrogeologico</option>';
//       htmlWMS += '<option value="http://sit.cittametropolitana.na.it/geoserver/ps/wms?service=WMS">sit</option>';
//       htmlWMS += '</select></div>';
// */
//
//       htmlWMS += '<div style="padding-top: 5px;"><input type= "text" id="selUrl"  placeholder="http://sit...na.it/geoserver/sit/wms?service=WMS" title="inserisci url della risorsa wms" style="width:calc(100% - 100px);float: left;"><br/></div>';
//
//       htmlWMS += '<div id="jLayers">';
//
//       if (jsonLayer != null) {
//         htmlWMS += "<h3>"+jTitle+"</h3> <br/>";
//       jsonLayer.sort(function (a, b) {
//           return a.Title.localeCompare(b.Title);
//       });
//       htmlWMS += "<table  >";
//       $.each(jsonLayer, function(i, layer) {
//           var isOnList = $.inArray(layer.Title,mapLyrArrList);
//            if (typeof layer.Layer !== "undefined") {
//              htmlWMS += '<tr><td style="text-align: center;width:20px">'+(i+1)+'</td><td style="">'+converter.makeHtml('<b><a onClick="getSubLayer('+i+')" >'+layer.Title+'</a></b><br/>'+layer.Abstract)+'</td></tr>';
//            } else {
//              console.log(layer)
//              var titolo = layer.Title;
//              var estratto = layer.Abstract;
//              var nome = layer.Name;
//              var stile = (layer.Style != undefined)?layer.Style[0].Name:"";
//                htmlWMS += '<tr><td style="text-align: center;width:20px">'+(i+1)+'</td><td style="">'+converter.makeHtml('<b>'+titolo+'</b><br/>'+estratto)+'</td><td style="width:25px"><span style="font-size: 1.5em; color: '+((isOnList>=0)?'green':'tomato')+';"><i style="padding-left: 3px!important;" onClick="'+((isOnList<0)?'addURL':'rmvURL')+'(&quot;'+jUrl+'&quot;,&quot;'+titolo+'&quot;,&quot;'+nome+'&quot;,&quot;'+stile+'&quot;)" class="fas '+((isOnList<0)?'fa-eye-slash':'fa-eye')+'"></i></span></td></tr>';
//            }
//
//       });
//
//       htmlWMS += '</table>';
//     }
//     htmlWMS += '</div>';
//
//      getLegend();
//
//     $("#url div").html(htmlWMS)
//     sidebar.open("url");
//     $("#selUrl").change(function(){
//
//           var url = $("#selUrl").val()+ "&request=GetCapabilities&INFO_FORMAT=application/json";
//           jUrl = $("#selUrl").val();
//           var xmlCapabylity = $.ajax({
//                               url: url,
//                               async: false
//                            }).responseText;
//           var jsonCapabilities = new WMSCapabilities().parse(xmlCapabylity);
//           jTitle = jsonCapabilities.Capability.Layer.Abstract;
//           jsonLayer = jsonCapabilities.Capability.Layer.Layer;
//
//           if(htmlWMS.length == 0) htmlWMS = htmlDefault ;
//
//           addUrlButton()
//       })
//
// }

// function rmvURL(workspace,layerName,layerDenom){
//
//    var Layers = panelLayers._layers;
//
//    $.each(Layers,function( index,value ) {
//      if(typeof value !== "undefined") {
//        if(value.layerDenom==layerDenom)  {
//           var layerDef = {name:layerName,layer:value.layer};
//           panelLayers.removeLayer({name:layerName, layer:layerDef});
//           map.removeLayer(value.layer);
//           return true;
//        }
//     }
//   });
//   console.log("Layer ("+layerName+") eliminato!")
//   addUrlButton();
// }
//
// function addURL(workspace,LName,LDenom,style,maxzoom,minzoom){
//   var url = workspace;
//
//   var options = {
//     "format": "image/png", "transparent": "true",
//     "version": "1.3.0",
//     "style": style,
//     "info_format": "application/json",
//     "opacity": 0.8,
//     "tiled": "true",
//     "tileSize": 512,
//     "attribution": "",
//     "identify": true
//   };
//   L.WMS.Source = L.WMS.Source.extend({
//       'ajax': function(url, callback) {
//           $.ajax(url, {
//               //'context': this,
//               'success': function(result) {
//                 //  callback.call(this, result);
//                   var json = Globaljson.responseJSON;
//                   if (typeof result.features !== 'undefined' && result.features.length > 0) {
//                         var ris = result.features[0].properties;
//                           var geom = result.features[0];
//                           var layerName = LName;
//                         /*  console.log("layerName",result.features[0])
//                           if (typeof result.features[0].id.slice(0, result.features[0].id.indexOf("."))  === 'undefined') {
//                             layerName = "layer selezionato";}
//                           else {
//                             layerName = result.features[0].id.slice(0, result.features[0].id.indexOf("."))
//                           }*/
//                           htmlID += "<h3 style='font-size:1.2em'>Risultato per '"+LName+"'</h3> <br/>";
//                           htmlID += '<table>';
//                           $.each(ris,function( index,value ) {
//                             var testo = value+"";
//                             const regex = /^[\[][\{]/;
//                             let m;
//
//                             if ((m = regex.exec(value)) !== null) {
//                                 // The result can be accessed through the `m`-variable.
//                                 m.forEach((match, groupIndex) => {
//                                   var json = JSON.parse(value);
//                                   var html = "<table border='0'>"
//                                     for (x in json) {
//                                       html += "<tr><td>";
//                                       html += "<table border='0'>"
//                                       for (y in json[x]) {
//                                             console.log(noFieldsArr.includes(y),y,noFieldsArr)
//                                           if (! noFieldsArr.includes(y)) html += "<tr><td width='30%'>"+y+"</td><td  width='70%'>"+json[x][y]+"</td></tr>";
//                                       }
//                                       html += "</table>"
//                                       html += "</td></tr>";
//                                     }
//                                     html += "</table>"
//                                   value = html;
//                                 });
//                             }
//                               if (index=="bbox") {
//                               var bboxArray = [];
//                               var p1 = turf.point([ value[0], value[1]]);
//                               var converted1 = turf.toWgs84(p1);
//                               bboxArray.push(turf.coordAll(converted1))
//                               var p2 = turf.point([ value[2], value[3]]);
//                               var converted2 = turf.toWgs84(p2);
//                               bboxArray.push(turf.coordAll(converted2))
//                               value = "<a onClick='map.fitBounds([["+bboxArray[0][0][1]+","+bboxArray[0][0][0]+"],["+bboxArray[1][0][1]+","+bboxArray[1][0][0]+"]]);'>click per zoom<i class='fas fa-search-location'></i></a>";
//                             }
//                             htmlID += '<tr><td style="font-weight: 900;">'+index+'</td><td>'+value+'</td></tr>';
//                           })
//                           htmlID += '</table>';
//                           if ((typeof lyrLoadedItem === "undefined")) lyrSelectedItem.clearLayers();
//                           if ((typeof lyrLoadedItem !== "undefined") && lyrLoadedItem.pm.enabled()) {}
//                           else {
//                             // $("#results").empty();
//                               $("#results div").html(htmlID)
//                               if (!globalSelect) sidebar.open("results");
//                               lyrSelectedItem.addData(turf.toWgs84(geom));
//                               lyrSelectedItem.bringToFront();
//                              if (geom.geometry.type!="Point") lyrSelectedItem.setStyle(selectSTyleOption);
//                               lyrSelectedItem.addTo(map);
//                               attivaBottoni();
//                               console.log("Feature selezionate: ",Object.keys(lyrSelectedItem._layers).length)
//                           }
//                        }
//              }
//           });
//       }
//   });
//
//   var source = L.WMS.source(url, options);
//   var wmsLayers = source.getLayer(LDenom);
//
//   wmsLayers.addTo(map);
// //  panelLayers.addOverlay({ name: LName,layer: wmsLayers});
//   panelLayers.addOverlay({layer:wmsLayers},LName,"WMSs da URL");
//   setActive();
//   console.log("Layer ("+LName+") aggiunto");
//   addUrlButton();
// }



function getObjects(obj, key, val) {
    var objects = [];
    for (var i in obj) {
        if (!obj.hasOwnProperty(i)) continue;
        if (typeof obj[i] == 'object') {
            objects = objects.concat(getObjects(obj[i], key, val));
        } else if (i == key && obj[key] == val) {
            objects.push(obj);
        }
    }
    return objects;
}

function rmvWMSAll(group) {

  var Layers = panelLayers._layers;
  var Larray = $.map(Layers, function(value, index) {
          return [value];
      });
      console.log("Larray",Larray)
  $.each(Larray,function( index,value ) {

    // console.log("group",typeof group !== "undefined")
    if ( typeof group !== "undefined"){
      if(typeof value.group !== "undefined") {
          if(value.group.name==group)  {
             var layerDef = {name:value.name,layer:value.layer};
             panelLayers.removeLayer({name:value.name, layer:layerDef});
             map.removeLayer(value.layer);
             return true;
           }
      }
    } else {
      if (index ==0) return;
        var layerDef = {name:value.name,layer:value.layer};
        panelLayers.removeLayer({name:value.name, layer:layerDef});
        map.removeLayer(value.layer);
        return true;
   }
 });
}

function rmvWMS(workspace,layerName,layerDenom){
   var Layers = panelLayers._layers;

   $.each(Layers,function( index,value ) {
     console.log(index,value )
     if(typeof value !== "undefined") {
       if(value.layerDenom.substring(value.layerDenom.indexOf(":") + 1)==layerDenom)  {
          var layerDef = {name:layerName,layer:value.layer};
          panelLayers.removeLayer({name:layerName, layer:layerDef});
          map.removeLayer(value.layer);
          return true;
       }
    }
  });
  console.log("Layer ("+layerName+") eliminato!")
  addLayerButton();
}
var htmlID = "";

// ########################################################################à####
// ######################################################### NB: write_db
function write_db(){
  var json = Globaljson.responseJSON;
  if ( !$.isEmptyObject(json.loadDb)) {
    $("#infoBanner").html("db data loading... ");
    $("#infoBanner").show();
    $.getJSON("./postgres2json.php?q=write&tbl="+json.loadDb, function(contents) {
       var geojson = contents;

       if (! jQuery.isEmptyObject(lyrLoadedItem._layers)) {
           panelLayers.removeLayer({name:tempFileName ,layer: lyrLoadedItem});
           lyrLoadedItem.clearLayers();
       }
       console.log("db data loading... ");
     }).done(function() {
       console.log( "read success in ",Math.floor((Date.now()-start)/1000)," sec" );
       $("#infoBanner").html("scrittura in "+Math.floor((Date.now()-start)/1000)+" sec")
       setTimeout(function() { $("#infoBanner").hide(); }, 4000);
     });
  }
}
// ########################################################################à####
// ######################################################### NB: load_db
function load_db(){
  // var json = Globaljson.responseJSON;
//   if ( !$.isEmptyObject(json.loadDb)) {
// /*    var geojsonMarkerOptions = {
//     radius: 6,
//     fillColor: "#ff7800",
//     color: "#ff7800",
//     weight: 4,
//     opacity: 1,
//     fillOpacity: 0.8
// };*/
//   var start = Date.now();
//   $("#infoBanner").html("db data loading... ");
//   $("#infoBanner").show();
//       //  $.getJSON("http://sit.cittametropolitana.na.it/riservato/prova.json", function(contents) {
//        $.getJSON("./postgres2json.php?q=gisdb&tbl="+json.loadDb, function(contents) {
//           var geojson = contents;
//
//           if (! jQuery.isEmptyObject(lyrLoadedItem._layers)) {
//               panelLayers.removeLayer({name:tempFileName ,layer: lyrLoadedItem});
//               lyrLoadedItem.clearLayers();
//           }
//           console.log("db data loading... ");
//           lyrLoadedItem.addData(geojson);
//         //  lyrLoadedItem.setStyle(geojsonMarkerOptions);
//           if (Object.keys(lyrLoadedItem._layers).length > 2000) {
//             $("#alertBanner").html("il numero di record ("+Object.keys(lyrLoadedItem._layers).length+") è eccessivo... il sistema potrebbe essere instabile o lento");
//             $("#alertBanner").show();
//         }
//           lyrLoadedItem.eachLayer(function(eve){
//               var jsnFeature = eve.feature;
//             //  eve.setStyle(geojsonMarkerOptions)
//           })
//
//           addToList(lyrLoadedItem);
//           setActive();
//
//           console.log("Layer ("+json.loadDb+") aggiunto");
//           // addUrlButton();
//          }).done(function() {
//            console.log( "load success in ",Math.floor((Date.now()-start)/1000)," sec" );
//            $("#infoBanner").html("caricamento in "+Math.floor((Date.now()-start)/1000)+" sec")
//            setTimeout(function() { $("#infoBanner").hide(); }, 4000);
//          });
//    }
 };

// ########################################################################à####

// ########################################################################à####
// ######################################################### NB: init_wms
function init_wms(){
    // var json = Globaljson.responseJSON;
    // var url = "./mysql2xml.php?mode=read&db=layers&prj="+gruppo;
    // var txtLayers = $.ajax({
    //           url: url,
    //
    //           async: false
    //        }).responseText;
    //        var jsnLayers = JSON.parse(txtLayers);
   var jsnLayers = jsnGlobalLayers;
    if ( !$.isEmptyObject(jsnLayers)) {
      var lyrList = jsnLayers;
      $.each(lyrList,function( index,layer ) {
        // console.log(layer)
          if(layer.initial=="1") addWMS_(layer.workspace,layer.layerName,layer.layerDenom,layer.style,layer.maxzoom,layer.minzoom,layer.l_group,encodeURI(layer.metaURL),layer.descrizione,layer.l_group);
      })
   }
}

// ############################################################################
// ######################################################### NB: load_wms
function load_wms(layerDenom,style){
    // var json = Globaljson.responseJSON;
   var jsnLayers = jsnGlobalLayers;

    if ( !$.isEmptyObject(jsnLayers)) {
      var lyrList = jsnLayers;
      $.each(lyrList,function( index,layer ) {
        // console.log(layer)
          if (layer.layerDenom==layerDenom) {
              if (typeof style !== 'undefined')  {
                  if (layer.style==style) {
                      addWMS_(layer.workspace,layer.layerName,layer.layerDenom,layer.style,layer.maxzoom,layer.minzoom,layer.l_group,encodeURI(layer.metaURL),layer.descrizione,layer.l_group);
                  }
              } else {
                addWMS_(layer.workspace,layer.layerName,layer.layerDenom,"",layer.maxzoom,layer.minzoom,layer.l_group,encodeURI(layer.metaURL),layer.descrizione,layer.l_group);
              }
          };
      })
   }
}

// ########################################################################à####
// ######################################################### NB: infoBanner
function infoBanner(text,color="yellow"){

      $("#infoBanner").html(text ).css("background-color",color);
      $("#infoBanner").show();
      setTimeout(function() { $("#infoBanner").hide().css("background-color","yellow"); }, 5000);
}

// ############################################################################
// ######################################################### NB: loadTable

function loadTable_(){
        jsnLoadedItem = lyrLoadedItem.toGeoJSON();
        displayContents(jsnLoadedItem);
      //  table_control.toggle();

      }

function loadTable(layerId){
  resetFeature();
  var start = Date.now();
  $("#infoBanner").html("data loading... ");
  $("#infoBanner").show();
  var url = map._layers[layerId]._source._url;
  var defaultParameters = {
      service : 'WFS',
      version : '2.0',
      request : 'GetFeature',
      typeNames : map._layers[layerId]._name,
      outputFormat : 'application/json',
      SrsName : 'EPSG:4326'
  };


  
  //var owsrootUrl = "http://192.168.11.143:8081/geoserver/ows";
  // var owsrootUrl = "https://sit.cittametropolitana.na.it/geoserver/ows";
   // var owsrootUrl = "../geoserver/ows";


   var base_url = url.substring(0,(url.indexOf('?')-3));
   console.log("4---> ",base_url);
   //var owsrootUrl = "http://192.168.11.143:8081/geoserver/ows";
    var owsrootUrl = base_url+"/ows"; // XXX cambia workspace

  var parameters = L.Util.extend(defaultParameters);
  var URL = owsrootUrl + L.Util.getParamString(parameters);
//  console.log(URL)
//  var WFSLayer = null;
  var ajax = $.ajax({
      url : URL,
      dataType : 'json',
      statusCode: {
          400: function() {
              alert( "Dato non disponibile" );
              $("#infoBanner").hide();
            }
      },
      success : function (response) {
        $("#infoBanner").html("elaborazione... ");
        $("#infoBanner").show();
        fields = [];
         if (!response || !response.geometry &&
             (!response.features || !response.features.length)) {
             } else {
               lyrAttributi.clearLayers();
               lyrAttributi.addData(response.features);

              var _layers = response.features;

              _layers.forEach(function(element,index){
              //  console.log(element,index)
                element.properties.id = element.id;
                delete element.properties.bbox;
                delete element.properties.shape_area;
                delete element.properties.shape_len;
                /* ###########################################################
                   ############### TODO: inserire in tabella il comando zoomTo
                var value = element.properties.bbox;
                var bboxArray = [];
                var p1 = turf.point([ value[0], value[1]]);
                var converted1 = turf.toWgs84(p1);
                bboxArray.push(turf.coordAll(converted1))
                var p2 = turf.point([ value[2], value[3]]);
                var converted2 = turf.toWgs84(p2);
                bboxArray.push(turf.coordAll(converted2))
                element.properties.bbox = "<a onClick='map.fitBounds([["+bboxArray[0][0][1]+","+bboxArray[0][0][0]+"],["+bboxArray[1][0][1]+","+bboxArray[1][0][0]+"]]);'>click per zoom<i class='fas fa-search-location'></i></a>";
                */
              })
            //   lyrAttributi.setStyle(selectSTyleOption);
               rows = response.geometry ? [response.properties] : response.features.map(getProperties); // dati in tabella

         }

         for( var j in rows[0] ) {

            if (($.inArray(j, noFieldsArr )<0 ) && (j.charAt(0)!="_"))  {

              fields.push(j.replace(/ /g,"_")); // lista nome campi
            }
         }

            var table_ = new Supagrid({
              fields: fields,
              id_field: "id", //((fields.indexOf("id")>0)?"id":fields[0]),
              data: rows,
              on: {
                 focus: function(obj) {

                    lyrAttributi.eachLayer(function(layer) {
                        layer.setStyle({color: '#3388ff'})
                      if (layer.feature.id===obj){
                        console.log("**table focus**: ",obj);
                        lyrSelectedItem.clearLayers()
                        lyrSelectedItem.addData(layer.toGeoJSON());

                        //if (feature.geometry.type!="Point") lyrSelectedItem.setStyle(selectSTyleOption);
                        lyrSelectedItem.setStyle({color :'tomato',weight: 3});
                        lyrSelectedItem.addTo(map)
                     }
                  });
               }
             }
            })

           console.log("table_",table_)
           var my_table = table_;

         table_control.visibile = true;
         table_control.addTo(map);
         table_control.addTable(my_table.supagrid,'my_table','my_table');
         $(table_control.getContainer()).appendTo(".leaflet-control-container:first");

         table_control.on();
      }
  }).done(function() {
    console.log( "load success");
  //  $("#infoBanner").html("caricamento in "+Math.floor((Date.now()-start)/1000)+" sec")
    setTimeout(function() { $("#infoBanner").hide(); }, 1000);
  });
}


function isJSON(str) {
    if( typeof( str ) === 'number' ) {
        return false;
    }
    try {
        $.parseJSON(str);
        return true,Object.keys(JSON.parse(str)).length;
    } catch (e) {
        return false;
    }
}


// ############################################################################
// ######################################################### NB: addWMS
function addWMS(workspace,layerName,layerDenom,style,maxzoom, minzoom,group,metaURL,descrizione,legendGroup){
  // console.log("metaURL",metaURL)
  addWMS_(workspace,layerName,layerDenom,style,maxzoom, minzoom,group,metaURL,descrizione,legendGroup);
  addLayerButton();
}

function addWMS_(workspace,layerName,layerDenom,style,maxzoom, minzoom,group,metaURL,descrizione,legendGroup){
  var LDarray = layerDenom.split(",");
  var ws = workspace.substr(workspace.indexOf('/'));  // XXX cambia workspace
  var LDstring = ws+":"+LDarray.join(","+ws+":");

  //var url = "http://192.168.11.143:8081/geoserver/"+workspace+"/wms?service=WMS";

   // var url = "./geoserver/"+workspace+"/wms?service=WMS";
   var url = "https://sit.cittametropolitana.na.it/"+workspace+"/wms?service=WMS"; // XXX cambia workspace
   console.log("2--->", url)
  // var url = "http://192.168.11.144:8080/geoserver/"+workspace+"/wms?service=WMS";

  var options = {
    "format": "image/png", "transparent": true,
    "version": "1.3.0",
    "info_format": "application/json",
    "styles": style,
    "maxZoom":maxzoom,
    "minZoom":minzoom,
    "opacity": 0.8,
    "tiled": '',
    "tileSize": 512,
    "metaURL":  metaURL,
    "attribution": "<a href='https://sit.cittametropolitana.na.it'>SIT - Città Metro Napoli</a>",
    "identify": true
  };
  L.WMS.Source = L.WMS.Source.extend({
      'ajax': function(url, callback) {
          $.ajax(url, {
              //'context': this,
              'success': function(result) {
                //  callback.call(this, result);
                  var json = Globaljson.responseJSON;
                  if (typeof result.features !== 'undefined' && result.features.length > 0 && !globalEdit) {
                        var ris = result.features[0].properties;

                          var geom = result.features[0];
                          // var layerName = "";
                          //console.log(typeof getObjects(json.layers, 'layerDenom', result.features[0].id.slice(0, result.features[0].id.indexOf(".")))[0])
                          // if (typeof getObjects(json.layers, 'layerDenom', result.features[0].id.slice(0, result.features[0].id.indexOf(".")))[0]  === 'undefined') {
                          //   layerName = "layer selezionato";}
                          // else {
                          //   layerName = getObjects(json.layers, 'layerDenom', result.features[0].id.slice(0, result.features[0].id.indexOf(".")))[0].layerName
                          // }
                          htmlID += "<div style='margin-top:15px;line-height: 0.9em'><b style='font-size:1em'>"+layerName+"</b> <br/><span style='font-size:0.8em; '>"+descrizione+"</span></div>";
                          htmlID += "<table style='margin-top:10px'>";
                          $.each(ris,function( index,value ) {


                          // console.log("testo --->",value);
                            var testo = value?value.toString():"";

                            // console.log(testo,"---> ",testo.replaceAll('\"',''));
                            testo = testo.replaceAll('\"','');

                              if ((testo.substring(0,4)=="https") || (testo.substring(0,4)=="http")) {
                                if ((testo.split("/")[2]=="sit.cittametropolitana.na.it") || (testo.split("/")[2]=="sit.provincia.napoli.it")) {
                                  value = "<a href='https://sit.cittametropolitana.na.it/"+testo.split("/").slice(3,).join("/")+"'  target='_new'>click per aprire<i class='fas fa-paperclip'></i></a>";
                                } else {
                                  value = "<a href='"+testo+"'  target='_new'>click per aprire<i class='fas fa-external-link-alt'></i></a>";
                                };

                              };

                              // console.log("--->",isJSON(testo));
                              /********* JSON *****/
                              // if (isJSON(testo)) {
                              //    var m =JSON.parse(value)
                              //     // The result can be accessed through the `m`-variable.
                              //     var html = "<table border='0'>"
                              //     $.each(m, function(i, val) {
                              //         html += "<tr><td width='30%'>"+i+"</td><td  width='70%'>"+val+"</td></tr>";
                              //     });
                              //       html += "</table>"
                              //     value = html;
                              // }

                              const regex = /^[\[][\{]/;
                              let m;

                              if ((m = regex.exec(value)) !== null) {

                                  // The result can be accessed through the `m`-variable.
                                  m.forEach((match, groupIndex) => {
                                    var json = JSON.parse(value);
                                    var html = "<table border='0'>"
                                      for (x in json) {
                                        html += "<tr><td>";
                                        html += "<table border='0'>"
                                        for (y in json[x]) {
                                            html += "<tr><td width='30%'>"+y+"</td><td  width='70%'>"+json[x][y]+"</td></tr>";
                                        }
                                        html += "</table>"
                                        html += "</td></tr>";
                                      }
                                      html += "</table>"
                                    value = html;
                                  });
                              }
                              /********** BBOX ******/
                              if (index=="bbox") {
                              var bboxArray = [];
                              var p1 = turf.point([ value[0], value[1]]);
                              var converted1 = turf.toWgs84(p1);
                              bboxArray.push(turf.coordAll(converted1))
                              var p2 = turf.point([ value[2], value[3]]);
                              var converted2 = turf.toWgs84(p2);
                              bboxArray.push(turf.coordAll(converted2))
                              value = "<a onClick='map.fitBounds([["+bboxArray[0][0][1]+","+bboxArray[0][0][0]+"],["+bboxArray[1][0][1]+","+bboxArray[1][0][0]+"]]);'>click per zoom<i class='fas fa-search-location'></i></a>";
                            }
                            /********** FIELD ********/
// console.log("ATTENZIONE--->", regex.exec(testo));
                              if ((regex.exec(testo)) !== null){
                                  htmlID += '</table><table  style="margin-top:0px"><tr><td>'+value+'</td></tr></table><table style="margin-top:0px">'
                              } else {
                                  if (! noFieldsArr.includes(index))  htmlID += '<tr><td style="font-weight: 900;width:30%">'+index+'</td><td>'+value+'</td></tr>';
                              }


                          }) //*********** FINE EACH
                          htmlID += '</table>';
                          if ((typeof lyrLoadedItem === "undefined")) lyrSelectedItem.clearLayers();
                          if ((typeof lyrLoadedItem !== "undefined") && lyrLoadedItem.pm.enabled()) {}
                          else {
                                // console.log("prova", map.identifyOn)
                              if (globalSelect==true ) {
                                if (workspace+":"+layerDenom===globalActive.name) {
                                    $("#results div").html("nessun dato da visualizzare");
                                    lyrSelectedItem.addData(turf.toWgs84(geom));
                                    lyrSelectedItem.bringToFront();

                                    lyrSelectedItem.setStyle(selectSTyleOption);
                                    //if (geom.geometry.type!="Point") lyrSelectedItem.setStyle(selectSTyleOption);
                                    lyrSelectedItem.addTo(map);
                                    attivaBottoni();
                                    console.log("Feature selezionate: ",Object.keys(lyrSelectedItem._layers).length, " di ", layerDenom)
                                }
                              }
                              if (map.identifyOn) {
                                $("#results div").empty();
                                $("#results div").html(htmlID);
                                sidebar.open("results");
                                lyrSelected.addData(turf.toWgs84(geom));
                                lyrSelected.bringToFront();
                                if (geom.geometry.type!="Point") lyrSelected.setStyle(selectedStyleOption);
                                lyrSelected.addTo(map);

                              }
                          }
                      }
                 }
          });
      }
  });


    var source = L.WMS.source(url, options);
    var wmsLayers = source.getLayer(LDstring);
    wmsLayers.addTo(map);

    //panelLayers.addOverlay({	active: true, name: layerName, layer: wmsLayers });
    if (legendGroup== undefined) legendGroup="";
   panelLayers.addOverlay({layer:wmsLayers,descrizione: descrizione,legendGroup:legendGroup,layerDenom:LDstring},layerName,group); // XXX: attenzione

    setActive();
    // console.log("group  group group", group);
    console.log("Layer ("+layerName+") aggiunto");
    //SetZIndexByTitle(wmsLayers._leaflet_id)
}

function attivaBottoni(){
  $("#infoBanner").html("Feature selezionate: " + Object.keys(lyrSelectedItem._layers).length)
  $("#infoBanner").show();
  list.showButton(0);
  list.showButton(1);
  setTimeout(function() { $("#infoBanner").hide(); }, 4000);
}


// #############################################################################
// ########################################################## NB: listaAttributi

function listaAttributi(layerId){
  var start = Date.now();
  $("#infoBanner").html("data loading... ");
  $("#infoBanner").show();
  var url = map._layers[layerId]._source._url;
  var defaultParameters = {
      service : 'WFS',
      version : '1.0.0',
      request : 'GetFeature',
      typeName : map._layers[layerId]._name,
      outputFormat : 'application/json',
      SrsName : 'EPSG:4326'
  };

  var base_url = url.substring(0,(url.indexOf('?')-3));
  console.log("4---> ",base_url);
  //var owsrootUrl = "http://192.168.11.143:8081/geoserver/ows";
   var owsrootUrl = base_url+"/ows"; // TODO -----
   var parameters = L.Util.extend(defaultParameters);
  var URL = owsrootUrl + L.Util.getParamString(parameters);
  console.log("3--->", URL)
//  var WFSLayer = null;
  var ajax = $.ajax({
      url : URL,
      dataType : 'json',
      statusCode: {
          400: function() {
              alert( "Dato non disponibile" );
              $("#infoBanner").hide();
            }
      },
      success : function (response) {
        $("#infoBanner").html("elaborazione... ");
        $("#infoBanner").show();
        fields = [];
         if (!response || !response.geometry &&
             (!response.features || !response.features.length)) {
             } else {
               lyrAttributi.clearLayers();
               lyrAttributi.addData(response.features);

              var _layers = response.features;

              _layers.forEach(function(element,index){

                element.properties.id = element.id;
              })
            //   lyrAttributi.setStyle(selectSTyleOption);
               rows = response.geometry ? [response.properties] : response.features.map(getProperties); // dati in tabella
               fields = [];
               for( var j in rows[0] ) {
                  console.log(j,($.inArray(j, noFieldsArr )<0 ) ,(j.charAt(0)!="_"))
                  if (($.inArray(j, noFieldsArr )<0 ) && (j.charAt(0)!="_"))  fields.push(j); // lista nome campi
                }
           //console.log( "fields: ",fields);
           //console.log( "rows: ",rows);
               html = "<h2> ricerca per attributi </h2> <br/>";
               html += '<form id="cercaAttributi"><table>';
               html += '<tr><th style="font-weight: 900;">&nbsp;</th><th>descrizione</th><th></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>';
                   html += '<td><input type="text" name="'+field+'" id="'+field+'" />';
                  //  html += '<td><input type="text" name="'+field+'" id="'+field+'" list="'+field+'_list"  autocomplete="off"/>';
                  //  var arr_list='<datalist id="'+field+'_list">';
                  //  var arr = [''];
                  //  var j=0;
                  //  for (var i = 0; i < rows.length; i++) {
                  //    if($.inArray(rows[i][field],arr)<0){
                  //        arr_list += '<option>'+rows[i][field]+'</option>';
                  //        arr[j]=rows[i][field];
                  //        j++;
                  //    }
                  //  }
                  //  arr_list += '</datalist>';
                  //  html += arr_list;
                   //console.log("arr",arr_list)
                   html += '</td></tr>';
                 }
               });
               html += '</table></form>';
               html += '<div style="margin-top: 14px;height:27px;line-height: 27px;padding: 2px;background: #fff;border: 1px solid rgba(0,0,0,0.3);border-radius: 4px;">Selezione in base a più parametri: <div  style="float:right"><input type="submit" value="cerca!" onClick="cerca()"></div></div>';
               // $("#results div").empty();
               $("#results div.sidebar-body").html(html)
               sidebar.open("results");
            }
          }
       }).done(function() {
       console.log( "load success");
     //  $("#infoBanner").html("caricamento in "+Math.floor((Date.now()-start)/1000)+" sec")
       setTimeout(function() { $("#infoBanner").hide(); }, 1000);
     });
}

function cerca(){
  var unindexed_array = $("#cercaAttributi").serializeArray();
  var indexed_array = {};
  $.map(unindexed_array, function(n, i){
      if (n['value']!='')  indexed_array[n['name']] = n['value'];
    });


  function filterBy(list, criteria) {
      return list.filter(candidate =>
        Object.keys(criteria).every(key =>
          candidate[key] == criteria[key]
        )
      );
    }

  var layers = lyrAttributi._layers;
  var data_array = [];
  var lyr_array = [];

$.each(layers, function(i,v){
    v.feature.properties.e = v.feature
    data_array.push(v.feature.properties);
    lyr_array.push(v.feature);
})

var lyrArray = filterBy(data_array,indexed_array);

lyrSelectedItem.clearLayers();
var numOfResults = lyrArray.length;
$.each(lyrArray, function(i,v){

      var json = v.e;
      delete v.e;
      lyrSelectedItem.addData(json);
})
    attivaBottoni();
    lyrSelectedItem.addTo(map);
    lyrSelectedItem.setStyle(selectSTyleOption);

$("#zoomtoresult").remove();
$("#results  div.sidebar-body").append("<div style='margin-top: 14px;height:27px;line-height: 27px;padding: 2px;background: #fff;border: 1px solid rgba(0,0,0,0.3);border-radius: 4px;' id='zoomtoresult' >ci sono "+numOfResults+" risultati: <div style='float:right;'><input type='button' value='zoom' onClick='extendButton()'></div></div>");
console.log("fatto!")
};






// #############################################################################
// ############################################################## NB: setActive

function setActive(){
  $("div.leaflet-panel-layers-overlays > div.leaflet-panel-layers-group > div.leaflet-panel-layers-item > div").bind('contextmenu', function(e) {
  	e.preventDefault();
  });
  $("div.leaflet-panel-layers-overlays > div.leaflet-panel-layers-group > div.leaflet-panel-layers-item > div").on('contextmenu', function(e) {
     if (e.ctrlKey) {
       //alert("Ctrl")
       return;
     }

      var top = e.pageY - 10;
      var left = e.pageX - 90;
      var layerName = $(this).html();
      var layerId = $(this)[0].id;

    var metadato;  //console.log("rigo 741: ",map._layers[layerId])
      if (map._layers[layerId]._source!=undefined) {
            var url = map._layers[layerId]._source._url+"&request=GetCapabilities&INFO_FORMAT=application/json"+"&layer="+ map._layers[layerId]._name;
            var xmlCapabylity = $.ajax({
                      url: url,
                      async: false
                   }).responseText;
            var jsonCapabilities = new WMSCapabilities().parse(xmlCapabylity);
            var extent = [];

            //$("div.leaflet-panel-layers-overlays > div.leaflet-panel-layers-group > div.leaflet-panel-layers-item > span").css("font-weight", (globalActive.id == layerId?"bold":"normal"));
            //if (globalActive.id == layerId) setTimeout(function(){ $(this).css("font-weight", "bold"); }, 100);
        //    console.log("rigo 762: ",jsonCapabilities.Capability.Layer.Layer)
            $(jsonCapabilities.Capability.Layer.Layer).map(function() {
              var nomeLayer = map._layers[layerId]._name;
              var resultString = nomeLayer.replace( /^[^:]*:/, "");
                if (this.Name == resultString)  {
                  extent = this.EX_GeographicBoundingBox;
                  this.metaURL =  map._layers[layerId]._source.options.metaURL;
                  metadato = JSON.stringify(this);
                }
            })


            $("#context-menu").html('<li><a tabindex="-1" href="#" id="cercaAttributi" onClick="listaAttributi('+layerId+')">Cerca per attributi</a></li><li><a tabindex="-1" href="#" id="SetZIndexByTitle" onClick="SetZIndexByTitle('+layerId+')">Sposta sopra</a></li><li><a tabindex="-1" href="#" id="SetZIndexByTitleR" onClick="SetZIndexByTitleR('+layerId+')">Sposta sotto</a></li> <li><a tabindex="-1" href="#" id="zoomToLyr" onClick="zoomToLyr('+extent[0]+','+extent[1]+','+extent[2]+','+extent[3]+','+')">Zoom al layer</a></li><li><a tabindex="-1" href="#" onClick="meta("'+encodeURI(metadato)+'")">Metadato</a></li><li><a tabindex="-1" href="#" id="zoomToLyr" onClick="loadTable('+layerId+')">Tabella attributi</a></li>').on("click", function() {
            $(this).removeClass("show").hide();
           });
      } else {
              $("#context-menu").html('<li><a tabindex="-1" href="#" id="listaAttributi" onClick="propertiesButton()">Lista attributi</a></li><li><a tabindex="-1" href="#" id="centroide" onClick="centroide('+layerId+')">Centroide</a></li><li><a tabindex="-1" href="#" id="centroDiMassa" onClick="centroDiMassa('+layerId+')">Centro di massa</a></li><li><a tabindex="-1" href="#" id="semplify" onClick="semplify('+layerId+')">Semplifica</a></li><li><a tabindex="-1" href="#" id="rimuovi" onClick="rimuovi('+layerId+')">Rimuovi layer</a></li><li><a tabindex="-1" href="#" id="zoomToLyr" onClick="loadTable_('+layerId+')">Tabella attributi</a></li>').on("click", function() {
             $(this).removeClass("show").hide();
      });

}

    $("#context-menu").css({
      display: "block",
      top: top,
      left: left
    }).addClass("show");
    return false; //blocks default Webbrowser right click menu
  }).on("click", function() {
    $("#context-menu").removeClass("show").hide();
  });



  $("div.leaflet-panel-layers-overlays > div.leaflet-panel-layers-group > div.leaflet-panel-layers-item > div").click(function(){
    SetOpacityLayer($(this));
  })
}

function meta(meta){
      var metadato = JSON.parse(decodeURI(meta));
      console.log(metadato)
      var stylesList = "";
      if ( metadato.Style !== undefined){
      stylesList += '<table><tr><th width="160px"></th><th>Nome stile</th></tr>' ;
      var styles = metadato.Style.forEach(function(item, index){
        stylesList += '<tr><td style="background-color:white;padding-left:20px"><img src="'+item.LegendURL[0].OnlineResource+'" ></td><td><a href="#" /*onClick="layer.setParams({styles: '+item.Name+'});"*/>'+item.Name+'</a></td></tr>';
      })
      stylesList += "</table>";
      }
      var htmlStrig = "<div style='border:1px #cdcdcd solid;background-color:#0074d9;padding:2px;color:white;' >Nome tematismo</div><div  style='border:1px #cdcdcd solid;padding:2px;'>" + metadato.Title+"</div>";
      htmlStrig += "<div style='border:1px #cdcdcd solid;background-color:#0074d9;padding:2px;color:white;' >Descrizione</div><div  style='border:1px #cdcdcd solid;padding:2px;'>" +metadato.Abstract+"</div>";
      htmlStrig += "<div style='border:1px #cdcdcd solid;background-color:#0074d9;padding:2px;color:white;' >Attribution</div><div  style='border:1px #cdcdcd solid;padding:2px;'><a href='"+metadato.Attribution.OnlineResource+"' terget=_new >"+ metadato.Attribution.Title+"</a></div>";
      htmlStrig += "<div style='border:1px #cdcdcd solid;background-color:#0074d9;padding:2px;color:white;' >keywords</div><div  style='border:1px #cdcdcd solid;padding:2px;'>" + metadato.KeywordList.join(" - ")+"</div>";
      if (metadato.metaURL!= "undefined") htmlStrig += "<div style='border:1px #cdcdcd solid;background-color:#0074d9;padding:2px;color:white;'>Metadato esteso </div><div  style='border:1px #cdcdcd solid;padding:2px;'><a href='https://" + metadato.metaURL+"' target='_new'>geoportale RNDT<i style='font-size: 0.8em; vertical-align: super;'  class='fas fa-external-link-alt small'></i> </a></div>";
      htmlStrig += "<div> <hr> " + stylesList+"</div>";
// $("#results").empty();
      $("#results div").html(converter.makeHtml(htmlStrig))
      sidebar.open("results");
}


function zoomToLyr(x1,y1,x2,y2){
  var bbox =[[y1,x1],[y2,x2]];
  map.flyToBounds(bbox);
}



$(document).ready(function () {

});