{% load i18n fb_versions %}
<div class="fb-uploadfield{% if value and not value.exists %} error{% endif %}">
<input id="{{ final_attrs.id }}" type="text" class="vFileBrowseUploadField" name="{{ final_attrs.name }}" value="{{ value.path }}" /><div id="{{ final_attrs.id }}-uploader" class="fb-uploader-container"></div><a href="javascript:FileBrowser.show('{{ final_attrs.id }}', '{{ url }}?pop=1{% if final_attrs.directory %}&amp;dir={{ final_attrs.directory|urlencode|urlencode }}{% endif %}{% if final_attrs.format %}&amp;type={{ final_attrs.format }}{% endif %}');" class="fb_show"></a>
{#<div class="progress-bar"><div class="content"></div></div>#}
{% if value and not value.exists %}
<ul class="errorlist"><li>{% trans "File not found" %}</li></ul>
{% endif %}
</div>
{% if value.filetype == "Image" %}
{% version value.path final_attrs.ADMIN_THUMBNAIL as thumbnail_version %}
{% if thumbnail_version %}
<p class="preview" id="preview_{{ final_attrs.id }}">
    <a href="{{ value.url }}" target="_blank" id="previewlink_{{ final_attrs.id }}">
        <img id="previewimage_{{ final_attrs.id }}" src="{{ thumbnail_version.url }}" class="preview" />
    </a>
</p>
{% else %}
<p class="preview" id="preview_{{ final_attrs.id }}" style="display: none;">
    <a href="javascript://" target="_self" id="previewlink_{{ final_attrs.id }}">
        <img id="previewimage_{{ final_attrs.id }}" class="preview" src="" />
    </a>
</p>
{% endif %}
{% else %}
<p class="preview" id="preview_{{ final_attrs.id }}" style="display: none;">
    <a href="javascript://" target="_self" id="previewlink_{{ final_attrs.id }}">
        <img id="previewimage_{{ final_attrs.id }}" class="preview" src="" />
    </a>
</p>
{% endif %}

<script type="text/javascript">
    (function($){
        $(document).ready(function() {
            var uploader = new qq.FileUploader({
                element: $('#{{ final_attrs.id }}-uploader').get(0),
                action: '{% url "filebrowser:fb_do_upload" %}',

                template: '<div class="fb-uploader">' +
                        '<div class="fb-upload-list"></div>' +
                        '<a href="javascript://" class="fb-upload-button" title="{% trans "Upload a file" %}">&nbsp;</a>' +
                        '<div class="fb-upload-drop-area"><span>Drop files here to upload</span></div>' +
                    '</div>',

                // template for one item in file list
                fileTemplate: '<div class="fb-upload-item">' +
                        '<span class="fb-upload-file"></span>' +
                        '<span class="fb-upload-spinner">&nbsp;</span>' +
                        '<span class="fb-upload-size"></span>' +
                        '<a class="fb-upload-cancel" href="#"></a>' +
                        '<span class="fb-upload-failed-text"></span>' +
                        '<div class="progress-bar"><div class="content"></div></div>' +
                    '</div>',

                classes: {
                    // used to get elements from templates
                    button: 'fb-upload-button',
                    drop: 'fb-upload-drop-area',
                    dropActive: 'fb-upload-drop-area-active',
                    list: 'fb-upload-list',

                    file: 'fb-upload-file',
                    spinner: 'fb-upload-spinner',
                    size: 'fb-upload-size',
                    cancel: 'fb-upload-cancel',

                    // added to list item when upload completes
                    // used in css to hide progress spinner
                    success: 'fb-upload-success',
                    fail: 'fb-upload-fail'
                },

                params: { 'csrf_token': '{{ csrf_token }}',
                          'csrf_name': 'csrfmiddlewaretoken',
                          'csrf_xname': 'X-CSRFToken',
                          'temporary': 'true',
                          'folder': '{{ final_attrs.temp_upload_dir }}', },

                minSizeLimit: 0,
                debug: false,

                getItem: function(id) {
                    var items = $(this.element).find('.fb-upload-file').get();
                    var item = items.pop();

                    while (typeof item != "undefined") {
                        if (item.qqFileId == id) {
                            return $(item);
                        }
                        item = items.pop();
                    }
                },
                onProgress: function(id, fileName, loaded, total){
                    var bar = $(this.element).find('.progress-bar .content');
                    var new_width = '' + (loaded/total * 100) + '%';
                    bar.css('width', new_width);
                },
                onComplete: function(id, fileName, resp){
                    if (resp.success) {
                        $(this.element).find('.progress-bar').fadeOut();
                        $('#{{ final_attrs.id }}').val(resp.temp_filename);
                    }
                },
                showMessage: function(message){ alert(message); }
            });
        });
    })(grp.jQuery);
</script>
