{% javascripts '@TwtoolsFileManagerBundle/Resources/public/upload.js' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
<script type="text/javascript" src="{{ asset('twtools/javascript/plugineditinplace/jquery.editinplace.js') }}"></script>
<ul id="uploadgallery" class="thumbnails gallery ui-helper-reset ui-helper-clearfix"></ul>
<div id="file-uploader">
    <noscript>
    <p>Please enable JavaScript to use file uploader.</p>
    <!-- or put a simple form for upload here -->
    </noscript>
</div>
<script>
var $ = this.jQuery;

$(document).ready(function(){
    var uploader = new qq.FileUploader({
        dragText: '{% trans %}Drop files here to upload{% endtrans %}',
        uploadButtonText: "{% trans %}Upload a file{% endtrans %}",
        cancelButtonText: '{% trans %}Cancel{% endtrans %}',
        failUploadText: '{% trans %}Upload failed{% endtrans %}',
        element: document.getElementById('file-uploader'),
        action: '{{ path(uploadRoute, {"id": id}) }}',
        allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'pdf'],
        onSubmit: function(id, fileName){},
        onProgress: function(id, fileName, loaded, total){},
        onComplete: function(id, fileName, responseJSON){
            if( typeof(responseJSON.values.filename) != 'undefined' && typeof(responseJSON.values.id) != 'undefined') {
                var file_id = responseJSON.values.id;
                $('<li class="span3" id="file-uploader-item-'+file_id+'"><div class="thumbnail"><h5 id="edittitle-'+file_id+'">'+ responseJSON.values.name +'</h5><a href="'+ responseJSON.values.filename +'" title="{% trans %}View larger{% endtrans %}" class="ui-icon-zoomin thumbnail"><img src="'+responseJSON.values.filename+'" alt="" /></a><div class="description" id="editdescription-'+file_id+'"></div><div class="source" id="editsource-'+file_id+'">'+responseJSON.values.source+'</div><a href="'+ responseJSON.values.filename +'" title="{% trans %}View larger{% endtrans %}" class="ui-icon-zoomin btn btn-small">{% trans %}View larger{% endtrans %}</a> <a href="{{ path('admin_cms_file_delete') }}/'+file_id+'" title="{% trans %}Delete this image{% endtrans %}" class="ui-icon-trash btn btn-small btn-danger">{% trans %}Delete this image{% endtrans %}</a></div></li>').appendTo('#gallery');
                $('#file-uploader-item-'+file_id+' h5').editInPlace({
                    url: "{{ path(updateRoute)}}",
                    params: "champ=title",
                    bg_over: "#cff",
                    field_type: "text"
                });
                $('#file-uploader-item-'+file_id+' .description').editInPlace({
                    url: "{{ path(updateRoute)}}",
                    params: "champ=description",
                    field_type: "textarea",
                    textarea_rows: "2",
                    textarea_cols: "15"
                });
                $('#file-uploader-item-'+file_id+' .source').editInPlace({
                    url: "{{ path(updateRoute)}}",
                    params: "champ=source",
                    field_type: "text",
                    textarea_rows: "2",
                    textarea_cols: "15"
                });
                $('#file-uploader-item-'+file_id).click(function( event ) {
                    var $item = $( this ),
                        $target = $( event.target );
                        if(event.target.parentNode.name == "") {
                           $target = $( event.target.parentNode );
                        }
                    if ( $target.is( "a.ui-icon-trash" ) ) {
                        var src = $target.attr( "href" );
                        $.ajax(src);
                        deleteImage( $item );
                    } else if ( $target.is( "a.ui-icon-zoomin") ) {
                        viewLargerImage( $target );
                    }
                    return false;
                });
            }
        },
        onCancel: function(id, fileName){},
        debug: false
    });
});
</script>