{% extends "webclient/scripts/base_custom_dialog.html" %}
{% load i18n %}

{% comment %}
<!--
  Copyright (C) 2011-2015 University of Dundee & Open Microscopy Environment.
  All rights reserved.

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as
  published by the Free Software Foundation, either version 3 of the
  License, or (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Affero General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
{% endcomment %}

{% comment %}
<!--
    This page displays a UI for Split View Figure
-->
{% endcomment %}

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



{% block script %}
    {{ block.super }}

    <script type="text/javascript" src="{% static "webclient/javascript/ome.split_view_figure.js"|add:url_suffix %}"></script>

{% endblock %}


    {% block script_form %}

        <h1>Create Split View Figure</h1>

        {% if warning %}
            <h2 style="color: red">{{ warning }}</h2>
        {% endif %}
        <hr/>

        <input type="text" name="IDs" value="{{ idString }}" style="display:none">
        <input name="Data_Type" style="display:none" value="Image" />

        <span title="File name of the figure to save.">
            Figure Name:
            <input type="text" name="Figure_Name"  value="Split_View_Figure"  />
        </span>

        <span title="Format to save image">
            Format:
            <select name="Format">
                <option value="JPEG"  selected="True"  >JPEG</option>
                <option value="PNG"  >PNG</option>
                <option value="TIFF"  >TIFF</option>
            </select>
        </span>

        <hr/>

        <span title="Scale bar size in microns. Only shown if image has pixel-size info.">
            Show Scalebar:
            <input type="checkbox" id="enableScalebar"/>
            Length (microns):
            <input type="text" name="Scalebar" disabled="disabled" class="number" size="5" value="5"/>
        </span>

        <span class="param" title="The color of the scale bar.">
            Overlay Colour:
            <!-- drop-down list of enums -->
            <select name="Overlay_Colour">
                <option value="Blue"  >Blue</option>
                <option value="Gray"  >Gray</option>
                <option value="Indigo"  >Indigo</option>
                <option value="Yellow"  >Yellow</option>
                <option value="Green"  >Green</option>
                <option value="Violet"  >Violet</option>
                <option value="Orange"  >Orange</option>
                <option value="Black"  >Black</option>
                <option value="White"  selected="True"  >White</option>
                <option value="Red"  >Red</option>
            </select>
        </span>


        <hr />
        
        <span title="The max width of each image panel. Default is first image width">
            Panel Width:
            <input type="text" name="Width" class="number" value="{{ image.getSizeX }}" size="3"/>
        </span>

        <span title="The max height of each image panel. Default is first image height">
            Panel Height:
            <input type="text" name="Height" class="number" value="{{ image.getSizeY }}" size="3"/>
        </span>

        <!-- Z - section-->
        <hr />
        Z section:  Last Viewed:
        <input type="radio" name="zProjection" value="last_viewed" checked="true" />
        Z Projection:
        <input type="radio" name="zProjection" value="z_projection" />

        <div id="zProjectionControls" style="display:none">
            <div style="float:left" class="zsection">
                Intensity:
                <select name="Algorithm" disabled="disabled">
                    <option value="Maximum Intensity"  selected="True"  >Maximum Intensity</option>
                    <option value="Mean Intensity"  >Mean Intensity</option>
                </select>
            </div>

            <div title="The Z increment for projection." class="zsection">
                Every n-th slice:
                <input type="text" name="Stepping" class="number" size="2" value="1" disabled="disabled"/>
            </div>
            <div style="clear:both"></div>

            <div class="zsection">
                <div style="float:left">Z sections range:</div>
                <div style="position:relative; height:40px; width:150px; margin-left:20px; float:left">
                    <div id="zRangeSlider"></div>

                    <div style="position:absolute; bottom:0px; left:0px">
                        Start: <input type="text" name="Z_Start" class="number" value="1" size="2" disabled="disabled"/>
                    </div>
                    <div style="position:absolute; bottom:0px; right:0px">
                        End: <input type="text" name="Z_End" class="number" value="{{ image.getSizeZ }}" size="2" disabled="disabled"/>
                    </div>
                </div>
            </div>
        </div>

        <div style="clear:both"></div>


        <hr />

        <!-- Hidden Channel Parameters: These are updated by Javascript based on Customized controls below -->
        <div style="display:none">

            Channel Names:
            <div id="channelNamesMap" title="Map of index: channel name for all channels">
                {% for c in channels %}
                    <input type="text" name="Channel_Names_key{{ forloop.counter0 }}" value="{{ forloop.counter0 }}"/>
                    <input type="text" name="Channel_Names_value{{ forloop.counter0 }}" value="{{ c.getLabel }}"/>
                {% endfor %}
            </div>

            <div title="List of the channels in the split view">
                Split Indexes:
                <input type="text" name="Split_Indexes"  />
            </div>

            Merged Colours
            <div id="mergedColoursMap" title="Map of index:int colours for each merged channel">
                {% for c in channels %}
                    <input type="text" name="Merged_Colours_key{{ forloop.counter0 }}" value="{{ forloop.counter0 }}"/>
                    <input type="text" name="Merged_Colours_value{{ forloop.counter0 }}" value="{{ c.getColor.getInt }}"/>
                {% endfor %}
            </div>
        </div>

    {% endblock %}


    {% block custom_controls %}
<!------------------- Custom Controls - in addition to script parameters ------------>
    <table cellspacing='3' style="margin-left:auto; margin-right:auto">
        <tr>
            <td></td>
            <td colspan="{{ channels|length }}" align="center">
                <div title="If true, all split panels are greyscale">
                    Split Panels Grey:
                    <input type="checkbox" name="Split_Panels_Grey"  />
                </div>
            </td>
            <td align="center">
                <div style="height:20px" title="If true, label the merged panel with channel names. Otherwise label with &#39;Merged&#39;">
                    Merged Names: <input type="checkbox" name="Merged_Names"  checked="True"/>
                </div>
            </td>
        </tr>
        <tr>
            <td title="Label images with Image name (default) or datasets or tags" valign="bottom">
                <select name="Image_Labels" style="margin-right:20px">
                    <option value="Image Name"  selected="True"  >Image Name</option>
                    <option value="Datasets"  >Datasets</option>
                    <option value="Tags"  >Tags</option>
                </select>
            </td>
        {% for c in channels %}
            <td id="split_channels" valign="bottom">
                <div class="toggle_channel" style="background:#{{c.getColor.getHtml}}">
                    <input type="text" size='10' name="{{ forloop.counter0 }}cName" value="{{ c.getLabel }}" />
                    <input type="checkbox" name="{{ forloop.counter0 }}cActive" checked="true" />
                </div>
            </td>
        {% endfor %}
            <td align="center" valign="bottom">
                <table style="padding-left:10px">
                    <tr><td width="15"> </td>
                        {% for c in channels %}
                            <td>
                                <div id="merged_channels" class="toggle_channel" style="background:#{{c.getColor.getHtml}}">
                                    <input type="checkbox" name="{{ forloop.counter0 }}cMerged" 
                                        {% if c.isActive %}checked="true"{% endif %} value="{{c.getColor.getInt}}"/>
                                </div>
                            </td> 
                        {% endfor %}
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    {% endblock %}

<!---------------------------- FIGURE PREVIEW ---------------------->

{% block figure_preview %}
    <table>
    <tr>
        <td colspan='2'></td>
        {% for c in channels %}
            <td class="split_column" align="center" valign='bottom' style="vertical-align: bottom">
                <span class="channel_name" style="color:#{{c.getColor.getHtml}}">
                    {{ c.getLabel }}
                </span>
            </td>
        {% endfor %}
        <td align="center" id="merged_names">
            {% for c in channels %}
                <div class="merged_name" style="color:#{{c.getColor.getHtml}}">{{ c.getLabel }}</div>
            {% endfor %}
        </td>
        <!-- show this <td> OR merged_names -->
        <td align="center" id="merged_label" style="display:none">
            Merged
        </div>

    </tr>
    {% for imgData in imgDict %}
    <tr class="figImageData" data-imageId="{{ imgData.id }}">
        <td class="dragHandle">
            <div class="rowDragHandle"></div>
        </td>
        <td class="rowLabel">
            <div class="imgName">
                {{ imgData.name }}
            </div>
            <div class="imgTags" style="display:none">
                {% for t in imgData.tags %}
                    <div>{{ t }}</div>
                {% endfor %}
            </div>
            <div class="imgDatasets" style="display:none">
                {% for d in imgData.datasets %}
                    <div>{{ d }}</div>
                {% endfor %}
            </div>
        </td>
        {% for ch in channels %}
        <td class="split_column">
            <div>
                <img colIdx="{{ forloop.counter0 }}" class='img_panel' 
                    src="{% url 'web_render_image' imgData.id %}?c={{ forloop.counter }}" />
            </div>
        </td>
        {% endfor %}
        <td class="merged_column">
            <div>
                <img class='img_panel' 
                    src="{% url 'web_render_image' imgData.id %}" />
            </div>
        </td>
    </tr>
    {% endfor %}
    </table>
{% endblock %}
