{% extends "webadmin/admin_base.html" %}
{% load i18n %}
{% load common_tags %}

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

{% block title %}{% trans "My account" %}{% endblock %}

{% block link %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "webgateway/css/ome.table.css"|add:url_suffix %}" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{% static "webadmin/css/drivespace.css"|add:url_suffix %}" type="text/css"/>
    <link rel="stylesheet" href="{% static "3rdparty/jquery.tablesorter-2.0.3/jquery.tablesorter.css" %}" type="text/css" media="screen"/>
{% endblock %}

{% block script %}
    {{ block.super }}
    <script type="text/javascript" src="{% static "3rdparty/jquery.flot-0.7/jquery.flot.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/jquery.flot-0.7/jquery.flot.pie.js" %}"></script>
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="{% static "3rdparty/jquery.flot-0.7/excanvas.js" %}"></script><![endif]-->
    
    <script type="text/javascript">
        $(document).ready(function() {

            var FREE_SPACE = {{ freeSpace }};

            {% include 'webadmin/includes/drivespaceStats.js' %}

            var loadGroups = function() {
                $("#filterBy").text("Click chart to see usage for a single Group");
                $(".usageBy").removeClass('selected');
                $("#load_groups").addClass('selected');
                $(".totalUsage").text('Total');
                plotJson("{% url 'waloaddrivespace_groups' %}", {
                    success: function(){
                        $(".totalUsage").text('Total');
                    }
                });
            }

            var loadUsers = function() {
                $("#filterBy").text("Click chart to see usage for a single User");
                $(".usageBy").removeClass('selected');
                $("#load_users").addClass('selected');
                $(".totalUsage").text('Total');
                plotJson("{% url 'waloaddrivespace_users' %}", {
                    success: function(){
                        $(".totalUsage").text('Total');
                    }
                });
            }

            $("#load_groups").click(function(event) {
                event.preventDefault();
                loadGroups();
            });

            $("#load_users").click(function(event) {
                event.preventDefault();
                loadUsers();
            });

            $("#placeholder").on('plotclick', function(e, offset, slice){
                var i = $("#placeholder").data('chart_data')[slice.seriesIndex];
                $(".usageBy").removeClass('selected');
                if (i.groupId) {
                    var url = "{% url 'waindex' %}" + "drivespace_json/group/" + i.groupId +"/";
                    $("#filterBy").text("Group: " + i.label).show().addClass('selected');
                    plotJson(url, {
                        success: function(){
                            $(".totalUsage").text('Group');
                        }
                    });
                } else if (i.userId) {
                    var url = "{% url 'waindex' %}" + "drivespace_json/user/" + i.userId +"/";
                    $("#filterBy").text("User: " + i.label).show().addClass('selected');
                    plotJson(url, {
                        success: function(){
                            $(".totalUsage").text('User');
                        }
                    });
                }
            });


            // On ready - start by loading Users
            loadUsers();

        });

    </script>
    
{% endblock %}

{% block center_details %}
{{ block.super }}

<div class="drivespace_content">
    <div class="one_column_header">
        <div id="drivespace_settings" class="settings_content">
            <h1>
                <div class="hlabel">Show disk usage by:</div>
                <div class="tag">
                    <a class="usageBy tag_inner" href="#" id="load_users">Users</a>
                </div>
                <div class="tag">
                    <a class="usageBy tag_inner" href="#" id="load_groups">Groups</a>
                </div>

                <span class="hlabel usageBy selected" id="filterBy" style="top:4px; padding: 3px">
                    Click on chart segment to see usage by individual user/group
                </span>
            </h1>
            <div style="clear:both"></div>
            <hr>
            {% include 'webadmin/includes/drivespaceStats.html' %}
        </div>
    </div>
</div>

{% endblock %}
