{% load common_tags %}

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


{% if groups %}
<script>
    $(document).ready(function(){

        var $groupList,
            $listViewPort = $("#listViewPort").css("visibility", "visible").hide(),
            $usersList,
            DROPDOWN_HEIGHT = $(document).height()-110;

        // Button toggles visibility of group chooser dropdown
        $("#groupsUsersButton").on('click', function(event){
            event.preventDefault();

            if ($listViewPort.is(":visible")) {
                $listViewPort.hide();
            } else {
                $listViewPort.show();

                // First time we show menu, load if empty, then setup events...
                if ($listViewPort.is(':empty')) {
                    $listViewPort.append("<h1 style='margin: 10px'>Loading Groups...</h1>");
                    $listViewPort.load("{% url 'group_user_content' %}?url={{ current_url }}", function() {
                        // prepare lists for show/hide
                        $groupList = $("#groupList");
                        $usersList = $(".usersList");
                        $groupList.css('max-height', DROPDOWN_HEIGHT + 'px');
                        $usersList.css('max-height', DROPDOWN_HEIGHT + 'px');
                        $groupList.css('visibility', 'visible');
                        $usersList.css('visibility', 'visible').hide();

                        // When hover or click on a Group, show Users...
                        $( "#groupList" ).on( "mouseenter click", "li a", function(event) {
                            event.preventDefault();
                            var gid = $(this).attr("data-gid");
                            $usersList.hide();
                            $("#groupMembers-" + gid).show();
                            return false;
                        });
                    });
                }
            }
            return false;
        });

        // Any clicks that bubble up to body hide list...
        $('body').on('click', function(event) {
            $listViewPort.hide();
        });

    });
</script>

<ul id="group_user_chooser">
	
	
    <li class="dropdown_menu">
       
	    <!-- Group / User drop-down -->
        
        <div id="groupsUsersButton" title="Switch Group/User">
            <img 
            {% if active_group.getDetails.getPermissions.isGroupWrite %} src="{% static 'webclient/image/group_green16.png' %}"
            {% else %}
                {% if active_group.getDetails.getPermissions.isGroupAnnotate %} src="{% static "webclient/image/group_orange16.png" %}"
                {% else %}
                    {% if active_group.details.permissions.isGroupRead %} src="{% static "webclient/image/group_red16.png" %}"
                    {% else %}
                        src="{% static "webclient/image/personal16.png" %}"
                    {% endif %}
                {% endif %}
            {% endif %} />
            <span>{{ active_group.name }}</span><span>{{ active_user.getFullName }}</span>
        </div>

        <div id="listViewPort" class="dropdown"></div>
    </li>
</ul>
{% endif %}