<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>Image Dimensions Viewer</title>

<style type="text/css">

body {
    font-family: arial;
}
form dir {
    padding:0px;
    margin:0px;
}
.img_panel {
    {% if size.height %} height: {{ size.height }}px;{% endif %}
    {% if size.width %} width: {{ size.width }}px;{% endif %}
    border: solid white 2px;
    margin: 5px;
}


.selected_panel {
    border-color: red;
}

#header {
    background: #ddd;
    padding: 10px 10px 5px 10px;
}
#header dir{
    padding:0px;
    margin:0px;
}
</style>

<!-- links to current version of jquery -->
{% include "webgateway/base/includes/script_src_jquery.html" %}
<script type="text/javascript" src="{% static 'webtest/js/image_dims.js' %}"></script>

</head>

<body>
    
<!-- top elements span page -->
<div id="top-nav">
    <a href="{% url 'webtest_index' %}">Home</a> |
    <a href="{% url 'weblogout' %}">Logout</a>
</div>

<div>
    Displays Image planes in a grid with chosen dimensions along each axis.
</div>

<div id="top-info">
    {{ image.name }}
</div>


<div>
    
<form method='get' action="">
    <div>
        Greyscale:
        <input type="checkbox" name="mode" {% ifequal mode "g" %} checked="true" {% endifequal %} />
    </div>
    <div>
        <input type="submit" value='update' />
    </div>

<!-- big table has dimension choosers and contains table of grid images -->
<table>
    <tr>
        <td></td>
        <td>
            <select name="xDim">
                <option value="T" {% ifequal xDim "T" %} selected=true {% endifequal %} >Time</option>
                <option value="Z" {% ifequal xDim "Z" %} selected=true {% endifequal %} >Z</option>
                <option value="C" {% ifequal xDim "C" %} selected=true {% endifequal %} >Channel</option>
            </select>
            <input type="text" size='2' name="xFrames" {% if xFrames %} value="{{ xFrames }}" {% endif %} />
        </td>
    </tr>
    <tr>
        <td valign='top'>
            &nbsp<br/>
            <select name="yDim">
                <option value="T" {% ifequal yDim "T" %} selected=true {% endifequal %} >Time</option>
                <option value="Z" {% ifequal yDim "Z" %} selected=true {% endifequal %} >Z</option>
                <option value="C" {% ifequal yDim "C" %} selected=true {% endifequal %} >Channel</option>
            </select>
            <br />
            <input type="text" size='2' name="yFrames" {% if yFrames %} value="{{ yFrames }}" {% endif %} />
        </td>
        <td>
            
<table border=0>
    {% for row in grid %}
    
        {% if forloop.first %}
        <!-- column names -->
        <td></td>
            {% for x in xRange %}
                <td>{{ xDim }}: {{ x }} </td>
            {% endfor %}
        {% endif %}
        
    <tr>
        {% for cell in row %}
            
            {% if forloop.first %}
            <!-- row name -->
            <td>{{ yDim }}: {{forloop.parentloop.counter}}</td>
            {% endif %}
            
            <td> 
                <img class='img_panel' izct='{{ cell }}' src="{% url 'webgateway_render_image' cell.0 cell.1 cell.3 %}?{% if cell.2 %}c={{ cell.2 }}&{% endif %}m={{ mode }}" />
            </td>
        {% endfor %}
    </tr>
    {% endfor %}
</table>
    
        </td>
    </tr>
    </table>

</form>


</div>



</body> </html>