accurator/commit

Merged functions search into results and updated ids.

authorChris Dijkshoorn
Mon Nov 30 17:48:16 2015 +0100
committerChris Dijkshoorn
Mon Nov 30 17:48:16 2015 +0100
commit7a59f245a0abb5c118946d8a26a0c6573f00abac
treedd376177da95b9ee85ec7d536b2e077696cf75ad
parent8b982cca0bd8cb9127f56ea4a600e0b2e8898fe2
Diff style: patch stat
diff --git a/web/css/accurator.css b/web/css/accurator.css
index 3b1b031..57723fc 100644
--- a/web/css/accurator.css
+++ b/web/css/accurator.css
@@ -206,7 +206,7 @@ Search results
 	margin: auto;
 }
 
-#results {
+#resultsDiv {
 	padding-top: 10px;
 	padding-left: 10px;
 	padding-right: 10px;
diff --git a/web/html/results.html b/web/html/results.html
index 112af79..ad3a07a 100644
--- a/web/html/results.html
+++ b/web/html/results.html
@@ -43,7 +43,7 @@
 	</div>
 
 	<!-- Results -->
-	<div class="container" id="results">
+	<div class="container" id="resultsDiv">
 	</div>
 
 	<!-- Login modal -->
diff --git a/web/js/accurator_annotate.js b/web/js/accurator_annotate.js
index 5558044..3d1a592 100644
--- a/web/js/accurator_annotate.js
+++ b/web/js/accurator_annotate.js
@@ -5,7 +5,7 @@ Code for extending functionallity annotation page.
 var query, locale, experiment, domain, user, ui, uri;
 var annotateHdrFirst, annotateTxtFirst;
 
-displayOptions = {
+display = {
 	showMetadata: true,
 	showAnnotations: true,
 }
@@ -133,7 +133,7 @@ function addClusterNavigationButtonEvents() {
 }
 
 function metadata() {
-	if(displayOptions.showMetadata){
+	if(display.showMetadata){
 		// Get metadata from server
 		$.getJSON("metadata", {uri:uri})
 		.done(function(metadata){
@@ -165,7 +165,7 @@ function appendMetadataWell(metadata) {
 
 function annotations() {
 	// Get annotations from server
-	if(displayOptions.showAnnotations){
+	if(display.showAnnotations){
 		$.getJSON("annotations", {uri:uri, type:"object"})
 		.done(function(annotations){
 			if(annotations.annotations.length > 0){
@@ -203,9 +203,9 @@ function maybeRunExperiment() {
 		// Hide path if on annotate page
 		$("#annotateDivNavigation").hide();
 		// Don't show metadata
-		displayOptions.showMetadata = false;
+		display.showMetadata = false;
 		// Don't show annotations of others
-		displayOptions.showAnnotations = false;
+		display.showAnnotations = false;
 		// Add big next button
 		addExperimentNavigation();
 	}
diff --git a/web/js/accurator_profile.js b/web/js/accurator_profile.js
index 1681c86..59615f7 100644
--- a/web/js/accurator_profile.js
+++ b/web/js/accurator_profile.js
@@ -7,7 +7,7 @@ var locale, ui, domain, experiment, user, userName, realName;
 var recentItems;
 var initialClusters, enrichedClusters, clusters;
 
-displayOptions = {
+display = {
 	numberDisplayedItems: 6,
 }
 
diff --git a/web/js/accurator_results.js b/web/js/accurator_results.js
index a7756df..a8de3bc 100644
--- a/web/js/accurator_results.js
+++ b/web/js/accurator_results.js
@@ -5,10 +5,10 @@ pagination.js and thumbnail.js
 *******************************************************************************/
 var query = "", locale, experiment, ui, userName, realName;
 var resultsTxtRecommendationsFor, resultsHdrFirst, resultsTxtFirst;
-var initialClusters = [], enrichedClusters = [], clusters = [];
+var jsonResults, initialClusters = [], enrichedClusters = [], clusters = [];
 
 // Display options deciding how to results get rendered
-displayOptions = {
+display = {
 	layout: "cluster",
 	imageFilter: "onlyImages",
 	numberDisplayedItems: 4,
@@ -108,41 +108,103 @@ function results(query, userQuery, target) {
 }
 
 function search(query, target) {
-	console.log("Searching for: ", query);
-	statusMessage('Searching for ' + query);
+	//TODO: localize variables
+	var resultsTxtSearching = "Searching for ";
+	var resultsHdrResults = "Results for ";
+	var resultsTxtError = "Unfortunately an error has occured";
 
-	onDone = function(data){
-		$("#results").children().remove();
-		controls();
-		processJsonResults(data);
-		createResultClusters();
-		$(document).prop('title', 'Results for ' + query);
-	};
+	var request = {query:query};
+	if(typeof target != 'undefined') request.target = target;
 
-	onFail = function(data){
-		statusMessage('Unfortunately an error has occured', data.responseText);
-	};
+	statusMessage(resultsTxtSearching + query);
 
-	//Get and process clusters
-	if (typeof target == 'undefined') {
-		$.getJSON("cluster_search_api", {query:query})
-		.done(onDone)
-		.fail(onFail);
+	$.getJSON("cluster_search_api", request)
+	.done(function(data){
+		// Make available for future changes of view
+		jsonResults = data;
+		populateResults();
+		// Change title of page
+		$(document).prop('title', resultsHdrResults + query);
+	})
+	.fail(function(data){
+		statusMessage(resultsTxtError, data.responseText)
+	});
+}
+
+function populateResults() {
+	// Clear results div
+	$("#resultsDiv").children().remove();
+	// Results layout is either cluster or list
+	if(display.layout === "cluster") {
+		populateClusters();
+	} else if(display.layout === "list") {
+		//TODO: flatten results clusters
+		populateList();
+	}
+	// Add control buttons
+	controls();
+}
+
+/*******************************************************************************
+Cluster view
+Show the results in clusters
+*******************************************************************************/
+function populateClusters() {
+	console.log(jsonResults);
+	jsonToClusters(jsonResults);
+	createResultClusters();
+}
+
+function jsonToClusters(data) {
+	console.log(data);
+	// Convert json to initialClusters array
+	var sourceClusters = data.clusters;
+	var numberOfClusters = sourceClusters.length;
+
+	for (var i=0;i<numberOfClusters;i++) {
+		// Get path uris and query for the labels
+		var path = sourceClusters[i].path;
+		var numberOfItems = sourceClusters[i].results;
+		var items = [];
+
+		for (var j=0;j<numberOfItems;j++) {
+			var uri = sourceClusters[i].items[j].uri;
+			items[j] = new item(uri);
+		}
+		initialClusters[i] = new cluster(path, items);
+	}
+}
+
+function createResultClusters() {
+	if(initialClusters.length == 0){
+		// console.log('No results found for ', query);
+		$("#resultsDiv").append(noResultsHtml(query));
 	} else {
-		$.getJSON("cluster_search_api", {query:query,
-										 target:target})
-		.done(onDone)
-		.fail(onFail);
+		for(var i=0;i<initialClusters.length;i++) {
+			$("#resultsDiv").append(clusterContainer(i));
+			// Append path to cluster container
+			addPath(i);
+			// Add enriched clusters and pagination
+			addItems(i);
+		}
 	}
 }
 
+/*******************************************************************************
+List view
+Show the results in one big list
+*******************************************************************************/
+function populateList() {
+	console.log(jsonResults);
+}
+
 function recommendItems(target) {
 	console.log("Recommending items");
 
 	$.getJSON("recommendation", {strategy:'expertise',
 								 target:target})
 	.done(function(data){
-		$("#results").children().remove();
+		$("#resultsDiv").children().remove();
 		showFilters();
 		processJsonResults(data);
 		createResultClusters();
@@ -151,8 +213,8 @@ function recommendItems(target) {
 		populateRandom(target, data.clusters.length);
 	})
 	.fail(function(data, textStatus){
-		$("#results").children().remove();
-		$("#results").append(errorHtml(data, textStatus));
+		$("#resultsDiv").children().remove();
+		$("#resultsDiv").append(errorHtml(data, textStatus));
 		$(document).prop('title', 'Error on ' + query);
 	});
 }
@@ -177,7 +239,7 @@ function randomItems(target) {
 }
 
 function populateRandom(target, clusterIndex) {
-	$("#results").append(clusterContainer(clusterIndex));
+	$("#resultsDiv").append(clusterContainer(clusterIndex));
 	$.getJSON("recommendation", {strategy:'random',
 								 number:20,
 								 target:target})
@@ -217,15 +279,15 @@ function recommendExpertiseList(target) {
 		addItemList(items);
 	})
 	.fail(function(data, textStatus){
-		$("#results").children().remove();
-		$("#results").append(errorHtml(data, textStatus));
+		$("#resultsDiv").children().remove();
+		$("#resultsDiv").append(errorHtml(data, textStatus));
 		$(document).prop('title', 'Error on ' + query);
 	});
 }
 
 function controls() {
-	if(displayOptions.showControls) {
-		$("#results").append(
+	if(display.showControls) {
+		$("#resultsDiv").prepend(
 			$.el.div({'class':'row'},
 				$.el.div({'class':'col-md-12 resultsDivControls'}))
 		);
@@ -241,7 +303,7 @@ function resultLayoutButtons() {
 	);
 	setLayoutButton();
 	$("#resultsBtnLayout").click(function() {
-		displayOptions.layout = (displayOptions.layout === "list") ? "cluster" : "list";
+		display.layout = (display.layout === "list") ? "cluster" : "list";
 		setLayoutButton();
 	});
 }
@@ -251,7 +313,7 @@ function setLayoutButton() {
 	var resultsLblCluster = "Cluster view";
 	var resultsLblList = "List view";
 
-	if(displayOptions.layout === "list") {
+	if(display.layout === "list") {
 		$("#resultsBtnLayout").html(
 			$.el.span(resultsLblList + ' ',
 			$.el.span({'class':'glyphicon glyphicon-th-large'}))
@@ -265,10 +327,10 @@ function setLayoutButton() {
 }
 
 function statusMessage(header, text){
-	$("#results").children().remove();
+	$("#resultsDiv").children().remove();
 	$(document).prop('title', header);
 
-	$("#results").append(
+	$("#resultsDiv").append(
 		$.el.div({'class':'row'},
 			$.el.div({'class':'col-lg-10 col-md-offset-1'},
 				$.el.h3(header)),
@@ -303,7 +365,7 @@ function processListEnrichment(sourceItems) {
 	var numberOfItems = sourceItems.length;
 	var items = [];
 
-	// console.log("display", displayOptions.annotateLink);
+	// console.log("display", display.annotateLink);
 	for (var i=0; i<numberOfItems; i++) {
 		var uri = sourceItems[i].uri;
 		var thumb = sourceItems[i].thumb;
@@ -323,7 +385,7 @@ function thumbnailList(items) {
 
 	for(var i=1; i<=numberOfRows; i++) {
 		// Add row for thumbnails
-		$("#results").append(
+		$("#resultsDiv").append(
 			$.el.div({'class':'row', 'id':'thumbnailRow' + i}));
 
 		//Determine where to stop adding
diff --git a/web/js/accurator_utilities.js b/web/js/accurator_utilities.js
index 0b75bf9..5f70df1 100644
--- a/web/js/accurator_utilities.js
+++ b/web/js/accurator_utilities.js
@@ -257,7 +257,7 @@ function recommenderExperiment() {
 	// Settings for recommender experiment
 	if(experiment === "recommender") {
 		// Set interface to list view
-		displayOptions.layout = "list";
+		display.layout = "list";
 
 		// If running an recommender experiment choose A or B
 		var AOrB = getAOrB();
diff --git a/web/js/search.js b/web/js/search.js
index eaf6466..94f1c63 100644
--- a/web/js/search.js
+++ b/web/js/search.js
@@ -3,7 +3,7 @@
 // var clusters = [];
 // var query = "";
 
-// displayOptions = {
+// display = {
 // 	numberDisplayedItems: 4,
 // 	showFilters: true,
 // 	imageFilter: 'onlyImages',
@@ -12,10 +12,10 @@
 // function search(keyword, target) {
 // 	query  = keyword;
 // 	$(document).prop('title', 'Searching for ' + query);
-// 	$("#results").append(searchingHtml());
+// 	$("#resultsDiv").append(searchingHtml());
 //
 // 	onDone = function(data){
-// 		$("#results").children().remove();
+// 		$("#resultsDiv").children().remove();
 // 		showFilters();
 // 		processJsonResults(data);
 // 		createResultClusters();
@@ -23,8 +23,8 @@
 // 	};
 //
 // 	onFail = function(data, textStatus){
-// 		$("#results").children().remove();
-// 		$("#results").append(errorHtml(data, textStatus));
+// 		$("#resultsDiv").children().remove();
+// 		$("#resultsDiv").append(errorHtml(data, textStatus));
 // 		$(document).prop('title', 'Error on ' + query);
 // 	};
 //
@@ -66,49 +66,49 @@
 function noFilterResultsHtml() {
 	return $.el.h4('No results due to filter: ',
 				   $.el.span({'class':'text-danger'},
-							 displayOptions.imageFilter));
+							 display.imageFilter));
 }
 
 // function showFilters() {
-// 	// console.log('Showing filters:', displayOptions.showFilters);
-// 	if(displayOptions.showFilters) {
-// 		$("#results").append(filterAndRankButtons());
+// 	// console.log('Showing filters:', display.showFilters);
+// 	if(display.showFilters) {
+// 		$("#resultsDiv").append(filterAndRankButtons());
 // 	}
 // }
 
-function processJsonResults(data) {
-	// Convert json to initialClusters array
-	var sourceClusters = data.clusters;
-	var numberOfClusters = sourceClusters.length;
-
-	for (var i=0;i<numberOfClusters;i++) {
-		// Get path uris and query for the labels
-		var path = sourceClusters[i].path;
-		var numberOfItems = sourceClusters[i].results;
-		var items = [];
-
-		for (var j=0;j<numberOfItems;j++) {
-			var uri = sourceClusters[i].items[j].uri;
-			items[j] = new item(uri);
-		}
-		initialClusters[i] = new cluster(path, items);
-	}
-}
+// function processJsonResults(data) {
+// 	// Convert json to initialClusters array
+// 	var sourceClusters = data.clusters;
+// 	var numberOfClusters = sourceClusters.length;
+//
+// 	for (var i=0;i<numberOfClusters;i++) {
+// 		// Get path uris and query for the labels
+// 		var path = sourceClusters[i].path;
+// 		var numberOfItems = sourceClusters[i].results;
+// 		var items = [];
+//
+// 		for (var j=0;j<numberOfItems;j++) {
+// 			var uri = sourceClusters[i].items[j].uri;
+// 			items[j] = new item(uri);
+// 		}
+// 		initialClusters[i] = new cluster(path, items);
+// 	}
+// }
 
-function createResultClusters() {
-	if(initialClusters.length == 0){
-		// console.log('No results found for ', query);
-		$("#results").append(noResultsHtml(query));
-	} else {
-		for(var i=0;i<initialClusters.length;i++) {
-			$("#results").append(clusterContainer(i));
-			// Append path to cluster container
-			addPath(i);
-			// Add enriched clusters and pagination
-			addItems(i);
-		}
-	}
-}
+// function createResultClusters() {
+// 	if(initialClusters.length == 0){
+// 		// console.log('No results found for ', query);
+// 		$("#resultsDiv").append(noResultsHtml(query));
+// 	} else {
+// 		for(var i=0;i<initialClusters.length;i++) {
+// 			$("#resultsDiv").append(clusterContainer(i));
+// 			// Append path to cluster container
+// 			addPath(i);
+// 			// Add enriched clusters and pagination
+// 			addItems(i);
+// 		}
+// 	}
+// }
 
 function clusterContainer(clusterId) {
 	return $.el.div({'class':'well well-sm',
@@ -251,13 +251,13 @@ function processEnrichment(data, clusterId) {
 function determineNumberOfPages (clusterId) {
 	var numberOfPages = 0;
 	var numberOfItems = clusters[clusterId].items.length;
-	var restPages = numberOfItems%displayOptions.numberDisplayedItems;
+	var restPages = numberOfItems%display.numberDisplayedItems;
 
 	//Determine number of items in pagination
 	if(restPages == 0) {
-		numberOfPages = numberOfItems/displayOptions.numberDisplayedItems;
+		numberOfPages = numberOfItems/display.numberDisplayedItems;
 	} else {
-		numberOfPages = (numberOfItems-restPages)/displayOptions.numberDisplayedItems+1;
+		numberOfPages = (numberOfItems-restPages)/display.numberDisplayedItems+1;
 	}
 	return numberOfPages;
 }
@@ -269,78 +269,78 @@ function determineNumberOfPages (clusterId) {
 // 							 //rankButtons()));
 // }
 
-function filterButtons() {
-	return $.el.div({'class':'btn-group'},
-			 	    $.el.button({'type':'button',
-								 'class':'btn btn-default dropdown-toggle',
-							     'data-toggle':'dropdown'},
-							     'Image Filter ',
-							    $.el.span({'class':'caret'})),
-				    $.el.ul({'class':'dropdown-menu',
-						     'role':'menu'},
-						     $.el.li(
-									 $.el.a({'href':'javascript:filterTrigger(\'onlyImages\')'},
-										     'Only Images'),
-									 $.el.a({'href':'javascript:filterTrigger(\'allObjects\')'},
-										     'All Objects'))));
-}
-
-function rankButtons() {
-	return $.el.div({'class':'btn-group'},
-					$.el.button({'type':'button',
-								'class':'btn btn-default dropdown-toggle',
-								'data-toggle':'dropdown'},
-								'Cluster Abstraction ',
-								$.el.span({'class':'caret'})),
-					$.el.ul({'class':'dropdown-menu',
-							 'role':'menu'},
-							 $.el.li(
-									 $.el.a({'href':'javascript:clusterAbstractionTrigger(\'instanceLevel\')'},
-											 'Instance Level'),
-									 $.el.a({'href':'javascript:clusterAbstractionTrigger(\'classLevel\')'},
-											 'Class Level'),
-									 $.el.a({'href':'javascript:clusterAbstractionTrigger(\'whatLevel\')'},
-											 'Who What Where'))));
-}
-
-function filterTrigger(type) {
-	var changeShownContent = false;
-	// console.log('Filtering type: ', type);
-	if(type == 'onlyImages' && !(displayOptions.imageFilter == 'onlyImages')) {
-		displayOptions.imageFilter = 'onlyImages';
-		changeShownContent = true;
-	}
-	if(type == 'allObjects'  && !(displayOptions.imageFilter == 'allObjects')) {
-		displayOptions.imageFilter = 'allObjects';
-		changeShownContent = true;
-	}
-	// console.log('Should change something', changeShownContent);
-	if(changeShownContent) {
-		clusters = clone(enrichedClusters);
-		filter();
-		updateClusters();
-	}
-}
-
-function clusterAbstractionTrigger(type) {
-	var changeClusterAbstraction = false;
-	if(type == 'instanceLevel' && !(displayOptions.imageFilter == 'instanceLevel')) {
-		displayOptions.imageFilter = 'instanceLevel';
-		changeClusterAbstraction = true;
-	}
-	if(type == 'classLevel'  && !(displayOptions.imageFilter == 'classLevel')) {
-		displayOptions.imageFilter = 'classLevel';
-		changeClusterAbstraction = true;
-	}
-	if(type == 'whatLevel'  && !(displayOptions.imageFilter == 'whatLevel')) {
-		displayOptions.imageFilter = 'whatLevel';
-		changeClusterAbstraction = true;
-	}
-	if(changeClusterAbstraction) {
-		// console.log("Should be changing the Cluster Abstraction Level");
-		updateClusters();
-	}
-}
+// function filterButtons() {
+// 	return $.el.div({'class':'btn-group'},
+// 			 	    $.el.button({'type':'button',
+// 								 'class':'btn btn-default dropdown-toggle',
+// 							     'data-toggle':'dropdown'},
+// 							     'Image Filter ',
+// 							    $.el.span({'class':'caret'})),
+// 				    $.el.ul({'class':'dropdown-menu',
+// 						     'role':'menu'},
+// 						     $.el.li(
+// 									 $.el.a({'href':'javascript:filterTrigger(\'onlyImages\')'},
+// 										     'Only Images'),
+// 									 $.el.a({'href':'javascript:filterTrigger(\'allObjects\')'},
+// 										     'All Objects'))));
+// }
+//
+// function rankButtons() {
+// 	return $.el.div({'class':'btn-group'},
+// 					$.el.button({'type':'button',
+// 								'class':'btn btn-default dropdown-toggle',
+// 								'data-toggle':'dropdown'},
+// 								'Cluster Abstraction ',
+// 								$.el.span({'class':'caret'})),
+// 					$.el.ul({'class':'dropdown-menu',
+// 							 'role':'menu'},
+// 							 $.el.li(
+// 									 $.el.a({'href':'javascript:clusterAbstractionTrigger(\'instanceLevel\')'},
+// 											 'Instance Level'),
+// 									 $.el.a({'href':'javascript:clusterAbstractionTrigger(\'classLevel\')'},
+// 											 'Class Level'),
+// 									 $.el.a({'href':'javascript:clusterAbstractionTrigger(\'whatLevel\')'},
+// 											 'Who What Where'))));
+// }
+//
+// function filterTrigger(type) {
+// 	var changeShownContent = false;
+// 	// console.log('Filtering type: ', type);
+// 	if(type == 'onlyImages' && !(display.imageFilter == 'onlyImages')) {
+// 		display.imageFilter = 'onlyImages';
+// 		changeShownContent = true;
+// 	}
+// 	if(type == 'allObjects'  && !(display.imageFilter == 'allObjects')) {
+// 		display.imageFilter = 'allObjects';
+// 		changeShownContent = true;
+// 	}
+// 	// console.log('Should change something', changeShownContent);
+// 	if(changeShownContent) {
+// 		clusters = clone(enrichedClusters);
+// 		filter();
+// 		updateClusters();
+// 	}
+// }
+//
+// function clusterAbstractionTrigger(type) {
+// 	var changeClusterAbstraction = false;
+// 	if(type == 'instanceLevel' && !(display.imageFilter == 'instanceLevel')) {
+// 		display.imageFilter = 'instanceLevel';
+// 		changeClusterAbstraction = true;
+// 	}
+// 	if(type == 'classLevel'  && !(display.imageFilter == 'classLevel')) {
+// 		display.imageFilter = 'classLevel';
+// 		changeClusterAbstraction = true;
+// 	}
+// 	if(type == 'whatLevel'  && !(display.imageFilter == 'whatLevel')) {
+// 		display.imageFilter = 'whatLevel';
+// 		changeClusterAbstraction = true;
+// 	}
+// 	if(changeClusterAbstraction) {
+// 		// console.log("Should be changing the Cluster Abstraction Level");
+// 		updateClusters();
+// 	}
+// }
 
 function updateClusters() {
 	for(var i=0; i<clusters.length; i++) {
@@ -360,7 +360,7 @@ function updateClusters() {
 }
 
 function filter() {
-	if(displayOptions.imageFilter == 'onlyImages') {
+	if(display.imageFilter == 'onlyImages') {
 		// console.log('Filtering out objects without image');
 		// Remove all items without an image (read: with a stub)
 		for(var i=0; i<clusters.length; i++) {
@@ -370,7 +370,7 @@ function filter() {
 }
 
 function filterCluster(cluster) {
-	if(displayOptions.imageFilter == 'onlyImages') {
+	if(display.imageFilter == 'onlyImages') {
 		// Remove all items without an image (read: with a stub)
 		var items = cluster.items;
 		// Check which items should be removed
diff --git a/web/js/thumbnail.js b/web/js/thumbnail.js
index 25c1060..6b637df 100644
--- a/web/js/thumbnail.js
+++ b/web/js/thumbnail.js
@@ -5,8 +5,8 @@ var boodstrapWitdth;
 
 function thumbnails(clusterId) {
 	var items = clusters[clusterId].items;
-	var stop = displayOptions.numberDisplayedItems;
-	bootstrapWidth = parseInt(12/displayOptions.numberDisplayedItems, 10);
+	var stop = display.numberDisplayedItems;
+	bootstrapWidth = parseInt(12/display.numberDisplayedItems, 10);
 
 	//Check if less results available then there are to be displayed
 	if(items.length<stop){
@@ -24,7 +24,7 @@ function thumbnails(clusterId) {
 }
 
 function thumbnail(item) {
-	var bootstrapWidth = parseInt(12/displayOptions.numberDisplayedItems, 10);
+	var bootstrapWidth = parseInt(12/display.numberDisplayedItems, 10);
 	var id = getId(item.uri);
 
 	return $.el.div({'class':'col-md-' + bootstrapWidth},
@@ -47,8 +47,8 @@ function thumbnailTitle(item, bootstrapWidth) {
 
 function changeThumbnails(pageNumber, activePage, numberOfPages, clusterId) {
 	var items = clusters[clusterId].items;
-	var start = (pageNumber - 1) * displayOptions.numberDisplayedItems;
-	var stop = start + displayOptions.numberDisplayedItems;
+	var start = (pageNumber - 1) * display.numberDisplayedItems;
+	var stop = start + display.numberDisplayedItems;
 	var remove = 0;
 	var headerType;
 
@@ -59,7 +59,7 @@ function changeThumbnails(pageNumber, activePage, numberOfPages, clusterId) {
 		// console.log("Should make " + remove + " invisible.");
 	}
 
-	// console.log("start: " + start + " stop: " + stop + " page number: " + pageNumber + " current page: " + activePage + " cluster id: " + clusterId + " displayed: " + displayOptions.numberDisplayedItems + " remove: " + remove);
+	// console.log("start: " + start + " stop: " + stop + " page number: " + pageNumber + " current page: " + activePage + " cluster id: " + clusterId + " displayed: " + display.numberDisplayedItems + " remove: " + remove);
 	var thumbIndex = 0;
 	for (var i=start; i<stop; i++) {
 		// console.log("Replacing thumb", thumbIndex);
@@ -86,10 +86,10 @@ function changeThumbnails(pageNumber, activePage, numberOfPages, clusterId) {
 
 	// If returning from a possible invisible situation, make everything visible again
 	if(activePage == numberOfPages) {
-		var removed = numberOfPages * displayOptions.numberDisplayedItems - items.length;
+		var removed = numberOfPages * display.numberDisplayedItems - items.length;
 		// console.log("Make " + removed + " thumbnail(s) visible again.");
-		var start = displayOptions.numberDisplayedItems - removed;
-		for(var i=start;i<displayOptions.numberDisplayedItems;i++) {
+		var start = display.numberDisplayedItems - removed;
+		for(var i=start;i<display.numberDisplayedItems;i++) {
 			$("#cluster" + clusterId + " .col-md-" + bootstrapWidth).eq(i).show();
 		}
 	}