{% extends "webgateway/base/container3.html" %}
{% load i18n %}
{% load common_filters %}


{% comment %}
<!--
  Copyright (C) 2011 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 controls the main 3-column layout of the webclient.
  Templates can extend this one to add content to the 3 columns.
  The initial template below this one is webclient/data/containers.html which has the data tree.
-->
{% endcomment %}


{% block title %}
    {% trans "Webclient" %}
{% endblock %}


{% block link %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "3rdparty/jquery.chosen-1.2.0/chosen.css" %}" type="text/css" media="screen"/>

{% endblock %}

{% block script %}

    {{ block.super }}
    <!-- required for the script_launch html below -->
    {% include "webclient/base/includes/script_launch_head.html" %}

    <script type="text/javascript" src="{% static "webclient/javascript/ome.webclient.actions.js"|add:url_suffix %}"></script>
    <script src="{% static 'webclient/javascript/jquery.infieldlabel-0.1.js' %}" type="text/javascript"></script>

    <!-- Centre panel templating -->
    <script type="text/javascript" src="{% static '3rdparty/underscore/underscore-1.8.3-min.js' %}"></script>
    <!-- Include the underscore html templates -->
    <script id="icon_thumbnails_template" type="text/template">
        {% include "webclient/data/icon_thumbnails_underscore.html" %}
    </script>
    <script id="icon_header_template" type="text/template">
        {% include "webclient/data/icon_header_underscore.html" %}
    </script>
    <script id="tags_template" type="text/template">
        {% include "webclient/annotations/tags_underscore.html" %}
    </script>
    <script id="fileanns_template" type="text/template">
        {% include "webclient/annotations/fileanns_underscore.html" %}
    </script>
    <script id="comments_template" type="text/template">
        {% include "webclient/annotations/comments_underscore.html" %}
    </script>
    <script id="mapanns_template" type="text/template">
        {% include "webclient/annotations/mapanns_underscore.html" %}
    </script>
    <script id="ratings_template" type="text/template">
        {% include "webclient/annotations/ratings_underscore.html" %}
    </script>
    <script id="customanns_template" type="text/template">
        {% include "webclient/annotations/customanns_underscore.html" %}
    </script>

    <!-- Toolbar -->
    <script type="text/javascript" src="{% static "3rdparty/jquery.chosen-1.2.0/chosen.jquery.js" %}"></script>

    <!-- The following are required by the right-hand panel, E.g. annotations/metadata_general.html -->
    <script type="text/javascript" src="{% static "3rdparty/jquery.quicksearch-1.0.js" %}"></script>
    <script type="text/javascript" src="{% static "webclient/javascript/jquery.editinplace-0.1.2.js" %}"></script>
    <script type="text/javascript" src="{% static "webclient/javascript/jquery.form-3.51.js" %}"></script>
    <script type="text/javascript" src="{% static "webclient/javascript/ome.tagging_form.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "webclient/javascript/ome.right_panel_tags_pane.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "webclient/javascript/ome.right_panel_fileanns_pane.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "webclient/javascript/ome.right_panel_comments_pane.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "webclient/javascript/ome.right_panel_customanns_pane.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "webclient/javascript/ome.right_panel_ratings_pane.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "webclient/javascript/ome.right_panel_mapanns_pane.js"|add:url_suffix %}"></script>


    <!-- preview viewer... -->
    <script type="text/javascript" src="{% static "3rdparty/jquery.blockUI-2.66.0.js" %}"></script>
    <script type="text/javascript" src="{% static "webgateway/js/ome.viewport.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "webgateway/js/ome.viewportImage.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "webgateway/js/ome.gs_slider.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "webgateway/js/ome.gs_utils.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "webgateway/js/ome.scalebardisplay.js"|add:url_suffix %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "3rdparty/JQuerySpinBtn-1.3a/JQuerySpinBtn.css" %}" />
    <link rel="stylesheet" type="text/css" href="{% static "webgateway/css/ome.colorbtn.css"|add:url_suffix %}" />
    <link rel="stylesheet" type="text/css" href="{% static "3rdparty/farbtastic-1.2/farbtastic.css" %}" media="all" />
    <link rel="stylesheet" type="text/css" href="{% static "webgateway/css/ome.postit.css"|add:url_suffix %}" />
    <script type="text/javascript" src="{% static "3rdparty/JQuerySpinBtn-1.3a/JQuerySpinBtn.js" %}"></script>
    <script type="text/javascript" src="{% static "webgateway/js/ome.colorbtn.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "webgateway/js/omero_image.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "webgateway/js/ome.smartdialog.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/aop-1.3.js" %}"></script>
    <script type="text/javascript" src="{% static "webgateway/js/ome.postit.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/farbtastic-1.2/farbtastic.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/d3-3.5.17/d3.min.js" %}"></script>
    <script type="text/javascript" src="{% static "webgateway/js/ome.histogram.js"|add:url_suffix %}"></script>


    <!-- ...including big images -->
    <script type="text/javascript" src="{% static "3rdparty/panojs-2.0.0/utils.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/panojs-2.0.0/PanoJS.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/panojs-2.0.0/controls.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/panojs-2.0.0/pyramid_Bisque.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/panojs-2.0.0/pyramid_imgcnv.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/panojs-2.0.0/pyramid_Zoomify.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/panojs-2.0.0/control_thumbnail.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/panojs-2.0.0/control_info.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/panojs-2.0.0/control_svg.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/panojs-2.0.0/control_roi.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/panojs-2.0.0/control_scalebar.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/jquery.mousewheel-3.0.6.js" %}"></script>

    <!-- hammer.js for tablet gestures -->
    <script type="text/javascript" src="{% static "3rdparty/hammer-2.0.2/hammer.min.js" %}"></script>

    <link rel="stylesheet" type="text/css" href="{% static "3rdparty/panojs-2.0.0/panojs.css" %}" media="all" />
    <link rel="stylesheet" href="{% static "webgateway/css/ome.gs_slider.css"|add:url_suffix %}" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{% static "webgateway/css/ome.viewport.css"|add:url_suffix %}" type="text/css" media="screen"/>

    <!-- scripts for SPW plate.html -->
    <script type="text/javascript" src="{% static "webgateway/js/ome.plateview.js"|add:url_suffix %}"></script>
    <script type="text/javascript" src="{% static "webgateway/js/ome.spwgridview.js"|add:url_suffix %}"></script>

    <script>

        // OMERO constants
        if (OMERO === undefined) {var OMERO = {};}
        OMERO['constants'] = {
            'namespaces': {
                'NSCOMPANIONFILE': "{{ omero.constants.NSCOMPANIONFILE }}"
            },
            'annotation': {
                'file': {'ORIGINALMETADATA': "{{ omero.constants.ORIGINALMETADATA }}"}
            },
            'metadata': {
                'NSCLIENTMAPANNOTATION': "{{ omero.constants.NSCLIENTMAPANNOTATION }}"
            }
        };

        // Variables used by static files, particularly ome.tree.js for jstree setup
        // Also used by right panel annotation tabs
        var WEBCLIENT = {};

        WEBCLIENT.active_group_id = {{ active_group.id }};
        WEBCLIENT.USER = {'id': {{ ome.user.id }}, 'fullName': "{{ ome.user.getFullName }}"};
        WEBCLIENT.active_user = {'id': {{ ome.user_id }}, 'fullName': "{{ active_user.getFullName }}"};
        WEBCLIENT.member_of_groups = {{ member_of_groups|json_dumps|safe }};
        WEBCLIENT.isAdmin = {% if ome.user.isAdmin %}true{% else %}false{% endif %};
        WEBCLIENT.CAN_CREATE = {{ ome.can_create|json_dumps|safe }};
        WEBCLIENT.current_admin_privileges = {{ current_admin_privileges|json_dumps|safe }};
        WEBCLIENT.leader_of_groups = {{ leader_of_groups|json_dumps|safe }};

        WEBCLIENT.URLS = {};
        WEBCLIENT.URLS.webindex = "{% url 'webindex' %}";
        WEBCLIENT.URLS.api_paths_to_object = "{% url 'api_paths_to_object' %}";
        WEBCLIENT.URLS.api_containers = "{% url 'api_containers' %}";
        WEBCLIENT.URLS.api_datasets = "{% url 'api_datasets' %}";
        WEBCLIENT.URLS.api_images = "{% url 'api_images' %}";
        WEBCLIENT.URLS.api_plates = "{% url 'api_plates' %}";
        WEBCLIENT.URLS.api_plate_acquisitions = "{% url 'api_plate_acquisitions' %}";
        WEBCLIENT.URLS.api_base = "{% url 'api_base' 0 %}";
        WEBCLIENT.URLS.static_webclient = "{% static 'webclient' %}/";
        WEBCLIENT.URLS.static_webgateway = "{% static 'webgateway' %}/";
        WEBCLIENT.URLS.api_tags_and_tagged = "{% url 'api_tags_and_tagged' %}";
        WEBCLIENT.URLS.fileset_check = "{% url 'fileset_check' 'delete' %}";
        WEBCLIENT.URLS.api_parent_links = "{% url 'api_parent_links' %}";
        WEBCLIENT.URLS.deletemany = "{% url 'manage_action_containers' 'deletemany' %}";
        WEBCLIENT.URLS.copy_image_rdef_json = "{% url 'copy_image_rdef_json' %}";
        WEBCLIENT.URLS.reset_owners_rdef_json = "{% url 'reset_owners_rdef_json' %}";
        WEBCLIENT.URLS.reset_rdef_json = "{% url 'reset_rdef_json' %}";
        WEBCLIENT.URLS.script_upload = "{% url 'script_upload' %}";
        // jsTree code in ome.tree.js and center panel code in center_plugin.thumbs.js.html uses initially_select
        // instead of browser URL since URL may be /webclient/?path=plate.name-barcode|well.name-A1

        WEBCLIENT.initially_select = {{ initially_select|json_dumps|safe }};
        WEBCLIENT.initially_open = {{ initially_open|json_dumps|safe }};

        {% ifequal menu 'usertags' %}
            WEBCLIENT.TAG_TREE = true;
            WEBCLIENT.URLS.tree_top_level = WEBCLIENT.URLS.api_tags_and_tagged;
        {% else %}
            WEBCLIENT.URLS.tree_top_level = WEBCLIENT.URLS.api_containers;
        {% endifequal %}

        WEBCLIENT.URLS.api_experimenter = "{% url 'api_experimenter' ome.user_id %}";

        WEBCLIENT.UI = {};
        WEBCLIENT.UI.TREE = {};
        WEBCLIENT.UI.TREE.pagination_nodes = ["experimenter", "screen", "plate", "acquisition", "project", "tagset", "image"];
        WEBCLIENT.UI.TREE.type_order = "{{ui.tree.type_order}}".toLowerCase().split(",").filter(function(e){return e});

        {% if page_size %}
            var PAGE_SIZE = {{ page_size }};
        {% endif %}

        WEBCLIENT.HAS_RDEF = false;
        $.getJSON("{% url 'webgateway_get_image_rdef_json' %}", function(data){
            WEBCLIENT.HAS_RDEF = !!(data && data.rdef);
        });

        // ** "Open With" config used by E.g. ome.tree.js **
        // Loaded scripts can call OME.setOpenWithEnabledHandler and/or
        // OME.setOpenWithActionHandler to override default behaviour
        WEBCLIENT.OPEN_WITH = [];
        $.getJSON("{% url 'webgateway_open_with_options' %}", function(data){
            if (data && data.open_with_options) {
                WEBCLIENT.OPEN_WITH = data.open_with_options;
                // Try to load scripts if specified:
                WEBCLIENT.OPEN_WITH.forEach(function(ow){
                    if (ow.script_url) {
                        $.getScript(ow.script_url);
                    }
                })
            }
        });

        $(document).ready(function(){
            // initially hidden
            $("#user_dropdown ul").css('visibility', 'hidden');
            // show on click
            $("#show_user_dropdown").click(function(e) {
                
                $("ul", $(this).parent()).css('visibility', 'visible');
                e.preventDefault();
                return false;
            });
            // on hover-out, hide drop-down menus
            $("#user_dropdown ul").hover(function(){}, function(){
                $(this).css('visibility', 'hidden');
            });

            $("#top_search_field label").inFieldLabels();
            
            OME.setupAjaxError("{% url 'fsend' %}");      // AJAX 500 need feedback form url
        });

        // The shown user's ID. This is located here because static javascript files
        // are not preprocessed by django
        function activeUserId() {
            return {{ ome.user_id }};
        };

        // The currently logged in user ID
        function currentUserId() {
            {% if ome.user.id %}
                return {{ ome.user.id }}
            {% else %}
                return undefined;
            {% endif %}
        };

    </script>

    <!-- keep-alive ping so that OMERO session doesn't die -->
    {% include "webclient/base/includes/ping.html" %}

    <!-- toolbar helpers -->
    {% include "webclient/base/includes/toolbar_forms.html" %}

    <!-- set-up right panel tabs -->
    {% include "webclient/data/includes/right_plugin.general.js.html" %}


    <!-- include scripts for loading data into right-hand tabs -->
    <!-- these are configured in settings.py under "omero.web.ui.right_tabs" -->
    {% for rt in ome.right_plugins %}
        {% include rt.include %}
    {% endfor %}
    
    
    
{% endblock %}



{% block middle_header_right %}

        <!-- Global Tools -->
        <ul class="header_toolbar" id="script_notifications">
                {% include "webclient/base/includes/script_launch.html" %}
            {% include "webclient/base/includes/activities_info.html" %}
        </ul>
        
        <!-- Global Search -->
        {% include "webclient/base/includes/search_field.html" %}
        
        <!-- User Dropdown -->
        {% include "webclient/base/includes/user_dropdown.html" %}
{% endblock %}


{% block center %}

<div id="center_panel_header">
    <div id="center_panel_chooser">
        {% if ome.center_plugins|length > 0 %}
            <select id="source">
                <option value="#content_details">Thumbnails</option>
                {% for cp in ome.center_plugins %}
                    <option value="#{{ cp.plugin_id }}">{{ cp.label }}</option>
                {% endfor %}
            </select>
        {% endif %}
    </div>
</div>

<div id="content_details" class="center_panel_content"> </div>

{% for cp in ome.center_plugins %}
    <div id="{{ cp.plugin_id }}" class="center_panel_content"></div>
{% endfor %}

{% endblock %}




<!-- Right Tabs -->

{% block right %}
<div>
    <div id="annotation_tabs" class="absolute_fill">
        <ul id="annotation_tabs_list">
            <li><a href="#metadata_general">{% trans "General" %}</a></li>
            <!-- include right tabs, as configured in settings.py under "omero.web.ui.right_tabs" -->
            {% for rt in ome.right_plugins %}
                <li><a href="#{{ rt.plugin_id }}">{{ rt.label }}</a></li>
            {% endfor %}
        </ul>
        <div id="metadata_general" class="right_tab_content" ></div>
        <!-- include right tab bodies, as configured in settings.py under "omero.web.ui.right_tabs" -->
        {% for rt in ome.right_plugins %}
        <div id="{{ rt.plugin_id }}" class="right_tab_content"></div>
        {% endfor %}
    </div>
</div>
{% endblock %}



