{% extends "admin/mptt_change_list.html" %}
{% load admin_list i18n mptt_tags media_tree_admin %}

{% block extrahead %}
{{ block.super }}
{% comment %}
Since the FileNodeAdmin's Media class can't use reverse to determine the jsi18n URL, 
it is embedded here.
{% endcomment %} 
<script type="text/javascript" src="{% url "admin:media_tree_jsi18n" %}"></script>
{% endblock %}

{% block breadcrumbs %}
    {% if not node %}
        {{ block.super }}
    {% else %}
        {% include "admin/media_tree/filenode/includes/breadcrumbs.html" %}
    {% endif %}
{% endblock %}

{% block object-tools %}
    <ul class="object-tools{% if thumbnail_sizes %} with-view-options{% endif %}">
    {% if has_add_permission %}
        <li class="target-folder"></li>
        <li class="changelist-file-uploader">
            <a id="uploader-button" href="javascript:void(0)" class="addlink">
            <span class="caption">{% trans "Upload files" %}</span></span>
            </a>
        </li>
        <li class="traditional-upload">
            <a href="{% url "admin:media_tree_filenode_add" %}?parent=&{% if is_popup %}_popup=1{% endif %}" class="addlink">
            {% trans "Add file" %}
            </a>
        </li>
        <li>
            <a id="object-tool-add-folder" href="{% url "admin:media_tree_filenode_add_folder" %}{% if is_popup %}?_popup=1{% endif %}" class="addlink folder">
            <span class="caption">{% trans "Add folder" %}</span>
            </a>
        </li>
    {% endif %}
    </ul>

    <script type="text/javascript">// <![CDATA[
        jQuery(function($) {

            var initialFolder, targetFolder;
            {% if node and not node.is_top_node %} 
            initialFolder = {name: '{{ node.name }}', id: '{{ node.pk }}'};
            {% endif %}

            /*var uploader = new DjangoAdminFileUploader({
                element: $('.changelist-file-uploader')[0],
                action: '{% url "admin:media_tree_filenode_upload" %}',
                debug: true,
                listElement: $('#changelist tbody')[0],
                csrfmiddlewaretoken: '{{ csrf_token }}'
            });*/

            var uploadUrl = '{% url "admin:media_tree_filenode_upload" %}',
                uploader = $('#uploader-button').djangoAdminFileUploader({
                request: {
                    endpoint: uploadUrl,
                    customHeaders: {
                        'X-CSRFToken': '{{ csrf_token }}'
                    },
                    inputName: 'file'
                },
                uploaderType: 'basic',
                multiple: true,
                button: $('#uploader-button'),
                validation: {
                    //allowedExtensions: ['jpeg', 'jpg', 'txt'],
                    //sizeLimit: 51200 // 50 kB = 50 * 1024 bytes
                },
                showMessage: function(message) {
                }
            })

            var setTargetFolder = function(targetFolder) {
                $('#changelist').data('targetFolder', targetFolder);
                var targetId = '';
                if (!targetFolder) {
                    targetFolder = initialFolder;
                }
                if (targetFolder) {
                    $('.target-folder').html('{% trans "To %(folder)s:" %} '.replace('%(folder)s', targetFolder.name));
                    targetId= targetFolder.id;
                } else {
                    $('.target-folder').html('');
                }
                
                var addlink = $('.addlink')[0];
                addlink.href = addlink.href.replace(/parent=[0-9]*/, 'parent='+targetId);
                uploader.fineUploader('setEndpoint', uploadUrl + '?parent=' + targetId);
            };

            setTargetFolder(initialFolder);
            
            $('#changelist').delegate('input[name=_selected_action]', 'change', function() {
                var targetFolder = $('#changelist').getFirstSelectedFolder();
                setTargetFolder(targetFolder);
            });
        });
    // ]]></script>

    {% if thumbnail_sizes %}
    <ul class="view-options">
        <li>
            <div class="thumbnail-size-slider ui-slider ui-slider-horizontal no-js">{% spaceless %}
                {% for key, size in thumbnail_sizes.items %}
                    <a class="ui-slider-handle{% if key == thumbnail_size_key %} ui-state-active{% endif %}" href="?thumbnail_size={{ key }}"><span>{{ size }}</span></a>
                {% endfor %}
            {% endspaceless %}</div>

            <script type="text/javascript">// <![CDATA[
                    jQuery(function($) {
                        var thumbnailSizeKeys = ['{{ thumbnail_sizes.keys|join:"', '" }}'];
                        var thumbnailSizes = {
                            {% for key, size in thumbnail_sizes.items %}
                            {{ key }}: [{{ size.0 }}, {{ size.1 }}]{% if not forloop.last %},{% endif %}
                            {% endfor %}
                        };
                        $('.thumbnail-size-slider').html('');
                        $('.thumbnail-size-slider').removeClass('no-js');
                        $('.thumbnail-size-slider').slider({
                            value: thumbnailSizeKeys.indexOf('{{ thumbnail_size_key }}'),
                            min: 0,
                            max: thumbnailSizeKeys.length - 1,  
                            change: function(event, ui) {
                                var sizeKey = thumbnailSizeKeys[ui.value];
                                var nodes = $('#changelist .node');
                                nodes.each(function() {
                                    var img = $('.thumbnail img', this);
                                    var newSize = thumbnailSizes[sizeKey];
                                    var curSize = [img.width(), img.height()];
                                    var ratio;
                                    if (curSize[0] > curSize[1]) {
                                        ratio = newSize[0] / curSize[0];
                                    } else {
                                        ratio = newSize[1] / curSize[1];
                                    }

                                    img.width(Math.round(curSize[0] * ratio)); 
                                    img.height(Math.round(curSize[1] * ratio)); 
                                });

                                $('#changelist').setUpdateReq($.get('?thumbnail_size=' + sizeKey, function(data) {
                                        var newChangeList = $('#changelist', data);
                                        nodes.each(function() {
                                            var img = $('.thumbnail img', this);
                                            var newImg = $('#' + this.id + ' .thumbnail img', newChangeList);
                                            if (newImg.length) {
                                                img[0].src = newImg[0].src;
                                            }
                                        });
                                }));
                            }
                        });
                    });
            // ]]></script>
        </li>
    </ul>
    {% endif %}
{% endblock %}
{% block result_list %}
{{ block.super }}
{% if select_button %} 
<div class="popup-buttons submit-row">
    <input class="default popup-select-button" type="submit" value="Select" disabled="disabled" />
</div>
{% endif %}
{% endblock %}