work_backwards.html

<a name="work_backwards"></a>
<form>
  <fieldset>
		<legend>Work Backwards</legend>
		<p>Further instructions for part 5 can go here if necessary</p>
		<div class="form-group">
			<label for="bursts">Burst Length</label>
			<input type="text" name="bursts" id="bursts">
		</div>
		<div class="form-group">
			<label for="seconds">Seconds between bursts</label>
			<input type="text" name="seconds" id="seconds">
		</div>
		<div class="form-group">
			<label for="ammo_saved">Ammunition Saved</label>
			<input type="text" class="red_dial" name="ammo_saved" id="ammo_saved" />
		</div>
		<button type="submit" class="btn btn-default pull-right" id="start_over_button">Start Over</button>
	</fieldset>
</form>
<script>
$(document).ready(function() {
	$(".red_dial").knob({ 'inline': false, 'step':1, 'fgColor': '#5E040E', 'inputColor': '#5E040E', 'bgColor': '#ffffff', 'angleOffset': -125, 'angleArc': 250, 'min': 0, 'max': 3310 });

	$("#seconds").simpleSlider({ 'range': '1,100', 'theme':'volume' });

	$("#bursts").simpleSlider({ 'range': '1,100', 'theme':'volume' });

	$("#seconds").bind("slider:changed", function (event, data) {
	  $("#ammo_saved").val(data.value * $("#bursts").val()).trigger('change');
	});

	$("#bursts").bind("slider:changed", function (event, data) {
	  $("#ammo_saved").val(data.value * $("#seconds").val()).trigger('change');
	});

	$("#start_over_button").on('click', function(){
		location.reload();
		return false;
	});

});
</script>