{% extends "hmi-base.html" %}


{% block header-extras %}
{{ block.super }}
<script>
	function rowUpdate() {
		$.ajax({
			url : "/hmi/rowcanisterstatus/",
			type : "POST",
			data : {
				csrfmiddlewaretoken : '{{csrf_token}}'
			},
			success : function(data, status, jqXHR) {
				$('#row-canister-buttons').html(data);
			}
		});
	}

	$(function() {
		var ajaxtimer;

		$("#cancel-message").dialog({
			{% if showCancel == True %}
			autoOpen : true,
			{% else %}
			autoOpen : false,
			{% endif %}
			closeOnEscape : false,
			modal : true,
			draggable : false,
			buttons : {
				Cancel : function() {
					$("#cancel_row_unlock").val("cancel_unlock");
					$("#canisterDisplayForm").submit();
					$(this).dialog("close");
				}
			},
			open : function(event, ui) {
				$(".ui-dialog-titlebar-close").hide();
				$.idleTimer('destroy');
				ajaxtimer = setInterval(function() {
					$.ajax({
						url : "/hmi/checkrow/",
						type : "POST",
						data : $("#canisterDisplayForm").serialize(),
						success : function(data, status, jqXHR) {
							$('#cancel-message').html(data);
						}
					})
				}, 1000);
				/*1 second*/
			},
			close : function(event, ui) {
				clearInterval(ajaxtimer);
				$.idleTimer(HMI_IDLE_TIMEOUT);

				$(document).bind("idle.idleTimer", function() {
					$("#frmIdle").submit();
				});
			}
		});

		rowUpdate();

		var rowcanistertimer;
		rowcanistertimer = setInterval(function() {
			$.ajax({
				url : "/hmi/rowcanisterstatus/",
				type : "POST",
				data : {
					csrfmiddlewaretoken : '{{csrf_token}}'
				},
				success : function(data, status, jqXHR) {
					$('#row-canister-buttons').html(data);
				}
			})
		}, 2000);
		/*2 seconds*/

	}); 
</script>

{% endblock %}

{% block content %}
{%include 'hmi-rowlock-cancel.html' %}
<form name="canisterDisplayForm" id="canisterDisplayForm" method="post">
	{% csrf_token %}
	<table id="row-canister-buttons" style="width: 100%; height: 100%;">
		{%include 'hmi-row-canister-buttons.html' %}
	</table>
	<input type="hidden" name="cancel_row_unlock" id="cancel_row_unlock" value=""/>
	<input type="hidden" name="current_row" id="current_row" value="{{ currentRow }}"/>
	<input type="hidden" name="pin_entry" id = "pin_entry" value=""/>
	<input type="hidden" name="row_button_pressed" id="row_button_pressed" value=""/>
</form>
{% endblock %}