{% extends "base.html" %}


{% block header-extras %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/hmi.css" />
<script>
	function oskcallback(key) {
		var box = $('#customtz');
		var text = box.val();
		var pos = box.caret();
		switch (key) {
			case '\b':
				box.val(text.substring(0, pos - 1) + text.substring(pos));
				box.caret(pos - 1);
				break;
			case '\3':
				box.caret(pos - 1);
				break;
			case '\4':
				box.caret(pos + 1);
				break;
			default:
				box.val(text.substring(0, pos) + key + text.substring(pos));
				box.caret(pos + 1);
		}
		box.focus();
	}

	$(function() {
		{% if tzdetail == 'America/Los_Angeles' or tzdetail == 'Pacific/Honolulu' or tzdetail == 'America/Denver' or tzdetail == 'America/Phoenix' or tzdetail == 'America/Chicago' or tzdetail == 'America/Juneau' or tzdetail == 'America/New_York'%}
		$('#changeCustomTZ').hide();
		{% endif %}

		$('input:radio').screwDefaultButtons({
			image : 'url("{{ STATIC_URL }}img/radioSmall.jpg")',
			width : 43,
			height : 43
		});

		$("input[name='tzselect']").change(function() {
			if ($(this).val() == 'other') {
				$('#oskdialog').dialog("open");
				$('#changeCustomTZ').show();
			} else {
				$('#changeCustomTZ').hide();
			}
		});

		$('#other').click(function() {
			$('#oskdialog').dialog("open");
		});

		$('#changeCustomTZ').click(function() {
			$('#oskdialog').dialog("open");
		});

		$("#oskdialog").dialog({
			autoOpen : false,
			closeOnEscape : false,
			modal : true,
			width : 785,
			position: { my: "left top", at: "left top", of: window },
			draggable : false,
			buttons : [{
				text : "Cancel",
				"class" : 'dialog-button-right',
				click : function() {
					$(this).dialog("close");
				}
			}, {
				text : "Save",
				"class" : 'dialog-button-left',
				click : function() {
					$("#custom_timezone").val($("#customtz").val());
					$("#other_label").html("Other: " + $("#customtz").val());
					$(this).dialog("close");
				}
			}, {
				text : "Clear",
				"class" : 'dialog-button-center',
				click : function() {
					$('#customtz').val('');
					$('#customtz').focus();
				}
			}],
			open : function(event, ui) {
				$(".ui-dialog-titlebar-close").hide();
				$('#osk').loadLayout('{{ STATIC_URL }}js/layouts/hmi-default.json', oskcallback)
			}
		});
	});

</script>
{% endblock %}

{% block body %}
<form class="full-screen-form" name="timezoneForm" id="timezoneForm" method="post">
	{% csrf_token %}
	<div id="oskdialog" title="Enter Custom Timezone (ex: America/Chicago)">
		<p class="osk-p">
			<input class="osk-text-input" type="text" id="customtz" name="customtz" value="" size="50"/>
		</p>
		<div id="osk"></div>
	</div>
	<table class="grey-background">
		<tr>
			<td class="full-screen-td">
			<div id="timezone-display" class="full-screen-container">
				<fieldset class="titled-border-fieldset-timezone">
					<legend class="titled-border-legend">
						Timezone
					</legend>
					<p style="padding-left: 15px;">
						<b>Current Date/Time:</b> {{ currentDate }}
					</p>
					<p style="padding-left: 15px;">
						<b>Current Timezone:</b> {{ currentTimezone }} ({{ tzdetail }})
					</p>

					<div class="radio">
						<table style="width: 95%;">
							<tr style="height: 100px;">
								<td style="width: 50%;">
								<input type="radio" id="pacific" name="tzselect" value="America/Los_Angeles"
								{% if tzdetail == 'America/Los_Angeles' %} checked{% endif %}/>
								<label for="pacific">Pacific Time Zone</label></td>
								<td style="width: 50%;">
								<input type="radio" id="hawaii" name="tzselect" value="Pacific/Honolulu"
								{% if tzdetail == 'Pacific/Honolulu' %} checked{% endif %}/>
								<label for="hawaii">Hawaiian Time Zone</label></td>
							</tr>
							<tr style="height: 100px;">
								<td style="width: 50%;">
								<input type="radio" id="mountain" name="tzselect" value="America/Denver"
								{% if tzdetail == 'America/Denver' %} checked{% endif %}/>
								<label for="mountain">Mountain Time Zone</label></td>
								<td style="width: 50%;">
								<input type="radio" id="arizona" name="tzselect" value="America/Phoenix"
								{% if tzdetail == 'America/Phoenix' %} checked{% endif %}/>
								<label for="arizona">Arizona Time Zone</label></td>
							</tr>
							<tr style="height: 100px;">
								<td style="width: 50%;">
								<input type="radio" id="central" name="tzselect" value="America/Chicago"
								{% if tzdetail == 'America/Chicago' %} checked{% endif %}/>
								<label for="central">Central Time Zone</label></td>
								<td style="width: 50%;">
								<input type="radio" id="alaska" name="tzselect" value="America/Juneau"
								{% if tzdetail == 'America/Juneau' %} checked{% endif %}/>
								<label for="alaska">Alaska Time Zone</label></td>
							</tr>
							<tr style="height: 100px;">
								<td style="width: 50%;">
								<input type="radio" id="eastern" name="tzselect" value="America/New_York"
								{% if tzdetail == 'America/New_York' %} checked{% endif %}/>
								<label for="eastern">Eastern Time Zone</label></td>
								<td style="width: 50%;">
								<input type="radio" id="other" name="tzselect" value="other"
								{% if tzdetail != 'America/Los_Angeles' and tzdetail != 'Pacific/Honolulu' and tzdetail != 'America/Denver' and tzdetail != 'America/Phoenix' and tzdetail != 'America/Chicago' and tzdetail != 'America/Juneau' and tzdetail != 'America/New_York'%} checked{% endif %}/>
								<label id="other_label" for="other">Other {% if tzdetail != 'America/Los_Angeles' and tzdetail != 'Pacific/Honolulu' and tzdetail != 'America/Denver' and tzdetail != 'America/Phoenix' and tzdetail != 'America/Chicago' and tzdetail != 'America/Juneau' and tzdetail != 'America/New_York'%} ({{tzdetail}}){% endif %}</label>
								<button type="button" id="changeCustomTZ" name="changeCustomTZ" style="height: 40px; vertical-align: 14px;">
									Change
								</button></td>
							</tr>
						</table>
					</div>
				</fieldset>
				<div id="formButtons">
					<button style="width: 200px; height: 70px; margin-top: 5px; float: left;" id="savetz" name="savetz">
						Apply Changes
					</button>
					<button style="width: 200px; height: 70px; margin-top: 5px; float: right;" id="canceltz" name="canceltz">
						Close
					</button>
				</div>
			</div></td>
		</tr>
	</table>
	<input type="hidden" name="custom_timezone" id="custom_timezone" value=""/>
</form>
{% endblock %}