{% extends "webgateway/base/base_main.html" %}

{% block title %}Split View Figure{% endblock %}


{% block link %}
{% endblock %}

{% block script %}
<style type="text/css">

body {
    font-family: arial;
}
form dir {
    padding:0px;
    margin:0px;
}
.img_panel {
    {% if size.height %} max-height: {{ size.height }}px;{% endif %}
    {% if size.width %} max-width: {{ size.width }}px;{% endif %}
    border-width: 0px;
    margin: 5px;
}
.channel_name {
    font-size: 130%;
    text-align: center;
}

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

<style type="text/css">
.image_label
    {
        position: relative;
        left: 100px;
        -moz-transform:rotate(-90deg); 
        -moz-transform-origin: center center;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: center center;
        -o-transform: rotate(-90deg);
        -o-transform-origin:  center center;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        
    }
.label_cell {
    position: relative;
}
</style>

<!-- this page is designed to work without jQuery, but use jQuery when this page is loaded E.g. into webclient -->
<script>
    $(document).ready(function() {

        $("#split_view_fig_form").ajaxForm({
            success: function(data) {

                var new_split_fig_data = $(data);
                var panel = $("#split_view_fig_content", new_split_fig_data);
                $("#split_view_fig_content").html(panel);
            }
        });
    });

function hideHeader() {
    if (document.getElementById) {
        document.getElementById("header").style.display = 'none';
    }
    return false;
}
</script>
{% endblock %}


{% block body %}
<div id="header">
    
    <div style="float:left">
    <form id="split_view_fig_form" method='get' action="">
        <div>
            <label>Image IDs</label>
            <input type="text" name="imageIds" {% if imageIds %} value="{{ imageIds }}" {% endif %} /> 
            <a href="{% url 'webtest_split_view_figure' %}">Clear</a>
        </div>
    {% if imageIds %}
        <div style="float:left">
            <div>
            Projection:<br />
            <input type="radio" name="proj" value="normal" {% ifequal proj 'normal' %} checked="true" {% endifequal %} />
                Single Z-section <br />
            <input type="radio" name="proj" value="intmax" {% ifequal proj 'intmax' %} checked="true" {% endifequal %} /> 
                Maximum Intensity Projection<br />
            <input type="radio" name="proj" value="intmean" {% ifequal proj 'intmean' %} checked="true" {% endifequal %} /> 
                Mean Intensity Projection
            </div>
            <hr />
            <div>
            <label>Split Channels Grey</label>
            <input type="checkbox" name="split_grey" {% if split_grey %} checked="true" {% endif %} /> <br />
            <label>Show Channel Names on Merged Panel</label>
            <input type="checkbox" name="merged_names" {% if merged_names %} checked="true" {% endif %} />
            </div>
        </div>
        <div>
            Panel Sizes:<br />
            Max Width:
            <input type="text" name="width" {% if size.width %} value="{{ size.width }}" {% endif %} /> <br />
            Max Height:
            <input type="text" name="height" {% if size.height %} value="{{ size.height }}" {% endif %} />
        </div>
        <div style="clear: both"></div>
        <div>
            <table cellspacing='3'>
            <tr>
                <td>
                    Channel Name (on/off)<br />
                    Rendering (apply to all)
                </td>
            {% for c in channels %}
                <td>
                    <div style="background:#{{c.colour}}">
                    <input type="text" size='10' name="cName{{c.index}}" {% if c.name %} value="{{ c.name }}" {% endif %} />
                    <input type="checkbox" name="cActive{{c.index}}" {% if c.active %} checked="true" {% endif %} />
                    </div>
                    <div>
                        <input type="text" size='3' name="cStart{{c.index}}" {% if c.start %} value="{{ c.start }}" {% endif %} />
                        -
                        <input type="text" size='3' name="cEnd{{c.index}}" {% if c.end %} value="{{ c.end }}" {% endif %} />
                        <input type="checkbox" name="cRenderAll{{c.index}}" {% if c.render_all %} checked="true" {% endif %} />
                        
                    </div>
                </td>
            {% endfor %}
                <td>
                    <table>
                {% for c in channels %}
                <tr>
                    <td>
                        {{ c.name }}
                    </td><td bgcolor="#{{c.colour}}">
                        <input type="checkbox" name="cMerged{{c.index}}" {% if c.merged %} checked="true" {% endif %} />
                    </td> 
                </tr>
                {% endfor %}
                    </table>
                </td>
            </tr>
            </table>
        </div>
    
    {% else %}

    Please start by entering Image IDs as a list. E.g: 3745, 3292, 3498
    
    {% endif %}
        <div>
            <input type="submit" value='update' />
        </div>
        <div style="clear: both"></div>
    </form>
    </div>
    
    {% if imageIds %}
    <div style="float:right">
        <div style="border: 1px solid black; padding:10px">
            <b>Save Figure</b><br />
            Save the current page as a <br />comment on these Images:
        <form method='post' action="{% url 'webtest_add_annotations' %}">
        
            <input type="text" name="imageIds" {% if imageIds %} value="{{ imageIds }}" {% endif %} />
            <input id="url_field" type="text" name="comment" style="display:none" />
        
            <input type="submit" value='Save' />
        </form>
        </div>
    </div>
    {% endif %}
    
    <div style="clear: both"></div>
    
    <div style="float:right">
        <a href="#" onclick="return hideHeader()">hide</a>
    </div>
    <div style="clear: both"></div>
    
</div>
    
<div id="split_view_fig_content">
{% if imageIds %}
<table>
    <tr>
        <td></td>
        
        {% for c in channels %}
            {% if c.active %} 
                <td class="channel_name" valign='bottom'>
                    <div {% if split_grey %} style="color:#{{c.colour}}" {% endif %}>
                    {{c.name}}
                    </div>
                </td> 
            {% endif %}
        {% endfor %}
        <td class="channel_name">
            {% if merged_names %}
                {% for c in channels %}
                    {% if c.merged %}
                        <div style="color:#{{c.colour}}">{{ c.name }}</div>
                    {% endif %}
                {% endfor %}
            {% else %}
                Merged
            {% endif %}
        </td>
    </tr>
    {% for image in images %}
    <tr>
        <td class="label_cell">
            <div class="image_label">
                {{ image.name }}
            </div>
        </td>
        {% for c in c_strs %}
        <td>
            <img class='img_panel' 
            src="{% url 'webgateway_render_image' image.id image.z 0 %}?c={{c}}&p={{proj}}" />
        </td>
        {% endfor %}
    </tr>
    {% endfor %}
</table>

{% endif %}
</div>

{% endblock %}