{% 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 moveAdjIndex = 3;
		var moveVal = $('#bsf-move-amount').val();

		if (moveVal.length > 0) {
			for (var i = 0; i < moveAdjValues.length; i++) {
				if (moveVal == moveAdjValues[i]) {
					moveAdjIndex = i;
					break;
				}
			}
		}

		$('#minus-amount').click(function() {
			moveAdjIndex--;
			if (moveAdjIndex < 0) {
				moveAdjIndex = 0;
			}
			$('#bsf-move-amount').val(moveAdjValues[moveAdjIndex]);
		});

		$('#plus-amount').click(function() {
			moveAdjIndex++;
			if (moveAdjIndex > moveAdjValues.length - 1) {
				moveAdjIndex = moveAdjValues.length - 1;
			}
			$('#bsf-move-amount').val(moveAdjValues[moveAdjIndex]);
		});
	}); 
</script>
{% endblock %}

{% block adv-diag-content %}
<form class="full-screen-form" name="bsfDiagForm" id="bsfDiagForm" method="post">
	{% csrf_token %}
	<div class="grey-background">
		<table style="width: 100%;">
			<tr>
				<td style="width: 400px; height: 465px;">
				<fieldset class="titled-border" style="height:98%; width: 98%;">
					<legend class="titled-border-legend">
						Feeder Trolley
					</legend>
					<table style="width: 100%; height: 437px;">
						<tr>
							<td align="center">
							<button id="feeder-up" name="feeder-up" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_up.png"></td>
										<td class="settings-bottom-button-cell">Feeder<br>Up</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="feeder-down" name="feeder-down" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_down.png"></td>
										<td class="settings-bottom-button-cell">Feeder Down</td>
									</tr>
								</table>
							</button></td>
						</tr>
						<tr style="height: 9px;">
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td align="center">
							<button id="feeder-out" name="feeder-out" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_left.png"></td>
										<td class="settings-bottom-button-cell">Feeder<br>Out</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="feeder-in" name="feeder-in" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_right.png"></td>
										<td class="settings-bottom-button-cell">Feeder<br>in</td>
									</tr>
								</table>
							</button></td>
						</tr>
						<tr style="height: 100%;">
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td align="left" colspan="2" style="padding-left: 10px;">Move Amt:
							<input id="bsf-move-amount" name="bsf-move-amount" type="text" style="width: 50px;"
							value="{{ bsfIncrement }}" class="diag-short-input">
							in.</td>
						</tr>
						<tr>
							<td align="left" colspan="2" 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>
						</tr>
					</table>
				</fieldset></td>
				<td style="width: 400px; height: 465px;">
				<fieldset class="titled-border" style="height:98%; width: 98%;">
					<legend class="titled-border-legend">
						Positions
					</legend>
					<table style="width: 100%; height: 437px;">
						<tr>
							<td align="center">
							<button id="handoff-start" name="handoff-start" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_2uparrow.png"></td>
										<td class="settings-bottom-button-cell">Handoff Start</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="handoff-finish" name="handoff-finish" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_2uparrow.png"></td>
										<td class="settings-bottom-button-cell">Handoff Finish</td>
									</tr>
								</table>
							</button></td>
						</tr>
						<tr>
							<td align="center">
							<button id="stack-depth" name="stack-depth" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_2downarrow.png"></td>
										<td class="settings-bottom-button-cell">Stack Depth</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="stack-depth-push" name="stack-depth-push" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_2downarrow.png"></td>
										<td class="settings-bottom-button-cell">Stack Depth + Push</td>
									</tr>
								</table>
							</button></td>
						</tr>
						<tr>
							<td align="center">
							<button id="feeder-bottom" name="feeder-bottom" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_2downarrow.png"></td>
										<td class="settings-bottom-button-cell">Feeder Bottom</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="reset-stack-depth" name="reset-stack-depth" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_run.png"></td>
										<td class="settings-bottom-button-cell">Reset Stack Depth</td>
									</tr>
								</table>
							</button></td>
						</tr>
						<tr>
							<td align="center">
							<button id="bsf-pump" name="bsf-pump" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell">{% if bsfpump == '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 %}</td>
										<td class="settings-bottom-button-cell">Feeder Pump</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="re-zero-bsf" name="re-zero-bsf" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_gohome.png"></td>
										<td class="settings-bottom-button-cell">Re-Zero Feeder</td>
									</tr>
								</table>
							</button></td>
						</tr>
						<tr>
							<td align="right" colspan="2">
							<button id="all-stop" name="all-stop" class="diag-action-button" style="margin-right: 7px;">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_stop.png"> STOP
							</button></td>
						</tr>
					</table>
				</fieldset></td>
			</tr>
		</table>
	</div>
	<input type="hidden" name="bsf-pump-icon" id="bsf-pump-icon" value="{{ bsfpump }}"/>
</form>
{% endblock %}