<!DOCTYPE html>
<html lang="en">
	<head>
        <title>Object Preview</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				background-color: black;
				margin: 0px;
				overflow: hidden;
				background-size: 100% 100%;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript" src="{{ url_for('static', filename='ColladaLoader.js') }}"></script>
		<script type="text/javascript" src="{{ url_for('static', filename='three.min.js') }}"></script>


		<script>
		function changeX(distance) {
			camera.position.x += distance;
		}

		function changeY(distance) {
			camera.position.y += distance;
		}

		function changeZ(distance) {
			camera.position.z += distance;
		}

		function angleX(radians) {
			camera.rotation.x += radians
		}

		function angleY(radians) {
			camera.rotation.y += radians
		}

		function angleZ(radians) {
			camera.rotation.z += radians
		}

		function getLocation(){
			return [camera.position.x, camera.position.y, camera.position.z]
		}

		function getAngle(){
			return [camera.rotation.x, camera.rotation.y, camera.rotation.z]
		}

		var camera, renderer, objects;
		var particleLight;
		var scene = new THREE.Scene();
		var dae;
		var objectList = ['teapot.dae'];
		init();
		var loader = new THREE.ColladaLoader();
		loader.options.convertUpAxis = true;

		for (var i=0; i<objectList.length; i++) {
			console.log(i+" "+objectList[i]);
			loader.load( objectList[i], function ( collada ) {
				dae = collada.scene;
				dae.scale.x = dae.scale.y = dae.scale.z = 0.02;
				dae.updateMatrix();
				scene.add(dae);
				animate();
			});
		}

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 2, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.position.set( 2, 2, 3 );


				particleLight = new THREE.Mesh( new THREE.SphereGeometry( 8, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );
				scene.add( particleLight );

				// Lights

				scene.add( new THREE.AmbientLight( 0x888888 ) );

				var pointLight = new THREE.PointLight( 0xffffff, 2 );
				particleLight.add( pointLight );

				renderer = new THREE.WebGLRenderer();
				renderer.setSize( window.innerWidth/2, window.innerHeight/2 );

				container.appendChild( renderer.domElement );


				window.addEventListener( 'resize', onWindowResize, false );


				//camera.position.set({{lat}},{{long}},{{alt}});
				//camera.rotation.set({{pitch}},{{roll}},{{yaw}});
			}

			function onWindowResize() {

				camera.aspect = (window.innerWidth/2) / (window.innerHeight/2);
				camera.updateProjectionMatrix();

				renderer.setSize( (window.innerWidth/2), (window.innerHeight/2));

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				render();

			}

			var clock = new THREE.Clock();

			function render() {

				var timer = Date.now() * 0.0005;


//				particleLight.position.x = Math.sin( timer * 4 ) * 3009;
//				particleLight.position.y = Math.cos( timer * 5 ) * 4000;
//				particleLight.position.z = Math.cos( timer * 4 ) * 3009;

				camera.position.x = 10;
				camera.position.y = 20;
				camera.position.z = 40;

				camera.lookAt( new THREE.Vector3(.3, -.1, 0));

				particleLight.position.x = 100.0;
				particleLight.position.y = 100.0;
				particleLight.position.z = 20.0;

				console.log(particleLight.position.x, particleLight.position.y, particleLight.position.z);

				THREE.AnimationHandler.update( clock.getDelta() );

				renderer.render( scene, camera );
			}

		</script>
		<font color = "white">
		<h1>Upload success!<h1>
		<h2>Filename: {{fn}}</h2>
		<h2>Latitude: {{lat}}</h2>
		<h2>Longitude: {{long}}</h2>
	  </font>
		<!---roughly .2 degrees
		we need to work on finding precise values yay -->
		<button onclick="changeX(.5)"> + lat </button>
		<button onclick="changeX(-.5)"> - lat </button>
		<button onclick="changeY(.5)"> + long </button>
		<button onclick="changeY(-.5)"> - long </button>
		<button onclick="changeZ(.5)"> + alt </button>
		<button onclick="changeZ(-.5)"> - alt </button>
		<button onclick="angleX(.004)"> + pitch </button>
		<button onclick="angleX(-.004)"> - pitch </button>
		<button onclick="angleY(.004)"> + roll </button>
		<button onclick="angleY(-.004)"> - roll </button>
		<button onclick="angleZ(.004)"> + yaw </button>
		<button onclick="angleZ(-.004)"> - yaw </button>
        <!--found example where roll and yaw are switched -->
	</body>
</html>
