$(function () {

var dropbox = $('#dropbox'),
    message = $('.message', dropbox);

dropbox.filedrop({
    paramname: 'pic',
    maxfiles: 100,
    maxfilesize: 100,
    //url: '/Uploader.asmx/Upload',
    url: '/Default.aspx',

    uploadFinished: function (i, file, response) {
        $.data(file).addClass('done');
        var count = file.size;
        alert(count);
    },

    error: function (err, file) {
        switch (err) {
            case 'BrowserNotSupported':
                showMessage('Your browser does not support HTML5 file uploads!');
                break;
            case 'TooManyFiles':
                alert('Too many files! Please select 5 at most! (configurable)');
                break;
            case 'FileTooLarge':
                alert(file.name + ' is too large! Please upload files up to 2mb (configurable).');
                break;
            default:
                break;
        }
    },

    //Called before each upload is started
    // beforeEach: function (file) {
    //if (!file.type.match(/^image//)) {
    //alert('Only images are allowed!');
    //   alert(file.name);
    // Returning false will cause the
    // file to be rejected
    //   return true;
    // }
    //},

    uploadStarted: function (i, file, len) {
        createImage(file);

    },
    progressUpdated: function (i, file, progress) {
        $.data(file).find('.progress').width(progress);
    }

});

var template = '<div class="preview">' +
                    '<span class="imageHolder">' +
                        '<img style="" />' +
                        '<p class="background: rgba(0, 0, 0, 0.75);"></p>' +
                        '<span class="uploaded"></span>' + // background: rgba(0, 0, 0, 0.75);
                    '</span>' +
                    '<div class="progressHolder">' +
                        '<div class="progress"></div>' +
                    '</div>' +
                '</div>';


function createImage(file) {

    var preview = $(template),
        image = $('img', preview),
        paragraph = $('p', preview);

    var reader = new FileReader();

    image.width = 100;
    image.height = 100;

    reader.onload = function (e) {

        // e.target.result holds the DataURL which
        // can be used as a source of the image:
        //alert(e.target.result);
        //            $('p#filename').removeAttr('id');
        //            $('p').attr('id', 'filename' + num + '');
        //            $('p#filename').text(file.name);
        paragraph.attr('id', 'filename').text(file.name);
        image.attr('src', '../assets/img/fileicon.png');
        num = num + 1;
    };

    // Reading the file as a DataURL. When finished,
    // this will trigger the onload function above:
    reader.readAsDataURL(file);

    message.hide();
    preview.appendTo(dropbox);

    // Associating a preview container
    // with the file, using jQuery's $.data():

    $.data(file, preview);
}

function showMessage(msg) {
    message.html(msg);
}