(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);
}());