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

{% block head %}
	{{ super() }}
	<link href="/static/css/trac.css" rel="stylesheet">
	<style>
		.wrap { top:{% if not noHeader %}58{% else %}0{% endif %}px;}
		img#panoImg { width:100%; height:100%; }
		
		{% if tracuser.settings.showStreetview and disp!='0' and disp!='1' %}
		/* show both */
		@media (orientation: landscape) {
				#map, #pano {
					display:inline-block;
					width:50%;
					height:99%;
				}
				#pano { float:right; }
			}
			@media (orientation: portrait) {
				#map, #pano {
					width:100%;
					height:50%;
				}
				#pano { bottom:0; }
			}
		{% elif tracuser.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'>
		
		{% if not tracuser.last.time %}
		<div class='centered alert alert-warning'>
			<b>No Location Found</b>
			{% if user.id == tracuser.id %}
				<br>You can <a href="#" onclick="setLocation()">click here to set use this device's location</a>.  
				<br>Maybe you also want to <a href="/android">download the android app</a>.
			{% else %}
				<br>This user hasn't updated their location yet!  
			{% endif %}
		</div>
		{% else %}
			<div id='map'><i class='loading fa fa-refresh fa-spin'></i></div>
			{% if tracuser.settings.showStreetview and not noStreetview.length %}
				<div id='pano'><i class='loading fa fa-refresh fa-spin'></i></div>
			{% endif %}
		{% endif %}
		
	</div>
	
	<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key={{api}}&callback=initMap" async defer></script>
	<script>
		var socket = io.connect();
		var tracuserid = {{ tracuser._id |dump|safe }},
		 settings = JSON.parse('{{ tracuser.settings |dump|safe }}'),
		 last = JSON.parse('{{ tracuser.last |dump|safe }}'),
		 noHeader = {{ noHeader |dump|safe }},
		 disp = {{ disp |dump|safe }}, // 0=map, 1=streetview, 2=both
		 panoElem = document.getElementById('pano');
		
		// Parse location
		function parseLoc(loc) {
			loc.spd = (settings.units=='imperial')?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;
		}
		
		// Set location manually
		// TODO: Authenticate at server
		function setLocation() {
			if (!'{{user.id}}'==tracuserid) { alert('You are not logged in! '); }
			else {
				if (!navigator.geolocation) { alert('Geolocation not enabled. '); }
				else {
					navigator.geolocation.getCurrentPosition(function(pos){
						socket.emit('app', {
							usr: '{{user.id}}',
							lat: pos.coords.latitude,
							lon: pos.coords.longitude,
							spd: (pos.coords.speed||0)
						});
					}, function(err){
						if (err) { alert('ERROR: '+err); }
						else { location.reload(); }
					}, { enableHighAccuracy:true });
				}
			}
		}

		var getAltitude = function(location, elevator, cb){
			elevator = elevator || new google.maps.ElevationService;
			elevator.getElevationForLocations({
				'locations': [location]
			}, function(results, status) {
				if (status === google.maps.ElevationStatus.OK && results[0]) {
					cb(results[0].elevation);
				}
			});
		}

		var map, marker, elevator;
		function initMap() {
			// Create map
			if (disp!='1' || !settings.showStreetview) {
				map = new google.maps.Map( document.getElementById('map'), {
					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: {{ tracuser.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) {
					var speedSign = document.createElement('div'),
						speedLabel = document.createElement('div'),
						speedText = document.createElement('div'),
						speedUnit = document.createElement('div');
					speedLabel.className = 'spd-label';
					speedText.className = 'spd';
					speedUnit.className = 'spd-unit';
					speedSign.className = 'spd-sign';
					speedText.innerHTML = (settings.units=='imperial')?(parseFloat(last.spd)*2.23694).toFixed():last.spd.toFixed();
					speedLabel.innerHTML = 'SPEED';
					speedUnit.innerHTML = (settings.units=='imperial')?'m.p.h.':'k.p.h.';
					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;
					var 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=='imperial')?(alt*3.28084).toFixed():alt.toFixed(); }
					});
					altitudeUnit.innerHTML = (settings.units=='imperial')?'feet above sea level':'meters above sea level';
					altitudeSign.appendChild(altitudeLabel);
					altitudeSign.appendChild(altitudeText);
					altitudeSign.appendChild(altitudeUnit);
					map.controls[google.maps.ControlPosition.TOP_RIGHT].push(altitudeSign);
				}
			}

			// Create/set streetview
			updateStreet(parseLoc(last),10);
		}
		
		var sv;
		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
		var pano;
		function updateStreet(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,
					};
					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)
					});
				});
			}
		}

		// Sockets
		socket.on('connect',function(){
			socket.emit('room', tracuserid);
		});
		socket.on('trac',function(loc) {
			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=='imperial')?(alt*3.28084).toFixed():alt.toFixed()); }
					});
				}
				map.setCenter({lat:loc.lat,lng:loc.lon});
				marker.setPosition({lat:loc.lat,lng:loc.lon});
			}
			updateStreet(loc,10);
		});
	</script>
{% endblock %}