{% extends 'templates/base.html' %}
{% block title %}{{super()}} | {{mapuser.name}}{% endblock %}

{% block head %}
	{{super()}}
	<link href="/static/css/map.css" rel="stylesheet">
	<style>
		.wrap { top:{% if not noHeader %}58{% else %}0{% endif %}px;}
		
		{% if mapuser.settings.showStreetview and disp!='0' and disp!='1' %}
		/* show both */
			@media (orientation: landscape) {
					#map, #pano {
						display:inline-block;
						width:50%;
						height:99%;
					}2
					#pano { float:right; }
				}
			@media (orientation: portrait) {
				#map, #pano {
					width:100%;
					height:50%;
				}
				#pano { bottom:0; }
		}
		{% elif mapuser.settings.showStreetview and disp=='1' %}
		/* show streetview */
			#pano {
				width:100%;
				height:100%;}
			#map {display: none}
		{% else %}
		/* show map */
			#map {
				width:100%;
				height:100%;}
			#pano {display: none}
		{% endif %}
	</style>
{% endblock %}

{% block main %}

	<div class='wrap'>
	
			<div id='map'></div>
			<div id='pano'></div>
			
			<div id='notset' class='centered alert alert-warning'>
				{% if user.id == mapuser.id %}
					Your location is unset. You can click 'set' below to set it to your current position.
				{% else %}
					This user has no location set.  
				{% endif %}
			</div>
		
		{% if user.id == mapuser.id %}
			<div id='controls'>
			{% if mapuser.settings.showStreetview and disp!='0' %}
				<style>
					@media (orientation: portrait) {
						#controls { bottom:30px }
					}
				</style>
			{% endif %}
				
				<button class='btn set' onclick="setLocation()">Set</button>
				<button class='btn track' onclick="trackLocation()" data-toggle="tooltop" title="Tracking location..." data-trigger="manual"><i class='fa fa-crosshairs'></i>&emsp;Track</button>
				<button class='btn clear' onclick="clearLocation()">Clear</button>
				
			</div>
		{% endif %}
		
	</div>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js" integrity="sha256-WKvqiY0jZHWQZIohYEmr9KUC5rEaYEOFTq+ByllJK8w=" crossorigin="anonymous"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key={{mapApi}}&callback=gmapsCb" async defer></script>
	<script>
	
		/* Variables */ {
		var wpid, map, pano, sv, marker, elevator,
			socket = io('//'+window.location.hostname),
			mapuserid = {{mapuser._id |dump|safe}},
			userid{% if user._id %} = {{user._id |dump|safe}}{% endif %},
			settings = JSON.parse('{{mapuser.settings |dump|safe}}'),
			last = JSON.parse('{{mapuser.last |dump|safe}}'),
			noHeader = {{noHeader |dump|safe}},
			disp = {{disp |dump|safe}}, // 0=map, 1=streetview, 2=both
			mapElem = document.getElementById('map'),
			panoElem = document.getElementById('pano');
		}
		
		function onConnect(socket,userid,mapuserid){
			
			// Can get location
			socket.emit('can-get', mapuserid );
			//console.log(`Receiving updates for ${mapuserid}.`);
			
			// Can set location too
			if (mapuserid==userid){ 
				socket.emit('can-set', userid );
				//console.log(`Sending updates for ${userid}.`);
			}
			
		}
		
		// Connect to socket.io
		socket.on('connect', function(){
			//console.log(`Connected... `);
			onConnect(socket,userid,mapuserid);
		}).on('reconnect', function(){
			//console.log(`Reconnected... `);
			onConnect(socket,userid,mapuserid);
		}).on('error', function (err){
			console.error(`Unable to connect because of: ${err.message}`);
		});
		
		// Parse location
		function parseLoc(loc) {
			loc.spd = (settings.units=='standard')?parseFloat(loc.spd)*2.23694:parseFloat(loc.spd)
			loc.dir = parseFloat(loc.dir);
			loc.lat = parseFloat(loc.lat);
			loc.lon = parseFloat(loc.lon);
			loc.time = new Date(loc.time).toLocaleString()
			loc.glatlng = new google.maps.LatLng(loc.lat, loc.lon);
			return loc;
		}
		
		// Show/hide map if location is set/unset
		function toggleMaps(loc) {
			if (loc.lat===0&&loc.lon===0) {
				$('#map').hide();
				$('#pano').hide();
				$('#notset').show();
			} else {
				$('#map').show();
				$('#pano').show();
				$('#notset').hide();
			}
		}
		
		// execute on page load
		$(function() {
			toggleMaps(last);
		});
		
		// Google maps API callback
		window.gmapsCb = function() {
			// Create map
			if (disp!='1'||!settings.showStreetview) {
				map = new google.maps.Map( mapElem, {
					center: new google.maps.LatLng( last.lat, last.lon ),
					panControl: false,
					draggable: false,
					zoom: settings.defaultZoom,
					streetViewControl: false,
					zoomControlOptions: {position: google.maps.ControlPosition.LEFT_TOP},
					mapTypeId: (settings.defaultMap=='road')?google.maps.MapTypeId.ROADMAP:google.maps.MapTypeId.HYBRID
				});
				marker = new google.maps.Marker({
					position: { lat:last.lat, lng:last.lon },
					title: {{ mapuser.name | dump | safe }},
					map: map,
					draggable: false
				});
				map.addListener('zoom_changed',function(){
					map.setCenter(marker.getPosition());
				});
				
				// Create iFrame logo
				if (noHeader.length) {
					var logoDiv = document.createElement('div');
					logoDiv.className = 'map-logo';
					logoDiv.innerHTML = '<a href="https://tracman.org/">'+
						'<img src="https://tracman.org/static/img/style/logo-28.png" alt="[]">'+
						'Tracman</a>';
					map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(logoDiv);
				}
				
				// Create update time block
				var timeDiv = document.createElement('div');
				timeDiv.className = 'tim';
				if (last.time) {
					timeDiv.innerHTML = 'location updated '+new Date(last.time).toLocaleString();
				}
				map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(timeDiv);
				
				// Create speed block
				if (settings.showSpeed) {
					const speedSign = document.createElement('div'),
						speedLabel = document.createElement('div'),
						speedText = document.createElement('div'),
						speedUnit = document.createElement('div');
					speedLabel.className = 'spd-label';
					speedLabel.innerHTML = 'SPEED';
					speedText.className = 'spd';
					speedText.innerHTML = (settings.units=='standard')?(parseFloat(last.spd)*2.23694).toFixed():last.spd.toFixed();
					speedUnit.className = 'spd-unit';
					speedUnit.innerHTML = (settings.units=='standard')?'m.p.h.':'k.p.h.';
					speedSign.className = 'spd-sign';
					speedSign.appendChild(speedLabel);
					speedSign.appendChild(speedText);
					speedSign.appendChild(speedUnit);
					map.controls[google.maps.ControlPosition.TOP_RIGHT].push(speedSign);
				}
				
				// Create altitude block
				if (settings.showAlt) {
					var elevator = new google.maps.ElevationService;
					const altitudeSign = document.createElement('div'),
						altitudeLabel = document.createElement('div'),
						altitudeText = document.createElement('div'),
						altitudeUnit = document.createElement('div');
					altitudeLabel.className = 'alt-label';
					altitudeText.className = 'alt';
					altitudeUnit.className = 'alt-unit';
					altitudeSign.className = 'alt-sign';
					altitudeText.innerHTML = '';
					altitudeLabel.innerHTML = 'ALTITUDE';
					getAltitude(new google.maps.LatLng(last.lat,last.lon), elevator, function(alt) {
						if (alt) { altitudeText.innerHTML = (settings.units=='standard')?(alt*3.28084).toFixed():alt.toFixed(); }
					});
					altitudeUnit.innerHTML = (settings.units=='standard')?'feet':'meters';
					altitudeSign.appendChild(altitudeLabel);
					altitudeSign.appendChild(altitudeText);
					altitudeSign.appendChild(altitudeUnit);
					map.controls[google.maps.ControlPosition.TOP_RIGHT].push(altitudeSign);
				}
			}
				
			// Create streetview
			updateStreetView(parseLoc(last),10);
		}
		
		// Get location
		socket.on('get', function(loc) {
			//console.log(`Received location: ${loc.lat}, ${loc.lon}`);
			
			loc = parseLoc(loc);
			if (disp!='1' || !settings.showStreetview) {
				$('.tim').text('location updated '+loc.time);
				if (settings.showSpeed) { $('.spd').text(loc.spd.toFixed()); }
				if (settings.showAlt) {
					getAltitude({lat:loc.lat,lng:loc.lon}, elevator, function(alt) {
						if (alt) { $('.alt').text((settings.units=='standard')?(alt*3.28084).toFixed():alt.toFixed()); }
					});
				}
				toggleMaps(loc);
				map.setCenter({lat:loc.lat,lng:loc.lon});
				marker.setPosition({lat:loc.lat,lng:loc.lon});
			}
			updateStreetView(loc,10);
		});
		
		{% if user %}
			var token = '{{user.sk32}}';
			
			// Set location
			function setLocation() {
				if (!userid==mapuserid) {alert('You are not logged in! '); next();}
				else {
					if (!navigator.geolocation) {alert('Geolocation not enabled. ');}
					else {
						navigator.geolocation.getCurrentPosition(function(pos){
							newloc = {
								tok: token,
								usr: userid,
								lat: pos.coords.latitude,
								lon: pos.coords.longitude,
								spd: (pos.coords.speed||0)
							}
							socket.emit('set', newloc);
							toggleMaps(newloc);
						}, function(err) {
							if (err) { 
								alert("Unable to set location.");
								console.error(err.message); }
							else { 
								//console.log('Set position',pos);
							}
						}, { enableHighAccuracy:true });
					}
				}
			}
			
			// Track location
			function trackLocation() {
				if (!userid==mapuserid) { alert('You are not logged in! '); }
				else {
					// Stop tracking
					if (wpid) {
						$('#controls > .track').html('<i class="fa fa-crosshairs"></i>&emsp;Track').tooltip('hide');
						navigator.geolocation.clearWatch(wpid);
						wpid = undefined;
					// Start tracking
					} else {
						$('#controls > .track').html('<i class="fa fa-crosshairs fa-spin"></i>&emsp;Stop').tooltip('show');
						if (!navigator.geolocation) { alert('Unable to track location. '); }
						else {
							wpid = navigator.geolocation.watchPosition(function(pos) {
								newloc = {
									tok: token,
									usr: '{{user.id}}',
									lat: pos.coords.latitude,
									lon: pos.coords.longitude,
									spd: (pos.coords.speed||0)
								};
								socket.emit('set',newloc);
								toggleMaps(newloc);
							}, function(err){
								if (err) {
									alert("Unable to track location.");
									console.error(err.message);
								} else {
									// console.log('Tracking position...');
								}
							}, { enableHighAccuracy:true });
						}
					}
					}
			}
			
			// Clear location
			function clearLocation() {
				if (!userid==mapuserid) { alert('You are not logged in! '); }
				else {
					// Stop tracking
					if (wpid) {
						$('#controls > .track').html('<i class="fa fa-crosshairs"></i>&emsp;Track').tooltip('hide');
						navigator.geolocation.clearWatch(wpid);
						wpid = undefined;
					} 
					newloc = {
						tok: token,
						usr: userid,
						lat:0, lon:0, spd:0
					}
					socket.emit('set',newloc);
					toggleMaps(newloc);
				}
			}
			
		{% endif %}
		
		// Check altitude
		function getAltitude(loc,elev,cb){
			elev = elev || new google.maps.ElevationService;
			elev.getElevationForLocations({
				'locations': [loc]
			}, function(results, status) {
				if (status === google.maps.ElevationStatus.OK && results[0]) {
					cb(results[0].elevation);
				}
			});
		}
		
		// Get street view imagery
		function getStreetViewData(loc,rad,cb) {
			if (!sv) { var sv=new google.maps.StreetViewService(); }
			sv.getPanorama({location:{lat:loc.lat,lng:loc.lon},radius:rad},function(data,status){
				if (status===google.maps.StreetViewStatus.ZERO_RESULTS){
					getStreetViewData(loc,rad*2,cb);
				} else if (status!==google.maps.StreetViewStatus.OK){ console.log('Street view not available: '+status); }
				else { cb(data); }
			});
		}
		
		// Update streetview
		function updateStreetView(loc) {
			if (loc.spd>1) { // moving
				if (settings.showStreetview && disp!='0') {
					var imgElem = document.getElementById('panoImg');
					getStreetViewData(loc, 50, function(data){
						if (!imgElem) {
							// Create image
							pano = undefined;
							$('#pano').empty();
							$('#pano').append($('<img>',{
								alt: 'Street view image',
								src: 'https://maps.googleapis.com/maps/api/streetview?size=800x800&location='+loc.lat+','+loc.lon+'&fov=90&heading='+loc.dir+'&key={{api}}',
								id: 'panoImg'
							}));
						}
						// Set image
						$('#panoImg').attr('src','https://maps.googleapis.com/maps/api/streetview?size='+$('#pano').width()+'x'+$('#pano').height()+'&location='+data.location.latLng.lat()+','+data.location.latLng.lng()+'&fov=90&heading='+loc.dir+'&key={{api}}');
					});
				}
			} else if (pano==null) { // not moving and pano not set
				getStreetViewData(loc, 50, function(data){
					// Create panorama
					$('#pano').empty();
					var panoOptions = {
						panControl: false,
						zoomControl: false,
						addressControl: false,
						linksControl: false,
						motionTracking: false,
						motionTrackingControl: false
					};
					pano = new google.maps.StreetViewPanorama(panoElem, panoOptions);
					// Set panorama
					pano.setPano(data.location.pano);							
					pano.setPov({
						pitch: 0,
						heading: Math.atan((loc.lon-data.location.latLng.lng())/(loc.lat-data.location.latLng.lat()))*(180/Math.PI)
					});
				});
			}
		}
		
	</script>
	
{% endblock %}