make outline togglable by clicking a controll in the top right

outline.css

@@ -2,12 +2,33 @@
 .outline {
 	background-color: #fff;
 	border: 1px solid #ccc;
+	max-height: 100%;
 	max-width: 50%;
-	opacity: 0;
+	overflow: auto;
 	padding: 10px 20px 10px 35px;
 	position: fixed;
 	top: 10px;
 	right: 10px;
+	z-index: 9000;
+}
+
+.outlineTrigger {
+	background-color: transparent;
+	color: #f26322;
+	cursor: pointer;
+	height: auto;
+	position: fixed;
+	top: 5px;
+	right: 5px;
+	width: auto;
+
+    z-index: 9001;
+}
+
+
+.outline,
+.outlineTrigger {
+	opacity: 0;
 
 	-moz-opacity: 0;
 	filter:alpha(opacity=0);
@@ -17,10 +38,11 @@
          -ms-transition: opacity 0.5s ease;
           -o-transition: opacity 0.5s ease;
              transition: opacity 0.5s ease;
-    z-index: 9000;
 }
 
-.outline:hover {
+.showOutline .outline,
+.showOutline .outlineTrigger,
+.outlineTrigger:hover {
 	opacity: 1;
 	-moz-opacity: 1;
 	filter:alpha(opacity=1);

outline.v0.js

@@ -1,8 +1,8 @@
 // creates a hierarchical outline from all the h1, h2, and h3 elements (first one per slide)
 (function() {
 	var h1 = [], h2 = [], position = -1,
-		outline = d3.select('body').append('ol').
-			classed('outline',true);
+		outline = d3.select('body').
+			append('ol').classed('outline',true);
 	// for each slide, find the first header element and stick it in the outline
 	// XXX slides without a header get left out
 	d3.selectAll("section").each(function() {
@@ -55,6 +55,14 @@
 		}
 	});
 
+	d3.select('body').
+		append('div').classed('outlineTrigger',true).
+		html('Toggle Outline').
+		on('click',function() {
+			var body = d3.select('body');
+			body.classed('showOutline',!body.classed('showOutline'));
+		});
+
 	function scrollTo(pos) {
 		return function() {
 			stack.position(pos);