clean up initialization, conditionally load classList polyfill prior to reveal.js

slidechange doesn't get fired on "hashchange" events

.gitignore

@@ -2,3 +2,4 @@
 .svn
 log/*.log
 tmp/**
+node_modules/

README.md

@@ -10,10 +10,10 @@ Curious about how it looks in action? [Check out the demo page](http://lab.hakim
 
 ### Markup
 
-Markup heirarchy needs to be ``<div id="reveal"> <div class="slides"> <section>`` where the ``<section>`` represents one slide and can be repeated indefinitely. If you place multiple ``<section>``'s inside of another ``<section>`` they will be shown as vertical slides. For example:
+Markup heirarchy needs to be ``<div class="reveal"> <div class="slides"> <section>`` where the ``<section>`` represents one slide and can be repeated indefinitely. If you place multiple ``<section>``'s inside of another ``<section>`` they will be shown as vertical slides. For example:
 
-```
-<div id="reveal">
+```html
+<div class="reveal">
 	<div class="slides"> 
 		<section>Single Horizontal Slide</section>
 		<section>
@@ -26,9 +26,9 @@ Markup heirarchy needs to be ``<div id="reveal"> <div class="slides"> <section>`
 
 ### Configuration
 
-At the end of your page, after ``<script src="js/reveal.js"></script>``, you need to initialize reveal by running the following code. Note that all config values are optional.
+At the end of your page, after ``<script src="js/reveal.js"></script>``, you need to initialize reveal by running the following code. Note that all config values are optional and will default as specified below.
 
-```
+```javascript
 Reveal.initialize({
 	// Display controls in the bottom right corner
 	controls: true,
@@ -36,20 +36,27 @@ Reveal.initialize({
 	// Display a presentation progress bar
 	progress: true,
 
-	// If true; each slide will be pushed to the browser history
-	history: true,
+	// Push each slide change to the browser history
+	history: false,
 
-	// Loops the presentation, defaults to false
+	// Enable keyboard shortcuts for navigation
+	keyboard: true,
+
+	// Loop the presentation
 	loop: false,
 
-	// Flags if mouse wheel navigation should be enabled
+	// Number of milliseconds between automatically proceeding to the 
+	// next slide, disabled when set to 0
+	autoSlide: 0,
+
+	// Enable slide navigation via mouse wheel
 	mouseWheel: true,
 
 	// Apply a 3D roll to links on hover
 	rollingLinks: true,
 
 	// UI style
-	theme: 'default', // default/neon
+	theme: 'default', // default/neon/beige
 
 	// Transition style
 	transition: 'default' // default/cube/page/concave/linear(2d)
@@ -65,6 +72,9 @@ The Reveal class provides a minimal JavaScript API for controlling its navigatio
 - Reveal.navigateRight();
 - Reveal.navigateUp();
 - Reveal.navigateDown();
+- Reveal.navigatePrev();
+- Reveal.navigateNext();
+- Reveal.toggleOverview();
 
 ### States
 
@@ -72,7 +82,7 @@ If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will
 
 Furthermore you can also listen to these changes in state via JavaScript:
 
-```
+```javascript
 Reveal.addEventListener( 'somestate', function() {
 	// TODO: Sprinkle magic
 }, false );
@@ -80,11 +90,11 @@ Reveal.addEventListener( 'somestate', function() {
 
 ### Slide change event
 
-An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index of the current slide.
+An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.
 
-```
+```javascript
 Reveal.addEventListener( 'slidechanged', function( event ) {
-	// event.indexh & event.indexv
+	// event.previousSlide, event.currentSlide, event.indexh, event.indexv
 } );
 ```
 
@@ -92,7 +102,7 @@ Reveal.addEventListener( 'slidechanged', function( event ) {
 
 When a slide fragment is either shown or hidden reveal.js will dispatch an event.
 
-```
+```javascript
 Reveal.addEventListener( 'fragmentshown', function( event ) {
 	// event.fragment = the fragment DOM element
 } );
@@ -101,6 +111,31 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
 } );
 ```
 
+### Folder Structure
+- **css/** Core styles without which the project does not function
+- **js/** Like above but for JavaScript
+- **plugin/** Components that have been developed as extensions to reveal.js
+- **lib/** All other third party assets (JavaScript, CSS, fonts)
+
+## Speaker Notes
+
+If you're interested in using speaker notes, reveal.js comes with a Node server that allows you to deliver your presentation in one browser while viewing speaker notes in another. 
+
+To include speaker notes in your presentation, simply add an `<aside class="notes">` element to any slide. These notes will be hidden in the main presentation view.
+
+You'll also need to [install Node.js](http://nodejs.org/); then, install the server dependencies by running `npm install`.
+
+Once Node.js and the dependencies are installed, run the following command from the root directory:
+
+		node plugin/speakernotes
+
+By default, the slides will be served at [localhost:1947](http://localhost:1947).
+
+You can change the appearance of the speaker notes by editing the file at `plugin/speakernotes/notes.html`.	
+
+### Known Issues
+
+- The notes page is supposed to show the current slide and the next slide, but when it first starts, it always shows the first slide in both positions. 
 
 ## Examples
 
@@ -123,6 +158,9 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
 * [To be Future Friendly is to be Device Agnostic](http://dl.dropbox.com/u/409429/presentations/toster-2012/index.html) by [Joe McCann](https://github.com/joemccann)
 * [The Web Development Workflow of 2013](http://dl.dropbox.com/u/39519/talks/fluent/index.html) by [Paul Irish](https://github.com/paulirish)
 * [How To Cope With Graphical Challenges Using Latest Web Technologies](http://alexw.me/playground/slideshows/w3c_netcraft/) by [Alex Wolkov](https://github.com/altryne)
+* [Going Deeper with jQuery Mobile](http://andymatthews.net/downloads/presentations/going-deeper-with-jquery-mobile/) by [Andy Matthews](https://github.com/commadelimited)
+* [Studio Nord](http://studionord.org)
+* [Herrljunga Cider](http://herrljungacider.se/uk/campaign/)
 
 
 [Send me a link](http://hakim.se/about/contact) if you used reveal.js for a project or presentation.
@@ -130,7 +168,21 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
 
 ## History
 
-#### 1.3 (master)
+#### 1.4 (master/beta)
+- Main #reveal container is now selected via a class instead of ID
+- API methods for adding or removing all event listeners
+- The ```slidechange``` event now includes currentSlide and previousSlide
+- Fixed bug where 'slidechange' was firing twice when history was enabled
+- Folder structure updates for scalability (see /lib & /plugin)
+- Slide notes by [rmurphey](https://github.com/rmurphey)
+- Bumped up default font-size for code samples
+- Added beige theme
+- Added 'autoSlide' config
+- Bug fix: The 'slidechanged' event is now firing upon 'hashchange'. Thanks [basecode](https://github.com/basecode)
+- Bug fix: JS error when the 'progress' option was true but there was no progress DOM element
+- ```keyboard``` config flag for disabling all keyboard navigation
+
+#### 1.3
 - Revised keyboard shortcuts, including ESC for overview, N for next, P for previous. Thanks [mahemoff](https://github.com/mahemoff)
 - Added support for looped presentations via config
 - Fixed IE9 fallback
@@ -140,6 +192,8 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
 - The address bar now hides automatically on mobile browsers
 - Space and return keys can be used to exit the overview mode
 - Events for fragment states ('fragmentshown'/'fragmenthidden')
+- Support for swipe navigation on touch devices. Thanks [akiersky](https://github.com/akiersky)
+- Support for pinch to overview on touch devices
 
 #### 1.2
 

css/main.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * Main styles for reveal.js 
  *
@@ -11,7 +12,7 @@
 
 @font-face {
 	font-family: 'League Gothic';
-	src: url('../assets/fonts/leaguegothic/league_gothic-webfont.ttf') format('truetype');
+	src: url('../lib/font/league_gothic-webfont.ttf') format('truetype');
 	font-weight: normal;
 	font-style: normal;
 }
@@ -54,10 +55,10 @@ body {
 /*********************************************
  * HEADERS
  *********************************************/
-#reveal h1, 
-#reveal h2, 
-#reveal h3, 
-#reveal h4 {
+.reveal h1, 
+.reveal h2, 
+.reveal h3, 
+.reveal h4 {
 	margin: 0 0 20px 0;
 	
 	color: #eee;
@@ -70,20 +71,20 @@ body {
 	text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
 }
 
-#reveal h1 { font-size: 136px; 	}
-#reveal h2 { font-size: 76px;	}
-#reveal h3 { font-size: 56px;	}
-#reveal h4 { font-size: 36px;	}
+.reveal h1 { font-size: 136px; 	}
+.reveal h2 { font-size: 76px;	}
+.reveal h3 { font-size: 56px;	}
+.reveal h4 { font-size: 36px;	}
 
-#reveal h1.inverted,
-#reveal h2.inverted,
-#reveal h3.inverted,
-#reveal h4.inverted {
+.reveal h1.inverted,
+.reveal h2.inverted,
+.reveal h3.inverted,
+.reveal h4.inverted {
 	color: #fff;
 	text-shadow: 0px 0px 2px rgba(0,0,0,0.2);
 }
 
-#reveal h1 {
+.reveal h1 {
 	text-shadow: 0 1px 0 #ccc,
                  0 2px 0 #c9c9c9,
                  0 3px 0 #bbb,
@@ -102,7 +103,7 @@ body {
  * VIEW FRAGMENTS
  *********************************************/
 
-#reveal .slides section .fragment {
+.reveal .slides section .fragment {
 	opacity: 0;
 
 	-webkit-transition: all .2s ease;
@@ -111,7 +112,7 @@ body {
 	     -o-transition: all .2s ease;
 	        transition: all .2s ease;
 }
-	#reveal .slides section .fragment.visible {
+	.reveal .slides section .fragment.visible {
 		opacity: 1;
 	}
 
@@ -120,68 +121,58 @@ body {
  * DEFAULT ELEMENT STYLES
  *********************************************/
 
-#reveal .slides section {
+.reveal .slides section {
 	line-height: 1.2em;
 	font-weight: normal;
 }
 
-#reveal strong, 
-#reveal b {
+.reveal strong, 
+.reveal b {
 	font-weight: bold;
 }
 
-#reveal em, 
-#reveal i {
+.reveal em, 
+.reveal i {
 	font-style: italic;
 }
 
-#reveal ol, 
-#reveal ul {
+.reveal ol, 
+.reveal ul {
 	display: inline-block;
 
 	text-align: left;
 	margin: 0 auto;
 }
 
-#reveal ol {
-	list-style: decimal inside;
+.reveal ol {
+	list-style-type: decimal;
 }
 
-#reveal ul {
-	list-style: disc;
+.reveal ul {
+	list-style-type: disc;
 }
-	#reveal ul>li>ul {
-		list-style: square;
-	}
-		#reveal ul>li>ul>li>ul {
-			list-style: circle;
-		}
 
-/* Brain freeze – there has to be a better way of doing this? */
-#reveal ul ul,
-#reveal ul ol,
+.reveal ul ul {
+	list-style-type: square;
+}
 
-#reveal ol ol,
-#reveal ol ul,
+.reveal ul ul ul {
+	list-style-type: circle;
+}
 
-#reveal ul ul ul,
-#reveal ul ul ol,
-#reveal ul ol ol,
-#reveal ul ol ul,
-
-#reveal ol ol ol,
-#reveal ol ol ul,
-#reveal ol ul ul,
-#reveal ol ul ol {
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
 	display: block;
 	margin-left: 40px;
 }
 
-#reveal p {
+.reveal p {
 	margin-bottom: 10px;
 }
 
-#reveal blockquote {
+.reveal blockquote {
 	display: block;
 	position: relative;
 	width: 70%;
@@ -192,21 +183,21 @@ body {
 	background: rgba(255, 255, 255, 0.05);
 	box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
 }
-	#reveal blockquote:before {
+	.reveal blockquote:before {
 		content: '“';
 	}
-	#reveal blockquote:after {
+	.reveal blockquote:after {
 		content: '”';
 	}
 
-#reveal pre {
+.reveal pre {
 	display: block;
 	position: relative;
 	width: 90%;
 	margin: 10px auto;
 
 	text-align: left;
-	font-size: 14px;
+	font-size: 20px;
 	font-family: monospace;
 	line-height: 1.2em;
 
@@ -215,46 +206,67 @@ body {
 	box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
 }
 
-#reveal code {
+.reveal code {
 	font-family: monospace;
 }
 
-#reveal small {
+.reveal table th, 
+.reveal table td {
+ 	 text-align: left;
+ 	 padding-right: .3em;
+}
+
+.reveal table th {
+ 	 text-shadow: rgb(255,255,255) 1px 1px 2px;
+}
+
+.reveal sup { 
+	vertical-align: super;
+}
+.reveal sub { 
+	vertical-align: sub;
+}
+
+.reveal small {
 	font-size: 60%;
 	line-height: 1em;
 	vertical-align: top;
 }
 
-#reveal q {	
+.reveal small * {
+	vertical-align: top;
+}
+
+.reveal q {	
 	font-style: italic;
 }
-	#reveal q:before {
+	.reveal q:before {
 		content: '“';
 	}
-	#reveal q:after {
+	.reveal q:after {
 		content: '”';
 	}
 
-#reveal a:not(.image) {
+.reveal a:not(.image) {
 	color: hsl(185, 85%, 50%);
 	text-decoration: none;
 
-	-webkit-transition: all .2s ease;
-	   -moz-transition: all .2s ease;
-	    -ms-transition: all .2s ease;
-	     -o-transition: all .2s ease;
-	        transition: all .2s ease;
+	-webkit-transition: color .15s ease;
+	   -moz-transition: color .15s ease;
+	    -ms-transition: color .15s ease;
+	     -o-transition: color .15s ease;
+	        transition: color .15s ease;
 }
 	
-	#reveal a:not(.image):hover {
+	.reveal a:not(.image):hover {
 		color: hsl(185, 85%, 70%);
-		background: hsla(185, 25%, 20%, 0.4);
+		
 		text-shadow: none;
 		border: none;
 		border-radius: 2px;
 	}
 
-#reveal section img {
+.reveal section img {
 	margin: 30px 0 0 0;
 	background: rgba(255,255,255,0.12);
 	border: 4px solid #eee;
@@ -270,7 +282,7 @@ body {
 	        transition: all .2s linear;
 }
 
-	#reveal a:hover img {
+	.reveal a:hover img {
 		background: rgba(255,255,255,0.2);
 		border-color: #13DAEC;
 		
@@ -284,7 +296,7 @@ body {
  * CONTROLS
  *********************************************/
 
-#reveal .controls {
+.reveal .controls {
 	display: none;
 	position: fixed;
 	width: 100px;
@@ -295,36 +307,36 @@ body {
 	bottom: 0;
 }
 	
-	#reveal .controls a {
+	.reveal .controls a {
 		font-size: 30px;
 		position: absolute;
 		opacity: 0.1;
 		color: #fff;
 	}
-		#reveal .controls a.enabled {
+		.reveal .controls a.enabled {
 			opacity: 0.6;
 			color: hsl(185, 85%, 70%);
 
 			text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
 		}
-		#reveal .controls a.enabled:active {
+		.reveal .controls a.enabled:active {
 			margin-top: 1px;
 		}
 
-	#reveal .controls .left {
+	.reveal .controls .left {
 		top: 30px;
 	}
 
-	#reveal .controls .right {
+	.reveal .controls .right {
 		left: 60px;
 		top: 30px;
 	}
 
-	#reveal .controls .up {
+	.reveal .controls .up {
 		left: 30px;
 	}
 
-	#reveal .controls .down {
+	.reveal .controls .down {
 		left: 30px;
 		top: 60px;
 
@@ -335,7 +347,7 @@ body {
  * PROGRESS BAR
  *********************************************/
 
-#reveal .progress {
+.reveal .progress {
 	position: fixed;
 	display: none;
 	height: 3px;
@@ -346,7 +358,7 @@ body {
 	background: rgba(0,0,0,0.2);
 }
 	
-	#reveal .progress span {
+	.reveal .progress span {
 		display: block;
 		background: hsl(185, 85%, 50%);
 		height: 100%;
@@ -363,7 +375,7 @@ body {
  * ROLLING LINKS
  *********************************************/
 
-#reveal .roll {
+.reveal .roll {
     display: inline-block;
     overflow: hidden;
 
@@ -379,11 +391,11 @@ body {
         -ms-perspective-origin: 50% 50%;
             perspective-origin: 50% 50%;
 }
-	#reveal .roll:hover {
+	.reveal .roll:hover {
 		background: none;
 		text-shadow: none;
 	}
-#reveal .roll span {
+.reveal .roll span {
     display: block;
     position: relative;
     padding: 0 2px;
@@ -405,7 +417,7 @@ body {
         -ms-transform-style: preserve-3d;
             transform-style: preserve-3d;
 }
-    #reveal .roll:hover span {
+    .reveal .roll:hover span {
         background: rgba(0,0,0,0.5);
 
         -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
@@ -413,7 +425,7 @@ body {
             -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
                 transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
     }
-#reveal .roll span:after {
+.reveal .roll span:after {
     content: attr(data-title);
 
     display: block;
@@ -441,7 +453,7 @@ body {
  * SLIDES
  *********************************************/
 
-#reveal .slides {
+.reveal .slides {
 	position: absolute;
 	width: 900px;
 	height: 600px;
@@ -471,8 +483,8 @@ body {
  	        perspective-origin: 50% 25%;
 }
 
-#reveal .slides>section,
-#reveal .slides>section>section {
+.reveal .slides>section,
+.reveal .slides>section>section {
 	display: none;
 	position: absolute;
 	width: 100%;
@@ -492,7 +504,7 @@ body {
 	        transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
-#reveal .slides>section.present {
+.reveal .slides>section.present {
 	display: block;
 	z-index: 11;
 	opacity: 1;
@@ -503,7 +515,7 @@ body {
  * DEFAULT TRANSITION
  *********************************************/
 
-#reveal .slides>section.past {
+.reveal .slides>section.past {
 	display: block;
 	opacity: 0;
 	
@@ -512,7 +524,7 @@ body {
 	    -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 	        transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 }
-#reveal .slides>section.future {
+.reveal .slides>section.future {
 	display: block;
 	opacity: 0;
 	
@@ -522,7 +534,7 @@ body {
 	        transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
 }
 
-#reveal .slides>section>section.past {
+.reveal .slides>section>section.past {
 	display: block;
 	opacity: 0;
 	
@@ -531,7 +543,7 @@ body {
 	    -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
 	        transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
 }
-#reveal .slides>section>section.future {
+.reveal .slides>section>section.future {
 	display: block;
 	opacity: 0;
 	
@@ -546,26 +558,26 @@ body {
  * CONCAVE TRANSITION
  *********************************************/
 
-#reveal.concave  .slides>section.past {
+.reveal.concave  .slides>section.past {
 	-webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 	   -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 	    -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 	        transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 }
-#reveal.concave  .slides>section.future {
+.reveal.concave  .slides>section.future {
 	-webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 	   -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 	    -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 	        transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 }
 
-#reveal.concave  .slides>section>section.past {
+.reveal.concave  .slides>section>section.past {
 	-webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 	   -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 	    -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 	        transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 }
-#reveal.concave  .slides>section>section.future {
+.reveal.concave  .slides>section>section.future {
 	-webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 	   -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 	    -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
@@ -577,14 +589,14 @@ body {
  * LINEAR TRANSITION
  *********************************************/
 
-#reveal.linear .slides>section.past {
+.reveal.linear .slides>section.past {
 	-webkit-transform: translate(-150%, 0);
 	   -moz-transform: translate(-150%, 0);
 	    -ms-transform: translate(-150%, 0);
 	     -o-transform: translate(-150%, 0);
 	        transform: translate(-150%, 0);
 }
-#reveal.linear .slides>section.future {
+.reveal.linear .slides>section.future {
 	-webkit-transform: translate(150%, 0);
 	   -moz-transform: translate(150%, 0);
 	    -ms-transform: translate(150%, 0);
@@ -592,14 +604,14 @@ body {
 	        transform: translate(150%, 0);
 }
 
-#reveal.linear .slides>section>section.past {
+.reveal.linear .slides>section>section.past {
 	-webkit-transform: translate(0, -150%);
 	   -moz-transform: translate(0, -150%);
 	    -ms-transform: translate(0, -150%);
 	     -o-transform: translate(0, -150%);
 	        transform: translate(0, -150%);
 }
-#reveal.linear .slides>section>section.future {
+.reveal.linear .slides>section>section.future {
 	-webkit-transform: translate(0, 150%);
 	   -moz-transform: translate(0, 150%);
 	    -ms-transform: translate(0, 150%);
@@ -611,7 +623,7 @@ body {
  * BOX TRANSITION
  *********************************************/
 
-#reveal.cube .slides {
+.reveal.cube .slides {
 	margin-top: -350px;
 
 	-webkit-perspective-origin: 50% 25%;
@@ -625,7 +637,7 @@ body {
 	        perspective: 1300px;
 }
 
-#reveal.cube .slides section {
+.reveal.cube .slides section {
 	padding: 30px;
 
 	-webkit-backface-visibility: hidden;
@@ -637,7 +649,7 @@ body {
 	   -moz-box-sizing: border-box;
 	        box-sizing: border-box;
 }
-	#reveal.cube .slides section:not(.stack):before {
+	.reveal.cube .slides section:not(.stack):before {
 		content: '';
 		position: absolute;
 		display: block;
@@ -654,7 +666,7 @@ body {
 		     -o-transform: translateZ( -20px );
 		        transform: translateZ( -20px );
 	}
-	#reveal.cube .slides section:not(.stack):after {
+	.reveal.cube .slides section:not(.stack):after {
 		content: '';
 		position: absolute;
 		display: block;
@@ -675,12 +687,12 @@ body {
 		        transform: translateZ(-90px) rotateX( 65deg );
 	}
 
-#reveal.cube .slides>section.stack {
+.reveal.cube .slides>section.stack {
 	padding: 0;
 	background: none;
 }
 
-#reveal.cube .slides>section.past {
+.reveal.cube .slides>section.past {
 	-webkit-transform-origin: 100% 0%;
 	   -moz-transform-origin: 100% 0%;
 	    -ms-transform-origin: 100% 0%;
@@ -692,7 +704,7 @@ body {
 	        transform: translate3d(-100%, 0, 0) rotateY(-90deg);
 }
 
-#reveal.cube .slides>section.future {
+.reveal.cube .slides>section.future {
 	-webkit-transform-origin: 0% 0%;
 	   -moz-transform-origin: 0% 0%;
 	    -ms-transform-origin: 0% 0%;
@@ -704,7 +716,7 @@ body {
 	        transform: translate3d(100%, 0, 0) rotateY(90deg);
 }
 
-#reveal.cube .slides>section>section.past {
+.reveal.cube .slides>section>section.past {
 	-webkit-transform-origin: 0% 100%;
 	   -moz-transform-origin: 0% 100%;
 	    -ms-transform-origin: 0% 100%;
@@ -716,7 +728,7 @@ body {
 	        transform: translate3d(0, -100%, 0) rotateX(90deg);
 }
 
-#reveal.cube .slides>section>section.future {
+.reveal.cube .slides>section>section.future {
 	-webkit-transform-origin: 0% 0%;
 	   -moz-transform-origin: 0% 0%;
 	    -ms-transform-origin: 0% 0%;
@@ -733,7 +745,7 @@ body {
  * PAGE TRANSITION
  *********************************************/
 
-#reveal.page .slides {
+.reveal.page .slides {
 	margin-top: -350px;
 
 	-webkit-perspective-origin: 50% 50%;
@@ -747,17 +759,17 @@ body {
 	        perspective: 3000px;
 }
 
-#reveal.page .slides section {
+.reveal.page .slides section {
 	padding: 30px;
 
 	-webkit-box-sizing: border-box;
 	   -moz-box-sizing: border-box;
 	        box-sizing: border-box;
 }
-	#reveal.page .slides section.past {
+	.reveal.page .slides section.past {
 		z-index: 12;
 	}
-	#reveal.page .slides section:not(.stack):before {
+	.reveal.page .slides section:not(.stack):before {
 		content: '';
 		position: absolute;
 		display: block;
@@ -773,7 +785,7 @@ body {
 		     -o-transform: translateZ( -20px );
 		        transform: translateZ( -20px );
 	}
-	#reveal.page .slides section:not(.stack):after {
+	.reveal.page .slides section:not(.stack):after {
 		content: '';
 		position: absolute;
 		display: block;
@@ -790,12 +802,12 @@ body {
 		-webkit-transform: translateZ(-90px) rotateX( 65deg );
 	}
 
-#reveal.page .slides>section.stack {
+.reveal.page .slides>section.stack {
 	padding: 0;
 	background: none;
 }
 
-#reveal.page .slides>section.past {
+.reveal.page .slides>section.past {
 	-webkit-transform-origin: 0% 0%;
 	   -moz-transform-origin: 0% 0%;
 	    -ms-transform-origin: 0% 0%;
@@ -807,7 +819,7 @@ body {
 	        transform: translate3d(-40%, 0, 0) rotateY(-80deg);
 }
 
-#reveal.page .slides>section.future {
+.reveal.page .slides>section.future {
 	-webkit-transform-origin: 100% 0%;
 	   -moz-transform-origin: 100% 0%;
 	    -ms-transform-origin: 100% 0%;
@@ -819,7 +831,7 @@ body {
 	        transform: translate3d(0, 0, 0);
 }
 
-#reveal.page .slides>section>section.past {
+.reveal.page .slides>section>section.past {
 	-webkit-transform-origin: 0% 0%;
 	   -moz-transform-origin: 0% 0%;
 	    -ms-transform-origin: 0% 0%;
@@ -831,7 +843,7 @@ body {
 	        transform: translate3d(0, -40%, 0) rotateX(80deg);
 }
 
-#reveal.page .slides>section>section.future {
+.reveal.page .slides>section>section.future {
 	-webkit-transform-origin: 0% 100%;
 	   -moz-transform-origin: 0% 100%;
 	    -ms-transform-origin: 0% 100%;
@@ -848,58 +860,100 @@ body {
  * NEON THEME
  *********************************************/
 
-#reveal.neon a,
-#reveal.neon a:hover,
-#reveal.neon .controls a.enabled {
+.theme-neon .reveal a,
+.theme-neon .reveal a:hover,
+.theme-neon .reveal .controls a.enabled {
 	color: #5de048;
 }
 
-#reveal.neon .progress span,
-#reveal.neon .roll span:after {
+.theme-neon .reveal .progress span,
+.theme-neon .reveal .roll span:after {
 	background: #5de048;
 }
 
-#reveal.neon a.image:hover img {
+.theme-neon .reveal a.image:hover img {
 	border-color: #5de048;
 }
 
 
+/*********************************************
+ * BEIGE THEME
+ *********************************************/
+
+.theme-beige body {
+	color: #333;
+
+	background: #f7f3de;
+	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%);
+	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,242,211,1)));
+	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
+	background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
+	background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
+	background: radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
+}
+
+.theme-beige .reveal h1,
+.theme-beige .reveal h2,
+.theme-beige .reveal h3,
+.theme-beige .reveal h4,
+.theme-beige .reveal h5,
+.theme-beige .reveal h6 {
+	color: #333;
+	text-shadow: none;
+}
+
+.theme-beige .reveal a,
+.theme-beige .reveal a:hover,
+.theme-beige .reveal .controls a.enabled {
+	color: #8b743d;
+}
+
+.theme-beige .reveal .progress span,
+.theme-beige .reveal .roll span:after {
+	background: #8b743d;
+}
+
+.theme-beige .reveal a.image:hover img {
+	border-color: #8b743d;
+}
+
+
 /*********************************************
  * OVERVIEW
  *********************************************/
 
-#reveal.overview .slides {
+.reveal.overview .slides {
 	-webkit-perspective: 700px;
 	   -moz-perspective: 700px;
 	    -ms-perspective: 700px;
 	        perspective: 700px;
 }
 
-#reveal.overview .slides section {
+.reveal.overview .slides section {
 	padding: 20px 0;
 	opacity: 1;
 	cursor: pointer;
 	background: rgba(0,0,0,0.1);
 }
-#reveal.overview .slides section .fragment {
+.reveal.overview .slides section .fragment {
     opacity: 1;
 }
-#reveal.overview .slides section:after,
-#reveal.overview .slides section:before {
+.reveal.overview .slides section:after,
+.reveal.overview .slides section:before {
 	display: none !important;
 }
-#reveal.overview .slides section>section {
+.reveal.overview .slides section>section {
 	opacity: 1;
 	cursor: pointer;
 }
-	#reveal.overview .slides section:hover {
+	.reveal.overview .slides section:hover {
 		background: rgba(0,0,0,0.3);
 	}
 
-	#reveal.overview .slides section.present {
+	.reveal.overview .slides section.present {
 		background: rgba(0,0,0,0.3);
 	}
-#reveal.overview .slides>section.stack {
+.reveal.overview .slides>section.stack {
 	background: none;
 	padding: 0;
 }
@@ -951,6 +1005,10 @@ body {
 	background: rgba( 0, 0, 0, 0.6 );
 }
 
+/*********************************************
+ * SPEAKER NOTES
+ *********************************************/
 
-
-
+.reveal aside.notes {
+	display: none;
+}

css/print.css

@@ -32,8 +32,8 @@ html {
    This would include navigation, ads, sidebars, etc. */
 .nestedarrow, 
 .controls a, 
-#reveal .progress span, 
-#reveal.overview {
+.reveal .progress span, 
+.reveal.overview {
 	display:none;
 }
 
@@ -74,8 +74,8 @@ a:visited {
 	font-weight: bold;
 	text-decoration: underline;
 }
-#reveal a:link:after, 
-#reveal a:visited:after {
+.reveal a:link:after, 
+.reveal a:visited:after {
 	content: " (" attr(href) ") ";
 	color: #222 !important;
 	font-size: 90%;
@@ -93,7 +93,7 @@ ul, ol, div, p {
 	margin: auto;
 	text-align: left !important;
 }
-#reveal .slides {
+.reveal .slides {
 	position: static;
 	width: auto;
 	height: auto;
@@ -118,8 +118,11 @@ ul, ol, div, p {
 	    -ms-perspective-origin: 50% 50%;
 	        perspective-origin: 50% 50%;
 }
-#reveal .slides>section, #reveal .slides>section>section, 
-#reveal .slides>section.past, #reveal .slides>section.future {
+.reveal .slides>section, .reveal .slides>section>section, 
+.reveal .slides>section.past, .reveal .slides>section.future,
+.reveal.linear .slides>section, .reveal.linear .slides>section>section,
+.reveal.linear .slides>section.past, .reveal.linear .slides>section.future {
+	
 	visibility: visible;
 	position: static;
 	width: 90%;
@@ -145,17 +148,17 @@ ul, ol, div, p {
 	    -ms-transform: none;
 	        transform: none;
 }
-#reveal section {
+.reveal section {
 	page-break-after: always !important; 
 	display: block !important;
 }
-#reveal section.stack {
+.reveal section.stack {
 	page-break-after: avoid !important; 
 }
-#reveal section .fragment {
+.reveal section .fragment {
 	opacity: 1 !important;
 }
-#reveal section img {
+.reveal section img {
 	display: block;
 	margin: 15px 0px;
 	background: rgba(255,255,255,1);

index.html

@@ -4,7 +4,7 @@
 	<head>
 		<meta charset="utf-8">
 		
-		<title>reveal.js</title>
+		<title>reveal.js - HTML5 Presentations</title>
 
 		<meta name="description" content="An easy to use CSS 3D slideshow tool for quickly creating good looking HTML presentations.">
 		<meta name="author" content="Hakim El Hattab">
@@ -18,12 +18,12 @@
 		<link rel="stylesheet" href="css/main.css">
 		<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
 
-		<link rel="stylesheet" href="lib/zenburn.css">
+		<link rel="stylesheet" href="lib/css/zenburn.css">
 	</head>
 	
 	<body>
 		
-		<div id="reveal">
+		<div class="reveal">
 
 			<!-- Used to fade in a background when a specific slide state is reached -->
 			<div class="state-background"></div>
@@ -48,6 +48,10 @@
 					<p>
 						<i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i>
 					</p>
+
+					<aside class="notes">
+						Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you run the speaker notes server.
+					</aside>
 				</section>
 				
 				<!-- Example of nested vertical slides -->
@@ -160,7 +164,7 @@
 						Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
 					</p>
 					<pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
-	alert( '"customevent" has fired' );
+	console.log( '"customevent" has fired' );
 } );
 					</code></pre>
 				</section>
@@ -180,27 +184,20 @@
 				<section>
 					<h2>Pretty Code</h2>
 					<pre><code contenteditable>
-var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined || 
-				document.body.style['MozPerspective'] !== undefined ||
-				document.body.style['perspective'] !== undefined;
-
 function linkify( selector ) {
-    if( supports3DTransforms ) {
-        
-        var nodes = document.querySelectorAll( selector );
+  if( supports3DTransforms ) {
+    
+    var nodes = document.querySelectorAll( selector );
 
-        for( var i = 0, len = nodes.length; i < len; i++ ) {
-            var node = nodes[i];
+    for( var i = 0, len = nodes.length; i < len; i++ ) {
+      var node = nodes[i];
 
-            if( !node.className || !node.className.match( /roll/g ) ) {
-                node.className += ' roll';
-                node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
-            }
-        };
-    }
+      if( !node.className ) ) {
+        node.className += ' roll';
+      }
+    };
+  }
 }
-
-linkify( 'a' );
 					</code></pre>
 					<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
 				</section>
@@ -254,62 +251,58 @@ linkify( 'a' );
 				<a class="down" href="#">&#x25BC;</a>
 			</aside>
 
-			<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
+			<!-- Presentation progress bar -->
 			<div class="progress"><span></span></div>
 			
 		</div>
 
-		<!-- Optional libraries for code syntax highlighting and classList support in IE9 -->
-		<script src="lib/highlight.js"></script>
-		<script src="lib/classList.js"></script>
-		
-		<script src="js/reveal.js"></script>
-		
+		<script src="lib/js/head.min.js"></script>
+
 		<script>
-			// Parse the query string into a key/value object
-			var query = {};
-			location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
-				query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
+			// Load reveal.js as well as a classList polyfill if needed
+			head.js( !document.body.classList ? 'lib/js/classList.js' : null )
+				.js( 'js/reveal.js', function() {
+
+				// Parse the query string into a key/value object
+				var query = {};
+				location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
+					query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
+				} );
+
+				// Fires when a slide with data-state=customevent is activated
+				Reveal.addEventListener( 'customevent', function() {
+					console.log( '"customevent" has fired' );
+				} );
+
+				// Fires each time a new slide is activated
+				Reveal.addEventListener( 'slidechanged', function( event ) {
+					// event.previousSlide, event.currentSlide, event.indexh, event.indexv
+				} );
+
+				// Full list of configuration options available here:
+				// https://github.com/hakimel/reveal.js#configuration
+				Reveal.initialize({
+					controls: true,
+					progress: true,
+					history: true,
+					
+					theme: query.theme || 'default', // default/neon/beige
+					transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
+				});
+
+			} );
+			
+			// Load highlight.js for syntax highlighting of code samples
+			head.js( 'lib/js/highlight.js', function() { 
+				hljs.initHighlightingOnLoad(); 
 			} );
 
-			// Fires when a slide with data-state=customevent is activated
-			Reveal.addEventListener( 'customevent', function() {
-				alert( '"customevent" has fired' );
-			} );
-
-			// Fires each time a new slide is activated
-			Reveal.addEventListener( 'slidechanged', function( event ) {
-				// event.indexh & event.indexv
-			} );
-
-			Reveal.initialize({
-				// Display controls in the bottom right corner
-				controls: true,
-
-				// Display a presentation progress bar
-				progress: true,
-
-				// If true; each slide will be pushed to the browser history
-				history: true,
-
-				// Loops the presentation, defaults to false
-				loop: false,
-
-				// Flags if mouse wheel navigation should be enabled
-				mouseWheel: true,
-
-				// Apply a 3D roll to links on hover
-				rollingLinks: true,
-
-				// UI style
-				theme: query.theme || 'default', // default/neon
-
-				// Transition style
-				transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
-			});
-
-			hljs.initHighlightingOnLoad();
+			// If we're runnning the notes server we need to include some additional JS
+			// TODO Is there a better way to determine if we're running the notes server?
+			if( window.location.host === 'localhost:1947' ) {
+				head.js( 'socket.io/socket.io.js', 'plugin/speakernotes/client.js' );
+			}
 		</script>
-
+		
 	</body>
 </html>

js/reveal.js

@@ -1,5 +1,5 @@
 /*!
- * reveal.js 1.3
+ * reveal.js 1.4
  * http://lab.hakim.se/reveal-js
  * MIT licensed
  * 
@@ -7,8 +7,8 @@
  */
 var Reveal = (function(){
 	
-	var HORIZONTAL_SLIDES_SELECTOR = '#reveal .slides>section',
-		VERTICAL_SLIDES_SELECTOR = '#reveal .slides>section.present>section',
+	var HORIZONTAL_SLIDES_SELECTOR = '.reveal .slides>section',
+		VERTICAL_SLIDES_SELECTOR = '.reveal .slides>section.present>section',
 
 		IS_TOUCH_DEVICE = !!( 'ontouchstart' in window ),
 
@@ -16,16 +16,38 @@ var Reveal = (function(){
 		indexh = 0,
 		indexv = 0,
 
-		// Configurations options, can be overridden at initialization time 
+		// Configurations defaults, can be overridden at initialization time 
 		config = {
-			controls: false,
-			progress: false,
+			// Display controls in the bottom right corner
+			controls: true,
+
+			// Display a presentation progress bar
+			progress: true,
+
+			// Push each slide change to the browser history
 			history: false,
+
+			// Enable keyboard shortcuts for navigation
+			keyboard: true,
+
+			// Loop the presentation
 			loop: false,
+
+			// Number of milliseconds between automatically proceeding to the 
+			// next slide, disabled when set to 0
+			autoSlide: 0,
+
+			// Enable slide navigation via mouse wheel
 			mouseWheel: true,
+
+			// Apply a 3D roll to links on hover
 			rollingLinks: true,
-			transition: 'default',
-			theme: 'default'
+
+			// UI style
+			theme: 'default', // default/neon/beige
+
+			// Transition style
+			transition: 'default' // default/cube/page/concave/linear(2d)
 		},
 
 		// Slides may hold a data-state attribute which we pick up and apply 
@@ -55,6 +77,9 @@ var Reveal = (function(){
 		// Throttles mouse wheel navigation
 		mouseWheelTimeout = 0,
 
+		// An interval used to automatically move on to the next slide
+		autoSlideTimeout = 0,
+
 		// Delays updates to the URL due to a Chrome thumbnailer bug
 		writeURLTimeout = 0,
 
@@ -84,14 +109,17 @@ var Reveal = (function(){
 		}
 
 		// Cache references to DOM elements
-		dom.wrapper = document.querySelector( '#reveal' );
-		dom.progress = document.querySelector( '#reveal .progress' );
-		dom.progressbar = document.querySelector( '#reveal .progress span' );
-		dom.controls = document.querySelector( '#reveal .controls' );
-		dom.controlsLeft = document.querySelector( '#reveal .controls .left' );
-		dom.controlsRight = document.querySelector( '#reveal .controls .right' );
-		dom.controlsUp = document.querySelector( '#reveal .controls .up' );
-		dom.controlsDown = document.querySelector( '#reveal .controls .down' );
+		dom.wrapper = document.querySelector( '.reveal' );
+		dom.progress = document.querySelector( '.reveal .progress' );
+		dom.progressbar = document.querySelector( '.reveal .progress span' );
+		
+		if ( config.controls ) {
+			dom.controls = document.querySelector( '.reveal .controls' );
+			dom.controlsLeft = document.querySelector( '.reveal .controls .left' );
+			dom.controlsRight = document.querySelector( '.reveal .controls .right' );
+			dom.controlsUp = document.querySelector( '.reveal .controls .up' );
+			dom.controlsDown = document.querySelector( '.reveal .controls .down' );
+		}
 
 		addEventListeners();
 
@@ -104,6 +132,9 @@ var Reveal = (function(){
 		// Read the initial hash
 		readURL();
 
+		// Start auto-sliding if it's enabled
+		cueAutoSlide();
+
 		// Set up hiding of the browser address bar
 		if( navigator.userAgent.match( /(iphone|ipod|android)/i ) ) {
 			// Give the page some scrollable overflow
@@ -118,16 +149,16 @@ var Reveal = (function(){
 	}
 
 	function configure() {
-		// Fall back on the 2D transform theme 'linear'
 		if( supports3DTransforms === false ) {
+			// Fall back on the 2D transform theme 'linear'
 			config.transition = 'linear';
 		}
 
-		if( config.controls ) {
+		if( config.controls && dom.controls ) {
 			dom.controls.style.display = 'block';
 		}
 
-		if( config.progress ) {
+		if( config.progress && dom.progress ) {
 			dom.progress.style.display = 'block';
 		}
 
@@ -136,7 +167,7 @@ var Reveal = (function(){
 		}
 
 		if( config.theme !== 'default' ) {
-			dom.wrapper.classList.add( config.theme );
+			document.documentElement.classList.add( 'theme-' + config.theme );
 		}
 
 		if( config.mouseWheel ) {
@@ -151,16 +182,21 @@ var Reveal = (function(){
 	}
 
 	function addEventListeners() {
-		document.addEventListener( 'keydown', onDocumentKeyDown, false );
 		document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 		document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 		document.addEventListener( 'touchend', onDocumentTouchEnd, false );
 		window.addEventListener( 'hashchange', onWindowHashChange, false );
-		
-		dom.controlsLeft.addEventListener( 'click', preventAndForward( navigateLeft ), false );
-		dom.controlsRight.addEventListener( 'click', preventAndForward( navigateRight ), false );
-		dom.controlsUp.addEventListener( 'click', preventAndForward( navigateUp ), false );
-		dom.controlsDown.addEventListener( 'click', preventAndForward( navigateDown ), false );
+
+		if( config.keyboard ) {
+			document.addEventListener( 'keydown', onDocumentKeyDown, false );
+		}
+
+		if ( config.controls && dom.controls ) {
+			dom.controlsLeft.addEventListener( 'click', preventAndForward( navigateLeft ), false );
+			dom.controlsRight.addEventListener( 'click', preventAndForward( navigateRight ), false );
+			dom.controlsUp.addEventListener( 'click', preventAndForward( navigateUp ), false );
+			dom.controlsDown.addEventListener( 'click', preventAndForward( navigateDown ), false );	
+		}
 	}
 
 	function removeEventListeners() {
@@ -170,10 +206,12 @@ var Reveal = (function(){
 		document.removeEventListener( 'touchend', onDocumentTouchEnd, false );
 		window.removeEventListener( 'hashchange', onWindowHashChange, false );
 		
-		dom.controlsLeft.removeEventListener( 'click', preventAndForward( navigateLeft ), false );
-		dom.controlsRight.removeEventListener( 'click', preventAndForward( navigateRight ), false );
-		dom.controlsUp.removeEventListener( 'click', preventAndForward( navigateUp ), false );
-		dom.controlsDown.removeEventListener( 'click', preventAndForward( navigateDown ), false );
+		if ( config.controls && dom.controls ) {
+			dom.controlsLeft.removeEventListener( 'click', preventAndForward( navigateLeft ), false );
+			dom.controlsRight.removeEventListener( 'click', preventAndForward( navigateRight ), false );
+			dom.controlsUp.removeEventListener( 'click', preventAndForward( navigateUp ), false );
+			dom.controlsDown.removeEventListener( 'click', preventAndForward( navigateDown ), false );
+		}
 	}
 
 	/**
@@ -262,20 +300,21 @@ var Reveal = (function(){
 			case 13: if( overviewIsActive() ) { deactivateOverview(); triggered = true; } break;
 		}
 
+		// If the input resulted in a triggered action we should prevent 
+		// the browsers default behavior
 		if( triggered ) {
 			event.preventDefault();
 		}
 		else if ( event.keyCode === 27 && supports3DTransforms ) {
-			if( overviewIsActive() ) {
-				deactivateOverview();
-			}
-			else {
-				activateOverview();
-			}
+			toggleOverview();
 	
 			event.preventDefault();
 		}
 
+		// If auto-sliding is enabled we need to cue up 
+		// another timeout
+		cueAutoSlide();
+
 	}
 
 	/**
@@ -402,7 +441,7 @@ var Reveal = (function(){
 	 */
 	function linkify() {
         if( supports3DTransforms ) {
-        	var nodes = document.querySelectorAll( '#reveal .slides section a:not(.image)' );
+        	var nodes = document.querySelectorAll( '.reveal .slides section a:not(.image)' );
 
 	        for( var i = 0, len = nodes.length; i < len; i++ ) {
 	            var node = nodes[i];
@@ -474,7 +513,7 @@ var Reveal = (function(){
 	function deactivateOverview() {
 		dom.wrapper.classList.remove( 'overview' );
 
-		var slides = Array.prototype.slice.call( document.querySelectorAll( '#reveal .slides section' ) );
+		var slides = Array.prototype.slice.call( document.querySelectorAll( '.reveal .slides section' ) );
 
 		for( var i = 0, len = slides.length; i < len; i++ ) {
 			var element = slides[i];
@@ -610,16 +649,19 @@ var Reveal = (function(){
 	 * Updates the visual slides to represent the currently
 	 * set indices. 
 	 */
-	function slide() {
+	function slide( h, v ) {
 		// Remember the state before this slide
 		var stateBefore = state.concat();
 
 		// Reset the state array
 		state.length = 0;
 
+		var indexhBefore = indexh,
+			indexvBefore = indexv;
+
 		// Activate and transition to the new slide
-		indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, indexh );
-		indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, indexv );
+		indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, h === undefined ? indexh : h );
+		indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, v === undefined ? indexv : v );
 
 		// Apply the new state
 		stateLoop: for( var i = 0, len = state.length; i < len; i++ ) {
@@ -644,7 +686,7 @@ var Reveal = (function(){
 		}
 
 		// Update progress if enabled
-		if( config.progress ) {
+		if( config.progress && dom.progress ) {
 			dom.progressbar.style.width = ( indexh / ( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1 ) ) * window.innerWidth + 'px';
 		}
 
@@ -658,17 +700,41 @@ var Reveal = (function(){
 		clearTimeout( writeURLTimeout );
 		writeURLTimeout = setTimeout( writeURL, 1500 );
 
-		// Dispatch an event notifying observers of the change in slide
-		dispatchEvent( 'slidechanged', {
-			'indexh': indexh, 
-			'indexv': indexv
-		} );
+		// Only fire if the slide index is different from before
+		if( indexh !== indexhBefore || indexv !== indexvBefore ) {
+			// Query all horizontal slides in the deck
+			var horizontalSlides = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR );
+
+			// Find the previous and current horizontal slides
+			var previousHorizontalSlide = horizontalSlides[ indexhBefore ],
+				currentHorizontalSlide = horizontalSlides[ indexh ];
+
+			// Query all vertical slides inside of the previous and current horizontal slides
+			var previousVerticalSlides = previousHorizontalSlide.querySelectorAll( 'section' );
+				currentVerticalSlides = currentHorizontalSlide.querySelectorAll( 'section' );
+
+			// Dispatch an event notifying observers of the change in slide
+			dispatchEvent( 'slidechanged', {
+				// Include the current indices in the event
+				'indexh': indexh, 
+				'indexv': indexv,
+
+				// Passes direct references to the slide HTML elements, attempts to find
+				// a vertical slide and falls back on the horizontal parent
+				'previousSlide': previousVerticalSlides[ indexvBefore ] || previousHorizontalSlide,
+				'currentSlide': currentVerticalSlides[ indexv ] || currentHorizontalSlide
+			} );
+		}
 	}
 
 	/**
 	 * Updates the state and link pointers of the controls.
 	 */
 	function updateControls() {
+		if ( !config.controls || !dom.controls ) {
+			return;
+		}
+		
 		var routes = availableRoutes();
 
 		// Remove the 'enabled' class from all directions
@@ -705,12 +771,12 @@ var Reveal = (function(){
 	function readURL() {
 		// Break the hash down to separate components
 		var bits = window.location.hash.slice(2).split('/');
-		
+
 		// Read the index components of the hash
-		indexh = parseInt( bits[0] ) || 0 ;
-		indexv = parseInt( bits[1] ) || 0 ;
-		
-		navigateTo( indexh, indexv );
+		var h = parseInt( bits[0] ) || 0 ;
+		var v = parseInt( bits[1] ) || 0 ;
+
+		navigateTo( h, v );
 	}
 	
 	/**
@@ -732,7 +798,7 @@ var Reveal = (function(){
 
 	/**
 	 * Dispatches an event of the specified type from the 
-	 * #reveal DOM element.
+	 * reveal DOM element.
 	 */
 	function dispatchEvent( type, properties ) {
 		var event = document.createEvent( "HTMLEvents", 1, 2 );
@@ -788,7 +854,7 @@ var Reveal = (function(){
 				verticalFragments[ verticalFragments.length - 1 ].classList.remove( 'visible' );
 
 				// Notify subscribers of the change
-				dispatchEvent( 'fragmenthidden', { fragment: verticalFragments[0] } );
+				dispatchEvent( 'fragmenthidden', { fragment: verticalFragments[ verticalFragments.length - 1 ] } );
 				return true;
 			}
 		}
@@ -799,13 +865,22 @@ var Reveal = (function(){
 				horizontalFragments[ horizontalFragments.length - 1 ].classList.remove( 'visible' );
 
 				// Notify subscribers of the change
-				dispatchEvent( 'fragmenthidden', { fragment: horizontalFragments[0] } );
+				dispatchEvent( 'fragmenthidden', { fragment: horizontalFragments[ horizontalFragments.length - 1 ] } );
 				return true;
 			}
 		}
 		
 		return false;
 	}
+
+	function cueAutoSlide() {
+		clearTimeout( autoSlideTimeout );
+
+		// Cue the next auto-slide if enabled
+		if( config.autoSlide ) {
+			autoSlideTimeout = setTimeout( navigateNext, config.autoSlide );
+		}
+	}
 	
 	/**
 	 * Triggers a navigation to the specified indices.
@@ -814,40 +889,31 @@ var Reveal = (function(){
 	 * @param {Number} v The vertical index of the slide to show
 	 */
 	function navigateTo( h, v ) {
-		indexh = h === undefined ? indexh : h;
-		indexv = v === undefined ? indexv : v;
-		
-		slide();
+		slide( h, v );
 	}
 	
 	function navigateLeft() {
 		// Prioritize hiding fragments
 		if( overviewIsActive() || previousFragment() === false ) {
-			indexh --;
-			indexv = 0;
-			slide();
+			slide( indexh - 1, 0 );
 		}
 	}
 	function navigateRight() {
 		// Prioritize revealing fragments
 		if( overviewIsActive() || nextFragment() === false ) {
-			indexh ++;
-			indexv = 0;
-			slide();
+			slide( indexh + 1, 0 );
 		}
 	}
 	function navigateUp() {
 		// Prioritize hiding fragments
 		if( overviewIsActive() || previousFragment() === false ) {
-			indexv --;
-			slide();
+			slide( indexh, indexv - 1 );
 		}
 	}
 	function navigateDown() {
 		// Prioritize revealing fragments
 		if( overviewIsActive() || nextFragment() === false ) {
-			indexv ++;
-			slide();
+			slide( indexh, indexv + 1 );
 		}
 	}
 
@@ -865,7 +931,7 @@ var Reveal = (function(){
 			}
 			else {
 				// Fetch the previous horizontal slide, if there is one
-				var previousSlide = document.querySelector( '#reveal .slides>section.past:nth-child(' + indexh + ')' );
+				var previousSlide = document.querySelector( '.reveal .slides>section.past:nth-child(' + indexh + ')' );
 
 				if( previousSlide ) {
 					indexv = ( previousSlide.querySelectorAll('section').length + 1 ) || 0;
@@ -884,6 +950,10 @@ var Reveal = (function(){
 		if( nextFragment() === false ) {
 			availableRoutes().down ? navigateDown() : navigateRight();
 		}
+
+		// If auto-sliding is enabled we need to cue up 
+		// another timeout
+		cueAutoSlide();
 	}
 
 	/**
@@ -906,14 +976,19 @@ var Reveal = (function(){
 		navigateRight: navigateRight,
 		navigateUp: navigateUp,
 		navigateDown: navigateDown,
+		navigatePrev: navigatePrev,
+		navigateNext: navigateNext,
 		toggleOverview: toggleOverview,
 
+		addEventListeners: addEventListeners,
+		removeEventListeners: removeEventListeners,
+
 		// Forward event binding to the reveal DOM element
 		addEventListener: function( type, listener, useCapture ) {
-			( dom.wrapper || document.querySelector( '#reveal' ) ).addEventListener( type, listener, useCapture );
+			( dom.wrapper || document.querySelector( '.reveal' ) ).addEventListener( type, listener, useCapture );
 		},
 		removeEventListener: function( type, listener, useCapture ) {
-			( dom.wrapper || document.querySelector( '#reveal' ) ).removeEventListener( type, listener, useCapture );
+			( dom.wrapper || document.querySelector( '.reveal' ) ).removeEventListener( type, listener, useCapture );
 		}
 	};
 	

js/reveal.min.js

@@ -1,60 +0,0 @@
-/*!
- * reveal.js 1.3
- * http://lab.hakim.se/reveal-js
- * MIT licensed
- * 
- * Copyright (C) 2012 Hakim El Hattab, http://hakim.se
- */
-var Reveal=(function(){var j="#reveal .slides>section",a="#reveal .slides>section.present>section",e=!!("ontouchstart" in window),k=0,c=0,H={controls:false,progress:false,history:false,loop:false,mouseWheel:true,rollingLinks:true,transition:"default",theme:"default"},U=[],d={},J=document.body.style.perspectiveProperty!==undefined||document.body.style.WebkitPerspective!==undefined||document.body.style.MozPerspective!==undefined||document.body.style.msPerspective!==undefined||document.body.style.OPerspective!==undefined,l=document.body.style.transformProperty!==undefined||document.body.style.WebkitTransform!==undefined||document.body.style.MozTransform!==undefined||document.body.style.msTransform!==undefined||document.body.style.OTransform!==undefined,v=0,y=0,P={startX:0,startY:0,startSpan:0,startCount:0,handled:false,threshold:40};
-function h(W){if(!l&&!J){document.body.setAttribute("class","no-transforms");return;}d.wrapper=document.querySelector("#reveal");d.progress=document.querySelector("#reveal .progress");
-d.progressbar=document.querySelector("#reveal .progress span");d.controls=document.querySelector("#reveal .controls");d.controlsLeft=document.querySelector("#reveal .controls .left");
-d.controlsRight=document.querySelector("#reveal .controls .right");d.controlsUp=document.querySelector("#reveal .controls .up");d.controlsDown=document.querySelector("#reveal .controls .down");
-A();q(H,W);if(J===false){H.transition="linear";}if(H.controls){d.controls.style.display="block";}if(H.progress){d.progress.style.display="block";}if(H.transition!=="default"){d.wrapper.classList.add(H.transition);
-}if(H.theme!=="default"){d.wrapper.classList.add(H.theme);}if(H.mouseWheel){document.addEventListener("DOMMouseScroll",m,false);document.addEventListener("mousewheel",m,false);
-}if(H.rollingLinks){E();}D();if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll";document.body.style.height="120%";
-window.addEventListener("load",Q,false);window.addEventListener("orientationchange",Q,false);}}function A(){document.addEventListener("keydown",T,false);
-document.addEventListener("touchstart",w,false);document.addEventListener("touchmove",S,false);document.addEventListener("touchend",L,false);window.addEventListener("hashchange",t,false);
-d.controlsLeft.addEventListener("click",n(x),false);d.controlsRight.addEventListener("click",n(i),false);d.controlsUp.addEventListener("click",n(r),false);
-d.controlsDown.addEventListener("click",n(B),false);}function K(){document.removeEventListener("keydown",T,false);document.removeEventListener("touchstart",w,false);
-document.removeEventListener("touchmove",S,false);document.removeEventListener("touchend",L,false);window.removeEventListener("hashchange",t,false);d.controlsLeft.removeEventListener("click",n(x),false);
-d.controlsRight.removeEventListener("click",n(i),false);d.controlsUp.removeEventListener("click",n(r),false);d.controlsDown.removeEventListener("click",n(B),false);
-}function q(X,W){for(var Y in W){X[Y]=W[Y];}}function I(Y,W){var Z=Y.x-W.x,X=Y.y-W.y;return Math.sqrt(Z*Z+X*X);}function n(W){return function(X){X.preventDefault();
-W.call();};}function Q(){setTimeout(function(){window.scrollTo(0,1);},0);}function T(X){if(X.target.contentEditable!="inherit"||X.shiftKey||X.altKey||X.ctrlKey||X.metaKey){return;
-}var W=false;switch(X.keyCode){case 80:case 33:N();W=true;break;case 78:case 34:u();W=true;break;case 72:case 37:x();W=true;break;case 76:case 39:i();W=true;
-break;case 75:case 38:r();W=true;break;case 74:case 40:B();W=true;break;case 36:F(0);W=true;break;case 35:F(Number.MAX_VALUE);W=true;break;case 32:O()?R():u();
-W=true;break;case 13:if(O()){R();W=true;}break;}if(W){X.preventDefault();}else{if(X.keyCode===27&&J){if(O()){R();}else{C();}X.preventDefault();}}}function w(W){P.startX=W.touches[0].clientX;
-P.startY=W.touches[0].clientY;P.startCount=W.touches.length;if(W.touches.length===2){P.startSpan=I({x:W.touches[1].clientX,y:W.touches[1].clientY},{x:P.startX,y:P.startY});
-}}function S(ab){if(!P.handled){var Z=ab.touches[0].clientX;var Y=ab.touches[0].clientY;if(ab.touches.length===2&&P.startCount===2){var aa=I({x:ab.touches[1].clientX,y:ab.touches[1].clientY},{x:P.startX,y:P.startY});
-if(Math.abs(P.startSpan-aa)>P.threshold){P.handled=true;if(aa<P.startSpan){C();}else{R();}}}else{if(ab.touches.length===1){var X=Z-P.startX,W=Y-P.startY;
-if(X>P.threshold&&Math.abs(X)>Math.abs(W)){P.handled=true;x();}else{if(X<-P.threshold&&Math.abs(X)>Math.abs(W)){P.handled=true;i();}else{if(W>P.threshold){P.handled=true;
-r();}else{if(W<-P.threshold){P.handled=true;B();}}}}}}ab.preventDefault();}}function L(W){P.handled=false;}function m(W){clearTimeout(v);v=setTimeout(function(){var X=W.detail||-W.wheelDelta;
-if(X>0){u();}else{N();}},100);}function t(W){D();}function E(){if(J){var X=document.querySelectorAll("#reveal .slides section a:not(.image)");for(var Y=0,W=X.length;
-Y<W;Y++){var Z=X[Y];if(Z.textContent&&!Z.querySelector("img")&&(!Z.className||!Z.classList.contains(Z,"roll"))){Z.classList.add("roll");Z.innerHTML='<span data-title="'+Z.text+'">'+Z.innerHTML+"</span>";
-}}}}function C(){d.wrapper.classList.add("overview");var W=Array.prototype.slice.call(document.querySelectorAll(j));for(var ab=0,Z=W.length;ab<Z;ab++){var Y=W[ab],af="translateZ(-2500px) translate("+((ab-k)*105)+"%, 0%)";
-Y.setAttribute("data-index-h",ab);Y.style.display="block";Y.style.WebkitTransform=af;Y.style.MozTransform=af;Y.style.msTransform=af;Y.style.OTransform=af;
-Y.style.transform=af;if(!Y.classList.contains("stack")){Y.addEventListener("click",z,true);}var ae=Array.prototype.slice.call(Y.querySelectorAll("section"));
-for(var aa=0,X=ae.length;aa<X;aa++){var ad=ae[aa],ac="translate(0%, "+((aa-c)*105)+"%)";ad.setAttribute("data-index-h",ab);ad.setAttribute("data-index-v",aa);
-ad.style.display="block";ad.style.WebkitTransform=ac;ad.style.MozTransform=ac;ad.style.msTransform=ac;ad.style.OTransform=ac;ad.style.transform=ac;ad.addEventListener("click",z,true);
-}}}function R(){d.wrapper.classList.remove("overview");var Z=Array.prototype.slice.call(document.querySelectorAll("#reveal .slides section"));for(var Y=0,W=Z.length;
-Y<W;Y++){var X=Z[Y];X.style.WebkitTransform="";X.style.MozTransform="";X.style.msTransform="";X.style.OTransform="";X.style.transform="";X.removeEventListener("click",z);
-}b();}function O(){return d.wrapper.classList.contains("overview");}function z(W){if(O()){W.preventDefault();R();k=this.getAttribute("data-index-h");c=this.getAttribute("data-index-v");
-b();}}function V(X,Z){var ab=Array.prototype.slice.call(document.querySelectorAll(X)),ac=ab.length;if(ac){if(H.loop){Z%=ac;if(Z<0){Z=ac+Z;}}Z=Math.max(Math.min(Z,ac-1),0);
-for(var aa=0;aa<ac;aa++){var W=ab[aa];if(O()===false){var ad=Math.abs((Z-aa)%(ac-3))||0;W.style.display=ad>3?"none":"block";}ab[aa].classList.remove("past");
-ab[aa].classList.remove("present");ab[aa].classList.remove("future");if(aa<Z){ab[aa].classList.add("past");}else{if(aa>Z){ab[aa].classList.add("future");
-}}if(W.querySelector("section")){ab[aa].classList.add("stack");}}ab[Z].classList.add("present");var Y=ab[Z].getAttribute("data-state");if(Y){U=U.concat(Y.split(" "));
-}}else{Z=0;}return Z;}function b(){var Z=U.concat();U.length=0;k=V(j,k);c=V(a,c);stateLoop:for(var Y=0,W=U.length;Y<W;Y++){for(var X=0;X<Z.length;X++){if(Z[X]===U[Y]){Z.splice(X,1);
-continue stateLoop;}}document.documentElement.classList.add(U[Y]);o(U[Y]);}while(Z.length){document.documentElement.classList.remove(Z.pop());}if(H.progress){d.progressbar.style.width=(k/(document.querySelectorAll(j).length-1))*window.innerWidth+"px";
-}if(O()){C();}p();clearTimeout(y);y=setTimeout(g,1500);o("slidechanged",{indexh:k,indexv:c});}function p(){var W=f();[d.controlsLeft,d.controlsRight,d.controlsUp,d.controlsDown].forEach(function(X){X.classList.remove("enabled");
-});if(W.left){d.controlsLeft.classList.add("enabled");}if(W.right){d.controlsRight.classList.add("enabled");}if(W.up){d.controlsUp.classList.add("enabled");
-}if(W.down){d.controlsDown.classList.add("enabled");}}function f(){var W=document.querySelectorAll(j);var X=document.querySelectorAll(a);return{left:k>0,right:k<W.length-1,up:c>0,down:c<X.length-1};
-}function D(){var W=window.location.hash.slice(2).split("/");k=parseInt(W[0])||0;c=parseInt(W[1])||0;F(k,c);}function g(){if(H.history){var W="/";if(k>0||c>0){W+=k;
-}if(c>0){W+="/"+c;}window.location.hash=W;}}function o(X,W){var Y=document.createEvent("HTMLEvents",1,2);Y.initEvent(X,true,true);q(Y,W);d.wrapper.dispatchEvent(Y);
-}function s(){if(document.querySelector(a+".present")){var X=document.querySelectorAll(a+".present .fragment:not(.visible)");if(X.length){X[0].classList.add("visible");
-o("fragmentshown",{fragment:X[0]});return true;}}else{var W=document.querySelectorAll(j+".present .fragment:not(.visible)");if(W.length){W[0].classList.add("visible");
-o("fragmentshown",{fragment:W[0]});return true;}}return false;}function G(){if(document.querySelector(a+".present")){var X=document.querySelectorAll(a+".present .fragment.visible");
-if(X.length){X[X.length-1].classList.remove("visible");o("fragmenthidden",{fragment:X[0]});return true;}}else{var W=document.querySelectorAll(j+".present .fragment.visible");
-if(W.length){W[W.length-1].classList.remove("visible");o("fragmenthidden",{fragment:W[0]});return true;}}return false;}function F(X,W){k=X===undefined?k:X;
-c=W===undefined?c:W;b();}function x(){if(O()||G()===false){k--;c=0;b();}}function i(){if(O()||s()===false){k++;c=0;b();}}function r(){if(O()||G()===false){c--;
-b();}}function B(){if(O()||s()===false){c++;b();}}function N(){if(G()===false){if(f().up){r();}else{var W=document.querySelector("#reveal .slides>section.past:nth-child("+k+")");
-if(W){c=(W.querySelectorAll("section").length+1)||0;k--;b();}}}}function u(){if(s()===false){f().down?B():i();}}function M(){if(O()){R();}else{C();}}return{initialize:h,navigateTo:F,navigateLeft:x,navigateRight:i,navigateUp:r,navigateDown:B,toggleOverview:M,addEventListener:function(X,Y,W){(d.wrapper||document.querySelector("#reveal")).addEventListener(X,Y,W);
-},removeEventListener:function(X,Y,W){(d.wrapper||document.querySelector("#reveal")).removeEventListener(X,Y,W);}};})();

lib/js/head.min.js

@@ -0,0 +1,8 @@
+/**
+    Head JS     The only script in your <HEAD>
+    Copyright   Tero Piirainen (tipiirai)
+    License     MIT / http://bit.ly/mit-license
+    Version     0.96
+
+    http://headjs.com
+*/(function(a){function z(){d||(d=!0,s(e,function(a){p(a)}))}function y(c,d){var e=a.createElement("script");e.type="text/"+(c.type||"javascript"),e.src=c.src||c,e.async=!1,e.onreadystatechange=e.onload=function(){var a=e.readyState;!d.done&&(!a||/loaded|complete/.test(a))&&(d.done=!0,d())},(a.body||b).appendChild(e)}function x(a,b){if(a.state==o)return b&&b();if(a.state==n)return k.ready(a.name,b);if(a.state==m)return a.onpreload.push(function(){x(a,b)});a.state=n,y(a.url,function(){a.state=o,b&&b(),s(g[a.name],function(a){p(a)}),u()&&d&&s(g.ALL,function(a){p(a)})})}function w(a,b){a.state===undefined&&(a.state=m,a.onpreload=[],y({src:a.url,type:"cache"},function(){v(a)}))}function v(a){a.state=l,s(a.onpreload,function(a){a.call()})}function u(a){a=a||h;var b;for(var c in a){if(a.hasOwnProperty(c)&&a[c].state!=o)return!1;b=!0}return b}function t(a){return Object.prototype.toString.call(a)=="[object Function]"}function s(a,b){if(!!a){typeof a=="object"&&(a=[].slice.call(a));for(var c=0;c<a.length;c++)b.call(a,a[c],c)}}function r(a){var b;if(typeof a=="object")for(var c in a)a[c]&&(b={name:c,url:a[c]});else b={name:q(a),url:a};var d=h[b.name];if(d&&d.url===b.url)return d;h[b.name]=b;return b}function q(a){var b=a.split("/"),c=b[b.length-1],d=c.indexOf("?");return d!=-1?c.substring(0,d):c}function p(a){a._done||(a(),a._done=1)}var b=a.documentElement,c,d,e=[],f=[],g={},h={},i=a.createElement("script").async===!0||"MozAppearance"in a.documentElement.style||window.opera,j=window.head_conf&&head_conf.head||"head",k=window[j]=window[j]||function(){k.ready.apply(null,arguments)},l=1,m=2,n=3,o=4;i?k.js=function(){var a=arguments,b=a[a.length-1],c={};t(b)||(b=null),s(a,function(d,e){d!=b&&(d=r(d),c[d.name]=d,x(d,b&&e==a.length-2?function(){u(c)&&p(b)}:null))});return k}:k.js=function(){var a=arguments,b=[].slice.call(a,1),d=b[0];if(!c){f.push(function(){k.js.apply(null,a)});return k}d?(s(b,function(a){t(a)||w(r(a))}),x(r(a[0]),t(d)?d:function(){k.js.apply(null,b)})):x(r(a[0]));return k},k.ready=function(b,c){if(b==a){d?p(c):e.push(c);return k}t(b)&&(c=b,b="ALL");if(typeof b!="string"||!t(c))return k;var f=h[b];if(f&&f.state==o||b=="ALL"&&u()&&d){p(c);return k}var i=g[b];i?i.push(c):i=g[b]=[c];return k},k.ready(a,function(){u()&&s(g.ALL,function(a){p(a)}),k.feature&&k.feature("domloaded",!0)});if(window.addEventListener)a.addEventListener("DOMContentLoaded",z,!1),window.addEventListener("load",z,!1);else if(window.attachEvent){a.attachEvent("onreadystatechange",function(){a.readyState==="complete"&&z()});var A=1;try{A=window.frameElement}catch(B){}!A&&b.doScroll&&function(){try{b.doScroll("left"),z()}catch(a){setTimeout(arguments.callee,1);return}}(),window.attachEvent("onload",z)}!a.readyState&&a.addEventListener&&(a.readyState="loading",a.addEventListener("DOMContentLoaded",handler=function(){a.removeEventListener("DOMContentLoaded",handler,!1),a.readyState="complete"},!1)),setTimeout(function(){c=!0,s(f,function(a){a()})},300)})(document)

package.json

@@ -0,0 +1,20 @@
+{
+	"author": "Hakim El Hattab",
+	"name": "reveal.js",
+	"description": "HTML5 Slideware with Presenter Notes",
+	"version": "1.5.0",
+	"repository": {
+		"type": "git",
+		"url": "git://github.com/hakimel/reveal.js.git"
+	},
+	"engines": {
+		"node": "~0.6.8"
+	},
+	"dependencies": {
+		"underscore" : "1.3.3",
+		"express" : "2.5.9",
+		"socket.io" : "0.9.6",
+		"mustache" : "0.4.0"
+	},
+	"devDependencies": {}
+}

plugin/speakernotes/client.js

@@ -0,0 +1,35 @@
+(function() {
+	// don't emit events from inside the previews themselves
+	if ( window.location.search.match( /receiver/gi ) ) { return; }
+
+	var socket = io.connect(window.location.origin);
+	var socketId = Math.random().toString().slice(2);
+	
+	console.log('View slide notes at ' + window.location.origin + '/notes/' + socketId);
+
+	Reveal.addEventListener( 'slidechanged', function( event ) {
+		var nextindexh;
+		var nextindexv;
+		var slideElement = event.currentSlide;
+
+		if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') {
+			nextindexh = event.indexh;
+			nextindexv = event.indexv + 1;
+		} else {
+			nextindexh = event.indexh + 1;
+			nextindexv = 0;
+		}
+
+		var notes = slideElement.querySelector('aside.notes');
+		var slideData = {
+			notes : notes ? notes.innerHTML : '',
+			indexh : event.indexh,
+			indexv : event.indexv,
+			nextindexh : nextindexh,
+			nextindexv : nextindexv,
+			socketId : socketId
+		};
+
+		socket.emit('slidechanged', slideData);
+	} );
+}());

plugin/speakernotes/index.js

@@ -0,0 +1,55 @@
+var express   = require('express');
+var fs        = require('fs');
+var io        = require('socket.io');
+var _         = require('underscore');
+var Mustache  = require('mustache');
+
+var app       = express.createServer();
+var staticDir = express.static;
+
+io            = io.listen(app);
+
+var opts = {
+	port :      1947,
+	baseDir :   __dirname + '/../../'
+};
+
+io.sockets.on('connection', function(socket) {
+	socket.on('slidechanged', function(slideData) {
+		socket.broadcast.emit('slidedata', slideData);
+	});
+});
+
+app.configure(function() {
+	[ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) {
+		app.use('/' + dir, staticDir(opts.baseDir + dir));
+	});
+});
+
+app.get("/", function(req, res) {
+	fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
+});
+
+app.get("/notes/:socketId", function(req, res) {
+
+	fs.readFile(opts.baseDir + 'plugin/speakernotes/notes.html', function(err, data) {
+		res.send(Mustache.to_html(data.toString(), {
+			socketId : req.params.socketId
+		}));
+	});
+	// fs.createReadStream(opts.baseDir + 'speakernotes/notes.html').pipe(res);
+});
+
+// Actually listen
+app.listen(opts.port || null);
+
+var brown = '\033[33m', 
+	green = '\033[32m', 
+	reset = '\033[0m';
+
+var slidesLocation = "http://localhost" + ( opts.port ? ( ':' + opts.port ) : '' );
+
+console.log( brown + "reveal.js - Speaker Notes" + reset );
+console.log( "1. Open the slides at " + green + slidesLocation + reset );
+console.log( "2. Click on the link your JS console to go to the notes page" );
+console.log( "3. Advance through your slides and your notes will advance automatically" );

plugin/speakernotes/notes.html

@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Slide Notes</title>
+
+		<style>
+			body {
+				font-family: Helvetica;
+			}
+
+			#notes {
+				font-size: 24px;
+				width: 640px;
+				margin-top: 5px;
+			}
+
+			#wrap-current-slide {
+				width: 640px;
+				height: 512px;
+				float: left;
+				overflow: hidden;
+			}
+
+			#current-slide {
+				width: 1280px;
+				height: 1024px;
+				border: none;
+				-moz-transform: scale(0.5);
+				-moz-transform-origin: 0 0;
+				-o-transform: scale(0.5);
+				-o-transform-origin: 0 0;
+				-webkit-transform: scale(0.5);
+				-webkit-transform-origin: 0 0;
+			}
+
+			#wrap-next-slide {
+				width: 320px;
+				height: 256px;
+				float: left;
+				margin: 0 0 0 10px;
+				overflow: hidden;
+			}
+
+			#next-slide {
+				width: 1280px;
+				height: 1024px;
+				border: none;
+				-moz-transform: scale(0.25);
+				-moz-transform-origin: 0 0;
+				-o-transform: scale(0.25);
+				-o-transform-origin: 0 0;
+				-webkit-transform: scale(0.25);
+				-webkit-transform-origin: 0 0;
+			}
+
+			.slides {
+				position: relative;
+				margin-bottom: 10px;
+				border: 1px solid black;
+				border-radius: 2px;
+				background: rgb(28, 30, 32);
+			}
+
+			.slides span {
+				position: absolute;
+				top: 3px;
+				left: 3px;
+				font-weight: bold;
+				font-size: 14px;
+				color: rgba( 255, 255, 255, 0.9 );
+			}
+		</style>
+	</head>
+
+	<body>
+
+		<div id="wrap-current-slide" class="slides">
+			<iframe src="/?receiver" width="1280" height="1024" id="current-slide"></iframe>
+		</div>
+
+		<div id="wrap-next-slide" class="slides">
+			<iframe src="/?receiver" width="640" height="512" id="next-slide"></iframe>
+			<span>UPCOMING:</span>
+		</div>
+		<div id="notes"></div>
+
+		<script src="/socket.io/socket.io.js"></script>
+
+		<script>
+		var socketId = '{{socketId}}';
+		var socket = io.connect(window.location.origin);
+		var notes = document.getElementById('notes');
+		var currentSlide = document.getElementById('current-slide');
+		var nextSlide = document.getElementById('next-slide');
+
+		socket.on('slidedata', function(data) {
+			// ignore data from sockets that aren't ours
+			if (data.socketId !== socketId) { return; }
+
+			notes.innerHTML = data.notes;
+			currentSlide.contentWindow.Reveal.navigateTo(data.indexh, data.indexv);
+			nextSlide.contentWindow.Reveal.navigateTo(data.nextindexh, data.nextindexv);
+		});
+		</script>
+
+	</body>
+</html>