<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="splash" 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>

			<img id="stream">


		</div>

		<!-- d3 -->
		<script src="static/lib/d3.v4.10.2.min.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 -->

		<!-- my style sheet -->
		<link rel="stylesheet" type="text/css" href="static/css/mainStyles.css" />

		<!-- my js scripts -->
		<script src="static/js/misc/socketParams.js"></script>
		<script src="static/js/misc/windowEvents.js"></script>
		<script src="static/js/streamer/initStreamer.js"></script>

		<script>
			window.onload = initFPS( {{ input|tojson|safe }} );
		</script>
	</body>


</html>
