var loader = new PIXI.Loader();
var colors = ['66FF00','FF5555','FFE419','2A7FFF','BC5FD3','C8AB37','ECECEC','FF6600'];
for (var i in colors){
	loader.add('marker'+colors[i]+'', 'src/img/plane-'+colors[i]+'.png');
}

//global variable
var nbPlane = 0

loader.add('shadow', 'src/img/shadow.png');
loader.load(function(loader, resources) {
    
    var pixiContainer = new PIXI.Container();
    	
	var map = L.map('map',{ 
		zoomControl: false,
		minZoom:2,
        maxZoom: 16,
		maxBounds: [
			[-Infinity, -360],
			[Infinity, 360]
        ],
		//worldCopyJump: true,
		attributionControl: false
	})
	
	//zoom controls	
	L.control.zoom({position: 'bottomright'}).addTo(map);
	//Locate user
	L.control.locate({position: 'bottomright'}).addTo(map);
	//fullscreen
	map.addControl(new L.Control.Fullscreen({position: 'bottomright'}));
	
	// Licence Icon
	L.Control.Watermark = L.Control.extend({
		onAdd: function(map) {
			var img = L.DomUtil.create('img');

			img.src = 'src/img/licence.svg';
			img.style.width = '100px';

			return img;
		}
	});
	L.control.watermark = function(opts) {
		return new L.Control.Watermark(opts);
	}
	L.control.watermark({ position: 'bottomleft' }).addTo(map);
	//scale
	L.control.scale().addTo(map);
	
	//disabling send plane button if alreada 100 planes sent the current day
	
	
	$.post("avionJournalier.php", function(result) {
		result = result.replace(/'/g, '"');
		result = $.parseJSON(result)
		nbPlane = Number(result.nAvion)
		$("#buttonNewPlane").val("Lancer un avion-poème "+Number(result.nAvion)+"/100")
		if (nbPlane > 99){
			$("#buttonNewPlane").prop("disabled",true);
		}
		else{
			
		}
		translateUI(lang)
	})
	
	//background
	L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
		attribution: '',
		//minZoom:8,
		maxZoom: 16,
	}).addTo(map);

    //adding terminator
	var terminator = L.terminator()
	.addTo(map);
	 setInterval(function() {
		  terminator.setTime();
	 }, 1000);
	

	//center map on sun by default
	function centerOnSun(){
		var equator = turf.lineString([[-1000, 0], [1000, 0]])
		var intersects = turf.lineIntersect(equator, terminator.toGeoJSON());
		//console.log(intersects)
		var lonCenter = ((intersects.features[1].geometry.coordinates[0])+(intersects.features[2].geometry.coordinates[0]))/2
		//console.log(lonCenter)
		return lonCenter
	}
	map.setView([30,0], 2);
	
	
	//could layer from GBIS NASA  - always 1 day of delay
	var twoDaysAgo = moment(new Date()).subtract(2, "days").format('YYYY-MM-DD')
	L.tileLayer('https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_SNPP_CorrectedReflectance_TrueColor/default/'+twoDaysAgo+'/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpg', {
		attribution: '',
		maxZoom: 8,
		opacity:0.4
	})
	.addTo(map);
	
	
	//Bluring the terminator | Source: https://stackoverflow.com/questions/28235792/leaflet-polygon-with-fuzzy-outline
	var svg = map.getPanes().overlayPane.firstChild,
	svgFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter'),
    svgBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
	svgFilter.setAttribute('id', 'blur');
	svgFilter.setAttribute('x', '-100%');
	svgFilter.setAttribute('y', '-100%');
	svgFilter.setAttribute('width', '500%');
	svgFilter.setAttribute('height', '500%');
	svgBlur.setAttribute('stdDeviation', 15);
	svgFilter.appendChild(svgBlur);
	svg.appendChild(svgFilter);
	terminator._path.setAttribute('filter', 'url(#blur)'); 
	
	//geojson for arclines 
	//travel
	var arcTravelStyle = {   
		"color": "#00ff00",
		"weight": 2.5,
		"dashArray": "10 5",
		"opacity": 0.65
	};
	var arcTravel = L.geoJSON([],{style: arcTravelStyle}).addTo(map);
	//travelled
	var arcTravelledStyle = {   
		"color": "#00ff00",
		"weight": 2.5,
		"opacity": 0.65
	};
	var arcTravelled = L.geoJSON([],{style: arcTravelledStyle}).addTo(map);

	var pulsatingMarker = L.layerGroup([]).addTo(map) 	
	var originMarker = L.layerGroup([]).addTo(map) 	
    
    var firstDraw = true;
    var prevZoom;
	
    var pixiOverlay = L.pixiOverlay(function(utils, event) {
        var zoom = utils.getMap().getZoom();
        var container = utils.getContainer();
        var renderer = utils.getRenderer();
        var project = utils.latLngToLayerPoint;
        var scale = utils.getScale();
		
        if (firstDraw) {
			
			//get planes
			$.post( "getCurrentPlanes.php", function(result) {
			 // console.log(result)
			  var planes = $.parseJSON(result)
			  console.log(planes)
			  function formatResults(data){
				  data.deliveryTime = Number(data.deliveryTime)*1000
				  data.startTime = Number(data.startTime)*1000
				  return data
			  }
			  
			  function displayPlane(data){
					var line = turf.greatCircle(turf.point([Number(data.startLon),Number(data.startLat)]), turf.point([Number(data.destLon),Number(data.destLat)]),{offset:20})
					var lineDistance = turf.length(line);
					var dateStart = moment(data.startTime)
					var dateEnd = moment(data.deliveryTime)
					var dateNow = moment(new Date())
					var totalSeconds = dateEnd.diff(dateStart,'seconds');
					var travelledSeconds = dateNow.diff(dateStart,'seconds')
					var travelRatio = travelledSeconds/totalSeconds
					var travelledDistance = lineDistance*travelRatio  // getting the travelled distance
					var segment;
					if(line.geometry.type == "MultiLineString"){ // if the arc is cutting the dateline, well it's a mess.
						var l1 = turf.lineString(line.geometry.coordinates[0]) // creating a line from first segment
						var l2 = turf.lineString(line.geometry.coordinates[1]) // creating a line from second segment
						var l1Length = turf.length(l1) // calculating length of first segment
						if (travelledDistance < l1Length){ // if the travelled distance is inferior to segment 1 line, the point is somewhere in it
							segment = l1
							data.position = 1
						}
						else{
							segment = l2  // otherwise on segment 2
							data.position = 2
							travelledDistance = Number(travelledDistance)-Number(l1Length) // we remove the travel distance done in s1
						}
					}
					else{
						segment = line
						data.position = 0						
					}
					var currentPosition = turf.along(segment, travelledDistance,{units: 'kilometers'})
					if(currentPosition.geometry.coordinates[0] < -180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]+360}
					if(currentPosition.geometry.coordinates[0] > 180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]-Number(360)}
				    //calculating bearing based on two points, one just before and one just after
					var positionBefore = turf.along(segment, (travelledDistance)-0.00001,{units: 'kilometers'})
					var positionAfter = turf.along(segment, (travelledDistance)+0.00001,{units: 'kilometers'})
					var rotation = turf.bearing(
						positionBefore,
						positionAfter
					);
					
					//plane
					var iconColor = 'marker'+data.color
					var markerTexture = resources[iconColor].texture;
					var marker = new PIXI.Sprite(markerTexture);
					marker.anchor.set(0.5, 0.5);
					var markerCoords = project([currentPosition.geometry.coordinates[1],currentPosition.geometry.coordinates[0]]);
					marker.x = markerCoords.x;
					marker.y = markerCoords.y;
					marker.angle = rotation;
					marker.scale.set(5);
					marker.interactive = true;
					marker.cursor = 'pointer'
					marker.data  = data
					marker.data.line = line
					marker.data.currentPosition = currentPosition
					
					//shadow
					var shadowTexture = resources.shadow.texture;
					var shadow = new PIXI.Sprite(shadowTexture);
					shadow.anchor.set(0.5, 0.5);
					shadow.x = markerCoords.x;
					shadow.y = markerCoords.y + 0.5;
					shadow.angle = rotation;
					shadow.scale.set(0.00025);
					shadow.alpha = 0.3
					shadow.visible = false
								
					//popup
					marker.popup = L.popup({className: 'pixi-popup'})
					
					pixiContainer.addChild(shadow);
					pixiContainer.addChild(marker);
					
					renderer.render(container)	
					
					//adapting scale based on zoom level. Max zoom = writting visible
					map.on('zoomend', function() {
						marker.scale.set((1/(utils.getScale(map.getZoom())*20))+(Math.pow(map.getZoom(),2)/100*2*(1/(utils.getScale(map.getZoom())*20))))
						if(map.getZoom() == 16){
							shadow.visible = true
						}
						else{
							shadow.visible = false
						}
					});
					
					
					
					//animating moving plane
					setInterval(function() {
					  animate();
					}, 1000)
					
					function animate() {
				      if (map.getZoom()	> 12){ // we animate only starting zoom 12
						  var bounds = map.getBounds()
						  var bbox = [bounds._southWest.lng, bounds._southWest.lat, bounds._northEast.lng, bounds._northEast.lat];  
						  var extentPoly = turf.bboxPolygon(bbox);
						  var planeInExtent = turf.booleanWithin(marker.data.currentPosition, extentPoly);
							  if(planeInExtent == true){ // we animate only the planes in map extent 
							  var dateNow = moment(new Date())
							  var totalSeconds = dateEnd.diff(dateStart,'seconds');
							  var travelledSeconds = dateNow.diff(dateStart,'seconds')
							  var travelRatio = travelledSeconds/totalSeconds
							  var lineDistance = turf.length(line);
							  var segment;
							  var travelledDistance = lineDistance*travelRatio  // getting the travelled distance
								if(line.geometry.type == "MultiLineString"){ // if the arc is cutting the dateline
									var l1 = turf.lineString(line.geometry.coordinates[0]) // creating a line from first segment
									var l2 = turf.lineString(line.geometry.coordinates[1]) // creating a line from second segment
									var l1Length = turf.length(l1) // calculating length of first segment
									if (travelledDistance < l1Length){ // if the travelled distance is inferior to segment 1 line, the point is somewhere in it
										segment = l1
										marker.data.position = 1  // we store it, usefull for popup event
									}
									else{
										segment = l2  // otherwise on segment 2
										marker.data.position = 2
										travelledDistance = Number(travelledDistance)-Number(l1Length) // we remove the travel distance done in s1
									}
								}
								else{
									segment = line	
								}
							  var currentPosition = turf.along(segment, travelledDistance,{units: 'kilometers'})
							  //troubleshooting extreme lons
							  if(currentPosition.geometry.coordinates[0] < -180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]+360}
							  if(currentPosition.geometry.coordinates[0] > 180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]-Number(360)}
							  marker.data.currentPosition = currentPosition
							  var markerCoords = project([currentPosition.geometry.coordinates[1],currentPosition.geometry.coordinates[0]]);
							  marker.x = markerCoords.x;
							  marker.y = markerCoords.y;
							  shadow.x = markerCoords.x;
							  shadow.y = markerCoords.y + 0.5;
							  renderer.render(container);
						  }
					   }
					}
					
					//if parameter in URL, zoom on it
					var queryString = window.location.search;
					queryString = queryString.split('=')[1]
					if(Number(queryString)==data.uid){
						setTimeout(
						  function() 
						  {
								map.setView([data.currentPosition.geometry.coordinates[1],data.currentPosition.geometry.coordinates[0]], 15);
								openPopup(marker)
						  }, 100);
					}
					
				}
				for (var i in planes){
					displayPlane(formatResults(planes[i]),0)		
				}
			});
			
			function openPopup(target){
				//drawing arcs
					arcTravel.clearLayers()
					arcTravelled.clearLayers()
					arcTravelStyle.color = '#'+target.data.color
					arcTravelledStyle.color = '#'+target.data.color
					var travel = target.data.line
					var start = turf.point([Number(target.data.startLon),Number(target.data.startLat)])
					var current =  target.data.currentPosition
					var end = turf.point([Number(target.data.destLon),Number(target.data.destLat)])
					// for linestrings
					if(travel.geometry.type == "LineString"){ 
						var sliced1 = turf.lineSlice(start, current, travel);
						var sliced2 = turf.lineSlice(current, end, travel);
						arcTravelled.addData(sliced1);
						arcTravel.addData(sliced2);
					}
					// we create a copy of lines crossing the datetime
					function createCopy(c){
						for (var i in c.geometry.coordinates){
							if (c.geometry.coordinates[i][0] > 0){
								c.geometry.coordinates[i][0] = c.geometry.coordinates[i][0] - Number(360)
							}
							else{
								c.geometry.coordinates[i][0] = c.geometry.coordinates[i][0] + Number(360)
							}
						}

						return c
					}
					//for multilinetrings
					if(travel.geometry.type == "MultiLineString"){
						var l1 = turf.lineString(travel.geometry.coordinates[0]) // creating a line from first segment
						var l2 = turf.lineString(travel.geometry.coordinates[1]) // creating a line from second segment
						if(target.data.position == 1){
							var sliced1 = turf.lineSlice(start, current, l1);
							var sliced2 = turf.lineSlice(current, turf.point(l1.geometry.coordinates[l1.geometry.coordinates.length-1]), l1);
							arcTravelled.addData(sliced1);
							arcTravel.addData(sliced2);
							arcTravel.addData(l2);
							
						}
						else if(target.data.position == 2){
							var sliced1 = turf.lineSlice(turf.point(l2.geometry.coordinates[0]), current, l2);
							var sliced2 = turf.lineSlice(current, end, l2);
							arcTravelled.addData(l1);
							arcTravelled.addData(sliced1);
							arcTravel.addData(sliced2);	
						}
						var travelledGeoJSON = arcTravelled.toGeoJSON()
						for (var i in travelledGeoJSON.features){
							arcTravelled.addData(createCopy(travelledGeoJSON.features[i]))
						}
						var travelGeoJSON = arcTravel.toGeoJSON()
						for (var i in travelGeoJSON.features){
							arcTravel.addData(createCopy(travelGeoJSON.features[i]))
						}
						
					}
					
					
					//add pulsating marker on destination;
					pulsatingMarker.clearLayers()
					var pulseIcon = L.divIcon({
					  className: 'pulse-icon', //empty class to overwrite leaflet defaults
					  html: '<div class="pulse-icon-anim" style="border-color:#'+target.data.color+'"></div>',
					  iconSize: [22,22]
					});
					var endCoordo = [Number(target.data.destLat),Number(target.data.destLon)]
					pulsatingMarker.addLayer(new L.marker(endCoordo, {icon: pulseIcon}));
					if(travel.geometry.type == "MultiLineString"){ //if arc cross dateline, we multiply the marker
						pulsatingMarker.addLayer(new L.marker([endCoordo[0],endCoordo[1]-Number(360)], {icon: pulseIcon}));
						pulsatingMarker.addLayer(new L.marker([endCoordo[0],endCoordo[1]+Number(360)], {icon: pulseIcon}));
					}
					
					//adding static marker on origin
					originMarker.clearLayers()
					var startCoordo = [Number(target.data.startLat),Number(target.data.startLon)]
					originMarker.addLayer(new L.circleMarker(startCoordo, {radius: 6,opacity:0.7, weight:2,color:'#'+target.data.color}));
					if(travel.geometry.type == "MultiLineString"){ //if arc cross dateline, we multiply the marker
						originMarker.addLayer(new L.circleMarker([startCoordo[0],startCoordo[1]-Number(360)], {radius: 6,opacity:0.7,weight:2,color:'#'+target.data.color}));
						originMarker.addLayer(new L.circleMarker([startCoordo[0],startCoordo[1]+Number(360)], {radius: 6,opacity:0.7,color:'#'+target.data.color}));
					}
					
					
					
					//popup
					var momentLocale = lang;
					if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
					moment.locale(momentLocale)
					
					target.popup.setLatLng([target.data.currentPosition.geometry.coordinates[1],target.data.currentPosition.geometry.coordinates[0]])
					//arabic popup
					if(lang=="ar"){
						target.popup.setContent('<table><tbody><tr><th style="text-align:center">'+target.data.startName+'</th><th>&nbsp;<i class="fas fa-plane"></i>&nbsp;</th><th style="text-align:center">'+target.data.destName+'</th></tr><tr><th style="text-align:center"><small>'+moment(target.data.startTime).fromNow()+'</small></th><th></th><th style="text-align:center"><small>'+moment(target.data.deliveryTime).fromNow()+'</small></th></tr></tbody></table>')
					}
					//other languages
					else{
						target.popup.setContent('<table><tbody><tr><th style="text-align:center">'+target.data.startName+'</th><th>&nbsp;<i class="fas fa-plane"></i>&nbsp;</th><th style="text-align:center">'+target.data.destName+'</th></tr><tr><th style="text-align:center"><small>'+moment(target.data.startTime).fromNow()+'</small></th><th></th><th style="text-align:center"><small>'+moment(target.data.deliveryTime).fromNow()+'</small></th></tr></tbody></table>')
					}
					target.popup.openOn(map);
					target.popup.on('remove', function() {
						arcTravel.clearLayers()
						arcTravelled.clearLayers()
						pulsatingMarker.clearLayers()
						originMarker.clearLayers()
					});
					target.popup.on('popupclose', function() {
						arcTravel.clearLayers()
						arcTravelled.clearLayers()
						pulsatingMarker.clearLayers()
						originMarker.clearLayers()
					});
			}
			//utils for popup
			utils.getMap().on('click', function(e) {
				var interaction = utils.getRenderer().plugins.interaction;
				var pointerEvent = e.originalEvent;
				var pixiPoint = new PIXI.Point();
				interaction.mapPositionToPoint(pixiPoint, pointerEvent.clientX, pointerEvent.clientY);
				var target = interaction.hitTest(pixiPoint, container);
				if (target && target.popup) {
					openPopup(target)
				}
			});
			utils.getMap().on('touchend', function(e) {
				var interaction = utils.getRenderer().plugins.interaction;
				var pointerEvent = e.originalEvent;
				var pixiPoint = new PIXI.Point();
				interaction.mapPositionToPoint(pixiPoint, pointerEvent.clientX, pointerEvent.clientY);
				var target = interaction.hitTest(pixiPoint, container);
				if (target && target.popup) {
					openPopup(target)
				}
			});
			
			
        }

        firstDraw = false;
        prevZoom = zoom;
        renderer.render(container);
    }, pixiContainer);
    pixiOverlay.addTo(map);
});





  
//hack to make white lines between lines disapear on non-retina screens (from: https://github.com/Leaflet/Leaflet/issues/3575 )
(function(){
    var originalInitTile = L.GridLayer.prototype._initTile
    L.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();

            tile.style.width = tileSize.x + 1 + 'px';
            tile.style.height = tileSize.y + 1 + 'px';
        }
    });
})()