azkaban-aplcache

diff --git a/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
index ac2d107..4ef618d 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
@@ -17,24 +17,20 @@
 
  	## Graph view.
 
-    <div class="container-full container-fill" id="graphView">
+		<div class="container-full container-fill" id="graphView">
 			<div class="row row-offcanvas row-offcanvas-left">
 				<div class="col-xs-6 col-sm-3 sidebar-offcanvas graph-sidebar">
-          <div class="panel panel-default" id="jobList">
-            <div class="panel-heading">
-              <input id="filter" type="text" placeholder="Job Filter" class="form-control">
-            </div>
-            <div id="joblist"></div>
-            <div class="panel-footer">
-            	<div id="autoPanZoom" class="checkbox">
-            		<label>
-                  <input type="checkbox" id="autoPanZoomCheckbox" class="autoPanZoom" value="autoPanZoom" />Auto Pan Zoom
-                </label>
-              	</div>
-              <button type="button" class="btn btn-sm btn-default" id="resetPanZoomBtn">Reset Pan Zoom</button>
-            </div>
-          </div><!-- /.panel -->
-        </div><!-- /.col-sidebar -->
+					<div class="panel panel-default" id="jobList">
+						<div class="panel-heading">
+							<input id="filter" type="text" placeholder="Job Filter" class="form-control">
+						</div>
+						<div id="joblist"></div>
+						<div class="panel-footer">
+							<button type="button" class="btn btn-sm btn-default" id="resetPanZoomBtn">Reset Pan Zoom</button>
+							<button type="button" class="btn btn-sm btn-default" id="autoPanZoomBtn" data-toggle="button">Auto Pan Zoom</button>
+						</div>
+					</div><!-- /.panel -->
+				</div><!-- /.col-sidebar -->
 				<div class="col-xs-12 col-sm-9 col-content">
 					<div id="svgDiv" class="well well-clear well-sm">
 						<svg id="flow-graph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed">
@@ -42,4 +38,4 @@
 					</div>
 				</div>
 			</div>
-    </div>
+		</div>

diff --git a/src/web/js/azkaban/view/flow-job.js b/src/web/js/azkaban/view/flow-job.js
index 32bba07..0e15365 100644
--- a/src/web/js/azkaban/view/flow-job.js
+++ b/src/web/js/azkaban/view/flow-job.js
@@ -19,8 +19,8 @@ azkaban.JobListView = Backbone.View.extend({
 		"keyup input": "filterJobs",
 		"click .job": "handleJobClick",
 		"click #resetPanZoomBtn": "handleResetPanZoom",
+		"click #autoPanZoomBtn": "handleAutoPanZoom",
 		"contextmenu li.listElement": "handleContextMenuClick",
-		"change .autoPanZoom": "handleAutoPanZoom",
 		"click .expandarrow": "handleToggleMenuExpand"
 	},
 	
@@ -311,6 +311,18 @@ initialize: function(settings) {
 	},
 	
 	handleAutoPanZoom: function(evt) {
-		this.model.set({"autoPanZoom": $(evt.currentTarget).is(':checked')});
+		var target = evt.currentTarget;
+		if ($(target).hasClass('btn-default')) {
+			$(target).removeClass('btn-default');
+			$(target).addClass('btn-info');
+		}
+		else if ($(target).hasClass('btn-info')) {
+			$(target).removeClass('btn-info');
+			$(target).addClass('btn-default');
+		}
+	 
+		// Using $().hasClass('active') does not use here because it appears that
+		// this is called before the Bootstrap toggle completes.
+		this.model.set({"autoPanZoom": $(target).hasClass('btn-info')});
 	}
 });