azkaban-aplcache

diff --git a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
index 3b2d236..9749363 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
@@ -71,7 +71,7 @@
 					<tbody>
 #if($flows)
 #foreach($flow in $flows)
-						<tr class="row">
+						<tr class="row" >
 							<td class="tb-name">
 								<div class="jobfolder expand" id="${flow.id}">
 									<span class="state-icon"></span>
@@ -79,6 +79,8 @@
 								</div>
 							</td>
 						</tr>
+						<tr class="childrow" id="${flow.id}-child" style="display: none;">
+						</tr>
 #end
 #else
 						<tr><td class="last">No flows uploaded to this project.</td></tr>

diff --git a/src/web/css/azkaban.css b/src/web/css/azkaban.css
index d694eb6..ee429a9 100644
--- a/src/web/css/azkaban.css
+++ b/src/web/css/azkaban.css
@@ -544,6 +544,12 @@ tr:hover td {
 	background-position: -64px -80px
 }
 
+.tb-name a {
+	font-size: 10pt;
+	text-decoration: none;
+	color: #000;
+}
+
 .azkaban-charts,
 .azkaban-charts td {
 	width: 100%;

diff --git a/src/web/js/azkaban.project.view.js b/src/web/js/azkaban.project.view.js
index 24b008c..7168a20 100644
--- a/src/web/js/azkaban.project.view.js
+++ b/src/web/js/azkaban.project.view.js
@@ -49,21 +49,44 @@ azkaban.FlowTableView= Backbone.View.extend({
     "click .jobfolder": "expandFlowProject"
   },
   initialize : function(settings) {
-
   },
   expandFlowProject : function(evt) {
-    var targetId = evt.currentTarget.id;
+    var target = evt.currentTarget;
+    var targetId = target.id;
     var requestURL = contextURL + "/manager";
 
-    // projectId is available
-    $.get(
-      requestURL,
-      {"project": projectId, "json":"expandflow", "flow":targetId},
-      function(data) {
-        console.log("Success");
-      },
-      "json"
-    );
+    var targetExpanded = $('#' + targetId + '-child');
+    
+    if (target.loading) {
+    	console.log("Still loading.");
+    }
+    else if (target.loaded) {
+    	if($(targetExpanded).is(':visible')) {
+    		$(target).addClass('expand').removeClass('collapse');
+    		$(targetExpanded).slideUp("fast");
+    	}
+    	else {
+    	    $(target).addClass('collapse').removeClass('expand');
+    		$(targetExpanded).slideDown("fast");
+    	}
+    }
+    else {
+	    // projectId is available
+	    $(target).addClass('wait').removeClass('collapse').removeClass('expand');
+	    target.loading = true;
+	    $.get(
+	      requestURL,
+	      {"project": projectId, "json":"expandflow", "flow":targetId},
+	      function(data) {
+	        console.log("Success");
+	        target.loaded = true;
+	        target.loading = false;
+			$(target).addClass('collapse').removeClass('wait');
+	    	$(targetExpanded).slideDown("fast");
+	      },
+	      "json"
+	    );
+    }
   },
   render: function() {
   }