<html>

	<head>
		<meta charset="utf-8">
		<title>Firefly Viewer</title>		
		<link rel="icon" href="static/docs/icon.png">  

	</head>

	<body>

		<div style="background-color:black; position:absolute; top:0; bottom:0; left:0; right:0;" id='loader'></div>

		<div id="ContentContainer" > 
			<div id="sleep" onclick="hideSleep()" style="display:none; z-index: 6;">
				<div style="font-size: x-large; margin-top:15%"> 
					Firefly has gone to sleep after spending too long between rendering frames, click to wake it back up!
				</div>
				<div style="font-size: small"> 
					Hint: if this is happening frequently it might be because Firefly is being overtaxed!
				</div>
			</div>
			<div id="splash" onclick="showSplash(false)" style="z-index: 5;">
				<div id="splashdiv1"><img id="splashimg" width="80%" src='static/docs/FIREFLY-02_trimmed.png'> </div>
				<div id="splashdiv2">A WebGL tool to explore particle-based data</div>
				<div id="splashdiv3">Aaron Geller / Alex Gurvich / Northwestern</div>
				<div id="splashdiv4">
					<p><b>Instructions:</b></p>
						<ul>
							<li>Right-click and drag with the mouse to rotate your view. </li>
							<li>Use the mouse wheel to zoom in and out. </li>
							<li>Click the Controls bar on the top left to show/hide a user interface.</li>
							<li>Detailed instructions can be found on <a href="https://github.com/ageller/Firefly" target="_blank">the Firefly GitHub page.</a> </li>
							<li><b>h</b>: toggles this help screen on and off. </li>
						</ul>
				</div>
				<div id="splashdivLoader"></div>

				<div id="splashdiv5">Loading...</div>
			</div>

			<div id="annotate_container" class="dropdown-content"></div>

			<div id="WebGLContainer" ></div>

		</div>

<!-- three.js resources -->		
		<script src="static/lib/three.min.r137.js"></script>
		<script src="static/lib/Detector.js"></script>
		<script src="static/lib/TrackballControls.js"></script>
		<script src="static/lib/three-fly-controls.js"></script>
		<script src="static/lib/KeyboardState.js"></script>
		<script src="static/lib/THREEx.FullScreen.js"></script>
		<script src="static/lib/THREEx.WindowResize.js"></script>
		<script src="static/lib/StereoEffect.js"></script>
		<!-- https://github.com/collinhover/threeoctree -->
		<!-- <script src="static/lib/threeoctree.min.js"></script> -->
		
		<!-- d3 -->
		<script src="static/lib/d3.v4.10.2.min.js"></script>

		<!-- tween -->
		<script src="static/lib/Tween.js"></script>

		<!-- web sockets -->
	    <script src="static/lib/socket.io.min.js"></script>

		<!-- for capturing video -->
		<script src="static/lib/CCapture/CCapture.all.min.js"></script>

		<!-- the main attraction -->

		<!-- shaders -->
		<script src="static/shaders/vertex.glsl.js"></script>
		<script src="static/shaders/fragment.glsl.js"></script>
		<script src="static/shaders/fragment_pass2.glsl.js"></script>

        <link rel="stylesheet" type="text/css" href="static/css/UIStyles.css" />
		<link rel="stylesheet" type="text/css" href="static/css/mainStyles.css" />

		<script src="static/js/misc/socketParams.js"></script>
		<script src="static/js/viewer/viewerParams.js"></script>
		<script>
			//called upon loading
			defineSocketParams();
			defineViewerParams();
		</script>
		
		<script src="static/js/misc/utils.js"></script>
		<script src="static/js/misc/windowEvents.js"></script>
		<script src="static/js/viewer/applyUISelections.js"></script>
		<script src="static/js/viewer/createPartsMesh.js"></script>
		<script src="static/js/viewer/renderLoop.js"></script>
		<script src="static/js/viewer/initViewer.js"></script>
		<script src="static/js/viewer/runTweens.js"></script>

		<script src="static/js/octree/octreeInit.js"></script>
		<script src="static/js/octree/octreeCreatePartsMesh.js"></script>
		<script src="static/js/octree/octreeRenderLoop.js"></script>

		<!-- katai.io reqs-->
		<script src="static/js/misc/kaitai-struct/KaitaiStream.js"></script>
		<script src="static/js/misc/MyArrayBuffer.js"></script>
		<script src="static/js/misc/FireflyFormat1.js"></script>
		<script src="static/js/misc/FireflyOctnodeSubstring.js"></script>
		
		<script>
			//called upon loading
			connectViewerSocket();
			makeViewer();
			getFilenames("static/");
		</script>

	</body>


</html>
