azkaban-aplcache

diff --git a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
index 10b4a4a..145d820 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
@@ -16,6 +16,9 @@
 			var timezone = "${timezone}";
 			var errorMessage = "${error_message}";
 			var successMessage = "${success_message}";
+			
+			var projectName = "${project.name}";
+			var flowName = "${flowid}";
 		</script>
 		
 	</head>
@@ -41,17 +44,17 @@
 					
 					<div class="headertabs">
 						<ul>
-							<li><a href="#tabs-2">Graph</a></li>
-							<li><a href="#tabs-1">Job List</a></li>
+							<li><a id="graphViewLink" href="#graph">Graph</a></li>
+							<li class="lidivider">|</li>
+							<li><a id="jobslistViewLink" href="#jobslist">Job List</a></li>
 						</ul>
-						<div id="tabs-1">
-						</div>
-						<div id="tabs-2">
-						</div>
 					</div>
-				</div>
-				<div class="actualcontent">
-					<p>What the hell</p>
+					<div id="graphView">
+					<p>This is my graph view</p>
+					</div>
+					<div id="jobListView">
+					<p>This is my joblist view</p>
+					</div>
 				</div>
 #end
 		</div>

diff --git a/src/web/css/archive.css b/src/web/css/archive.css
new file mode 100644
index 0000000..ff8dc08
--- /dev/null
+++ b/src/web/css/archive.css
@@ -0,0 +1,44 @@
+.headertabs {
+	margin-top: 10px;
+	margin-botton: 0px;
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+.headertabs ul li {
+	float: right;
+
+	padding: 2px 12px;
+	margin-right: 1px;
+	background-image: -o-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
+	background-image: -moz-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
+	background-image: -webkit-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
+	background-image: -ms-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
+	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.33, rgb(56,56,56)), color-stop(0.66, rgb(73,73,73)) );
+	background-image: linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
+	
+	    
+    -moz-border-radius: 3px;
+  	-webkit-border-radius: 3px;
+  	border-radius: 3px;
+  	border-style: solid;
+  	border-width: 1px;
+}
+
+.headertabs ul li:hover {
+	background-image: -o-linear-gradient(bottom, rgb(00,159,201) 33%, rgb(00,159,201) 66%);
+	background-image: -moz-linear-gradient(bottom, rgb(00,159,201) 33%, rgb(00,159,201) 66%);
+	background-image: -webkit-linear-gradient(bottom, rgb(00,159,201) 33%, rgb(00,159,201) 66%);
+	background-image: -ms-linear-gradient(bottom, rgb(00,159,201) 33%, rgb(00,159,201) 66%);
+	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.33, rgb(00,159,201)), color-stop(0.66, rgb(00,159,201)) );
+	background-image: linear-gradient(bottom, rgb(00,159,201) 33%, rgb(00,159,201) 66%);
+}
+
+/* Flow view tabs */
+.headertabs ul li a {
+    color: #FFFFFF;
+    font-size: 10.5pt;
+    font-weight: bold;
+    text-decoration: none;
+    line-height: 1em;
+}
\ No newline at end of file

diff --git a/src/web/css/azkaban.css b/src/web/css/azkaban.css
index c98b2f5..ee55776 100644
--- a/src/web/css/azkaban.css
+++ b/src/web/css/azkaban.css
@@ -899,48 +899,52 @@ tr:hover td {
 }
 
 .headertabs {
-	margin-top: 10px;
-	margin-botton: 0px;
-	margin-left: 10px;
-	margin-right: 10px;
+	height: 24px;
+	width:100%;
+	background-image: -o-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
+	background-image: -moz-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
+  background-image: -webkit-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
+  background-image: -ms-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
+  background-image: -webkit-gradient(
+  	linear,
+  	left bottom,
+  	left top,
+  	color-stop(0.33, rgb(56,56,56)),
+  	color-stop(0.66, rgb(73,73,73))
+  );
+  background-image: linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
+  color: #fff;
+  font-weight: bold;
+  line-height: 1em;
+  font-size: 10.5pt;
 }
 
 .headertabs ul li {
-	float: right;
+	float: left;
+	margin-left: 12px;
+	margin-top: 5px;
+}
 
-	padding: 2px 12px;
-	margin-right: 1px;
-	background-image: -o-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
-	background-image: -moz-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
-	background-image: -webkit-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
-	background-image: -ms-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
-	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.33, rgb(56,56,56)), color-stop(0.66, rgb(73,73,73)) );
-	background-image: linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
-	
-	    
-    -moz-border-radius: 3px;
-  	-webkit-border-radius: 3px;
-  	border-radius: 3px;
-  	border-style: solid;
-  	border-width: 1px;
+.headertabs ul li.lidivider {
+	color: #808080;
 }
 
 .headertabs ul li:hover {
-	background-image: -o-linear-gradient(bottom, rgb(00,159,201) 33%, rgb(00,159,201) 66%);
-	background-image: -moz-linear-gradient(bottom, rgb(00,159,201) 33%, rgb(00,159,201) 66%);
-	background-image: -webkit-linear-gradient(bottom, rgb(00,159,201) 33%, rgb(00,159,201) 66%);
-	background-image: -ms-linear-gradient(bottom, rgb(00,159,201) 33%, rgb(00,159,201) 66%);
-	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.33, rgb(00,159,201)), color-stop(0.66, rgb(00,159,201)) );
-	background-image: linear-gradient(bottom, rgb(00,159,201) 33%, rgb(00,159,201) 66%);
+	
 }
 
 /* Flow view tabs */
 .headertabs ul li a {
-    color: #FFFFFF;
-    font-size: 10.5pt;
-    font-weight: bold;
-    text-decoration: none;
-    line-height: 1em;
+	color: #aaa;
+}
+
+.headertabs ul li a:hover {
+	color: #fff;
+}
+
+/* Flow view tabs */
+.headertabs ul li a.selected {
+	color: #fff;
 }
 
 .actualcontent {

diff --git a/src/web/js/azkaban.flow.view.js b/src/web/js/azkaban.flow.view.js
index c5d6a20..596f5f5 100644
--- a/src/web/js/azkaban.flow.view.js
+++ b/src/web/js/azkaban.flow.view.js
@@ -1,5 +1,54 @@
 $.namespace('azkaban');
 
-$(function() {
+var flowView;
+azkaban.FlowView= Backbone.View.extend({
+  events : {
+  	"click #graphViewLink" : "handleGraphLinkClick",
+  	"click #jobslistViewLink" : "handleJobslistLinkClick"
+  },
+  initialize : function(settings) {
+  	var selectedView = settings.selectedView;
+  	if (selectedView == "jobslist") {
+  		this.handleJobslistLinkClick();
+  	}
+  	else {
+  		this.handleGraphLinkClick();
+  	}
+
+  },
+  render: function() {
+  
+  },
+  handleGraphLinkClick: function(){
+  	$("#jobslistViewLink").removeClass("selected");
+  	$("#graphViewLink").addClass("selected");
+  	
+  	$("#jobListView").hide();
+  	$("#graphView").show();
+  },
+  handleJobslistLinkClick: function() {
+  	$("#graphViewLink").removeClass("selected");
+  	$("#jobslistViewLink").addClass("selected");
+  	
+  	 $("#graphView").hide();
+  	 $("#jobListView").show();
+  }
+});
 
+$(function() {
+	var selected;
+	if (window.location.hash) {
+		var hash = window.location.hash;
+		if (hash == "#jobslist") {
+			selected = "jobslist";
+		}
+		else if (hash == "#graph") {
+			// Redundant, but we may want to change the default. 
+			selected = "graph";
+		}
+		else {
+			selected = "graph";
+		}
+	}
+	flowView = new azkaban.FlowView({el:$( '#all-jobs-content'), selectedView: selected });
 });

diff --git a/src/web/js/azkaban.nav.js b/src/web/js/azkaban.nav.js
index 8398d7f..8cc56f6 100644
--- a/src/web/js/azkaban.nav.js
+++ b/src/web/js/azkaban.nav.js
@@ -22,4 +22,19 @@ azkaban.NavView = Backbone.View.extend({
 
 $(function() {
 	navView = new azkaban.NavView({el:$( '#header' )});
-});
\ No newline at end of file
+});
+
+(function($){
+	$.getQuery = function( query ) {
+		query = query.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
+		var expr = "[\\?&]"+query+"=([^&#]*)";
+		var regex = new RegExp( expr );
+		var results = regex.exec( window.location.href );
+		if( results !== null ) {
+			return results[1];
+			return decodeURIComponent(results[1].replace(/\+/g, " "));
+		} else {
+			return false;
+		}
+	};
+})(jQuery);
\ No newline at end of file