{% extends "omeroweb/base.html" %}
{% load i18n %}
{% load markup %}
{% load custom_tags %}
{% load wikitags %}

{% block link %}
    <link rel="stylesheet" href="{% url webstatic "css/annotation.css" %}" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{% url webstatic "css/googiespell.css" %}" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{% url webstatic "css/tree.css" %}" type="text/css" media="screen"/>

  <link rel="stylesheet" href="/webgateway/appmedia/css/jquery-plugin-slider.css" type="text/css" media="screen"/>
  <link rel="stylesheet" href="/webgateway/appmedia/css/weblitz-viewport.css" type="text/css" media="screen"/>

{% endblock %}

{% block jscript %}
    <script type="text/javascript" src="{% url webstatic "javascript/jquery_1.2.6.js" %}"></script>
    
    <script type="text/javascript" src="{% url webstatic "javascript/ui/ui.core.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/ui/ui.accordion.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/ui/ui.tabs.js" %}"></script>
    
    <script type="text/javascript" src="{% url webstatic "javascript/googiespell/AJS.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/googiespell/googiespell.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/googiespell/cookiesupport.js" %}"></script>
    <script type="text/javascript" src="/webgateway/appmedia/js/weblitz-viewport.js"></script>
    <script type="text/javascript" src="/webgateway/appmedia/js/jquery-plugin-viewportImage.js"></script>
    <script type="text/javascript" src="/webgateway/appmedia/js/jquery-plugin-slider.js"></script>
    <script type="text/javascript" src="/webgateway/appmedia/js/gs_utils.js"></script>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% url webstatic "javascript/menu.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/image.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/basket.js" %}"></script>
        
    <script>
        $(document).ready(function(){
            $("a.loadData").click(function()
            {
                $("div#hierarchy").html('<p>{% trans "Loading hierarchy... please wait" %} <img src ="{% url webstatic "images/tree/spinner.gif" %}"/></p>');
                $("div#hierarchy").load("{% url manage_container_hierarchies_id "image" manager.image.id %}", 
                    function() {  
                        $("a.loadData").remove();                        
                    });
                return false; 
            });
            $("a.loadAnnotation").click(function()
            {
                $("div#annotation").html('<p>{% trans "Loading annotations... please wait" %} <img src ="{% url webstatic "images/tree/spinner.gif" %}"/></p>');
                $("div#annotation").load("{% url manage_annotations "image" manager.image.id %}?url={{ url }}", function() {  
                        $("a.loadAnnotation").remove();                        
                    });
                return false; 
            });
        
            $("#metadata").accordion( { 
                autoHeight: false,
                active: false,
                alwaysOpen: false, 
                navigation: true
            });
            
            $("#annotation_tabs").tabs();
            
            var viewport = $.WeblitzViewport($("#viewport"), "/webgateway" );
            viewport.load({{ manager.image.id }});
            
        });
      </script>
      <script>
      var popup = function (url) {
            window.open(url,'_blank','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1000,height=800');
            return false;
      }
      </script>
      
{% endblock %}

{% block center %}

<div class="image">
    <h1>{% trans "Image" %}: {{ manager.image.fullNameWrapped }} {% if not manager.image.isOwned %}<img src="{% url webstatic "images/kgpg16.png" %}" alt="l" title="locked"/>{% endif %}</h1>
</div>

<div class="toolbar">
{% if manager.image.isOwned %}
    | <a href="#" onclick="return popup('{% url image_viewer manager.image.id %}')">{% trans "View" %} <img src="{% url webstatic "images/tree/kview.png" %}" alt="v" title="view"/></a> 
    {% if manager.image.isOwned %}| <a href="#" onclick="toBasket('image', '{{ manager.image.id }}'); return false;">{% trans "Select" %} <img src="{% url webstatic "images/basket16.png" %}" alt="b" title="add to basket"/></a> 
    | <a href="#" onclick="copyToClipboard('image', '{{ manager.image.id }}'); return false;">{% trans "Copy" %} <img src="{% url webstatic "images/eclipse_copy_edit16.png" %}" alt="c" title="copy"/></a> 
    | <a href="{% url manage_action_containers "edit" "image" manager.image.id %}?url={{url}}">{% trans "Edit" %} <img src="{% url webstatic "images/color_line16.png" %}" alt="e" title="edit"/></a>{% endif %}
{% else %}
    | <a href="#" onclick="window.open('{% url image_viewer manager.image.id %}', '_blank','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1000,height=800'); return false;">{% trans "View" %} <img src="{% url webstatic "images/tree/kview.png" %}" alt="v" title="view"/></a> 
    {% if manager.image.isOwned %}| <a href="#" onclick="copyToClipboard('image', '{{ manager.image.id }}'); return false;">{% trans "Copy" %} <img src="{% url webstatic "images/eclipse_copy_edit16.png" %}" alt="c" title="copy"/></a> 
    | <a href="{% url manage_action_containers "edit" "image" manager.image.id %}?url={{url}}">{% trans "Edit" %} <img src="{% url webstatic "images/color_line16.png" %}" alt="e" title="edit"/></a>{% endif %}
{% endif %}
| <a href="#annotation_form">{% trans "Annotate" %} <img src="{% url webstatic "images/knotes16.png" %}" alt="a" title="annotate"/></a> |
</div>

<div class="clear"></div>
<div><p>{{ manager.image.description|default_if_none:"no description"|wikify|safe|linebreaks }}</p></div>
<div class="separate70"></div>

<p><a href="#" onclick="return popup('{% url image_viewer manager.image.id %}')">Open full viewer</a></p>
<div class="miniview" id="viewport"></div>
<div class="metadata"><h1>{% trans "Metadata" %}: </h1>

<ul id="metadata" class="ui-accordion-metadata" >
    <li><a href='#'>{% trans "General" %}:</a>
        <div>
            <table class="forms">
                <tr><td><label>{% trans "Image date" %} </label></td><td>{{ manager.image.getDate|date:"Y m d H:i:s" }}</td></tr>
                <tr><td><label>{% trans "Dimensions" %} (XY) [px] </label></td><td>{{ manager.image.getWidth }} x {{ manager.image.getHeight }}</td></tr>
                <tr><td><label>{% trans "Pixel size" %} (XYZ) [&micro;m] </label></td><td>{{ manager.image.getPixelSizeX|default_if_none:"-" }} x {{ manager.image.getPixelSizeY|default_if_none:"-" }} x {{ manager.image.getPixelSizeZ|default_if_none:"-" }}</td></tr>
                <tr><td><label>{% trans "Z-sections" %} </label></td><td>{{ manager.image.z_count }}</td></tr>
                <tr><td><label>{% trans "Timepoints" %} </label></td><td>{{ manager.image.t_count }}</td></tr>
                <!--<tr><td><label>{% trans "Emissions wavelengths" %} </label></td><td>{{ manager.image.getChannels.getEmissionWave }}</td></tr>-->
            </table>
        </div>
    </li>
    <li><a href='#'>{% trans "Objective" %}:</a>
        <div>
            {% if form_objective %}
            <table class="forms">
                {% for field in form_objective %}
                <tr><td>{{ field.label_tag }}{% if field.field.required %}*{% endif %}</td>
                    <td>{{ field }}</td><td>{% if field.errors %}{{ field.errors }}{% endif %}<br/>{{ field.help_text }}</td>
                </tr>
                {% endfor %}
            </table>
            {% endif %}
        </div>
    </li>
    <li><a href='#'>{% trans "Environment" %}:</a>
        <div>
            {% if form_environment %}
            <table class="forms">
                {% for field in form_environment %}
                <tr><td>{{ field.label_tag }}{% if field.field.required %}*{% endif %}</td>
                    <td>{{ field }}</td><td>{% if field.errors %}{{ field.errors }}{% endif %}<br/>{{ field.help_text }}</td>
                </tr>
                {% endfor %}
            </table>
            {% endif %}
        </div>
    </li>
    <li><a href='#'>{% trans "Stage label" %}:</a>
        <div>
            {% if form_stageLabel %}
            <table class="forms">
                {% for field in form_stageLabel %}
                <tr><td>{{ field.label_tag }}{% if field.field.required %}*{% endif %}</td>
                    <td>{{ field }}</td><td>{% if field.errors %}{{ field.errors }}{% endif %}<br/>{{ field.help_text }}</td>
                </tr>
                {% endfor %}
            </table>
            {% endif %}
        </div>
    </li>
</ul>
<br/><p>*{% trans "N/A - this value is not available." %}</p>
</div>

<div class="miniview_desc">
    <center>
        <p>{{ manager.image.name }}</p>
        <p>created by {{ manager.image.getOwnerFullName }}</p>
        <!--<p><a href="">Send this image to someone else.</a></p>-->
    </center>
</div>
<div class="clear"></div>

<div id="annotation">
<h1>{% trans "Annotations" %}:</h1>
{% if manager.image.countAnnotations %}<a href="#" class="loadAnnotation">{% trans "Show annotations associated with" %}... [{{ manager.image.countAnnotations }}]</a>{% endif %}
</div>

{% include "omeroweb/annotations_form.html" %}
<div class="clear"> </div>

<h1>{% trans "Where this image is linked?" %}</h1>
<div id="hierarchy"><a href="#" class="loadData">{% trans "Show the hierarchy structure" %}...</a></div>

{% endblock %}