accurator/commit

Added layout control buttons.

diff --git a/web/css/accurator.css b/web/css/accurator.css
index 9c5d24c..3b1b031 100644
--- a/web/css/accurator.css
+++ b/web/css/accurator.css
@@ -220,6 +220,10 @@ Search results
 	cursor: pointer;
 }
 
+.resultsDivControls {
+	padding-bottom: 10px;
+}
+
 .path-label {
 	color: rgb(255, 255, 255);
     display: inline;
diff --git a/web/js/accurator_results.js b/web/js/accurator_results.js
index a846d77..a7756df 100644
--- a/web/js/accurator_results.js
+++ b/web/js/accurator_results.js
@@ -10,9 +10,9 @@ var initialClusters = [], enrichedClusters = [], clusters = [];
 // Display options deciding how to results get rendered
 displayOptions = {
 	layout: "cluster",
+	imageFilter: "onlyImages",
 	numberDisplayedItems: 4,
-	showFilters: false,
-	imageFilter: "onlyImages"
+	showControls: true
 }
 
 function resultsInit() {
@@ -113,7 +113,7 @@ function search(query, target) {
 
 	onDone = function(data){
 		$("#results").children().remove();
-		showFilters();
+		controls();
 		processJsonResults(data);
 		createResultClusters();
 		$(document).prop('title', 'Results for ' + query);
@@ -136,20 +136,6 @@ function search(query, target) {
 	}
 }
 
-function statusMessage(header, text){
-	$("#results").children().remove();
-	$(document).prop('title', header);
-
-	$("#results").append(
-		$.el.div({'class':'row'},
-			$.el.div({'class':'col-lg-10 col-md-offset-1'},
-				$.el.h3(header)),
-			$.el.div({'class':'row'},
-				$.el.div({'class':'col-md-10 col-md-offset-1'},
-					text)))
-	);
-}
-
 function recommendItems(target) {
 	console.log("Recommending items");
 
@@ -237,6 +223,60 @@ function recommendExpertiseList(target) {
 	});
 }
 
+function controls() {
+	if(displayOptions.showControls) {
+		$("#results").append(
+			$.el.div({'class':'row'},
+				$.el.div({'class':'col-md-12 resultsDivControls'}))
+		);
+		resultLayoutButtons();
+	}
+}
+
+function resultLayoutButtons() {
+	$(".resultsDivControls").append(
+		$.el.div({'class':'btn-group'},
+			$.el.button({'class':'btn btn-default',
+						 'id':'resultsBtnLayout'}))
+	);
+	setLayoutButton();
+	$("#resultsBtnLayout").click(function() {
+		displayOptions.layout = (displayOptions.layout === "list") ? "cluster" : "list";
+		setLayoutButton();
+	});
+}
+
+function setLayoutButton() {
+	//TODO: localize variables
+	var resultsLblCluster = "Cluster view";
+	var resultsLblList = "List view";
+
+	if(displayOptions.layout === "list") {
+		$("#resultsBtnLayout").html(
+			$.el.span(resultsLblList + ' ',
+			$.el.span({'class':'glyphicon glyphicon-th-large'}))
+		);
+	} else {
+		$("#resultsBtnLayout").html(
+			$.el.span(resultsLblCluster + ' ',
+			$.el.span({'class':'glyphicon glyphicon-th-large'}))
+		);
+	}
+}
+
+function statusMessage(header, text){
+	$("#results").children().remove();
+	$(document).prop('title', header);
+
+	$("#results").append(
+		$.el.div({'class':'row'},
+			$.el.div({'class':'col-lg-10 col-md-offset-1'},
+				$.el.h3(header)),
+			$.el.div({'class':'row'},
+				$.el.div({'class':'col-md-10 col-md-offset-1'},
+					text)))
+	);
+}
 
 /*******************************************************************************
 Result List
diff --git a/web/js/search.js b/web/js/search.js
index ea91019..eaf6466 100644
--- a/web/js/search.js
+++ b/web/js/search.js
@@ -69,12 +69,12 @@ function noFilterResultsHtml() {
 							 displayOptions.imageFilter));
 }
 
-function showFilters() {
-	// console.log('Showing filters:', displayOptions.showFilters);
-	if(displayOptions.showFilters) {
-		$("#results").append(filterAndRankButtons());
-	}
-}
+// function showFilters() {
+// 	// console.log('Showing filters:', displayOptions.showFilters);
+// 	if(displayOptions.showFilters) {
+// 		$("#results").append(filterAndRankButtons());
+// 	}
+// }
 
 function processJsonResults(data) {
 	// Convert json to initialClusters array
@@ -262,12 +262,12 @@ function determineNumberOfPages (clusterId) {
 	return numberOfPages;
 }
 
-function filterAndRankButtons() {
-	return $.el.div({'class':'row'},
-					$.el.div({'class':'col-md-12 filters'},
-							 filterButtons()));
-							 //rankButtons()));
-}
+// function filterAndRankButtons() {
+// 	return $.el.div({'class':'row'},
+// 					$.el.div({'class':'col-md-12 filters'},
+// 							 filterButtons()));
+// 							 //rankButtons()));
+// }
 
 function filterButtons() {
 	return $.el.div({'class':'btn-group'},