reveal-ck 0.1.2 → 0.1.3

data/reveal.js/js/reveal.js

@@ -3,7 +3,7 @@
  * http://lab.hakim.se/reveal-js
  * MIT licensed
  *
- * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2013 Hakim El Hattab, http://hakim.se
  */
 var Reveal = (function(){
 
@@ -16,6 +16,19 @@ var Reveal = (function(){
 
 		// Configurations defaults, can be overridden at initialization time
 		config = {
+
+			// The "normal" size of the presentation, aspect ratio will be preserved
+			// when the presentation is scaled to fit different resolutions
+			width: 960,
+			height: 700,
+
+			// Factor of the display size that should remain empty around the content
+			margin: 0.1,
+
+			// Bounds for smallest/largest possible scale to apply to content
+			minScale: 0.2,
+			maxScale: 1.0,
+
 			// Display controls in the bottom right corner
 			controls: true,
 
@@ -31,7 +44,7 @@ var Reveal = (function(){
 			// Enable the slide overview mode
 			overview: true,
 
-			// Vertical centering of slides
+			// Vertical centring of slides
 			center: true,
 
 			// Enables touch navigation on devices with touch input
@@ -43,6 +56,9 @@ var Reveal = (function(){
 			// Change the presentation direction to be RTL
 			rtl: false,
 
+			// Turns fragments on and off globally
+			fragments: true,
+
 			// Number of milliseconds between automatically proceeding to the
 			// next slide, disabled when set to 0, this value can be overwritten
 			// by using a data-autoslide attribute on your slides
@@ -54,21 +70,29 @@ var Reveal = (function(){
 			// Apply a 3D roll to links on hover
 			rollingLinks: true,
 
+			// Opens links in an iframe preview overlay
+			previewLinks: false,
+
 			// Theme (see /css/theme)
 			theme: null,
 
 			// Transition style
 			transition: 'default', // default/cube/page/concave/zoom/linear/fade/none
 
+			// Transition speed
+			transitionSpeed: 'default', // default/fast/slow
+
+			// Transition style for full page slide backgrounds
+			backgroundTransition: 'default', // default/linear
+
 			// Script dependencies to load
 			dependencies: []
 		},
 
-		// Stores if the next slide should be shown automatically
-		// after n milliseconds
-		autoSlide = config.autoSlide,
+		// The current auto-slide duration
+		autoSlide = 0,
 
-		// The horizontal and verical index of the currently active slide
+		// The horizontal and vertical index of the currently active slide
 		indexh = 0,
 		indexv = 0,
 
@@ -81,6 +105,9 @@ var Reveal = (function(){
 		// all current slides.
 		state = [],
 
+		// The current scale of the presentation (see width/height config)
+		scale = 1,
+
 		// Cached references to DOM elements
 		dom = {},
 
@@ -99,7 +126,7 @@ var Reveal = (function(){
 								'transform' in document.body.style,
 
 		// Throttles mouse wheel navigation
-		mouseWheelTimeout = 0,
+		lastMouseWheelStep = 0,
 
 		// An interval used to automatically move on to the next slide
 		autoSlideTimeout = 0,
@@ -113,6 +140,9 @@ var Reveal = (function(){
 		// A delay used to deactivate the overview mode
 		deactivateOverviewTimeout = 0,
 
+		// Flags if the interaction event listeners are bound
+		eventsAreBound = false,
+
 		// Holds information about the currently ongoing touch input
 		touch = {
 			startX: 0,
@@ -128,7 +158,7 @@ var Reveal = (function(){
 	 */
 	function initialize( options ) {
 
-		if( ( !supports2DTransforms && !supports3DTransforms ) ) {
+		if( !supports2DTransforms && !supports3DTransforms ) {
 			document.body.setAttribute( 'class', 'no-transforms' );
 
 			// If the browser doesn't support core features we won't be
@@ -162,8 +192,15 @@ var Reveal = (function(){
 		dom.wrapper = document.querySelector( '.reveal' );
 		dom.slides = document.querySelector( '.reveal .slides' );
 
+		// Background element
+		if( !document.querySelector( '.reveal .backgrounds' ) ) {
+			dom.background = document.createElement( 'div' );
+			dom.background.classList.add( 'backgrounds' );
+			dom.wrapper.appendChild( dom.background );
+		}
+
 		// Progress bar
-		if( !dom.wrapper.querySelector( '.progress' ) && config.progress ) {
+		if( !dom.wrapper.querySelector( '.progress' ) ) {
 			var progressElement = document.createElement( 'div' );
 			progressElement.classList.add( 'progress' );
 			progressElement.innerHTML = '<span></span>';
@@ -171,7 +208,7 @@ var Reveal = (function(){
 		}
 
 		// Arrow controls
-		if( !dom.wrapper.querySelector( '.controls' ) && config.controls ) {
+		if( !dom.wrapper.querySelector( '.controls' ) ) {
 			var controlsElement = document.createElement( 'aside' );
 			controlsElement.classList.add( 'controls' );
 			controlsElement.innerHTML = '<div class="navigate-left"></div>' +
@@ -181,11 +218,11 @@ var Reveal = (function(){
 			dom.wrapper.appendChild( controlsElement );
 		}
 
-		// Presentation background element
+		// State background element [DEPRECATED]
 		if( !dom.wrapper.querySelector( '.state-background' ) ) {
-			var backgroundElement = document.createElement( 'div' );
-			backgroundElement.classList.add( 'state-background' );
-			dom.wrapper.appendChild( backgroundElement );
+			var stateBackgroundElement = document.createElement( 'div' );
+			stateBackgroundElement.classList.add( 'state-background' );
+			dom.wrapper.appendChild( stateBackgroundElement );
 		}
 
 		// Overlay graphic which is displayed during the paused mode
@@ -213,16 +250,96 @@ var Reveal = (function(){
 
 	}
 
+	/**
+	 * Creates the slide background elements and appends them
+	 * to the background container. One element is created per
+	 * slide no matter if the given slide has visible background.
+	 */
+	function createBackgrounds() {
+
+		if( isPrintingPDF() ) {
+			document.body.classList.add( 'print-pdf' );
+		}
+
+		// Clear prior backgrounds
+		dom.background.innerHTML = '';
+		dom.background.classList.add( 'no-transition' );
+
+		// Helper method for creating a background element for the
+		// given slide
+		function _createBackground( slide, container ) {
+
+			var data = {
+				background: slide.getAttribute( 'data-background' ),
+				backgroundSize: slide.getAttribute( 'data-background-size' ),
+				backgroundImage: slide.getAttribute( 'data-background-image' ),
+				backgroundColor: slide.getAttribute( 'data-background-color' ),
+				backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
+				backgroundPosition: slide.getAttribute( 'data-background-position' ),
+				backgroundTransition: slide.getAttribute( 'data-background-transition' )
+			};
+
+			var element = document.createElement( 'div' );
+			element.className = 'slide-background';
+
+			if( data.background ) {
+				// Auto-wrap image urls in url(...)
+				if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(png|jpg|jpeg|gif|bmp)$/gi.test( data.background ) ) {
+					element.style.backgroundImage = 'url('+ data.background +')';
+				}
+				else {
+					element.style.background = data.background;
+				}
+			}
+
+			// Additional and optional background properties
+			if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
+			if( data.backgroundImage ) element.style.backgroundImage = 'url("' + data.backgroundImage + '")';
+			if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
+			if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
+			if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
+			if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
+
+			container.appendChild( element );
+
+			return element;
+
+		}
+
+		// Iterate over all horizontal slides
+		toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) {
+
+			var backgroundStack;
+
+			if( isPrintingPDF() ) {
+				backgroundStack = _createBackground( slideh, slideh );
+			}
+			else {
+				backgroundStack = _createBackground( slideh, dom.background );
+			}
+
+			// Iterate over all vertical slides
+			toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) {
+
+				if( isPrintingPDF() ) {
+					_createBackground( slidev, slidev );
+				}
+				else {
+					_createBackground( slidev, backgroundStack );
+				}
+
+			} );
+
+		} );
+
+	}
+
 	/**
 	 * Hides the address bar if we're on a mobile device.
 	 */
 	function hideAddressBar() {
 
-		if( navigator.userAgent.match( /(iphone|ipod)/i ) ) {
-			// Give the page some scrollable overflow
-			document.documentElement.style.overflow = 'scroll';
-			document.body.style.height = '120%';
-
+		if( /iphone|ipod|android/gi.test( navigator.userAgent ) && !/crios/gi.test( navigator.userAgent ) ) {
 			// Events that should trigger the address bar to hide
 			window.addEventListener( 'load', removeAddressBar, false );
 			window.addEventListener( 'orientationchange', removeAddressBar, false );
@@ -261,7 +378,7 @@ var Reveal = (function(){
 			}
 		}
 
-		// Called once synchronous scritps finish loading
+		// Called once synchronous scripts finish loading
 		function proceed() {
 			if( scriptsAsync.length ) {
 				// Load asynchronous scripts
@@ -292,22 +409,12 @@ var Reveal = (function(){
 		// Make sure we've got all the DOM elements we need
 		setupDOM();
 
-		// Subscribe to input
-		addEventListeners();
-
 		// Updates the presentation to match the current configuration values
 		configure();
 
-		// Force an initial layout, will thereafter be invoked as the window
-		// is resized
-		layout();
-
 		// Read the initial hash
 		readURL();
 
-		// Start auto-sliding if it's enabled
-		cueAutoSlide();
-
 		// Notify listeners that the presentation is ready but use a 1ms
 		// timeout to ensure it's not fired synchronously after #initialize()
 		setTimeout( function() {
@@ -321,42 +428,71 @@ var Reveal = (function(){
 	}
 
 	/**
-	 * Applies the configuration settings from the config object.
+	 * Applies the configuration settings from the config
+	 * object. May be called multiple times.
 	 */
-	function configure() {
+	function configure( options ) {
 
-		if( supports3DTransforms === false ) {
-			config.transition = 'linear';
-		}
+		dom.wrapper.classList.remove( config.transition );
 
-		if( config.controls && dom.controls ) {
-			dom.controls.style.display = 'block';
-		}
+		// New config options may be passed when this method
+		// is invoked through the API after initialization
+		if( typeof options === 'object' ) extend( config, options );
 
-		if( config.progress && dom.progress ) {
-			dom.progress.style.display = 'block';
+		// Force linear transition based on browser capabilities
+		if( supports3DTransforms === false ) config.transition = 'linear';
+
+		dom.wrapper.classList.add( config.transition );
+
+		dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
+		dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition );
+
+		if( dom.controls ) {
+			dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none';
 		}
 
-		if( config.transition !== 'default' ) {
-			dom.wrapper.classList.add( config.transition );
+		if( dom.progress ) {
+			dom.progress.style.display = ( config.progress && dom.progress ) ? 'block' : 'none';
 		}
 
 		if( config.rtl ) {
 			dom.wrapper.classList.add( 'rtl' );
 		}
+		else {
+			dom.wrapper.classList.remove( 'rtl' );
+		}
 
 		if( config.center ) {
 			dom.wrapper.classList.add( 'center' );
 		}
+		else {
+			dom.wrapper.classList.remove( 'center' );
+		}
 
 		if( config.mouseWheel ) {
 			document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
 			document.addEventListener( 'mousewheel', onDocumentMouseScroll, false );
 		}
+		else {
+			document.removeEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
+			document.removeEventListener( 'mousewheel', onDocumentMouseScroll, false );
+		}
 
-		// 3D links
+		// Rolling 3D links
 		if( config.rollingLinks ) {
-			linkify();
+			enableRollingLinks();
+		}
+		else {
+			disableRollingLinks();
+		}
+
+		// Iframe link previews
+		if( config.previewLinks ) {
+			enablePreviewLinks();
+		}
+		else {
+			disablePreviewLinks();
+			enablePreviewLinks( '[data-preview-link]' );
 		}
 
 		// Load the theme in the config, if it's not already loaded
@@ -371,6 +507,8 @@ var Reveal = (function(){
 			}
 		}
 
+		sync();
+
 	}
 
 	/**
@@ -378,13 +516,22 @@ var Reveal = (function(){
 	 */
 	function addEventListeners() {
 
+		eventsAreBound = true;
+
 		window.addEventListener( 'hashchange', onWindowHashChange, false );
 		window.addEventListener( 'resize', onWindowResize, false );
 
 		if( config.touch ) {
-			document.addEventListener( 'touchstart', onDocumentTouchStart, false );
-			document.addEventListener( 'touchmove', onDocumentTouchMove, false );
-			document.addEventListener( 'touchend', onDocumentTouchEnd, false );
+			dom.wrapper.addEventListener( 'touchstart', onTouchStart, false );
+			dom.wrapper.addEventListener( 'touchmove', onTouchMove, false );
+			dom.wrapper.addEventListener( 'touchend', onTouchEnd, false );
+
+			// Support pointer-style touch interaction as well
+			if( window.navigator.msPointerEnabled ) {
+				dom.wrapper.addEventListener( 'MSPointerDown', onPointerDown, false );
+				dom.wrapper.addEventListener( 'MSPointerMove', onPointerMove, false );
+				dom.wrapper.addEventListener( 'MSPointerUp', onPointerUp, false );
+			}
 		}
 
 		if( config.keyboard ) {
@@ -392,17 +539,18 @@ var Reveal = (function(){
 		}
 
 		if ( config.progress && dom.progress ) {
-			dom.progress.addEventListener( 'click', preventAndForward( onProgressClick ), false );
+			dom.progress.addEventListener( 'click', onProgressClicked, false );
 		}
 
 		if ( config.controls && dom.controls ) {
-			var actionEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
-			dom.controlsLeft.forEach( function( el ) { el.addEventListener( actionEvent, preventAndForward( navigateLeft ), false ); } );
-			dom.controlsRight.forEach( function( el ) { el.addEventListener( actionEvent, preventAndForward( navigateRight ), false ); } );
-			dom.controlsUp.forEach( function( el ) { el.addEventListener( actionEvent, preventAndForward( navigateUp ), false ); } );
-			dom.controlsDown.forEach( function( el ) { el.addEventListener( actionEvent, preventAndForward( navigateDown ), false ); } );
-			dom.controlsPrev.forEach( function( el ) { el.addEventListener( actionEvent, preventAndForward( navigatePrev ), false ); } );
-			dom.controlsNext.forEach( function( el ) { el.addEventListener( actionEvent, preventAndForward( navigateNext ), false ); } );
+			[ 'touchstart', 'click' ].forEach( function( eventName ) {
+				dom.controlsLeft.forEach( function( el ) { el.addEventListener( eventName, onNavigateLeftClicked, false ); } );
+				dom.controlsRight.forEach( function( el ) { el.addEventListener( eventName, onNavigateRightClicked, false ); } );
+				dom.controlsUp.forEach( function( el ) { el.addEventListener( eventName, onNavigateUpClicked, false ); } );
+				dom.controlsDown.forEach( function( el ) { el.addEventListener( eventName, onNavigateDownClicked, false ); } );
+				dom.controlsPrev.forEach( function( el ) { el.addEventListener( eventName, onNavigatePrevClicked, false ); } );
+				dom.controlsNext.forEach( function( el ) { el.addEventListener( eventName, onNavigateNextClicked, false ); } );
+			} );
 		}
 
 	}
@@ -412,28 +560,35 @@ var Reveal = (function(){
 	 */
 	function removeEventListeners() {
 
+		eventsAreBound = false;
+
 		document.removeEventListener( 'keydown', onDocumentKeyDown, false );
 		window.removeEventListener( 'hashchange', onWindowHashChange, false );
 		window.removeEventListener( 'resize', onWindowResize, false );
 
-		if( config.touch ) {
-			document.removeEventListener( 'touchstart', onDocumentTouchStart, false );
-			document.removeEventListener( 'touchmove', onDocumentTouchMove, false );
-			document.removeEventListener( 'touchend', onDocumentTouchEnd, false );
+		dom.wrapper.removeEventListener( 'touchstart', onTouchStart, false );
+		dom.wrapper.removeEventListener( 'touchmove', onTouchMove, false );
+		dom.wrapper.removeEventListener( 'touchend', onTouchEnd, false );
+
+		if( window.navigator.msPointerEnabled ) {
+			dom.wrapper.removeEventListener( 'MSPointerDown', onPointerDown, false );
+			dom.wrapper.removeEventListener( 'MSPointerMove', onPointerMove, false );
+			dom.wrapper.removeEventListener( 'MSPointerUp', onPointerUp, false );
 		}
 
 		if ( config.progress && dom.progress ) {
-			dom.progress.removeEventListener( 'click', preventAndForward( onProgressClick ), false );
+			dom.progress.removeEventListener( 'click', onProgressClicked, false );
 		}
 
 		if ( config.controls && dom.controls ) {
-			var actionEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
-			dom.controlsLeft.forEach( function( el ) { el.removeEventListener( actionEvent, preventAndForward( navigateLeft ), false ); } );
-			dom.controlsRight.forEach( function( el ) { el.removeEventListener( actionEvent, preventAndForward( navigateRight ), false ); } );
-			dom.controlsUp.forEach( function( el ) { el.removeEventListener( actionEvent, preventAndForward( navigateUp ), false ); } );
-			dom.controlsDown.forEach( function( el ) { el.removeEventListener( actionEvent, preventAndForward( navigateDown ), false ); } );
-			dom.controlsPrev.forEach( function( el ) { el.removeEventListener( actionEvent, preventAndForward( navigatePrev ), false ); } );
-			dom.controlsNext.forEach( function( el ) { el.removeEventListener( actionEvent, preventAndForward( navigateNext ), false ); } );
+			[ 'touchstart', 'click' ].forEach( function( eventName ) {
+				dom.controlsLeft.forEach( function( el ) { el.removeEventListener( eventName, onNavigateLeftClicked, false ); } );
+				dom.controlsRight.forEach( function( el ) { el.removeEventListener( eventName, onNavigateRightClicked, false ); } );
+				dom.controlsUp.forEach( function( el ) { el.removeEventListener( eventName, onNavigateUpClicked, false ); } );
+				dom.controlsDown.forEach( function( el ) { el.removeEventListener( eventName, onNavigateDownClicked, false ); } );
+				dom.controlsPrev.forEach( function( el ) { el.removeEventListener( eventName, onNavigatePrevClicked, false ); } );
+				dom.controlsNext.forEach( function( el ) { el.removeEventListener( eventName, onNavigateNextClicked, false ); } );
+			} );
 		}
 
 	}
@@ -476,18 +631,46 @@ var Reveal = (function(){
 	}
 
 	/**
-	 * Prevents an events defaults behavior calls the
-	 * specified delegate.
-	 *
-	 * @param {Function} delegate The method to call
-	 * after the wrapper has been executed
+	 * Retrieves the height of the given element by looking
+	 * at the position and height of its immediate children.
 	 */
-	function preventAndForward( delegate ) {
+	function getAbsoluteHeight( element ) {
 
-		return function( event ) {
-			event.preventDefault();
-			delegate.call( null, event );
-		};
+		var height = 0;
+
+		if( element ) {
+			var absoluteChildren = 0;
+
+			toArray( element.childNodes ).forEach( function( child ) {
+
+				if( typeof child.offsetTop === 'number' && child.style ) {
+					// Count # of abs children
+					if( child.style.position === 'absolute' ) {
+						absoluteChildren += 1;
+					}
+
+					height = Math.max( height, child.offsetTop + child.offsetHeight );
+				}
+
+			} );
+
+			// If there are no absolute children, use offsetHeight
+			if( absoluteChildren === 0 ) {
+				height = element.offsetHeight;
+			}
+
+		}
+
+		return height;
+
+	}
+
+	/**
+	 * Checks if this instance is being used to print a PDF.
+	 */
+	function isPrintingPDF() {
+
+		return ( /print-pdf/gi ).test( window.location.search );
 
 	}
 
@@ -497,9 +680,18 @@ var Reveal = (function(){
 	 */
 	function removeAddressBar() {
 
+		if( window.orientation === 0 ) {
+			document.documentElement.style.overflow = 'scroll';
+			document.body.style.height = '120%';
+		}
+		else {
+			document.documentElement.style.overflow = '';
+			document.body.style.height = '100%';
+		}
+
 		setTimeout( function() {
 			window.scrollTo( 0, 1 );
-		}, 0 );
+		}, 10 );
 
 	}
 
@@ -519,42 +711,222 @@ var Reveal = (function(){
 	/**
 	 * Wrap all links in 3D goodness.
 	 */
-	function linkify() {
+	function enableRollingLinks() {
 
 		if( supports3DTransforms && !( 'msPerspective' in document.body.style ) ) {
-			var nodes = document.querySelectorAll( SLIDES_SELECTOR + ' a:not(.image)' );
+			var anchors = document.querySelectorAll( SLIDES_SELECTOR + ' a:not(.image)' );
 
-			for( var i = 0, len = nodes.length; i < len; i++ ) {
-				var node = nodes[i];
+			for( var i = 0, len = anchors.length; i < len; i++ ) {
+				var anchor = anchors[i];
 
-				if( node.textContent && !node.querySelector( '*' ) && ( !node.className || !node.classList.contains( node, 'roll' ) ) ) {
+				if( anchor.textContent && !anchor.querySelector( '*' ) && ( !anchor.className || !anchor.classList.contains( anchor, 'roll' ) ) ) {
 					var span = document.createElement('span');
-					span.setAttribute('data-title', node.text);
-					span.innerHTML = node.innerHTML;
+					span.setAttribute('data-title', anchor.text);
+					span.innerHTML = anchor.innerHTML;
 
-					node.classList.add( 'roll' );
-					node.innerHTML = '';
-					node.appendChild(span);
+					anchor.classList.add( 'roll' );
+					anchor.innerHTML = '';
+					anchor.appendChild(span);
 				}
 			}
 		}
 
 	}
 
+	/**
+	 * Unwrap all 3D links.
+	 */
+	function disableRollingLinks() {
+
+		var anchors = document.querySelectorAll( SLIDES_SELECTOR + ' a.roll' );
+
+		for( var i = 0, len = anchors.length; i < len; i++ ) {
+			var anchor = anchors[i];
+			var span = anchor.querySelector( 'span' );
+
+			if( span ) {
+				anchor.classList.remove( 'roll' );
+				anchor.innerHTML = span.innerHTML;
+			}
+		}
+
+	}
+
+	/**
+	 * Bind preview frame links.
+	 */
+	function enablePreviewLinks( selector ) {
+
+		var anchors = toArray( document.querySelectorAll( selector ? selector : 'a' ) );
+
+		anchors.forEach( function( element ) {
+			if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {
+				element.addEventListener( 'click', onPreviewLinkClicked, false );
+			}
+		} );
+
+	}
+
+	/**
+	 * Unbind preview frame links.
+	 */
+	function disablePreviewLinks() {
+
+		var anchors = toArray( document.querySelectorAll( 'a' ) );
+
+		anchors.forEach( function( element ) {
+			if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {
+				element.removeEventListener( 'click', onPreviewLinkClicked, false );
+			}
+		} );
+
+	}
+
+	/**
+	 * Opens a preview window for the target URL.
+	 */
+	function openPreview( url ) {
+
+		closePreview();
+
+		dom.preview = document.createElement( 'div' );
+		dom.preview.classList.add( 'preview-link-overlay' );
+		dom.wrapper.appendChild( dom.preview );
+
+		dom.preview.innerHTML = [
+			'<header>',
+				'<a class="close" href="#"><span class="icon"></span></a>',
+				'<a class="external" href="'+ url +'" target="_blank"><span class="icon"></span></a>',
+			'</header>',
+			'<div class="spinner"></div>',
+			'<div class="viewport">',
+				'<iframe src="'+ url +'"></iframe>',
+			'</div>'
+		].join('');
+
+		dom.preview.querySelector( 'iframe' ).addEventListener( 'load', function( event ) {
+			dom.preview.classList.add( 'loaded' );
+		}, false );
+
+		dom.preview.querySelector( '.close' ).addEventListener( 'click', function( event ) {
+			closePreview();
+			event.preventDefault();
+		}, false );
+
+		dom.preview.querySelector( '.external' ).addEventListener( 'click', function( event ) {
+			closePreview();
+		}, false );
+
+		setTimeout( function() {
+			dom.preview.classList.add( 'visible' );
+		}, 1 );
+
+	}
+
+	/**
+	 * Closes the iframe preview window.
+	 */
+	function closePreview() {
+
+		if( dom.preview ) {
+			dom.preview.setAttribute( 'src', '' );
+			dom.preview.parentNode.removeChild( dom.preview );
+			dom.preview = null;
+		}
+
+	}
+
+	/**
+	 * Return a sorted fragments list, ordered by an increasing
+	 * "data-fragment-index" attribute.
+	 *
+	 * Fragments will be revealed in the order that they are returned by
+	 * this function, so you can use the index attributes to control the
+	 * order of fragment appearance.
+	 *
+	 * To maintain a sensible default fragment order, fragments are presumed
+	 * to be passed in document order. This function adds a "fragment-index"
+	 * attribute to each node if such an attribute is not already present,
+	 * and sets that attribute to an integer value which is the position of
+	 * the fragment within the fragments list.
+	 */
+	function sortFragments( fragments ) {
+
+		var a = toArray( fragments );
+
+		a.forEach( function( el, idx ) {
+			if( !el.hasAttribute( 'data-fragment-index' ) ) {
+				el.setAttribute( 'data-fragment-index', idx );
+			}
+		} );
+
+		a.sort( function( l, r ) {
+			return l.getAttribute( 'data-fragment-index' ) - r.getAttribute( 'data-fragment-index');
+		} );
+
+		return a;
+
+	}
+
 	/**
 	 * Applies JavaScript-controlled layout rules to the
 	 * presentation.
 	 */
 	function layout() {
 
-		if( config.center ) {
+		if( dom.wrapper && !isPrintingPDF() ) {
+
+			// Available space to scale within
+			var availableWidth = dom.wrapper.offsetWidth,
+				availableHeight = dom.wrapper.offsetHeight;
+
+			// Reduce available space by margin
+			availableWidth -= ( availableHeight * config.margin );
+			availableHeight -= ( availableHeight * config.margin );
+
+			// Dimensions of the content
+			var slideWidth = config.width,
+				slideHeight = config.height;
+
+			// Slide width may be a percentage of available width
+			if( typeof slideWidth === 'string' && /%$/.test( slideWidth ) ) {
+				slideWidth = parseInt( slideWidth, 10 ) / 100 * availableWidth;
+			}
+
+			// Slide height may be a percentage of available height
+			if( typeof slideHeight === 'string' && /%$/.test( slideHeight ) ) {
+				slideHeight = parseInt( slideHeight, 10 ) / 100 * availableHeight;
+			}
+
+			dom.slides.style.width = slideWidth + 'px';
+			dom.slides.style.height = slideHeight + 'px';
+
+			// Determine scale of content to fit within available space
+			scale = Math.min( availableWidth / slideWidth, availableHeight / slideHeight );
+
+			// Respect max/min scale settings
+			scale = Math.max( scale, config.minScale );
+			scale = Math.min( scale, config.maxScale );
+
+			// Prefer applying scale via zoom since Chrome blurs scaled content
+			// with nested transforms
+			if( typeof dom.slides.style.zoom !== 'undefined' && !navigator.userAgent.match( /(iphone|ipod|ipad|android)/gi ) ) {
+				dom.slides.style.zoom = scale;
+			}
+			// Apply scale transform as a fallback
+			else {
+				var transform = 'translate(-50%, -50%) scale('+ scale +') translate(50%, 50%)';
+
+				dom.slides.style.WebkitTransform = transform;
+				dom.slides.style.MozTransform = transform;
+				dom.slides.style.msTransform = transform;
+				dom.slides.style.OTransform = transform;
+				dom.slides.style.transform = transform;
+			}
 
 			// Select all slides, vertical and horizontal
 			var slides = toArray( document.querySelectorAll( SLIDES_SELECTOR ) );
 
-			// Determine the minimum top offset for slides
-			var minTop = -dom.wrapper.offsetHeight / 2;
-
 			for( var i = 0, len = slides.length; i < len; i++ ) {
 				var slide = slides[ i ];
 
@@ -563,16 +935,24 @@ var Reveal = (function(){
 					continue;
 				}
 
-				// Vertical stacks are not centered since their section 
-				// children will be
-				if( slide.classList.contains( 'stack' ) ) {
-					slide.style.top = 0;
+				if( config.center ) {
+					// Vertical stacks are not centred since their section
+					// children will be
+					if( slide.classList.contains( 'stack' ) ) {
+						slide.style.top = 0;
+					}
+					else {
+						slide.style.top = Math.max( - ( getAbsoluteHeight( slide ) / 2 ) - 20, -slideHeight / 2 ) + 'px';
+					}
 				}
 				else {
-					slide.style.top = Math.max( - ( slide.offsetHeight / 2 ) - 20, minTop ) + 'px';
+					slide.style.top = '';
 				}
+
 			}
 
+			updateProgress();
+
 		}
 
 	}
@@ -587,14 +967,14 @@ var Reveal = (function(){
 	 */
 	function setPreviousVerticalIndex( stack, v ) {
 
-		if( stack ) {
+		if( typeof stack === 'object' && typeof stack.setAttribute === 'function' ) {
 			stack.setAttribute( 'data-previous-indexv', v || 0 );
 		}
 
 	}
 
 	/**
-	 * Retrieves the vertical index which was stored using 
+	 * Retrieves the vertical index which was stored using
 	 * #setPreviousVerticalIndex() or 0 if no previous index
 	 * exists.
 	 *
@@ -602,8 +982,11 @@ var Reveal = (function(){
 	 */
 	function getPreviousVerticalIndex( stack ) {
 
-		if( stack && stack.classList.contains( 'stack' ) ) {
-			return parseInt( stack.getAttribute( 'data-previous-indexv' ) || 0, 10 );
+		if( typeof stack === 'object' && typeof stack.setAttribute === 'function' && stack.classList.contains( 'stack' ) ) {
+			// Prefer manually defined start-indexv
+			var attributeName = stack.hasAttribute( 'data-start-indexv' ) ? 'data-start-indexv' : 'data-previous-indexv';
+
+			return parseInt( stack.getAttribute( attributeName ) || 0, 10 );
 		}
 
 		return 0;
@@ -622,6 +1005,9 @@ var Reveal = (function(){
 		// Only proceed if enabled in config
 		if( config.overview ) {
 
+			// Don't auto-slide while in overview mode
+			cancelAutoSlide();
+
 			var wasActive = dom.wrapper.classList.contains( 'overview' );
 
 			dom.wrapper.classList.add( 'overview' );
@@ -639,7 +1025,8 @@ var Reveal = (function(){
 
 				for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) {
 					var hslide = horizontalSlides[i],
-						htransform = 'translateZ(-2500px) translate(' + ( ( i - indexh ) * 105 ) + '%, 0%)';
+						hoffset = config.rtl ? -105 : 105,
+						htransform = 'translateZ(-2500px) translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)';
 
 					hslide.setAttribute( 'data-index-h', i );
 					hslide.style.display = 'block';
@@ -741,6 +1128,8 @@ var Reveal = (function(){
 
 			slide( indexh, indexv );
 
+			cueAutoSlide();
+
 			// Notify observers of the overview hiding
 			dispatchEvent( 'overviewhidden', {
 				'indexh': indexh,
@@ -764,7 +1153,7 @@ var Reveal = (function(){
 			override ? activateOverview() : deactivateOverview();
 		}
 		else {
-			isOverviewActive() ? deactivateOverview() : activateOverview();
+			isOverview() ? deactivateOverview() : activateOverview();
 		}
 
 	}
@@ -775,12 +1164,28 @@ var Reveal = (function(){
 	 * @return {Boolean} true if the overview is active,
 	 * false otherwise
 	 */
-	function isOverviewActive() {
+	function isOverview() {
 
 		return dom.wrapper.classList.contains( 'overview' );
 
 	}
 
+	/**
+	 * Checks if the current or specified slide is vertical
+	 * (nested within another slide).
+	 *
+	 * @param {HTMLElement} slide [optional] The slide to check
+	 * orientation of
+	 */
+	function isVerticalSlide( slide ) {
+
+		// Prefer slide argument, otherwise use current slide
+		slide = slide ? slide : currentSlide;
+
+		return slide && !!slide.parentNode.nodeName.match( /section/i );
+
+	}
+
 	/**
 	 * Handling the fullscreen functionality via the fullscreen API
 	 *
@@ -793,6 +1198,7 @@ var Reveal = (function(){
 
 		// Check which implementation is available
 		var requestMethod = element.requestFullScreen ||
+							element.webkitRequestFullscreen ||
 							element.webkitRequestFullScreen ||
 							element.mozRequestFullScreen ||
 							element.msRequestFullScreen;
@@ -809,8 +1215,15 @@ var Reveal = (function(){
 	 */
 	function pause() {
 
+		var wasPaused = dom.wrapper.classList.contains( 'paused' );
+
+		cancelAutoSlide();
 		dom.wrapper.classList.add( 'paused' );
 
+		if( wasPaused === false ) {
+			dispatchEvent( 'paused' );
+		}
+
 	}
 
 	/**
@@ -818,8 +1231,15 @@ var Reveal = (function(){
 	 */
 	function resume() {
 
+		var wasPaused = dom.wrapper.classList.contains( 'paused' );
 		dom.wrapper.classList.remove( 'paused' );
 
+		cueAutoSlide();
+
+		if( wasPaused ) {
+			dispatchEvent( 'resumed' );
+		}
+
 	}
 
 	/**
@@ -854,8 +1274,9 @@ var Reveal = (function(){
 	 * @param {int} v Vertical index of the target slide
 	 * @param {int} f Optional index of a fragment within the
 	 * target slide to activate
+	 * @param {int} o Optional origin for use in multimaster environments
 	 */
-	function slide( h, v, f ) {
+	function slide( h, v, f, o ) {
 
 		// Remember where we were at before
 		previousSlide = currentSlide;
@@ -913,7 +1334,7 @@ var Reveal = (function(){
 		}
 
 		// If the overview is active, re-activate it to update positions
-		if( isOverviewActive() ) {
+		if( isOverview() ) {
 			activateOverview();
 		}
 
@@ -932,7 +1353,7 @@ var Reveal = (function(){
 
 		// Show fragment, if specified
 		if( typeof f !== 'undefined' ) {
-			var fragments = currentSlide.querySelectorAll( '.fragment' );
+			var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment' ) );
 
 			toArray( fragments ).forEach( function( fragment, indexf ) {
 				if( indexf < f ) {
@@ -945,12 +1366,14 @@ var Reveal = (function(){
 		}
 
 		// Dispatch an event if the slide changed
-		if( indexh !== indexhBefore || indexv !== indexvBefore ) {
+		var slideChanged = ( indexh !== indexhBefore || indexv !== indexvBefore );
+		if( slideChanged ) {
 			dispatchEvent( 'slidechanged', {
 				'indexh': indexh,
 				'indexv': indexv,
 				'previousSlide': previousSlide,
-				'currentSlide': currentSlide
+				'currentSlide': currentSlide,
+				'origin': o
 			} );
 		}
 		else {
@@ -980,8 +1403,44 @@ var Reveal = (function(){
 			}
 		}
 
+		// Handle embedded content
+		if( slideChanged ) {
+			stopEmbeddedContent( previousSlide );
+			startEmbeddedContent( currentSlide );
+		}
+
+		updateControls();
+		updateProgress();
+		updateBackground();
+
+	}
+
+	/**
+	 * Syncs the presentation with the current DOM. Useful
+	 * when new slides or control elements are added or when
+	 * the configuration has changed.
+	 */
+	function sync() {
+
+		// Subscribe to input
+		removeEventListeners();
+		addEventListeners();
+
+		// Force a layout to make sure the current config is accounted for
+		layout();
+
+		// Reflect the current autoSlide value
+		autoSlide = config.autoSlide;
+
+		// Start auto-sliding if it's enabled
+		cueAutoSlide();
+
+		// Re-create the slide backgrounds
+		createBackgrounds();
+
 		updateControls();
 		updateProgress();
+		updateBackground();
 
 	}
 
@@ -1024,7 +1483,7 @@ var Reveal = (function(){
 
 				// Optimization; hide all slides that are three or more steps
 				// away from the present slide
-				if( isOverviewActive() === false ) {
+				if( isOverview() === false ) {
 					// The distance loops so that it measures 1 between the first
 					// and last slides
 					var distance = Math.abs( ( index - i ) % ( slidesLength - 3 ) ) || 0;
@@ -1032,27 +1491,33 @@ var Reveal = (function(){
 					element.style.display = distance > 3 ? 'none' : 'block';
 				}
 
-				slides[i].classList.remove( 'past' );
-				slides[i].classList.remove( 'present' );
-				slides[i].classList.remove( 'future' );
+				var reverse = config.rtl && !isVerticalSlide( element );
+
+				element.classList.remove( 'past' );
+				element.classList.remove( 'present' );
+				element.classList.remove( 'future' );
+
+				// http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute
+				element.setAttribute( 'hidden', '' );
 
 				if( i < index ) {
 					// Any element previous to index is given the 'past' class
-					slides[i].classList.add( 'past' );
+					element.classList.add( reverse ? 'future' : 'past' );
 				}
 				else if( i > index ) {
 					// Any element subsequent to index is given the 'future' class
-					slides[i].classList.add( 'future' );
+					element.classList.add( reverse ? 'past' : 'future' );
 				}
 
 				// If this element contains vertical slides
 				if( element.querySelector( 'section' ) ) {
-					slides[i].classList.add( 'stack' );
+					element.classList.add( 'stack' );
 				}
 			}
 
 			// Mark the current slide as present
 			slides[index].classList.add( 'present' );
+			slides[index].removeAttribute( 'hidden' );
 
 			// If this slide has a state associated with it, add it
 			// onto the current state of the deck
@@ -1066,7 +1531,7 @@ var Reveal = (function(){
 			var slideAutoSlide = slides[index].getAttribute( 'data-autoslide' );
 			if( slideAutoSlide ) {
 				autoSlide = parseInt( slideAutoSlide, 10 );
-			} 
+			}
 			else {
 				autoSlide = config.autoSlide;
 			}
@@ -1139,6 +1604,7 @@ var Reveal = (function(){
 		if ( config.controls && dom.controls ) {
 
 			var routes = availableRoutes();
+			var fragments = availableFragments();
 
 			// Remove the 'enabled' class from all directions
 			dom.controlsLeft.concat( dom.controlsRight )
@@ -1147,6 +1613,7 @@ var Reveal = (function(){
 							.concat( dom.controlsPrev )
 							.concat( dom.controlsNext ).forEach( function( node ) {
 				node.classList.remove( 'enabled' );
+				node.classList.remove( 'fragmented' );
 			} );
 
 			// Add the 'enabled' class to the available routes
@@ -1159,10 +1626,60 @@ var Reveal = (function(){
 			if( routes.left || routes.up ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'enabled' ); } );
 			if( routes.right || routes.down ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'enabled' ); } );
 
+			// Highlight fragment directions
+			if( currentSlide ) {
+
+				// Always apply fragment decorator to prev/next buttons
+				if( fragments.prev ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
+				if( fragments.next ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
+
+				// Apply fragment decorators to directional buttons based on
+				// what slide axis they are in
+				if( isVerticalSlide( currentSlide ) ) {
+					if( fragments.prev ) dom.controlsUp.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
+					if( fragments.next ) dom.controlsDown.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
+				}
+				else {
+					if( fragments.prev ) dom.controlsLeft.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
+					if( fragments.next ) dom.controlsRight.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
+				}
+			}
+
 		}
 
 	}
 
+	/**
+	 * Updates the background elements to reflect the current 
+	 * slide.
+	 */
+	function updateBackground() {
+
+		// Update the classes of all backgrounds to match the 
+		// states of their slides (past/present/future)
+		toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
+
+			// Reverse past/future classes when in RTL mode
+			var horizontalPast = config.rtl ? 'future' : 'past',
+				horizontalFuture = config.rtl ? 'past' : 'future';
+
+			backgroundh.className = 'slide-background ' + ( h < indexh ? horizontalPast : h > indexh ? horizontalFuture : 'present' );
+
+			toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
+
+				backgroundv.className = 'slide-background ' + ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
+
+			} );
+
+		} );
+
+		// Allow the first background to apply without transition
+		setTimeout( function() {
+			dom.background.classList.remove( 'no-transition' );
+		}, 1 );
+
+	}
+
 	/**
 	 * Determine what available routes there are for navigation.
 	 *
@@ -1173,13 +1690,93 @@ var Reveal = (function(){
 		var horizontalSlides = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),
 			verticalSlides = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR );
 
-		return {
-			left: indexh > 0,
-			right: indexh < horizontalSlides.length - 1,
+		var routes = {
+			left: indexh > 0 || config.loop,
+			right: indexh < horizontalSlides.length - 1 || config.loop,
 			up: indexv > 0,
 			down: indexv < verticalSlides.length - 1
 		};
 
+		// reverse horizontal controls for rtl
+		if( config.rtl ) {
+			var left = routes.left;
+			routes.left = routes.right;
+			routes.right = left;
+		}
+
+		return routes;
+
+	}
+
+	/**
+	 * Returns an object describing the available fragment
+	 * directions.
+	 *
+	 * @return {Object} two boolean properties: prev/next
+	 */
+	function availableFragments() {
+
+		if( currentSlide && config.fragments ) {
+			var fragments = currentSlide.querySelectorAll( '.fragment' );
+			var hiddenFragments = currentSlide.querySelectorAll( '.fragment:not(.visible)' );
+
+			return {
+				prev: fragments.length - hiddenFragments.length > 0,
+				next: !!hiddenFragments.length
+			};
+		}
+		else {
+			return { prev: false, next: false };
+		}
+
+	}
+
+	/**
+	 * Start playback of any embedded content inside of
+	 * the targeted slide.
+	 */
+	function startEmbeddedContent( slide ) {
+
+		if( slide ) {
+			// HTML5 media elements
+			toArray( slide.querySelectorAll( 'video, audio' ) ).forEach( function( el ) {
+				if( el.hasAttribute( 'data-autoplay' ) ) {
+					el.play();
+				}
+			} );
+
+			// YouTube embeds
+			toArray( slide.querySelectorAll( 'iframe[src*="youtube.com/embed/"]' ) ).forEach( function( el ) {
+				if( el.hasAttribute( 'data-autoplay' ) ) {
+					el.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
+				}
+			});
+		}
+
+	}
+
+	/**
+	 * Stop playback of any embedded content inside of
+	 * the targeted slide.
+	 */
+	function stopEmbeddedContent( slide ) {
+
+		if( slide ) {
+			// HTML5 media elements
+			toArray( slide.querySelectorAll( 'video, audio' ) ).forEach( function( el ) {
+				if( !el.hasAttribute( 'data-ignore' ) ) {
+					el.pause();
+				}
+			} );
+
+			// YouTube embeds
+			toArray( slide.querySelectorAll( 'iframe[src*="youtube.com/embed/"]' ) ).forEach( function( el ) {
+				if( !el.hasAttribute( 'data-ignore' ) && typeof el.contentWindow.postMessage === 'function' ) {
+					el.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
+				}
+			});
+		}
+
 	}
 
 	/**
@@ -1264,17 +1861,18 @@ var Reveal = (function(){
 	 * index will be for this slide rather than the currently
 	 * active one
 	 *
-	 * @return {Object} { h: <int>, v: <int> }
+	 * @return {Object} { h: <int>, v: <int>, f: <int> }
 	 */
 	function getIndices( slide ) {
 
 		// By default, return the current indices
 		var h = indexh,
-			v = indexv;
+			v = indexv,
+			f;
 
 		// If a slide is specified, return the indices of that slide
 		if( slide ) {
-			var isVertical = !!slide.parentNode.nodeName.match( /section/gi );
+			var isVertical = isVerticalSlide( slide );
 			var slideh = isVertical ? slide.parentNode : slide;
 
 			// Select all horizontal slides
@@ -1289,7 +1887,14 @@ var Reveal = (function(){
 			}
 		}
 
-		return { h: h, v: v };
+		if( !slide && currentSlide ) {
+			var visibleFragments = currentSlide.querySelectorAll( '.fragment.visible' );
+			if( visibleFragments.length ) {
+				f = visibleFragments.length;
+			}
+		}
+
+		return { h: h, v: v, f: f };
 
 	}
 
@@ -1301,25 +1906,24 @@ var Reveal = (function(){
 	 */
 	function nextFragment() {
 
-		// Vertical slides:
-		if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) {
-			var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' );
-			if( verticalFragments.length ) {
-				verticalFragments[0].classList.add( 'visible' );
+		if( currentSlide && config.fragments ) {
+			var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment:not(.visible)' ) );
 
-				// Notify subscribers of the change
-				dispatchEvent( 'fragmentshown', { fragment: verticalFragments[0] } );
-				return true;
-			}
-		}
-		// Horizontal slides:
-		else {
-			var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' );
-			if( horizontalFragments.length ) {
-				horizontalFragments[0].classList.add( 'visible' );
+			if( fragments.length ) {
+				// Find the index of the next fragment
+				var index = fragments[0].getAttribute( 'data-fragment-index' );
+
+				// Find all fragments with the same index
+				fragments = currentSlide.querySelectorAll( '.fragment[data-fragment-index="'+ index +'"]' );
+
+				toArray( fragments ).forEach( function( element ) {
+					element.classList.add( 'visible' );
+				} );
 
 				// Notify subscribers of the change
-				dispatchEvent( 'fragmentshown', { fragment: horizontalFragments[0] } );
+				dispatchEvent( 'fragmentshown', { fragment: fragments[0], fragments: fragments } );
+
+				updateControls();
 				return true;
 			}
 		}
@@ -1336,25 +1940,24 @@ var Reveal = (function(){
 	 */
 	function previousFragment() {
 
-		// Vertical slides:
-		if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) {
-			var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment.visible' );
-			if( verticalFragments.length ) {
-				verticalFragments[ verticalFragments.length - 1 ].classList.remove( 'visible' );
+		if( currentSlide && config.fragments ) {
+			var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment.visible' ) );
 
-				// Notify subscribers of the change
-				dispatchEvent( 'fragmenthidden', { fragment: verticalFragments[ verticalFragments.length - 1 ] } );
-				return true;
-			}
-		}
-		// Horizontal slides:
-		else {
-			var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment.visible' );
-			if( horizontalFragments.length ) {
-				horizontalFragments[ horizontalFragments.length - 1 ].classList.remove( 'visible' );
+			if( fragments.length ) {
+				// Find the index of the previous fragment
+				var index = fragments[ fragments.length - 1 ].getAttribute( 'data-fragment-index' );
+
+				// Find all fragments with the same index
+				fragments = currentSlide.querySelectorAll( '.fragment[data-fragment-index="'+ index +'"]' );
+
+				toArray( fragments ).forEach( function( f ) {
+					f.classList.remove( 'visible' );
+				} );
 
 				// Notify subscribers of the change
-				dispatchEvent( 'fragmenthidden', { fragment: horizontalFragments[ horizontalFragments.length - 1 ] } );
+				dispatchEvent( 'fragmenthidden', { fragment: fragments[0], fragments: fragments } );
+
+				updateControls();
 				return true;
 			}
 		}
@@ -1371,16 +1974,31 @@ var Reveal = (function(){
 		clearTimeout( autoSlideTimeout );
 
 		// Cue the next auto-slide if enabled
-		if( autoSlide ) {
+		if( autoSlide && !isPaused() && !isOverview() ) {
 			autoSlideTimeout = setTimeout( navigateNext, autoSlide );
 		}
 
 	}
 
+	/**
+	 * Cancels any ongoing request to auto-slide.
+	 */
+	function cancelAutoSlide() {
+
+		clearTimeout( autoSlideTimeout );
+
+	}
+
 	function navigateLeft() {
 
-		// Prioritize hiding fragments
-		if( availableRoutes().left && isOverviewActive() || previousFragment() === false ) {
+		// Reverse for RTL
+		if( config.rtl ) {
+			if( ( isOverview() || nextFragment() === false ) && availableRoutes().left ) {
+				slide( indexh + 1 );
+			}
+		}
+		// Normal navigation
+		else if( ( isOverview() || previousFragment() === false ) && availableRoutes().left ) {
 			slide( indexh - 1 );
 		}
 
@@ -1388,8 +2006,14 @@ var Reveal = (function(){
 
 	function navigateRight() {
 
-		// Prioritize revealing fragments
-		if( availableRoutes().right && isOverviewActive() || nextFragment() === false ) {
+		// Reverse for RTL
+		if( config.rtl ) {
+			if( ( isOverview() || previousFragment() === false ) && availableRoutes().right ) {
+				slide( indexh - 1 );
+			}
+		}
+		// Normal navigation
+		else if( ( isOverview() || nextFragment() === false ) && availableRoutes().right ) {
 			slide( indexh + 1 );
 		}
 
@@ -1398,7 +2022,7 @@ var Reveal = (function(){
 	function navigateUp() {
 
 		// Prioritize hiding fragments
-		if( availableRoutes().up && isOverviewActive() || previousFragment() === false ) {
+		if( ( isOverview() || previousFragment() === false ) && availableRoutes().up ) {
 			slide( indexh, indexv - 1 );
 		}
 
@@ -1407,7 +2031,7 @@ var Reveal = (function(){
 	function navigateDown() {
 
 		// Prioritize revealing fragments
-		if( availableRoutes().down && isOverviewActive() || nextFragment() === false ) {
+		if( ( isOverview() || nextFragment() === false ) && availableRoutes().down ) {
 			slide( indexh, indexv + 1 );
 		}
 
@@ -1431,9 +2055,9 @@ var Reveal = (function(){
 				var previousSlide = document.querySelector( HORIZONTAL_SLIDES_SELECTOR + '.past:nth-child(' + indexh + ')' );
 
 				if( previousSlide ) {
-					indexv = ( previousSlide.querySelectorAll( 'section' ).length + 1 ) || undefined;
-					indexh --;
-					slide();
+					var v = ( previousSlide.querySelectorAll( 'section' ).length - 1 ) || undefined;
+					var h = indexh - 1;
+					slide( h, v );
 				}
 			}
 		}
@@ -1476,37 +2100,77 @@ var Reveal = (function(){
 
 		// Disregard the event if there's a focused element or a
 		// keyboard modifier key is present
-		if ( hasFocus || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
-
-		var triggered = true;
-
-		switch( event.keyCode ) {
-			// p, page up
-			case 80: case 33: navigatePrev(); break;
-			// n, page down
-			case 78: case 34: navigateNext(); break;
-			// h, left
-			case 72: case 37: navigateLeft(); break;
-			// l, right
-			case 76: case 39: navigateRight(); break;
-			// k, up
-			case 75: case 38: navigateUp(); break;
-			// j, down
-			case 74: case 40: navigateDown(); break;
-			// home
-			case 36: slide( 0 ); break;
-			// end
-			case 35: slide( Number.MAX_VALUE ); break;
-			// space
-			case 32: isOverviewActive() ? deactivateOverview() : navigateNext(); break;
-			// return
-			case 13: isOverviewActive() ? deactivateOverview() : triggered = false; break;
-			// b, period, Logitech presenter tools "black screen" button
-			case 66: case 190: case 191: togglePause(); break;
-			// f
-			case 70: enterFullscreen(); break;
-			default:
-				triggered = false;
+		if( hasFocus || (event.shiftKey && event.keyCode !== 32) || event.altKey || event.ctrlKey || event.metaKey ) return;
+
+		// While paused only allow "unpausing" keyboard events (b and .)
+		if( isPaused() && [66,190,191].indexOf( event.keyCode ) === -1 ) {
+			return false;
+		}
+
+		var triggered = false;
+
+		// 1. User defined key bindings
+		if( typeof config.keyboard === 'object' ) {
+
+			for( var key in config.keyboard ) {
+
+				// Check if this binding matches the pressed key
+				if( parseInt( key, 10 ) === event.keyCode ) {
+
+					var value = config.keyboard[ key ];
+
+					// Calback function
+					if( typeof value === 'function' ) {
+						value.apply( null, [ event ] );
+					}
+					// String shortcuts to reveal.js API
+					else if( typeof value === 'string' && typeof Reveal[ value ] === 'function' ) {
+						Reveal[ value ].call();
+					}
+
+					triggered = true;
+
+				}
+
+			}
+
+		}
+
+		// 2. System defined key bindings
+		if( triggered === false ) {
+
+			// Assume true and try to prove false
+			triggered = true;
+
+			switch( event.keyCode ) {
+				// p, page up
+				case 80: case 33: navigatePrev(); break;
+				// n, page down
+				case 78: case 34: navigateNext(); break;
+				// h, left
+				case 72: case 37: navigateLeft(); break;
+				// l, right
+				case 76: case 39: navigateRight(); break;
+				// k, up
+				case 75: case 38: navigateUp(); break;
+				// j, down
+				case 74: case 40: navigateDown(); break;
+				// home
+				case 36: slide( 0 ); break;
+				// end
+				case 35: slide( Number.MAX_VALUE ); break;
+				// space
+				case 32: isOverview() ? deactivateOverview() : event.shiftKey ? navigatePrev() : navigateNext(); break;
+				// return
+				case 13: isOverview() ? deactivateOverview() : triggered = false; break;
+				// b, period, Logitech presenter tools "black screen" button
+				case 66: case 190: case 191: togglePause(); break;
+				// f
+				case 70: enterFullscreen(); break;
+				default:
+					triggered = false;
+			}
+
 		}
 
 		// If the input resulted in a triggered action we should prevent
@@ -1527,10 +2191,10 @@ var Reveal = (function(){
 	}
 
 	/**
-	 * Handler for the document level 'touchstart' event,
-	 * enables support for swipe and pinch gestures.
+	 * Handler for the 'touchstart' event, enables support for
+	 * swipe and pinch gestures.
 	 */
-	function onDocumentTouchStart( event ) {
+	function onTouchStart( event ) {
 
 		touch.startX = event.touches[0].clientX;
 		touch.startY = event.touches[0].clientY;
@@ -1551,9 +2215,9 @@ var Reveal = (function(){
 	}
 
 	/**
-	 * Handler for the document level 'touchmove' event.
+	 * Handler for the 'touchmove' event.
 	 */
-	function onDocumentTouchMove( event ) {
+	function onTouchMove( event ) {
 
 		// Each touch should only trigger one action
 		if( !touch.handled ) {
@@ -1625,23 +2289,60 @@ var Reveal = (function(){
 	}
 
 	/**
-	 * Handler for the document level 'touchend' event.
+	 * Handler for the 'touchend' event.
 	 */
-	function onDocumentTouchEnd( event ) {
+	function onTouchEnd( event ) {
 
 		touch.handled = false;
 
 	}
 
+	/**
+	 * Convert pointer down to touch start.
+	 */
+	function onPointerDown( event ) {
+
+		if( event.pointerType === event.MSPOINTER_TYPE_TOUCH ) {
+			event.touches = [{ clientX: event.clientX, clientY: event.clientY }];
+			onTouchStart( event );
+		}
+
+	}
+
+	/**
+	 * Convert pointer move to touch move.
+	 */
+	function onPointerMove( event ) {
+
+		if( event.pointerType === event.MSPOINTER_TYPE_TOUCH ) {
+			event.touches = [{ clientX: event.clientX, clientY: event.clientY }];
+			onTouchMove( event );
+		}
+
+	}
+
+	/**
+	 * Convert pointer up to touch end.
+	 */
+	function onPointerUp( event ) {
+
+		if( event.pointerType === event.MSPOINTER_TYPE_TOUCH ) {
+			event.touches = [{ clientX: event.clientX, clientY: event.clientY }];
+			onTouchEnd( event );
+		}
+
+	}
+
 	/**
 	 * Handles mouse wheel scrolling, throttled to avoid skipping
 	 * multiple slides.
 	 */
 	function onDocumentMouseScroll( event ) {
 
-		clearTimeout( mouseWheelTimeout );
+		if( Date.now() - lastMouseWheelStep > 600 ) {
+
+			lastMouseWheelStep = Date.now();
 
-		mouseWheelTimeout = setTimeout( function() {
 			var delta = event.detail || -event.wheelDelta;
 			if( delta > 0 ) {
 				navigateNext();
@@ -1649,7 +2350,8 @@ var Reveal = (function(){
 			else {
 				navigatePrev();
 			}
-		}, 100 );
+
+		}
 
 	}
 
@@ -1659,7 +2361,9 @@ var Reveal = (function(){
 	 *
 	 * ( clickX / presentationWidth ) * numberOfSlides
 	 */
-	function onProgressClick( event ) {
+	function onProgressClicked( event ) {
+
+		event.preventDefault();
 
 		var slidesTotal = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).length;
 		var slideIndex = Math.floor( ( event.clientX / dom.wrapper.offsetWidth ) * slidesTotal );
@@ -1668,6 +2372,16 @@ var Reveal = (function(){
 
 	}
 
+	/**
+	 * Event handler for navigation control buttons.
+	 */
+	function onNavigateLeftClicked( event ) { event.preventDefault(); navigateLeft(); }
+	function onNavigateRightClicked( event ) { event.preventDefault(); navigateRight(); }
+	function onNavigateUpClicked( event ) { event.preventDefault(); navigateUp(); }
+	function onNavigateDownClicked( event ) { event.preventDefault(); navigateDown(); }
+	function onNavigatePrevClicked( event ) { event.preventDefault(); navigatePrev(); }
+	function onNavigateNextClicked( event ) { event.preventDefault(); navigateNext(); }
+
 	/**
 	 * Handler for the window level 'hashchange' event.
 	 */
@@ -1693,27 +2407,45 @@ var Reveal = (function(){
 
 		// TODO There's a bug here where the event listeners are not
 		// removed after deactivating the overview.
-		if( isOverviewActive() ) {
+		if( eventsAreBound && isOverview() ) {
 			event.preventDefault();
 
-			deactivateOverview();
-
 			var element = event.target;
 
 			while( element && !element.nodeName.match( /section/gi ) ) {
 				element = element.parentNode;
 			}
 
-			if( element.nodeName.match( /section/gi ) ) {
-				var h = parseInt( element.getAttribute( 'data-index-h' ), 10 ),
-					v = parseInt( element.getAttribute( 'data-index-v' ), 10 );
+			if( element && !element.classList.contains( 'disabled' ) ) {
+
+				deactivateOverview();
+
+				if( element.nodeName.match( /section/gi ) ) {
+					var h = parseInt( element.getAttribute( 'data-index-h' ), 10 ),
+						v = parseInt( element.getAttribute( 'data-index-v' ), 10 );
+
+					slide( h, v );
+				}
 
-				slide( h, v );
 			}
 		}
 
 	}
 
+	/**
+	 * Handles clicks on links that are set to preview in the
+	 * iframe overlay.
+	 */
+	function onPreviewLinkClicked( event ) {
+
+		var url = event.target.getAttribute( 'href' );
+		if( url ) {
+			openPreview( url );
+			event.preventDefault();
+		}
+
+	}
+
 
 	// --------------------------------------------------------------------//
 	// ------------------------------- API --------------------------------//
@@ -1722,6 +2454,8 @@ var Reveal = (function(){
 
 	return {
 		initialize: initialize,
+		configure: configure,
+		sync: sync,
 
 		// Navigation methods
 		slide: slide,
@@ -1746,12 +2480,22 @@ var Reveal = (function(){
 		// Forces an update in slide layout
 		layout: layout,
 
+		// Returns an object with the available routes as booleans (left/right/top/bottom)
+		availableRoutes: availableRoutes,
+
+		// Returns an object with the available fragments as booleans (prev/next)
+		availableFragments: availableFragments,
+
 		// Toggles the overview mode on/off
 		toggleOverview: toggleOverview,
 
 		// Toggles the "black screen" mode on/off
 		togglePause: togglePause,
 
+		// State checks
+		isOverview: isOverview,
+		isPaused: isPaused,
+
 		// Adds or removes all internal event listeners (such as keyboard)
 		addEventListeners: addEventListeners,
 		removeEventListeners: removeEventListeners,
@@ -1759,6 +2503,18 @@ var Reveal = (function(){
 		// Returns the indices of the current, or specified, slide
 		getIndices: getIndices,
 
+		// Returns the slide at the specified index, y is optional
+		getSlide: function( x, y ) {
+			var horizontalSlide = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR )[ x ];
+			var verticalSlides = horizontalSlide && horizontalSlide.querySelectorAll( 'section' );
+
+			if( typeof y !== 'undefined' ) {
+				return verticalSlides ? verticalSlides[ y ] : undefined;
+			}
+
+			return horizontalSlide;
+		},
+
 		// Returns the previous slide element, may be null
 		getPreviousSlide: function() {
 			return previousSlide;
@@ -1769,6 +2525,16 @@ var Reveal = (function(){
 			return currentSlide;
 		},
 
+		// Returns the current scale of the presentation content
+		getScale: function() {
+			return scale;
+		},
+
+		// Returns the current configuration object
+		getConfig: function() {
+			return config;
+		},
+
 		// Helper method, retrieves query string as a key/value hash
 		getQueryHash: function() {
 			var query = {};
@@ -1780,6 +2546,21 @@ var Reveal = (function(){
 			return query;
 		},
 
+		// Returns true if we're currently on the first slide
+		isFirstSlide: function() {
+			return document.querySelector( SLIDES_SELECTOR + '.past' ) == null ? true : false;
+		},
+
+		// Returns true if we're currently on the last slide
+		isLastSlide: function() {
+			if( currentSlide && currentSlide.classList.contains( '.stack' ) ) {
+				return currentSlide.querySelector( SLIDES_SELECTOR + '.future' ) == null ? true : false;
+			}
+			else {
+				return document.querySelector( SLIDES_SELECTOR + '.future' ) == null ? true : false;
+			}
+		},
+
 		// Forward event binding to the reveal DOM element
 		addEventListener: function( type, listener, useCapture ) {
 			if( 'addEventListener' in window ) {
@@ -1793,4 +2574,4 @@ var Reveal = (function(){
 		}
 	};
 
-})();
+})();