azkaban-aplcache

diff --git a/src/java/azkaban/webapp/servlet/ProjectManagerServlet.java b/src/java/azkaban/webapp/servlet/ProjectManagerServlet.java
index d173bd0..f8811fa 100644
--- a/src/java/azkaban/webapp/servlet/ProjectManagerServlet.java
+++ b/src/java/azkaban/webapp/servlet/ProjectManagerServlet.java
@@ -944,10 +944,9 @@ public class ProjectManagerServlet extends LoginAbstractAzkabanServlet {
 				jobInfo = null;
 			}
 			page.add("history", jobInfo);
+
+			page.add("previous", new PageSelection("Previous", pageSize, true, false, Math.max(pageNum - 1, 1)));
 			
-			if (pageNum == 1) {
-				page.add("previous", new PageSelection("Previous", pageSize, true, false, pageNum - 1));
-			}
 			page.add("next", new PageSelection("Next", pageSize, false, false, Math.min(pageNum + 1, maxPage)));
 
 			if (jobInfo != null) {

diff --git a/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm b/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
index 63856ec..e45e168 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
@@ -127,13 +127,13 @@
           </table>
 
 					<ul class="pagination" id="pageSelection">
-						<li id="previous" class="first"><a href="${context}/manager?project=${projectId}&job=${jobid}&history&page=${previous.page}&size=${previous.size}"><span class="arrow">&larr;</span>Previous</a></li>
-						<li id="page1" #if($page1.selected) class="selected" #elseif ($page1.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page1.nextPage}&size=${page1.size}">${page1.page}</a></li>
-						<li id="page2" #if($page2.selected) class="selected" #elseif ($page2.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page2.nextPage}&size=${page2.size}">${page2.page}</a></li>
-						<li id="page3" #if($page3.selected) class="selected" #elseif ($page3.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page3.nextPage}&size=${page3.size}">${page3.page}</a></li>
-						<li id="page4" #if($page4.selected) class="selected" #elseif ($page4.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page4.nextPage}&size=${page4.size}">${page4.page}</a></li>
-						<li id="page5" #if($page5.selected) class="selected" #elseif ($page5.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page5.nextPage}&size=${page5.size}">${page5.page}</a></li>
-						<li id="next"><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${next.page}&size=${next.size}">Next<span class="arrow">&rarr;</span></a></li>
+						<li id="previous" class="first"><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${previous.nextPage}&size=${previous.size}"><span class="arrow">&larr;</span>Previous</a></li>
+						<li id="page1" #if($page1.selected) class="active" #elseif ($page1.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page1.nextPage}&size=${page1.size}">${page1.page}</a></li>
+						<li id="page2" #if($page2.selected) class="active" #elseif ($page2.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page2.nextPage}&size=${page2.size}">${page2.page}</a></li>
+						<li id="page3" #if($page3.selected) class="active" #elseif ($page3.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page3.nextPage}&size=${page3.size}">${page3.page}</a></li>
+						<li id="page4" #if($page4.selected) class="active" #elseif ($page4.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page4.nextPage}&size=${page4.size}">${page4.page}</a></li>
+						<li id="page5" #if($page5.selected) class="active" #elseif ($page5.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page5.nextPage}&size=${page5.size}">${page5.page}</a></li>
+						<li id="next"><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${next.nextPage}&size=${next.size}">Next<span class="arrow">&rarr;</span></a></li>
 					</ul>
 
 				</div><!-- /.col-xs-12 -->

diff --git a/src/web/js/azkaban/view/flow.js b/src/web/js/azkaban/view/flow.js
index 32ae40a..838557e 100644
--- a/src/web/js/azkaban/view/flow.js
+++ b/src/web/js/azkaban/view/flow.js
@@ -174,7 +174,7 @@ azkaban.ExecutionsView = Backbone.View.extend({
 		var page = this.model.get("page");
 		
 		//Start it off
-		$("#pageSelection .selected").removeClass("selected");
+		$("#pageSelection .active").removeClass("active");
 		
 		// Disable if less than 5
 		console.log("Num pages " + numPages)
@@ -207,34 +207,38 @@ azkaban.ExecutionsView = Backbone.View.extend({
 		}
 		
 		// Selection is always in middle unless at barrier.
+		var startPage = 0;
 		if (page < 3) {
 			selectionPosition = page;
+			startPage = 1;
 		}
-		else if (page > numPages - 2) {
-			selectionPosition = 5 - (numPages - page) - 1;
+		else if (page == numPages) {
+			selectionPosition = 5;
+			startPage = numPages - 4;
+		}
+		else if (page == numPages - 1) {
+			selectionPosition = 4;
+			startPage = numPages - 4;
 		}
 		else {
 			selectionPosition = 3;
+			startPage = page - 2;
 		}
 
-		$("#page"+selectionPosition).addClass("selected");
+		$("#page"+selectionPosition).addClass("active");
 		$("#page"+selectionPosition)[0].page = page;
 		var selecta = $("#page" + selectionPosition + " a");
 		selecta.text(page);
 		selecta.attr("href", "#page" + page);
 
-		for (var j = 1, tpage = page - selectionPosition + 1; j < selectionPosition; ++j, ++tpage) {
-			$("#page" + j)[0].page = tpage;
-			var a = $("#page" + i + " a");
-			a.text(tpage);
-			a.attr("href", "#page" + tpage);
-		}
-
-		for (var i = selectionPosition + 1, tpage = page + 1; i <= numPages; ++i, ++tpage) {
-			$("#page" + i)[0].page = tpage;
-			var a = $("#page" + i + " a");
-			a.text(tpage);
-			a.attr("href", "#page" + tpage);
+		for (var j = 0; j < 5; ++j) {
+			var realPage = startPage + j;
+			var elementId = "#page" + (j+1);
+			
+			$(elementId)[0].page = realPage;
+			var a = $(elementId + " a");
+			a.text(realPage);
+			a.attr("href", "#page" + realPage);
 		}
 	},