// accès à MapBox avec mon Token

//var accessToken = 'pk.eyJ1IjoiY2hhcGVhdS1kZS1wYWlsbGUiLCJhIjoiY2s2ejMxaG81MGwzZzNlcGlmOXFzaHdrMyJ9.vRz99d-qgziEsY2d42JlAA';
//mapboxgl.accessToken = accessToken;

// URL de mapbox

var mapboxURL = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2hhcGVhdS1kZS1wYWlsbGUiLCJhIjoiY2s2ejMxaG81MGwzZzNlcGlmOXFzaHdrMyJ9.vRz99d-qgziEsY2d42JlAA';

var localites = {
 "Etalle": {"lat" : 49.6743667, "lon" : 5.60173333},
 "Villers-sur-Semois" : {"lat" : 49.69971667, "lon" : 5.56088333},
 "Sainte-Marie-sur-Semois" : {"lat" : 49.67225, "lon" : 5.5636333},
 "Mortinsart" : {"lat" : 49.706083333, "lon" : 5.58636666},
 "Fratin" : {"lat" : 49.6589, "lon" : 5.57318333},
 "Huombois" : {"lat" : 49.63698333, "lon" : 5.55543333},
 "Croix-Rouge" : {"lat" : 49.62575, "lon" : 5.5497},
 "Chantemelle" : {"lat" : 49.65341667, "lon" : 5.65151667},
 "Vance" : {"lat" : 49.66988333, "lon" : 5.66796667},
 "Villers-Tortru" : {"lat" : 49.67603333,"lon" : 5.68456667},
 "Buzenol" : {"lat" : 49.64665, "lon" : 5.59538333},
 "Sivry" : {"lat" : 49.66886667, "lon" : 5.62593333},
 "Landin" : {"lat" : 49.67503333, "lon" : 5.54751667}
};

 
// Définition des variables globales

var coord_GoTo=[];
var marker_GoTo=L.marker([49.6743,5.60173]);  // par défaut : marqueur sur Etalle
var macarte;
var markersArray = [];  // recevra systématiquement tous les marqueurs sauf ceux des overlays
var explication;
var piste; //  parcours considéré
var troncon;  // tronçon du parcours considéré, initialisé à 0
var tous_parcours = []; // polylines de tous les parcours
var route_tout;  // polyline du parcours complet
var route = [];
var identificateur_choisi;
var parcours_choisi;
var longueur = 0; // longueur de la portion de parcours

// Dossier des bases de données d'icones et de pictogrammes
var iconBase = 'Icones/'; 
var picto='Pictogrammes/';
var morceaux; // fonction qui analyse le parcours par morceaux
var markersArray = [];  // recevra systématiquement tous les marqueurs

// Définition des fonds de carte

var OpenStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.be/frfr">OSM Belgium</a>',
     minZoom: 12,
     maxZoom: 21
    });

var Ortho=L.tileLayer.wms("http://geoservices.wallonie.be/arcgis/services/IMAGERIE/ORTHO_2018/MapServer/WMSServer?", {
	layers: '0',
	attribution: 'Geoportal of the Walloon Region',
	minZoom: 12,
	maxZoom:21
	});

var customOptions = {'maxWidth': '600', 'maxHeight' : '300'};

	
function clearMarkers() {   // fonction qui enlève les marqueurs en cours
  for (var i = 0; i < markersArray.length; i++ ) {
    //markersArray[i].setMap(null);
	macarte.removeLayer(markersArray[i]);
  }
  markersArray.length = 0;
}

function PrendreParcours() {
		// Saisir le champ correspondant au parcours choisi
	var selectElmt = document.getElementById("trajetChoisi");
	piste = selectElmt.options[selectElmt.selectedIndex].value;
	CacherControle(command,macarte);  // cacher le formulaire de choix du parcours
	longueur = 0;  // réinitialiser la longueur du parcours
	for (voie in Parcours) {
		macarte.removeLayer(tous_parcours[voie]);	// cacher les tracés de tous les parcours
	}
	complet ();  // tracer le parcours complet
	return true;
};

function terminerParcours() {
		clearMarkers ();  // Quand on termine le parcours : effacer les marqueurs
		macarte.removeLayer(route_tout);	// Cacher le parcours complet
		for (var i=0;i<route.length;i++) {	// Cacher chacune des parties du parcours
			macarte.removeLayer(route[i]);
		}
		CacherControle(explication,macarte);
		macarte.flyTo([localites["Etalle"].lat,localites["Etalle"].lon],13);   // Revenir avec la carte centrée sur Etalle et dézoomer
		command.addTo(macarte);		// afficher de nouveau le choix des parcours
}

function continuerParcours() {  // fonction qui attend le bouton "Continuez le parcours" et efface le popup
	CacherControle(explication,macarte);
	var nbre_points = Parcours[piste].trace.length;
	if (troncon < nbre_points-1) {
		troncon ++;
		morceaux()
	}
	else {
		terminerParcours();
	}
	return true;
}

function demarrerParcours () { // fonction qui attend le bouton "Démarrez le parcours", efface le popup et lance la première portion
	CacherControle(explication,macarte);
	troncon=0;
	morceaux();
	return true;
}

// gestion de la hauteur de la div "map" quand l'écran change d'orientation	
	function change_map() {   
		htmlE = document.documentElement;
		var NewheightE = htmlE.clientHeight;
		headerE = document.getElementById('masthead');
		var NewheadHeight = Math.max(headerE.scrollHeight, headerE.offsetHeight, headerE.clientHeight);
		var hauteur = NewheightE - NewheadHeight;
		var div_map = document.getElementById('map');
		div_map.style.height = hauteur + 'px';
		macarte.invalidateSize();  // pour remettre la carte à jour quand le conteneur a changé
	};

	var IE = navigator.userAgent.indexOf("Trident") > -1;  <!-- détection d'Internet Explorer car ne marche pas avec IE -->
	if (!IE) {								
		window.addEventListener("orientationchange", function () {
		setTimeout('change_map()',400);
		});
	};


function initMap() {
 
  // Créer l'objet "macarte" et l'insérer dans l'élément HTML qui a l'ID "map"
   macarte = new L.map('map', {
      center : [localites["Etalle"].lat,localites["Etalle"].lon],
      zoom : 12,
      layers : [Ortho],  // par défaut
    });

 
//Création des contrôles.
 // Ajout d'un contrôle pour le plein écran
   macarte.addControl(new L.Control.Fullscreen({
					title: {
						'false': 'View in full screen mode',
						'true': 'Exit full screen mode'
					}
				}));
				
 // Affichage de la position de la souris
   macarte.addControl( new L.Control.MousePosition ());
				

  //Contrôles pour les fonds de cartes.
    var baseMaps = {
         "Aerial photo" : Ortho,
		 "OpenStreetMap": OpenStreetMap
  };

//Gestion du panneau de contrôle des parcours
command = L.control({position : 'bottomright'});
command.onAdd = function (map) {
	Tous_les_Parcours();  // Afficher l'ensemble des parcours
	var div = L.DomUtil.create('div','command_parcours');
	div.innerHTML = '<b> Select a virtual walking route </b><br>';
	var serie_de_parcours = '';
	for (voie in Parcours)  {
		serie_de_parcours += '<option value="' + voie + '">' + Parcours[voie].nom + '</option>';
	};
    div.innerHTML += '<select onchange="return PrendreParcours()" id="trajetChoisi" size="15">' + serie_de_parcours + '</select>';
	L.DomEvent.disableClickPropagation(div);    // empêcher les actions de la souris sur la carte quand on est sur le div des explications (zoom avec la molette, ...)
	L.DomEvent.disableScrollPropagation(div);
	return div;
};

	var polylineOptions_tout = {
               color: 'violet',
               weight: 2,
               opacity: 1.0
             };

	var polylineOptions_complet = {
               color: 'blue',
               weight: 4,
               opacity: 0.5
             };
			 
	var polylineOptions_focus = {
		 color: 'red',
               weight: 8,
               opacity: 0.9
             };

// Traçage de tous les parcours
   Tous_les_Parcours = function () {
    for (voie in Parcours) {
		var track = [];
		var k=0;
		for (var i=0;i<Parcours[voie].trace.length;i++) {
			for (var j=0; j<Parcours[voie].trace[i].length;j++) {
				track[k] = Parcours[voie].trace[i][j];
				k++;
			}
		}
	tous_parcours[voie]= new L.Polyline(track,polylineOptions_tout);
	tous_parcours[voie].addTo(macarte);
    }
   }
	
	
// Traçage du parcours complet	
   complet = function () {
	var track = [];
	var k=0;
	for (var i=0;i<Parcours[piste].trace.length;i++) {
		for (var j=0; j<Parcours[piste].trace[i].length;j++) {
		track[k] = Parcours[piste].trace[i][j];
		k++;
		}
	}
	route_tout = new L.Polyline(track,polylineOptions_complet);
	route_tout.addTo(macarte);
	macarte.fitBounds(route_tout.getBounds());   // Pour ajuster le zoom de la carte  au parcours
	
	var descriptif = Parcours[piste].description;  // ajouter le descriptif du parcours
	explication = L.control({position : 'bottomright'});
			explication.onAdd = function (map) {
				var div = L.DomUtil.create('div','parcoursPopup');
				var fichier_gpx = piste + '.gpx';
				var path_gpx = 'Traces_GPS/';
				var path_livrets = 'Livrets/';
				var gpx_url = path_gpx + fichier_gpx;
				var fichier_livret = 'Livret_' + piste + '.pdf';
				var fichier_carte = 'Carte_' + piste + '.pdf';
				var livret_url = path_livrets + fichier_livret;
				var carte_url = path_livrets + fichier_carte;
				var notice_url = path_livrets + 'Notice_livrets';
				var ajout = '';
				if (Parcours[piste].contributeur == 'ADEO') {
					ajout += ' and a walk book in French (';
					ajout += '<a href=' + livret_url + ' target=\"_blank\">' + fichier_livret +'</a>';
					ajout += ') accompanied by its ';
					ajout += '<a href=' + notice_url + ' target=\"_blank\">' + 'manual (in French)' +'</a>';
					ajout += ' and by a map (';
					ajout += '<a href=' + carte_url + ' target=\"_blank\">' + fichier_carte +'</a>';
					ajout += ').'
				}
				div.innerHTML = descriptif + '<br>' + 
				'<input type="submit" onclick="return demarrerParcours();" value="Start the course virtually" id="soumettre">' + '   ' +
				'<input type="submit" onclick= "return terminerParcours();" value="Stop the hike" id="stop">' + '<br> <br>' +
				' It is possible to download the GPS file : ' + '<a href=' + gpx_url + '>' + fichier_gpx +'</a>' + ajout;
				L.DomEvent.disableClickPropagation(div);    // empêcher les actions de la souris sur la carte quand on est sur le div des explications (zoom avec la molette, ...)
				L.DomEvent.disableScrollPropagation(div);				
				return div;
			}
			explication.addTo(macarte);
   }
   
// Traçage du parcours par morceaux
	morceaux = function () {
		let indice_max=Parcours[piste].trace[troncon].length-1;            // Indice extrême de la portion de parcours
		let indice=Math.round(indice_max/2);    // Indice central de la portion de parcours
		macarte.flyTo(Parcours[piste].trace[troncon][indice]);   // Centrage sur le point central de la portion de parcours + zoom
		for (var i=1; i <= indice_max ; i++) {		// Calcul de la longueur de la portion de parcours, à ajouter à la longueur totale du parcours
			longueur += getDistance(Parcours[piste].trace[troncon][i-1],Parcours[piste].trace[troncon][i]);
		};
		longueur = Math.round (longueur);
		explication = L.control({position : 'bottomright'});
			explication.onAdd = function (map) {
				var div = L.DomUtil.create('div','parcoursPopup');
				var message;
				switch (troncon) {
					case 0:
						message = 'Start your walk';
						break;
					case Parcours[piste].trace.length-1:
					    message = 'End your walk';
						break;
					default:
					    message = 'Continue your walk';
				}
				div.innerHTML = Parcours[piste].waypoints[troncon] + 
				'<br> <input type="submit" onclick="return continuerParcours();" value= "' + message + ' - From the starting point : ' + longueur + ' meters' + '" id="soumettre">' + '   ' +
				'<input type="submit" onclick= "return terminerParcours();" value="Stop the walk" id="stop">' ;					
				L.DomEvent.disableClickPropagation(div);    // empêcher les actions de la souris sur la carte quand on est sur le div des explications (zoom avec la molette, ...)
				L.DomEvent.disableScrollPropagation(div);					
				return div;
			}
			explication.addTo(macarte);
			route[troncon] = new L.Polyline(Parcours[piste].trace[troncon],polylineOptions_focus);
			route[troncon].addTo(macarte);
			var bords = route[troncon].getBounds();
			var augmentation = 0.0002;
			bords._northEast.lat += augmentation;
			bords._northEast.lng += augmentation;
			bords._southWest.lat -= augmentation;
			bords._southWest.lng -= augmentation;
			macarte.fitBounds(bords);   // Pour ajuster le zoom de la carte à la portion de parcours (un peu plus grand pour que les extrémités soient visibles)

			
			// ajout des points d'intérêt dans un rayon de 260 m autour de la ligne de la portion de parcours
			var cercle_layer = L.geoJSON(patrimoine, {
				onEachFeature: function (feature, layer) {
					layer.bindPopup(" " + '<b>' + feature.properties.name + '</b><br>'+ feature.properties.description,customOptions);
					},
				pointToLayer: function(feature, latlng) {
					for (var i = 0; i < Parcours[piste].trace[troncon].length; i ++) {
						var ecart=getDistance([latlng.lat,latlng.lng],Parcours[piste].trace[troncon][i]);
						if (ecart <= 260) {
							var marqueur_cercle = L.marker(latlng, {
								icon: L.icon({
									iconUrl : iconBase + feature.properties.sym + '.png',
									iconSize : [23,37],
								})
							});
							markersArray.push(marqueur_cercle);   // ajouter au tableau des marqueurs
							return marqueur_cercle;
						}
					}
				}
			});
			cercle_layer.addTo(macarte);
			// ajout des lieux-dits dans un rayon de 260 m autour de la ligne de la portion de parcours
			var cercle_topo_layer = L.geoJSON(toponymie, {
				onEachFeature: function (feature, layer) {
					var description=feature.properties.Description;
					if (description == null) {description = ''}
					layer.bindPopup(" " + '<b>' + feature.properties.Nom + '</b> <br>' + description ,customOptions );  
				},
				attribution : ' + <b> \"Noms de lieux du Grand Etalle\" par Albert Lamand </b>',
				pointToLayer: function(feature, latlng) {
					for (var i = 0; i < Parcours[piste].trace[troncon].length; i ++) {					
						var ecart=getDistance([latlng.lat,latlng.lng],Parcours[piste].trace[troncon][indice]);
						if (ecart <= 260) {
							var marqueur_cercle_topo = L.marker(latlng, {
								icon: L.icon({
									iconUrl : iconBase + 'circle.png',
									iconSize : [30,30],
								})
							});
							markersArray.push(marqueur_cercle_topo);   // ajouter au tableau des marqueurs
							return marqueur_cercle_topo;
						}
					}
				}
			});
			cercle_topo_layer.addTo(macarte);
	}
	
			
  // Ajout de ces contrôles
 
    L.control.layers(baseMaps).addTo(macarte);

  // Contrôle pour l'échelle

    L.control.scale({imperial: true}).addTo(macarte);
	
  // Contrôle pour le choix du parcours
	
	command.addTo(macarte);
 };

  window.onload = function(){
  // Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
  initMap(); 
  };