var BaseIcon = L.Icon.extend({
	options : {
		iconSize : [ 24, 24 ],
		iconAnchor : [ 15, 15 ],
		popupAnchor : [ 0, -16 ]
	}
});
p1 = new BaseIcon({
	iconUrl : 'https://cdn.j2ski.com/m/apt-24.png'
})
p4 = new BaseIcon({
	iconUrl : 'https://cdn.j2ski.com/m/ChaletG-24.png'
})
p5 = new BaseIcon({
	iconUrl : 'https://cdn.j2ski.com/m/HotelG-24.png'
})
p3 = new BaseIcon({
	iconUrl : 'https://cdn.j2ski.com/m/mtn-24.png'
})
p6 = new BaseIcon({
	iconUrl : 'https://cdn.j2ski.com/m/ResortG-24.png'
})
p7 = new BaseIcon({
	iconUrl : 'https://cdn.j2ski.com/m/ShopG-24.png'
})

function getIcon(feature) {
	// Work out which icon to use
	switch (feature.properties.iconName) {
	case 'Airport':
		return p1;
	case 'Hotel':
		return p5;
	case 'Resort':
		return p6;
	case 'Shop':
		return p7;
	}
	return p6;
}

function airportFilter(feature) {
	  if (feature.properties.iconName === "Airport") return true
}
function hotelFilter(feature) {
	  if (feature.properties.iconName === "Hotel") return true
}
function resortFilter(feature) {
	  if (feature.properties.iconName === "Resort") return true
}
function shopFilter(feature) {
	  if (feature.properties.iconName === "Shop") return true
}

function initmap() {
	var map = L.map('map', {
	    zoomControl: false
	}).setView([ 47.73773,11.854 ], 11);
	L.control.zoom({
	     position:'bottomright'
	}).addTo(map);
	
	var fsControl = new L.Control.FullScreen();
	map.addControl(fsControl);
	
	// Initial set-up of layers
	var apt;
	var hotelLayer;
	var skia;
	var shops;
	var layerscontrol;
	
	loadFeatures();
	
	function onEachFeature(feature, layer) {
		if (feature.properties) {
			if (feature.properties.htmlNote) {
				layer.bindPopup(feature.properties.htmlNote, {autoPan: false, autoClose: false});
			}
			if (feature.properties.visibleTooltip) {
				layer.bindTooltip(feature.properties.visibleTooltip, { permanent: true, offset:[16,0], direction:'right' }).openTooltip();
			}
			if (feature.properties.popupTooltip) {
				layer.bindTooltip(feature.properties.popupTooltip, { offset:[16,0], direction:'right' }).openTooltip();
			}
		}
	}

	function loadFeatures() {
		var zoom = map.getZoom();
		console.log('loadFeatures() called at zoom level=' + zoom);

		if (zoom < 4) {
			// Clear all layers
		    if (apt) {
		    	apt.clearLayers();
		    };
		    if (hotelLayer) {
		    	hotelLayer.clearLayers();
		    };
		    if (skia) {
		    	skia.clearLayers();
		    };
		    if (shops) {
		    	shops.clearLayers();
		    };
		} else {
			var centre = map.getCenter();
			let xhr = new XMLHttpRequest();
			xhr.open('GET', '/mapper/' + centre.lat + '/' + centre.lng + '/' + zoom + '/ski-areas.geojson');

			// We have to both request and accept json for the xhr.response to
			// be of the right type below.
			xhr.setRequestHeader('Content-Type', 'application/json');
			xhr.responseType = 'json';
			xhr.onload = function() {
				if (xhr.status !== 200)
					return;

				var body = xhr.response;
				console.log(body);

				// Clear all layers before adding new GeoJSON data
			    if (apt) {
			    	apt.clearLayers();
			    };

				apt = L.geoJSON(body, {
					filter: airportFilter,
					pointToLayer : function(feature, latlng) {
						return L.marker(latlng, {icon : getIcon(feature)});
					},
					onEachFeature : onEachFeature
				}).addTo(map);

			    if (hotelLayer) {
			    	hotelLayer.clearLayers();
			    };

				hotelLayer = L.geoJSON(body, {
					filter: hotelFilter,
					pointToLayer : function(feature, latlng) {
						return L.marker(latlng, {icon : getIcon(feature)});
					},
					onEachFeature : onEachFeature
				});

				// Ski Area Layers
			    if (skia) {
			    	skia.clearLayers();
			    };

				skia = L.geoJSON(body, {
					filter: resortFilter,
					pointToLayer : function(feature, latlng) {
						return L.marker(latlng, {icon : getIcon(feature)});
					},
					onEachFeature : onEachFeature
				}).addTo(map);

				// Shop Layers
			    if (shops) {
			    	shops.clearLayers();
			    };

			    shops = L.geoJSON(body, {
					filter: shopFilter,
					pointToLayer : function(feature, latlng) {
						return L.marker(latlng, {icon : getIcon(feature)});
					},
					onEachFeature : onEachFeature
				});

				// Write / Re-write the layers control with the newly refreshed layers loaded above.
				if (layerscontrol) {
					map.removeControl(layerscontrol);
				}
				
				if (zoom < 15) {
					layerscontrol = L.control.layers(null, {"Airports":apt,"Ski Resorts":skia}, {collapsed:false}).addTo(map);
					layerscontrol.addOverlay(hotelLayer, 'Hotels');
					layerscontrol.addOverlay(shops, 'Ski Hire Shops');
				} else {
					hotelLayer.addTo(map);
					shops.addTo(map);
					layerscontrol = L.control.layers(null, {"Airports":apt,"Ski Resorts":skia,"Hotels":hotelLayer,"Ski Hire Shops":shops}, {collapsed:false}).addTo(map);
				}
			};
			xhr.send();
		}
	}

	map.on("moveend", function(e) {
		loadFeatures()
	});

	L.control.scale().addTo(map);
	
	var tiles = L.tileLayer(
		'https://map.j2ski.com/hot/{z}/{x}/{y}.png', {
			attribution : 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
			minZoom : 3,
			maxZoom : 18
		}
	).addTo(map);

	var baseMaps = {
	    "Tiles": tiles
	};
}