accurator/commit

Using canvas as stub for thumbnail image.

diff --git a/web/js/components/cluster.js b/web/js/components/cluster.js
index 9abfccf..a5494c6 100644
--- a/web/js/components/cluster.js
+++ b/web/js/components/cluster.js
@@ -101,7 +101,8 @@ Cluster.prototype.addThumbnails = function(numberDisplayedItems) {
 
 	// add row
 	$(this.node).append(
-		$.el.div({'class':'row', 'id':'thumbnailRow' + this.id}));
+		$.el.div({'class':'row', 'id':'thumbnailRow' + this.id})
+	);
 
 	for (var i = 0; i < stop; i++) {
 		var thumbnail = new Thumbnail(
@@ -127,12 +128,21 @@ Cluster.prototype.changeThumbnails = function(currentPage, nextPage, numberDispl
 	var remove = 0; // number of thumbnails spaces not shown
 	var headerType; // size of the header
 
-	// Check if there are more spaces then items, if so, make those spaces invisible
+	// check if there are more spaces then items, if so, make those spaces invisible
 	if(stop > this.items.length) {
 		remove = stop - this.items.length;
 		stop = this.items.length;
 	}
 
+	// update thumbnails directly on click
+	for (var i = 0; i < numberDisplayedItems; i++) {
+		if (i < (numberDisplayedItems - remove)) {
+			this.thumbnails[i].setStub();
+		} else {
+			this.thumbnails[i].hide();
+		}
+	}
+
 	// console.log("start: " + start + " stop: " + stop + " page number: " + nextPage + " current page: " + currentPage + " cluster id: " + this.id + " displayed: " + numberDisplayedItems + " remove: " + remove);
 	var thumbIndex = 0; // index of the thumbnail spots
 
@@ -156,9 +166,4 @@ Cluster.prototype.changeThumbnails = function(currentPage, nextPage, numberDispl
 			this.thumbnails[i].show();
 		}
 	}
-
-	// don't display unused thumbspace
-	for (var i = thumbIndex; i < thumbIndex+remove; i++) {
-		this.thumbnails[i].hide();
-	}
 }
diff --git a/web/js/components/thumbnail.js b/web/js/components/thumbnail.js
index 0ac5a9c..9c91b52 100644
--- a/web/js/components/thumbnail.js
+++ b/web/js/components/thumbnail.js
@@ -17,7 +17,27 @@ function Thumbnail(uri, title, thumb, link, numberDisplayedItems) {
 
 Thumbnail.prototype.init = function() {
 	this.id = this.getId(this.uri);
-	this.node = this.html(this.id, this.thumb, this.bootstrapWidth);
+	this.node = $.el.div({'class':'col-md-' + this.bootstrapWidth},
+		$.el.div({
+			'class':'thumbnail',
+			'id':this.id
+		},
+			$.el.canvas({
+				'class':'img-responsive',
+				'width':'350px',
+				'height':'300px',
+				'style':'solid #d3d3d3'
+			}),
+			$.el.img({
+				'src':'',
+				'class':'img-responsive',
+				'alt':''
+			}),
+			$.el.div({'class':'caption'},
+				this.thumbnailTitle()
+	)));
+
+	this.setImage(this.thumb);
 }
 
 // Retrieves the item id from the uri string
@@ -30,20 +50,26 @@ Thumbnail.prototype.getId = function(uri) {
 
 // Generate HTML for adding a thumbnail for an item
 Thumbnail.prototype.html = function(id, thumb, bootstrapWidth) {
-	return $.el.div({'class':'col-md-' + bootstrapWidth},
-				$.el.div({'class':'thumbnail',
-						  'id':id},
-					$.el.img({'src':thumb,
-							  'class':'img-responsive',
-							  'alt':''}),
-						$.el.div({'class':'caption'},
-							 this.thumbnailTitle())));
+
+}
+
+Thumbnail.prototype.setStub = function() {
+	$(this.node).find("img").hide();
+	$(this.node).find("canvas").show();
 }
 
 Thumbnail.prototype.setImage = function(url) {
+	// show canvas
+	var _thumb = this;
+	$(this.node).find("img").attr("src", url);
+
+	$(this.node).find("img").on('load', function() {
+		// hide the canvas
+		$(_thumb.node).find("canvas").hide();
+		$(_thumb.node).find("img").show();
+	});
 	// replace image url
 	this.thumb = url;
-	$(this.node).find("img").attr("src", url);
 }
 
 Thumbnail.prototype.setTitle = function(title) {