{% extends "base.html" %}

{% block title %}Viewer{% endblock %}
{% block header_title %}Camera Display for {{ address }}{% endblock %}
{% block id %}viewer{% endblock %}

{% macro information(label, value, id, class=None) %}
  <label for="{{ id }}">{{ label }}:</label>
  <input id="{{ id }}" type="text" readonly="readonly" value="{{ value }}" {% if class %}class="{{ class }}"{% endif %}/>
{% endmacro %}

{% macro checkbox(label, id, selected, disabled=False) %}
  <div data-role="fieldcontain">
    <fieldset data-role="control-group">
      <legend>{{ label }}:</legend>
      <label for="{{ id }}"></label>
      <input 
          type="checkbox" 
        id="{{ id }}" 
        {% if selected %} checked {% endif %} 
        {% if disabled %} readonly="readonly" {% endif %} 
      />
    </fieldset>
  </div>
{% endmacro %}

{% macro select(id, label, options, selected, readonly=False) -%}
  <div data-role="fieldcontain">
  <label for="{{ id }}">{{ label }}</label>
  <select id="{{ id }}" name="{{ id }}" {% if readonly %}readonly="readonly"{% endif %}>
    {% for option in options %}
      <option value="{{ option }}"
        {% if selected==option %}
          selected
        {% endif %}
        >{{ option }}</option>
    {% else %}
      <option>Not supported</option>
    {% endfor %}
  </select>
  </div>
{%- endmacro %}

{% macro button33(options, function) %}
	{% for option in options %}
	<a class="button-33 
		{% if loop.index % 3 == 1 %}
			ui-corner-left
		{% elif loop.index %3 == 0 %}
			ui-corner-right
		{% endif %}
		" data-role="button" href="javascript: {{function}}('{{option}}')"
		{% if option in ["QXGA", "720P"] %} data-icon="alert" {% endif %}>{{option}}</a>
	{% endfor %}
{% endmacro %}

{% macro inputbox(label, id, value, disabled=False) %}
  <label for="{{ id }}">{{ label }}:</label>
  <input id="{{ id }}" type="text" {% if disabled %}readonly="readonly" {% endif %} value="{{ value }}" />
{% endmacro %}

{% macro tab_controls() %}
	<div class="inline ui-grid-a">
		<div class="ui-block-a">
			{{ button( "javascript: switchState()", "Connect", extra='id="stream-connect"', theme="b", enable=not camera.status) }}
			{{ button( "javascript: switchState()", "Disconnect", extra='id="stream-disconnect"', theme="e", enable = camera.status ) }}
		</div>
		<div class="ui-block-b">
			{{ button( "/setup.html?address="+camera.address, "Setup" ) }}
		</div>
	</div>

	<div data-role="fieldcontain">
		<fieldset data-role="controlgroup" data-type="horizontal">
			<legend>Resolution:</legend>
			{{ button33(camera.capabilities.size, "switchResolution") }}
		</fieldset>
	</div>

	<div class="pan-control">
		<div class="ui-controlgroup-label" style="float: left;">Pan:</div>
		<div class="ui-controlgroup-controls">
			<div class="ui-grid-b">
				<div class="ui-block-a">
					<a href="javascript: doConfigure('pan', 'UL')"	data-role="button" data-icon="arrow-u" data-iconpos="notext" class="rotate-45">UL</a>
				</div>
				<div class="ui-block-b">
					<a href="javascript: doConfigure('pan', 'U')"	data-role="button" data-icon="arrow-u" data-iconpos="notext">U</a>
				</div>
				<div class="ui-block-c">
					<a href="javascript: doConfigure('pan', 'UR')"	data-role="button" data-icon="arrow-r" data-iconpos="notext" class="rotate-45">UR</a>
				</div>
				<div class="ui-block-a">
					<a href="javascript: doConfigure('pan', 'L')"	data-role="button" data-icon="arrow-l" data-iconpos="notext">L</a>
				</div>
				<div class="ui-block-b">
					<a href="javascript: doConfigure('pan', 'N')"	data-role="button" data-icon="delete" data-iconpos="notext">Reset</a>
				</div>
				<div class="ui-block-c">
					<a href="javascript: doConfigure('pan', 'R')"	data-role="button" data-icon="arrow-r" data-iconpos="notext">R</a>
				</div>
				<div class="ui-block-a">
					<a href="javascript: doConfigure('pan', 'DL')"	data-role="button" data-icon="arrow-l" data-iconpos="notext" class="rotate-45">DL</a>
				</div>
				<div class="ui-block-b">
					<a href="javascript: doConfigure('pan', 'D')"	data-role="button" data-icon="arrow-d" data-iconpos="notext">D</a>
				</div>
				<div class="ui-block-c">
					<a href="javascript: doConfigure('pan', 'DR')"	data-role="button" data-icon="arrow-d" data-iconpos="notext" class="rotate-45">DR</a>
				</div>
			</div>
		</div>
	</div>

	<div data-role="fieldcontain">
		<fieldset data-role="controlgroup" data-type="horizontal">
			<legend>Flash:</legend>
			<a style="width: 49%" href="javascript: doConfigure('flash', True)" data-role="button">On</a>
			<a style="width: 49%" href="javascript: doConfigure('flash', False)" data-role="button">Off</a>
		</fieldset>
	</div>

	<div data-role="fieldcontain">
		<fieldset data-role="controlgroup" data-type="horizontal">
			<legend>Voice:</legend>
			<a style="width: 49%" href="javascript: doVoice(True)" data-role="button" data-icon="alert">On</a>
			<a style="width: 49%" href="javascript: doVoice(False)" data-role="button" data-icon="alert">Off</a>
		</fieldset>
	</div>

	<div data-role="fieldcontain">
		<fieldset  data-role="controlgroup" data-type="horizontal">
			<legend>Exposure:</legend>
			<a class="button-33" href="javascript: doConfigure('exposure',  1)" data-role="button">66ms</a>
			<a class="button-33" href="javascript: doConfigure('exposure',  2)" data-role="button">135ms</a>
			<a class="button-33 ui-corner-right" href="javascript: doConfigure('exposure',  4)" data-role="button">270ms</a>
			<a class="button-33 ui-corner-left" href="javascript: doConfigure('exposure',  8)" data-role="button">533ms</a>
			<a class="button-33" href="javascript: doConfigure('exposure',  15)" data-role="button">1 s</a>
			<a class="button-33" href="javascript: doConfigure('exposure',  31)" data-role="button">2 s</a>
		</fieldset>
	</div>
{% endmacro %}

{% macro tab_information() %}
	{{ information("Address", camera.address, "stream-address") }}
	{{ information("Name", camera.name, "stream-name") }}
	{{ information("Type", camera.type, "stream-type") }}
	{{ information("Status", camera.status, "stream-status") }}
	{{ information("Stream URL", "/stream/"+camera.address, "stream-url") }}
	{{ information("Last Connection", camera.last, "stream-last") }}
	{{ information("Transport", camera.transport, "stream-transport") }}
	{# 
		{{ information("Automatically Reconnect", camera.reconnect, "stream-reconnect") }}
		{{ information("Reconnect Timeout", camera.reconnect_timeout, "stream-reconnect_timeout") }}
	#}
	{% if pairing_supported %}
		{{ information("Use Device PIN", camera.enable_pincode, "stream-enable_pincode") }}
		{{ information("PIN Code", camera.pincode, "stream-pin") }}
	{% endif %}

	{#
	% if camera.capabilities.battery %}
		{{ information("Battery (mv)", camera.battery, "stream-battery") }}
	{% else %}
		{{ information("Battery (mv)", "Not supported", "stream-battery", class="ui-body-e") }}
	{% endif %
	#}
{% endmacro %}

{% macro tab_sensors() %}
	{{ information("Maker", "Wait...", "sensor-maker") }}
	{{ information("Address", "Wait...", "sensor-address") }}
	{{ information("Camera Date", "Wait...", "sensor-date") }}
	{{ information("Battery", "Wait...", "sensor-battery") }}
	{{ information("Magic Number", "Wait...", "sensor-magic") }}
	{{ information("Case Temperature", "Wait...", "sensor-temperature") }}
	{{ information("Ambient Light", "Wait...", "sensor-ambient") }}
	{{ information("Gravitation", "Wait...", "sensor-gravitation") }}
	{{ information("Compass", "Wait...", "sensor-compass") }}
	{{ information("Extra Information", "Wait...", "sensor-extra") }}
{% endmacro %}

{% block extra_header %}
    <div id="tab" data-role="tabs"> {# style="display: none">#}
        <ul>
            <li><a href="#tab-video" id="video-link">Video</a></li>
            <li><a href="#tab-sensors" id="sensors-link">Sensors</a></li>
            <li><a href="#tab-controls" id="video-controls">Controls</a></li>
            <li><a href="#tab-information" id="information-link">Information</a></li>
        </ul>
    </div>
{% endblock %}

{% block content %}
<div data-airi="mobile">
	<div id="tab-video" class="video-holder">
		<div id="video-content" class="video-player">
			<span>You don't have Flash installed, you can't use this viewer.</span>
			<br>
			<a href="/stream/{{ camera.address.replace(':', '_')}}">But you can watch the stream here</a>
		</div>
	</div>

	<div id="tab-sensors">
		{{ tab_sensors() }}
	</div>

	<div id="tab-controls">
		{{ tab_controls() }}
	</div>

	<div id="tab-information">
		{{ tab_information() }}
	</div>
</div>

<div data-airi="desktop">
	<div id="video" class="video-holder">
		<div id="flash_container" style="display: none"></div>
		<div id="video-content" class="video-player">
			<span>You don't have Flash installed, you can't use this viewer.</span>
			<br>
			<a href="/stream/{{ camera.address.replace(':', '_')}}">But you can watch the stream here</a>
		</div>
	</div>

	<div id="controls" class="video-controls ui-body ui-body-b">
		<form>
			<div data-role="collapsible-set">
				<div data-role="collapsible" data-collapsed="true">
					<h4>Device Information</h4>
					{{ tab_information () }}
				</div>
				<div data-role="collapsible" data-collapsed="true">
					<h4>Camera Management</h4>
					{{ tab_controls() }}
				</div>
				<div data-role="collapsible" data-collapsed="false">
					<h4>Camera Sensors</h4>
					{{ tab_sensors() }}
				</div>
			</div>
		</form>
	</div>
</div>
{% endblock %}

