{% block impuploader_file_widget %}


    <!-- Bootstrap styles -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- Generic page styles -->
    <link rel="stylesheet" href="{{ asset("bundles/rawafeduploader/jQuery-File-Upload-9.9.3/css/style.css") }}">
    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
    <link rel="stylesheet" href="{{ asset("bundles/rawafeduploader/jQuery-File-Upload-9.9.3/css/jquery.fileupload.css") }}">

    <div class="container">

        <br>
        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add files...</span>
            <!-- The file input field used as target for the file upload widget -->
            <input id="fileupload_{{ form.vars.id }}" type="file" name="{{ form.vars.full_name }}" data-url="{{ oneup_uploader_endpoint(mapping) }}" {{ multiple ? "multiple" : "" }}>
        </span>

        <span id="fileupload_cancel_{{ form.vars.id }}" class="btn btn-danger disabled">
            <i class="glyphicon glyphicon-remove"></i>
            <span>Cancel</span>
        </span>

        <br>
        <!-- The global progress bar -->
        <div id="progress_{{ form.vars.id }}" class="progress">
            <div class="progress-bar progress-bar-success"></div>
            <div class="file"></div>
        </div>
        <!-- The container for the uploaded files -->
        <div id="files_{{ form.vars.id }}" class="files"></div>
        <br>

    </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="{{ asset("bundles/rawafeduploader/jQuery-File-Upload-9.9.3/js/vendor/jquery.ui.widget.js")}}"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="{{ asset("bundles/rawafeduploader/jQuery-File-Upload-9.9.3/js/jquery.iframe-transport.js")}}"></script>
<!-- The basic File Upload plugin -->
<script src="{{ asset("bundles/rawafeduploader/jQuery-File-Upload-9.9.3/js/jquery.fileupload.js")}}"></script>

<script>

    function getUniqueId() {
        return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
            /*jslint eqeq: true, bitwise: true*/
            var r = Math.random() * 16 | 0, v = c == "x" ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }
    /*jslint unparam: true */
    /*global window, $ */
    $(function () {
        'use strict';
        // Change this to the location of your server-side upload handler:
        $('#fileupload_{{ form.vars.id }}').fileupload({
            url: "{{ oneup_uploader_endpoint(mapping) }}",
            dataType: 'json',
            maxChunkSize: {{ storage.sync_buffer_size }},
            maxFileSize: {{ max_size }},   //{{ oneup_uploader_maxsize(mapping) }},
            autoUpload: false,
            dragDrop: true,
            showDelete: true,

            add: function (e, data) {
                var uuid = getUniqueId();
                data.formData = {"uuid" : uuid};

                $("#files_{{ form.vars.id }}").html('');

                if(data.files.length){
                   $("#fileupload_cancel_{{ form.vars.id }}").removeClass("disabled")
                        .click(function(){
                               data.abort();
                               $("#fileupload_cancel_{{ form.vars.id }}").addClass("disabled");
                               $("#files_{{ form.vars.id }}").html('');
                            });
                }else{
                    $("#fileupload_cancel_{{ form.vars.id }}").addClass("disabled");
                }

                $.each(data.files, function(index, file){
                    file.uuid = uuid;
                    $('#progress_{{ form.vars.id }} .progress-bar')
                            .append();
                    {#$("<div id='progress_{{ form.vars.id }}_"+index+"' class='progress'><div style='width: 0px;' class='progress-bar progress-bar-success'>100%</div></div>").appendTo(document.body);#}
                    //$("#files_{{ form.vars.id }}").append($("<div id='item_{{ form.vars.id }}_"+index+"' >"+file.name+"</div>"));
                });

                data.context =
                        $('<button/>')
                            .text('Upload')
                            .click(function () {
                                data.context =
                                        $('<button/>')
                                            .text("Abort")
                                                .click(
                                                    function(){
                                                        data.context = $('<p/>').text('').replaceAll($(this));
                                                        data.abort();
                                                    }
                                                ).replaceAll($(this));

                                    data.submit();
                                })
                                .appendTo("#files_{{ form.vars.id }}");


            },
            done: function (e, data) {
//                $.each(data.result.files, function (index, file) {
//                    $('<p/>').text(file.name).appendTo('#files');
//                });
            },

            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress_{{ form.vars.id }} .progress-bar').text(progress + '%').css(
                        'width',
                        progress + '%'
                );
            }
        })

        {#
                .bind('fileuploadadd', function (e, data) { console.log('fileuploadadd'); })
                .bind('fileuploadsubmit', function (e, data) { console.log('fileuploadsubmit'); })
                .bind('fileuploadsend', function (e, data) { console.log('fileuploadsend'); })
                .bind('fileuploaddone', function (e, data) { console.log('fileuploaddone'); })
                .bind('fileuploadfail', function (e, data) { console.log('fileuploadfail'); })
                .bind('fileuploadalways', function (e, data) { console.log('fileuploadalways'); })
                .bind('fileuploadprogress', function (e, data) { console.log('fileuploadprogress'); })
                .bind('fileuploadprogressall', function (e, data) { console.log('fileuploadprogressall'); })
                .bind('fileuploadstart', function (e) {
                    console.log('fileuploadstart');
                    console.log(e);
                })
                .bind('fileuploadstop', function (e) { console.log('fileuploadstop'); })
                .bind('fileuploadchange', function (e, data) { console.log('fileuploadchange'); })
                .bind('fileuploadpaste', function (e, data) { console.log('fileuploadpaste'); })
                .bind('fileuploaddrop', function (e, data) { console.log('fileuploaddrop'); })
                .bind('fileuploaddragover', function (e) { console.log('fileuploaddragover'); })
                .bind('fileuploadchunksend', function (e, data) { console.log('fileuploadchunksend'); })
                .bind('fileuploadchunkdone', function (e, data) { console.log('fileuploadchunkdone'); })
                .bind('fileuploadchunkfail', function (e, data) { console.log('fileuploadchunkfail'); })
                .bind('fileuploadchunkalways', function (e, data) { console.log('fileuploadchunkalways'); })
#}

                .prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');

    });

</script>

    <div class="span3 pull-left">
        {{ block('form_widget') }}
    </div>
{% endblock impuploader_file_widget %}