{% extends "hmi-adv-diag-screen.html" %}

{% block header-extras %}
{{ block.super }}
<script>
	$(function() {
		var moveAdjValues = ["0.01", "0.05", "0.1", "0.5", "1", "2", "3", "4", "5"];
        var spinAdjValues = ["0.25", "0.5", "1", "1.5", "2", "5", "10"];
		var moveAdjIndex = 3;
		var spinAdjIndex = 3;
		var moveVal = $('#eoat-move-amount').val();
		var spinVal = $('#motor-spin-rate').val();
		
		if (moveVal.length > 0) {
			for (var i = 0; i < moveAdjValues.length; i++) {
				if (moveVal == moveAdjValues[i]) {
					moveAdjIndex = i;
					break;
				}
			}
		}
		
		if (spinVal.length > 0) {
			for (var j = 0; j < spinAdjValues.length; j++) {
				if (spinVal == spinAdjValues[j]) {
					spinAdjIndex = j;
					break;
				}
			}
		}

		$('#minus-spin-amount').click(function() {
			spinAdjIndex--;
			if (spinAdjIndex < 0) {
				spinAdjIndex = 0;
			}
			$('#motor-spin-rate').val(spinAdjValues[spinAdjIndex]);
		});
		
		$('#plus-spin-amount').click(function() {
			spinAdjIndex++;
			if (spinAdjIndex > spinAdjValues.length - 1) {
				spinAdjIndex = spinAdjValues.length - 1;
			}
			$('#motor-spin-rate').val(spinAdjValues[spinAdjIndex]);
		});
		
		$('#minus-amount').click(function() {
			moveAdjIndex--;
			if (moveAdjIndex < 0) {
				moveAdjIndex = 0;
			}
			$('#eoat-move-amount').val(moveAdjValues[moveAdjIndex]);
		});
		
		$('#plus-amount').click(function() {
			moveAdjIndex++;
			if (moveAdjIndex > moveAdjValues.length - 1) {
				moveAdjIndex = moveAdjValues.length - 1;
			}
			$('#eoat-move-amount').val(moveAdjValues[moveAdjIndex]);
		});
	}); 
</script>
{% endblock %}

{% block adv-diag-content %}
<form class="full-screen-form" name="eoatDiagForm" id="eoatDiagForm" method="post">
	{% csrf_token %}
	<div class="grey-background">
		<table style="width: 100%;">
			<tr>
				<td style="width: 400px; height: 350px;">
				<fieldset class="titled-border" style="height:98%; width: 98%;">
					<legend class="titled-border-legend">
						Canister Drives
					</legend>
					<table style="width: 100%; height: 325px;">
						<tr>
							<td align="center">
							<button id="eoat-spin-o" name="eoat-spin-o" class="train-button">
								{% if omotor == "on" %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_stop.png">
								{% else %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_reload.png">{% endif %} Top Left (O)
							</button></td>
							<td align="center">
							<button id="eoat-spin-p" name="eoat-spin-p" class="train-button">
								{% if pmotor == "on" %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_stop.png">
								{% else %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_reload.png">{% endif %} Top Right (P)
							</button></td>
						</tr>
						<tr style="height: 10px;">
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td align="center">
							<button id="eoat-spin-m" name="eoat-spin-m" class="train-button">
								{% if mmotor == "on" %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_stop.png">
								{% else %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_reload.png">{% endif %} Low Left (M)
							</button></td>
							<td align="center">
							<button id="eoat-spin-n" name="eoat-spin-n" class="train-button">
								{% if nmotor == "on" %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_stop.png">
								{% else %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_reload.png">{% endif %} Low Right (N)
							</button></td>
						</tr>
						<tr style="height: 100%;">
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td align="left" colspan="2" style="padding-left: 10px;">Spin Rate:
							<input id="motor-spin-rate" name="motor-spin-rate" type="text" style="width: 50px;"
							value="{{ spinRate }}" class="diag-short-input">
							rev/sec</td>
						</tr>
						<tr>
							<td align="left" colspan="2" style="padding-left: 10px;">
							<button id="minus-spin-amount" name="minus-spin-amount" type="button" class="diag-move-adjust-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_remove.png">
							</button>
							<button id="plus-spin-amount" name="plus-spin-amount" type="button" class="diag-move-adjust-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_add.png">
							</button></td>
                            <td align="right">
				<button id="all-stop" name="all-stop" class="diag-action-button">
					<img class="img-rounded" src="{{ STATIC_URL}}img/cc_stop.png"> STOP
				</button></td>
						</tr>
					</table>
				</fieldset></td>
				<td style="width: 400px; height: 465px;" rowspan="2">
				<fieldset class="titled-border" style="height:98%; width: 98%;">
					<legend class="titled-border-legend">
						Engage/Forks
					</legend>
					<table style="width: 100%; height: 437px;">
						<tr>
							<td align="center">
							<button id="x-move-in" name="x-move-in" class="diag-action-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_up.png"> X In
							</button></td>
							<td align="center">
							<button id="x-move-out" name="x-move-out" class="diag-action-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_down.png"> X Out
							</button></td>
						</tr>
						<tr>
							<td align="center">
							<button id="eoat-engage" name="eoat-engage" class="diag-action-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_2downarrow.png"> Engage
							</button></td>
							<td align="center">
							<button id="eoat-disengage" name="eoat-disengage" class="diag-action-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_2uparrow.png"> Disengage
							</button></td>
						</tr>
						<tr>
							<td align="center">
							<button id="u-move-in" name="u-move-in" class="diag-action-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_up.png"> U In
							</button></td>
							<td align="center">
							<button id="u-move-out" name="u-move-out" class="diag-action-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_down.png"> U Out
							</button></td>
						</tr>
						<tr>
							<td align="center">
							<button id="v-move-left" name="v-move-left" class="diag-action-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_left.png"> V Left
							</button></td>
							<td align="center">
							<button id="v-move-right" name="v-move-right" class="diag-action-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_right.png"> V Right
							</button></td>
						</tr>
						<tr>
							<td align="left" style="padding-left: 10px; vertical-align: bottom;">Move Amt:
							<input id="eoat-move-amount" name="eoat-move-amount" type="text" style="width: 50px;"
							value="{{ eoatIncrement }}" class="diag-short-input">
							in.</td>
                            <td align="center">
                                <button id="init-teach" name="init-teach" class="diag-action-button">
								Init Teach
							</button>
                            </td>
						</tr>
						<tr>
							<td align="left" style="padding-left: 10px;">
							<button id="minus-amount" name="minus-amount" type="button" class="diag-move-adjust-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_remove.png">
							</button>
							<button id="plus-amount" name="plus-amount" type="button" class="diag-move-adjust-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_add.png">
							</button></td>
                            <td align="center">
                                <button id="uv-index" name="uv-index" class="diag-action-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_run.png">Index
							</button>
                            </td>
						</tr>
					</table>
				</fieldset></td>
			</tr>
			<tr>
				<td style="width: 400px; height: 115px;">
				<fieldset class="titled-border" style="height:98%; width: 98%;">
					<legend class="titled-border-legend">
						Misc
					</legend>
					<table style="width: 100%; height: 94px;">
						<tr>
							<td align="center">
							<button id="eoat-lights" name="eoat-lights" class="train-button">
								{% if eoatlights == "on" %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/light_switch_on.png">
								{% else %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/light_switch.png">{% endif %} Lights
							</button></td>
							<td align="center">
							<button id="eoat-safe-travel" name="eoat-safe-travel" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_gohome.png"> Safe Travel
							</button></td>
						</tr>
					</table>
				</fieldset></td>
			</tr>
		</table>
	</div>
	<input type="hidden" name="eoat-lights-icon" id="eoat-lights-icon" value="{{ eoatlights }}"/>
	<input type="hidden" name="o-motor-icon" id="o-motor-icon" value="{{ omotor }}"/>
	<input type="hidden" name="p-motor-icon" id="p-motor-icon" value="{{ pmotor }}"/>
	<input type="hidden" name="m-motor-icon" id="m-motor-icon" value="{{ mmotor }}"/>
	<input type="hidden" name="n-motor-icon" id="n-motor-icon" value="{{ nmotor }}"/>
</form>
{% endblock %}