accurator/commit

Rather fancy pagination object.

diff --git a/web/html/profile.html b/web/html/profile.html
index 85ae314..6853592 100644
--- a/web/html/profile.html
+++ b/web/html/profile.html
@@ -93,46 +93,6 @@
 		</div>
 	</div>
 
-	<!-- Logos -->
-	<div class="footerDiv container">
-		<div class="logo col-md-2 col-xs-4">
-			<a href="http://commit-nl.nl/">
-				<img src="img/logos/commit.png" class="footerImgLogo" id="footerImgCommitLogo" alt="Logo of ">
-				</img>
-			</a>
-		</div>
-      	<div class="logo col-md-2 col-xs-4">
-			<a href="http://www.cwi.nl">
-				<img src="img/logos/cwi.png" class="footerImgLogo" alt="Logo of CWI">
-				</img>
-			</a>
-		</div>
-		<div class="logo col-md-2 col-xs-4">
-			<a href="http://www.tudelft.nl">
-				<img src="img/logos/tud.png" class="footerImgLogo" alt="Logo of TU Delft">
-				</img>
-			</a>
-		</div>
-		<div class="logo col-md-2 col-xs-4">
-			<a href="http://vu.nl/">
-				<img src="img/logos/vu.png" class="footerImgLogo" alt="Logo of VU University Amsterdam">
-				</img>
-			</a>
-		</div>
-		<div class="logo col-md-2 col-xs-4">
-			<a href="http://rijksmuseum.nl">
-				<img src="img/logos/rma.png" class="footerImgLogo" id="footerImgRijksmuseumLogo" alt="Logo of Rijksmuseum">
-				</img>
-			</a>
-		</div>
-		<div class="logo col-md-2 col-xs-4">
-			<a href="http://www.naturalis.nl/">
-				<img src="img/logos/naturalis.png" class="footerImgLogo" alt="Logo of Naturalis">
-				</img>
-			</a>
-		</div>
-	</div>
-
 	<!-- Login modal -->
 	<div class="modal fade" id="loginDivLogin">
 		<div class="modal-dialog">
@@ -174,7 +134,6 @@
 	<script type="text/javascript" src="js/components/cluster.js"></script>
 	<script type="text/javascript" src="js/components/pagination.js"></script>
 	<script type="text/javascript" src="js/components/thumbnail.js"></script>
-	<script type="text/javascript" src="js/pengines.js"></script>
 	<script type="text/javascript" src="js/components/utilities.js"></script>
 	<script type="text/javascript" src="js/profile.js"></script>
 	<script>profileInit();</script>
diff --git a/web/js/components/cluster.js b/web/js/components/cluster.js
index a58a7c4..2b9990f 100644
--- a/web/js/components/cluster.js
+++ b/web/js/components/cluster.js
@@ -9,6 +9,12 @@ function Cluster(uris, id) {
 	this.init();
 }
 
+Cluster.prototype.init = function() {
+	$("body").on("pagination", function(event) {
+		console.log("page:", event.page);
+	});
+}
+
 Cluster.prototype.enrich = function() {
 	var _cluster = this; //make sure we can use this Cluster in $ scope
 
@@ -67,7 +73,6 @@ Cluster.prototype.addThumbnails = function(numberDisplayedItems) {
 		stop = this.items.length;
 	}
 
-	console.log("cluster id", this.id);
 	// add row
 	$("#" + this.id).append(
 		$.el.div({'class':'row', 'id':'thumbnailRow' + this.id}));
diff --git a/web/js/components/pagination.js b/web/js/components/pagination.js
index f3340c2..119e371 100644
--- a/web/js/components/pagination.js
+++ b/web/js/components/pagination.js
@@ -6,7 +6,6 @@ function Pagination(id, items, numberDisplayedItems, parentId) {
 	this.numberOfItems = items.length; // number of items
 	this.numberDisplayedItems = numberDisplayedItems; // the number of items shown
 	this.page = null; // the current page
-	this.items = items; // TODO: remove? items presented by pagination
 	this.node = null; // html representation of pagination row
 	this.parentId = parentId; // id of the parent element (probably cluster)
 
@@ -39,9 +38,11 @@ Pagination.prototype.html = function() {
 	var html =
 	$.el.ul({'class':'pagination pagination-sm'},
 		$.el.li({'class':'disabled left-arrow'},
-			$.el.span('\u00ab')),
+			$.el.a({'href':'#'},
+				'\u00ab')),
 		$.el.li({'class':'active'},
-			$.el.span(1))
+			$.el.a({'href':'#'},
+				1))
 	);
 
 	// add additional pages
@@ -54,22 +55,20 @@ Pagination.prototype.html = function() {
 
 	// add right arrow to pagination
 	var rightArrow =
-	$.el.li(
-		$.el.a({'href':'#', 'class':'right-arrow'},
+	$.el.li({'class':'right-arrow'},
+		$.el.a({'href':'#'},
 		 	'\u00bb')
 	);
 	this.addClickNext(rightArrow);
 	html.appendChild(rightArrow);
 
-	return $.el.div({'class':'row'},
-				$.el.div({'class':'col-md-12'},
-					html));
+	return html;
 }
 
 Pagination.prototype.addClickEvent = function(pageNode, i) {
 	var _page = this;
 
-	$(pageNode).on("click", function() {
+	$(pageNode).on("click pagination", function() {
 		_page.goToPage(i);
 	});
 }
@@ -77,13 +76,16 @@ Pagination.prototype.addClickEvent = function(pageNode, i) {
 Pagination.prototype.addClickNext = function(pageNode) {
 	var _page = this;
 
-	$(pageNode).on("click", function() {_page.next();});
+	$(pageNode).on("click pagination", function() {
+		_page.next();
+
+	});
 }
 
 Pagination.prototype.addClickPrevious = function(pageNode) {
 	var _page = this;
 
-	$(pageNode).on("click", function() {_page.previous();});
+	$(pageNode).on("click pagination", function() {_page.previous();});
 }
 
 Pagination.prototype.next = function() {
@@ -95,100 +97,48 @@ Pagination.prototype.previous = function() {
 }
 
 Pagination.prototype.goToPage = function(page) {
-	console.log("Current page ", this.page, " and dhould be going to " + page + " page now...");
-
-	// add link to currently active page
+	console.log("Current page ", this.page, " and should be going to " + page + " page now...");
+	var currentNode = $("#" + this.parentId + " .pagination .active");
+	var newNode = $("#" + this.parentId + " .pagination li").eq(page);
+	var leftArrow = $("#" + this.parentId + " .pagination .left-arrow");
+	var rightArrow = $("#" + this.parentId + " .pagination .right-arrow");
+
+	// trigger page turning event
+	var event = jQuery.Event("pagination");
+	event.page = page;
+	event.parentId = this.parentId;
+	$("body").trigger(event);
 
 	// set active class to inactive
-	// $("#" + this.parentId + " .pagination .active").removeClass("active");
-
-	// 	$.el.li(
-	// 		$.el.a({'href':'javascript:goToPage(' + this.page + ', ' + this.parentId + ')'},
-	// 			this.page))
-	// );
-	//
-	// // replace a link with span active class
-	// $("#" + this.parentId + " .pagination li").eq(pageNumber).replaceWith(
-	// 	$.el.li({'class':'active'},
-	// 		$.el.span(pageNumber))
-	// );
-	//
-	// // replace left arrow
-	// if(pageNumber == 1) {
-	// 	// disable left because switching to page one
-	// 	$("#" + this.parentId + " .pagination li").eq(0).replaceWith(
-	// 		$.el.li({'class':'disabled'},
-	// 			$.el.span('\u00ab'))
-	// 	);
-	// } else {
-	// 	// enable left with pageNumber as a link
-	// 	$("#" + this.parentId + " .pagination li").eq(0).replaceWith(
-	// 		$.el.li(
-	// 			$.el.a({'href':'javascript:previousPage(' + pageNumber + ', ' + this.parentId + ')'},
-	// 				'\u00ab'))
-	// 	);
-	// }
-	//
-	// // replace right arrow
-	// if(pageNumber == numberOfPages) {
-	// 	// disable left because switching to page one
-	// 	$("#" + labelItems + " .pagination li").eq(numberOfPages+1).replaceWith(
-	// 		$.el.li({'class':'disabled'},
-	// 				$.el.span('\u00bb')));
-	// } else {
-	// 	// enable left with pageNumber as a link
-	// 	$("#" + labelItems + " .pagination li").eq(numberOfPages+1).replaceWith(
-	// 		$.el.li(
-	// 			$.el.a({'href':'javascript:nextPage(' + pageNumber + ', ' + clusterId + ')'},
-	// 				'\u00bb'))
-	// 	);
-	// }
-	// changePagination(pageNumber, activePage, numberOfPages, clusterId);
-	// changeThumbnails(pageNumber, activePage, numberOfPages, items, labelItems, clusterId);
-}
-
-function changePagination(pageNumber, activePage, numberOfPages, clusterId) {
-	console.log("labeItems=", labelItems);
-	//Often replacing html, this is because often <a> has to be replaced by <span> and vice versa
-	//Replace span active class with a link
-	// $("#" + labelItems + clusterId + " .pagination li").eq(activePage).replaceWith(
-	$("#" + labelItems + " .pagination li").eq(activePage).replaceWith(
-		$.el.li($.el.a({'href':'javascript:goToPage(' + activePage + ', ' + clusterId + ')'},
-					   activePage)));
-
-	//Replace a link with span active class
-	// $("#" + labelItems + clusterId + " .pagination li").eq(pageNumber).replaceWith(
-	$("#" + labelItems + " .pagination li").eq(pageNumber).replaceWith(
-		$.el.li({'class':'active'},
-				$.el.span(pageNumber)));
-
-	//Replace left arrow
-	if(pageNumber == 1) {
-		// Disable left because switching to page one
-		// $("#" + labelItems + clusterId + " .pagination li").eq(0).replaceWith(
-		$("#" + labelItems + " .pagination li").eq(0).replaceWith(
-			$.el.li({'class':'disabled'},
-					$.el.span('\u00ab')));
+	currentNode.removeClass("active");
+	// add link to currently active page
+	this.addClickEvent(currentNode, this.page);
+
+	// set new node to active
+	newNode.addClass("active");
+	// remove events
+	newNode.off();
+	this.page = page;
+
+	// remove event to not add duplicates
+	leftArrow.off("click pagination");
+	if(page === 1) {
+		// disable left arrow because switching to page one
+		leftArrow.addClass("disabled");
 	} else {
-		// Enable left with pageNumber as a link
-		// $("#" + labelItems + clusterId + " .pagination li").eq(0).replaceWith(
-		$("#" + labelItems + " .pagination li").eq(0).replaceWith(
-			$.el.li($.el.a({'href':'javascript:previousPage(' + pageNumber + ', ' + clusterId + ')'},
-						   '\u00ab')));
+		// enable left arrow
+		leftArrow.removeClass("disabled");
+		this.addClickPrevious(leftArrow);
 	}
 
-	//Replace right arrow
-	if(pageNumber == numberOfPages) {
-		// Disable left because switching to page one
-		// $("#" + labelItems + clusterId + " .pagination li").eq(numberOfPages+1).replaceWith(
-		$("#" + labelItems + " .pagination li").eq(numberOfPages+1).replaceWith(
-			$.el.li({'class':'disabled'},
-					$.el.span('\u00bb')));
+	// remove event to not add duplicates
+	rightArrow.off("click pagination");
+	if(page === this.numberOfPages) {
+		// disable right arrow because switching to last page
+		rightArrow.addClass("disabled");
 	} else {
-		// Enable left with pageNumber as a link
-		// $("#" + labelItems + clusterId + " .pagination li").eq(numberOfPages+1).replaceWith(
-		 $("#" + labelItems + " .pagination li").eq(numberOfPages+1).replaceWith(
-			$.el.li($.el.a({'href':'javascript:nextPage(' + pageNumber + ', ' + clusterId + ')'},
-						   '\u00bb')));
+		// enable right arrow
+		rightArrow.removeClass("disabled");
+		this.addClickNext(rightArrow);
 	}
 }