{% load i18n %}
{% load common_filters %}
{% load common_tags %}


{% comment %}
<!--
  Copyright (C) 2011-2017 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 %}


    <script type="text/javascript">

        $(document).ready(function() {
            
                var show_batch_msg = function(text) {
                    $("#batch_ann_msg").html(text).show().delay(1200).fadeOut(1000);
                }
                var show_batch_error = function(text) {
                    $("#batch_ann_error").html(text + "<div><u>Click to Close</u></div>").show().click(function(){
                        $(this).hide();
                    });
                }


                // Make list of ['image-123', 'image-456'] for use in Annotation Tabs...
                // If we have iids (possibly when Wells selected) just use these:
                {% if iids|length > 0 %}
                var selectedObjs = [{% for id in iids %}{% if forloop.counter > 1 %},{% endif %}"image-{{ id }}"{% endfor %}];
                {% else %}
                // ...otherwise use the obj_labels
                var selectedObjs = [{% for o in obj_labels %}{% if forloop.counter > 1 %},{% endif %}"{{ o.type|lower }}-{{ o.id}}"{% endfor %}];
                {% endif %}

                var annPaneData = {
                    'selected': selectedObjs,
                    'canAnnotate': {% if annotationBlocked %}false{% else %}true{% endif %},
                }

                var tagPane = new TagPane($("#tagsPane"), annPaneData);
                var fileannsPane = new FileAnnsPane($("#fileannsPane"), annPaneData);
                var commentsPane = new CommentsPane($("#commentsPane"), annPaneData);
                var ratingsPane = new RatingsPane($("#ratingsPane"), annPaneData);
                var customAnnsPane = new CustomAnnsPane($("#customAnnotationsPane"), annPaneData);
                var mapAnnsPane = new MapAnnsPane($("#mapAnnsPane"), annPaneData);

                // show a link to the current objects
                $("#show_link_btn").click(function(){
                    $("#link_info_popup").show();
                    var link_input = $("#link_info_popup input");
                    link_input.get(0).focus();
                    link_input.get(0).select();
                });
                $("#link_info_popup img").click(function(){
                    $("#link_info_popup").hide();
                });


                $(".dropdown_menu .menu_launch").click(function(e){
                    $(this).parent().find('ul').css('visibility', 'visible');
                    $(this).parent().find('.dropdown_menu_options').show();
                    return false;
                });
                // on hover-out of the menu itself, hide drop-down menus
                $(".dropdown_menu_options").hover(function(){}, function(){
                    $(this).css('visibility', 'hidden');
                }).hide();


                $(".tooltip_title").tooltip({
                    items: '.tooltip_title',
                    content: function() {
                        return $("span.tooltip_html", $(this)).html();
                    },
                    track: true,
                    show: false,
                    hide: false
                });
                $(".tooltip").tooltip_init();

                // Filtering annotations added by 'me' or 'others' or 'all'
                $("#annotationFilter").change(function(){
                    OME.filterAnnotationsAddedBy();
                });
            });
            
    </script>
    


<!-- Used to check against current selection when loading panel via AJAX -->
<div id="object-ids" style="display:none">{{ link_string }}</div>

<div class="right_tab_inner">
    
    <div id="batch_ann_msg_container">
        <div id="batch_ann_msg"></div>  <!-- hidden div to show success messages etc -->
        <div id="batch_ann_error" title="Click to close"></div>
    </div>


    <div>
        {% include "webclient/annotations/includes/toolbar.html" %}
    </div>

	<h1 id="batch_ann_title" style="float:left">
	    Selected
	    <span class="tooltip_title">
	        {{ obj_labels|length }} objects:
	        <span style="width:20px; height:20px; display: inline-block" class="btn_info"> &nbsp </span>
	        <span class="tooltip_html" style='display:none'>
                {% for label in obj_labels %}
                    {% if forloop.counter < 20 %}
                        <div><b>{{ label.type }} {{ label.id}}:</b> {{ label.name|truncateafter:"40" }}</div>
                    {% else %}
                        {% if forloop.counter == 20 and obj_labels|length > 20 %}
                            <div>and <b> {{ obj_labels|length|subtract:20 }}</b> other objects...</div>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </span>
        </span>
    </h1>

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

    <div>
        <h2 style="float: left">
            Annotations
        </h2>

        <select id="annotationFilter" title="Filter by user" data-userId="{{ ome.user.id }}"
                style="float: right; width:80px">
            <option value="all">Show all</option>
            <option value="me">Show added by me</option>
            <option value="others">Show added by others</option>
        </select>
    </div>
    <div style="clear:both"></div>
    <hr style="margin-top:0" />

    {% if annotationBlocked %}
        <h3 class="postit_msg">{{ annotationBlocked }}</h3>
    {% endif %}


    <!-- ANNOTATIONS -->

    <!-- templates are loaded based on config -->
    {% for t in ome.metadata_panes|dictsort:"index" %}
        {% with "webclient/annotations/includes/metadata_general_"|add:t.name|add:".html" as metadata_templates_path %}
        {% with label=t.label %}
        {% include metadata_templates_path %}
        {% endwith %}
        {% endwith %}
    {% endfor %}

</div>
