<!doctype html>
<html>
	<head>
		<title>Engine Console Test</title>
		<meta charset="utf-8">
		<script type="text/javascript" src="/static/jquery.min.js"></script>
		<link rel="stylesheet" href="/static/bootstrap.css">
		<script type="text/javascript">
			var T = {
				"update": function () {
					this.value += RR.value*timestep/1000;
					this.value -= this.value*temperature_decay*timestep/1000;
					if (this.value < 0) { this.value = 0; }
				},
				"out": function () {
					$('#temp-out').html(this.value);
					if (this.value > damage_threshhold) { $('#damage').show();} 
					else { $('#damage').hide(); }
					if (this.value < ignition_threshhold) { $('#noignition').show(); } 
					else { $('#noignition').hide(); }
				},
				"value": 0,
			};
			var F = {
				"update": function () { this.value = $('[name=fuel_a]').val(); },
				"out": function () {},
				"value": 0,
			};
			var RR = {
				"update": function () { this.value = T.value * F.value; },
				"out": function () {},
				"value": 0,
			};

			var ignition_threshhold = 2;
			var damage_threshhold = 10;
			var temperature_decay = 0.5;
			var timestep=10;

			var quantities = [T, F, RR];
			var a, b;

			$(document).ready(function() {
				$('[name=ignition]').on('click', function() {
					T.value = T.value + 5;
					}).trigger('click');
				a = setInterval(jQuery.each, timestep, quantities, function() { this.update(); });
				b = setInterval(jQuery.each, timestep, quantities, function() { this.out(); });
				});
		</script>
		<style type="text/css">
		</style>
	</head>
	<body>
		<div id="fuela">
			<label for="fuel_a">Fuel A</label>
			<input type="range" name="fuel_a" min=0 max=1 step=0.01>
		</div>

		<div id="fuelb">
			<label for="fuel_b">Fuel B</label>
			<input type="range" name="fuel_b" min=0 max=1 step=0.01>
		</div>
		
		<div id="starter">
			<input type="button" name="ignition" value="Ignite!">
		</div>
		<ul id="readout">
			<li><span id="temp-out">0</span> degrees</li>
			<li id="noignition" class="label label-info">No ignition</li>
			<li id="damage" class="label label-warning">DAMAGE!</li>
		</ul>
	</body>
</html>