/*  */
var routes = [];
var lastUpdate = 0;
var colours = ['#009900', '#338033', '#996600'];
var routeCoords = [];


// Function called as the callback script when the maps api loads.
function set_up_map(mapdiv) {
	// Convert simple lat/lng pairs into map points.
	for(var i = 0; i < routes.length; i++){
		routeCoords[i] = [];
		for(var j = 0; j < routes[i].length; j++){
			routeCoords[i][j] = [ routes[i][j][0], routes[i][j][1] ];
		}
	}
	var route;
	delete routes;
	if(route = mapdiv.getAttribute('data-route')){
		route = JSON.parse(route);
		routeCoords[i] = [];
		for(var j = 0; j < route.length; j++){
			routeCoords[i][j] = [ route[j][0], route[j][1] ];
		}
		i++
	}
	delete route;
	if(0 == i){
		return false;
	}
  console.log(routeCoords);

	if(!mapdiv) return false;
	var centre = routeCoords[0][0];
	var map = L.map(mapdiv).setView(centre, 13);

  // set map tiles source
	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
		maxZoom: 18,
	}).addTo(map);

	for(var i = 0; i < routeCoords.length; i++){
		var pl = L.polyline(
			routeCoords[i],
			{ color: colours[i], weight: 3, opacity: 1.0, }
		);
		pl.addTo(map);
		var decorator = L.polylineDecorator(pl, {
 			patterns: [
				// defines a pattern of 8px-wide dashes, repeated every 111px on the line
				{offset: 0, repeat: 111, symbol: L.Symbol.arrowHead({pixelSize: 8, polygon: false, pathOptions: {color: colours[i], stroke: true}})}
			]
		}).addTo(map);
	}

	L.marker(routeCoords[0][0], { icon: L.divIcon({className: 'mapmarker', html: 'S', iconSize: [18,18]}), title: 'Start' }).addTo(map);
	L.marker(routeCoords[0][routeCoords[0].length - 1], { icon: L.divIcon({className: 'mapmarker', html: 'F', iconSize: [18,18]}), title: 'Finish' }).addTo(map);
	map.addControl(new L.Control.Fullscreen());

	return map;
}

var brandinglink = L.Control.extend({
  options: {
    position: 'topright'
  },
  onAdd: function (map) {
    var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');

    container.style.backgroundColor = 'white';
    container.style.backgroundImage = "url(./resources/logo.png)";
    container.style.backgroundSize = "30px 30px";
    container.style.width = '30px';
    container.style.height = '30px';

    container.onclick = function(){
	  window.open('https://frr.org.uk');
    }

    return container;
  }
});

function setmaps(){
/*	var mapdiv2 = document.getElementById('routemap2');
	var map = set_up_map(mapdiv2);
	if(!window.PW_maps) window.PW_maps = [ map ];
	else window.PW_maps.push(map);
	if(!map) return false;
*/
	var mapdivs = document.querySelectorAll('.osmgpxmap');
	mapdivs.forEach(function(mapdiv){
		var map = set_up_map(mapdiv);
		if(!window.PW_maps) window.PW_maps = [ map ];
		else window.PW_maps.push(map);
		// map.addControl(new brandinglink());
	});
};


window.addEventListener('DOMContentLoaded', setmaps);