cluster_search_ui/commit

Thumbnails now have click events, allowing the save of current cluster and index of the thumbnail.

diff --git a/web/css/search.css b/web/css/search.css
index 123b1ca..ee50601 100644
--- a/web/css/search.css
+++ b/web/css/search.css
@@ -20,6 +20,9 @@ body {
 	padding-bottom: 10px;
 }
 
+.thumbnail {
+	cursor: pointer;
+}
 .path-label {
 	color: rgb(255, 255, 255);
     display: inline;
diff --git a/web/js/search.js b/web/js/search.js
index b07357a..a4a1d58 100644
--- a/web/js/search.js
+++ b/web/js/search.js
@@ -180,7 +180,7 @@ function addItems(clusterId) {
 					} else {
 						var pages = determineNumberOfPages(clusterId);
 						$("#cluster"+clusterId).append(pagination(pages, clusterId));
-						$("#cluster"+clusterId).append(thumbnails(clusterId));
+						thumbnails(clusterId);
 					}
 	}});
 }
diff --git a/web/js/thumbnail.js b/web/js/thumbnail.js
index 4ded530..bd4b51f 100644
--- a/web/js/thumbnail.js
+++ b/web/js/thumbnail.js
@@ -12,18 +12,23 @@ function thumbnails(clusterId) {
 	if(items.length<stop){
 		stop = items.length;
 	}
-	var thumbnails = $.el.div({'class':'row'});
-	for (var i=0;i<stop;i++) { 
+	//Add row
+	$("#cluster"+clusterId).append(
+		$.el.div({'class':'row', 'id':'thumbnailRow'+clusterId}));
+		
+	for (var i=0;i<stop;i++) {
+		id = getId(items[i].uri);
 //		console.log("Cluster items title: " + items[i].title);
-		thumbnails.appendChild(
+		$("#thumbnailRow"+clusterId).append(
 			$.el.div({'class':'col-md-' + bootstrapWidth},
-					 $.el.a({'href':items[i].link},
-							$.el.div({'class':'thumbnail'},
-									 $.el.img({'src':items[i].thumb,
-											   'class':'img-responsive',
-											   'alt':''}),
-									 $.el.div({'class':'caption'},
-											 thumbnailTitle(i, items, bootstrapWidth))))));
+				$.el.div({'class':'thumbnail',
+						  'id':id},
+					$.el.img({'src':items[i].thumb,
+					          'class':'img-responsive',
+							  'alt':''}),
+						$.el.div({'class':'caption'},
+							 thumbnailTitle(i, items, bootstrapWidth)))));
+		addClickEvent(id, items[i].link, clusterId, i);
 	}
 	return thumbnails;
 }
@@ -53,9 +58,11 @@ function changeThumbnails(pageNumber, activePage, numberOfPages, clusterId) {
 	var thumbIndex = 0;
 	for (var i=start;i<stop;i++) { 
 		console.log("title: " + items[i].title + " i : " + i + " thumbIndex: " + thumbIndex);
-		// Replace link
-		$("#cluster" + clusterId + " .col-md-" + bootstrapWidth + " a").eq(thumbIndex).attr(
-				'href', items[i].link);
+		// Replace id and set link
+		id = getId(items[i].uri)
+		$("#cluster" + clusterId + " .col-md-" + bootstrapWidth + " a").eq(thumbIndex).attr("id", id);
+		addClickEvent(id, items[i].link, clusterId, i);
+		
 		// Replace image
 		$("#cluster" + clusterId + " img").eq(thumbIndex).replaceWith(
 			$.el.img({'src':items[i].thumb,
@@ -86,4 +93,16 @@ function changeThumbnails(pageNumber, activePage, numberOfPages, clusterId) {
 		// Remove slow?
 		$("#cluster" + clusterId + " .col-md-" + bootstrapWidth).eq(i).hide();
 	} 
+}
+
+function getId(uri) {
+	id = uri.substr(uri.lastIndexOf('/') + 1);
+	return id;
+}
+
+function addClickEvent(id, link, clusterId, index) {
+	$("#" + id).click(function() {			localStorage.setItem("itemIndex", index);
+		localStorage.setItem("currentCluster", JSON.stringify(clusters[clusterId]));
+		document.location.href=link;
+	});
 }
\ No newline at end of file