(function () {

  var container = document.getElementById('popup2');
  var content = document.getElementById('popup-content');
  var closer = document.getElementById('popup-closer');

  var overlay = new ol.Overlay({
    element: container,
    autoPan: true,
    autoPanAnimation: {
      duration: 250,
    },
  });

  closer.onclick = function () {
    overlay.setPosition(undefined);
    closer.blur();
    return false;
  };
  


// PUNTI start ************************************************************************************
var style = [];

  

    
      var vectorList_a = [];
      var iconList = [];
              style['755'] = {
                    'LineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'red',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'red',
              width: 3,
            }),
          }),
          
        };
        // GPX start
                  var vectorgpx = new ol.layer.Vector({
            name: 'The Orticelli trail',
            description: '<br />',
            source: new ol.source.Vector({
              url: ['/files/gpx/track_M.gpx'],
              radius: 0,
              format: new ol.format.GPX()
            }),
            style: function (feature) {
              return style['755'][feature.getGeometry().getType()];
            },
          });
          vectorList_a.push(vectorgpx);
        
              
      var iconLayer = new ol.layer.Vector({
        source: new ol.source.Vector({  
          features: iconList,
        }),
      });
      vectorList_a.push(iconLayer);
    
      var vectorList_38 = [];
      var iconList = [];
              style['663'] = {
                    'LineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'black',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'black',
              width: 3,
            }),
          }),
          
        };
        // GPX start
                  var vectorgpx = new ol.layer.Vector({
            name: 'The Orticelli trail',
            description: '<span style=\"font-size: small;\">Park beside the main road SS45bis at the Cappella dei Viandanti, take the panoramic path climbing up on the right above the road and continue to Messaga.You can admire a typical lemon-house on the way. <br /><br/>Soon after you walk under an archway, turn right and go down towards the <em>Cappella di Marsina</em>.<br style=\"color: rgb(114, 114, 114);Open Sans\" font-size:=\"\" background-color:=\"\" /><br/>Turn left among olive groves continuing along Via Marsina and into the historical centre of Cecina. <br /><br/>Walk on to the left along Via Marsina and then along Via Cecina as far as the parking lot, turn left into Via Messaga and proceed until you get to Palazzo Zuanelli (with a fine main gate) and the small church of S.Antonio. Keep to the right as far as the intersection, where you turn left into Vicolo Messaga,<br style=\"color: rgb(114, 114, 114);Open Sans\" font-size:=\"\" background-color:=\"\" /><br/>(the stone of Gabriele di Pietro is noteworthy). Walk under an archway and after about 80 mt turn right at the crossroads and go down along the country lane of the Orticelli back to the Cappella dei Viandanti.&nbsp;<br /><br/><br /><br/></span><strong>Distance:&nbsp;</strong>2,5 km<br /><br/><strong>Altitude:</strong>&nbsp;120 m<br /><br/><strong>Duration:</strong>&nbsp;1:30 h<br /><br/><strong>Start:</strong>&nbsp;Toscolano, via Statale<br /><br/><strong>Arrival:</strong>&nbsp;Messaga<br /><br/><strong>Difficulty:</strong>&nbsp;T - Turistico',
            source: new ol.source.Vector({
              url: ['/files/gpx/orticelli.gpx'],
              radius: 0,
              format: new ol.format.GPX()
            }),
            style: function (feature) {
              return style['663'][feature.getGeometry().getType()];
            },
          });
          vectorList_38.push(vectorgpx);
        
              
      var iconLayer = new ol.layer.Vector({
        source: new ol.source.Vector({  
          features: iconList,
        }),
      });
      vectorList_38.push(iconLayer);
    
      var vectorList_24 = [];
      var iconList = [];
              style['712'] = {
                    'Point': new ol.style.Style({
            image: new ol.style.Circle({
              fill: new ol.style.Fill({
                color: 'rgba(255,255,0,0.6)',
              }),
              radius: 10,
              stroke: new ol.style.Stroke({
                color: '#ff0',
                width: 1,
              }),
            }),
          }),
                    'LineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#be6acd',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#be6acd',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.630855041267, 45.656695606253])),
            name: 'S. Nicola\'s Church',
            description: '<img src="/files/gpx_image/IMG_4930.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />On the top of a hill in Cecina, it\'s a parish church of medieval origin, restored by Pasino Gozio dei Boselli during the 16th Century. The church was enlarged in 1744 adding 2 side chapels in front of which there are the tombs of the noble Zuanelli family decorated with their emblem.&nbsp;<br /><br/>The one dedicated to the Virgin and the Child is most sumptuous, and it has a fresco of the XV C. with a baroque stucco frame. On the other side, the altar dedicated to Sant&rsquo;Alipyus with San Dominic and Filippo Neri was made in 1701, and it preserves a painting of Andrea Celesti (1637-1712 ca). Of the same author the altarpiece closer to the presbitery showing the <em>Stoning of Saint Stephen</em> and <em>Virgin in Glory with Saints</em>, John the Baptist, Lucy and Rock .<br /><br/>There is also a portrait representing a young member of the Boselli family praying an image of San Nicola, attributed to Girolamo Pilotti in the 1500s'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#be6acd'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
              
      var iconLayer = new ol.layer.Vector({
        source: new ol.source.Vector({  
          features: iconList,
        }),
      });
      vectorList_24.push(iconLayer);
    
    

  
// PUNTI end ************************************************************************************

var view = new ol.View({
  center: ol.proj.transform([10.600677, 45.648558], 'EPSG:4326', 'EPSG:3857'),
  //maxZoom: 18,
  zoom: 14
})

  var map = new ol.Map({
    //controls: ol.control.defaults().extend([new ol.control.FullScreen()]),
    target: 'map',
    overlays: [overlay],
    layers: [
      // LAYOUT DELLA CARTINA
      new ol.layer.Group({
        title: 'Show', // A layer must have a title to appear in the layerswitcher
        layers: [
          new ol.layer.Group({
            title: 'Terrain', // A layer must have a title to appear in the layerswitcher
            type: 'base', // Setting the layers type to 'base' results in it having a radio button and only one base layer being visibile at a time
            combine: true, // Setting combine to true causes sub-layers to be hidden in the layerswitcher, only the parent is shown
            visible: false,
            layers: [
              new ol.layer.Tile({
                source: new ol.source.Stamen({
                  layer: 'terrain'
                })
              })
            ]
          }),
          new ol.layer.Tile({
            title: 'Elevation contour lines',
            type: 'base',
            source: new ol.source.XYZ({
              attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
               url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', 
            }),
          }),
          new ol.layer.Tile({
            title: 'Satellite',
            type: 'base',
            source: new ol.source.XYZ({
              attributions: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
               url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg', 
              maxZoom: 19,
            }),
          }),
          new ol.layer.Tile({
            title: 'Map', // A layer must have a title to appear in the layerswitcher
            type: 'base', // Again set this layer as a base layer
            visible: true,
            source: new ol.source.OSM()
          }),


        ]
      }),
      
      new ol.layer.Group({
        title: 'Orticelli Trails',
        fold: 'open',  // Adding a 'fold' property set to either 'open' or 'close' makes the group layer collapsible
        layers: [

                      new ol.layer.Group({
              title: '<div style="color:red; font-size:50px; line-height:11px; float:left; display: inline;">•</div> Altro',
              layers: vectorList_a
            }),
                      new ol.layer.Group({
              title: '<div style="color:black; font-size:50px; line-height:11px; float:left; display: inline;">•</div> GPS TRACK',
              layers: vectorList_38
            }),
                      new ol.layer.Group({
              title: '<div style="color:#be6acd; font-size:50px; line-height:11px; float:left; display: inline;">•</div> CHURCHES',
              layers: vectorList_24
            }),
          
        ]
      }),

    ],
    view: view,
  });





 // GEOLOCALIZZAZIONE start ************************************************************************************

var geolocation = new ol.Geolocation({
    // enableHighAccuracy must be set to true to have the heading value.
    trackingOptions: {
      enableHighAccuracy: true,
    },
  projection: view.getProjection(),
});

function el(id) {
  return document.getElementById(id);
}

el('track').addEventListener('change', function () {
  geolocation.setTracking(this.checked);
});

geolocation.on('change', function () {
  el('accuracy').innerText = geolocation.getAccuracy() + ' [m]';
  el('altitude').innerText = geolocation.getAltitude() + ' [m]';
  el('altitudeAccuracy').innerText = geolocation.getAltitudeAccuracy() + ' [m]';
  el('heading').innerText = geolocation.getHeading() + ' [rad]'; 
  el('speed').innerText = geolocation.getSpeed() + ' [m/s]';
  el('position').innerText = geolocation.getPosition();
});

// handle geolocation error.
geolocation.on('error', function (error) {
  var info = document.getElementById('info-track');
  info.innerHTML = error.message;
  info.style.display = '';
});

var accuracyFeature = new ol.Feature();
geolocation.on('change:accuracyGeometry', function () {
  accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());

  map.getView().animate({ center: geolocation.getPosition() }, { duration: 750 });
});

var positionFeature = new ol.Feature();
positionFeature.setStyle(
  new ol.style.Style({
    image: new ol.style.Circle({
      radius: 6,
      fill: new ol.style.Fill({
        color: '#3399CC',
      }),
      stroke: new ol.style.Stroke({
        color: '#fff',
        width: 2,
      }),
    }),
  })
);
// geolocation.on('change:position', function () {
geolocation.on('change', function () {
  var coordinates = geolocation.getPosition();
  positionFeature.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null);
});

new ol.layer.Vector({
  map: map,
  source: new ol.source.Vector({
    features: [accuracyFeature, positionFeature],
  }),
});
// GEOLOCALIZZAZIONE end ************************************************************************************




// LINK To POINT start ************************************************************************************

// LINK To POINT end ************************************************************************************

// POPOUP start ************************************************************************************

  var element = document.getElementById('popup');

  var popup = new ol.Overlay({
    element: element,
    positioning: 'bottom-center',
    stopEvent: false,
    offset: [0, 0],
  });
  map.addOverlay(popup);

  map.on('singleclick', function (evt) {
    $(element).popover('dispose');
    var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
      return feature;
    });
    if (feature) {
      var coordinate = evt.coordinate;
      var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));

      content.innerHTML = '<h4>' + feature.get('name') + '</h4><p>' + feature.get('description') + '</p><br><br><code>' + hdms + '</code>';
      overlay.setPosition(coordinate);
    }
  });

  // POPOUP end ************************************************************************************


  // Get out-of-the-map div element with the ID "layers" and renders layers to it.
  // NOTE: If the layers are changed outside of the layer switcher then you
  // will need to call ol.control.LayerSwitcher.renderPanel again to refesh
  // the layer tree. Style the tree via CSS.
  var sidebar = new ol.control.Sidebar({
    element: 'sidebar',
    position: 'left'
  });
  var toc = document.getElementById('layers');
  ol.control.LayerSwitcher.renderPanel(map, toc, { reverse: true });
  map.addControl(sidebar);
})();