(function () {
    var input = document.getElementById("images")


    function showUploadedItem (file, id) {

        var reader = new FileReader();
        reader.onload = (function(theFile) {
                return function(e) {
                    var template = '<li>'+
                                        '<img src="'+e.target.result+'">'+
                                        '<br />'+
                                        '<progress min="0" max="100" value="0" id="'+id+'"></progress>'+
                                   '</li>';
                    $("#image-list").append(template);
                };
        })(file);

        reader.readAsDataURL(file);
    }


    input.addEventListener("change", function (evt) {

        for (var i=0, j=this.files.length; i<j; i++) {
            file = this.files[i];

            formdata = new FormData();
            formdata.append("images[]", file);

            var xhr = new XMLHttpRequest(),
                upload = xhr.upload,
                id = "progress_" + Math.floor((Math.random() * 100000));

                upload.addEventListener("loadstart", function(e){
                    showUploadedItem(file, this.id);
                });/*
                xhr.addEventListener('progress', function(e) {

                }, false);*/
                upload.id = id;
                upload.onprogress = function(e) {
                    var done = e.position || e.loaded, total = e.totalSize || e.total;
                    $("#" + this.id).attr('value',  Math.floor((e.loaded / e.total) * 100) )
                    //console.log( this.id );
                    //alert(this.id);
                };
                /*xhr.onreadystatechange = function(e) {
                    if ( 4 == this.readyState ) {
                        console.log(['xhr upload complete', e]);
                    }
                };*/
                xhr.open('post', 'upload.php', true);
                xhr.send(formdata);

        }

    }, false);
}());