Add spinner; retain preview image order.

public/js/upload_queue.js

@@ -1,38 +1,80 @@
 function UploadQueue(options) {
 	this.queue = options.queue_element;
 	this.previews = options.preview_area;
+	this.submit = options.submit_button;
 	this.addEvents();
 }
 
 UploadQueue.prototype.addEvents = function() {
 	var that = this;
 	that.queue.addEventListener('change', function() {
-		that.clearArea();
+		that.showSpinner(that.queue);
+		that.clearPreviews();
 		for (var i = 0; i < that.queue.files.length; i++) {
-			that.addPreviewForFile(that.queue.files[i]);
+			var callback = (i !== that.queue.files.length - 1) ? null : function() {
+				that.hideSpinner();
+			};
+			that.addPreviewForFile(that.queue.files[i], i, callback);
 		};
 	});
+	that.submit.addEventListener('click', function(e) {
+		e.preventDefault();
+		that.process();
+	});
 };
 
-UploadQueue.prototype.clearArea = function() {
+UploadQueue.prototype.clearPreviews = function() {
 	this.previews.innerHTML = '';
 }
 
-UploadQueue.prototype.addPreviewForFile = function(file) {
+UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
 	if (!file) {
 		return false;
 	}
 
 	var preview = document.createElement('img');
-	preview.id = ''
-	preview.style.maxWidth = '150px';
+	preview.id = 'upload_preview_' + index;
 	preview.style.maxHeight = '150px';
 
 	var reader = new FileReader();
 	var that = this;
-	reader.addEventListener('load', function() {
+	var appendMe = function() {
 		preview.src = reader.result;
+		if (callback) {
+			preview.addEventListener('load', function() {
+				callback();
+			});
+		}
 		that.previews.appendChild(preview);
-	}, false);
+	};
+	var waitForMe = function() {
+		var previews = that.previews.childNodes;
+		if (previews.length === 0 || previews[previews.length - 1].id === 'upload_preview_' + (index - 1)) {
+			appendMe();
+		} else {
+			setTimeout(waitForMe, 10);
+		}
+	};
+	reader.addEventListener('load', waitForMe, false);
 	reader.readAsDataURL(file);
 };
+
+UploadQueue.prototype.process = function() {
+	this.showSpinner(this.submit);
+	alert('Should now upload ' + this.queue.files.length + " files");
+};
+
+UploadQueue.prototype.showSpinner = function(sibling) {
+	if (this.spinner) {
+		return;
+	}
+
+	this.spinner = document.createElement('div');
+	this.spinner.className = 'spinner';
+	sibling.parentNode.appendChild(this.spinner);
+};
+
+UploadQueue.prototype.hideSpinner = function() {
+	this.spinner.parentNode.removeChild(this.spinner);
+	this.spinner = null;
+};