<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>reveal.js</title>

		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/black.css">

		<!-- Theme used for syntax highlighting of code -->
		<link rel="stylesheet" href="lib/css/monokai.css">

		<!-- font awesome -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section>Slide 1</section>
				<section>Slide 2</section>
				<section>Slide 3</section>
			</div>
		</div>

		<script src="js/reveal.js"></script>

		<script>
			// More info about config & dependencies:
			// - https://github.com/hakimel/reveal.js#configuration
			// - https://github.com/hakimel/reveal.js#dependencies
			Reveal.initialize({
				chalkboard: {
					// optionally load pre-recorded chalkboard drawing from file
					src: "chalkboard.json",
				},
				menu: {
					// Specifies which side of the presentation the menu will 
					// be shown. Use 'left' or 'right'.
					side: 'left',

					// Specifies the width of the menu.
					// Can be one of the following:
					// 'normal', 'wide', 'third', 'half', 'full', or
					// any valid css length value
					width: 'normal',

					// Add slide numbers to the titles in the slide list.
					// Use 'true' or format string (same as reveal.js slide numbers)
					numbers: false,

					// Specifies which slide elements will be used for generating
					// the slide titles in the menu. The default selects the first
					// heading element found in the slide, but you can specify any
					// valid css selector and the text from the first matching
					// element will be used.
					// Note: that a section data-menu-title attribute or an element
					// with a menu-title class will take precedence over this option
					titleSelector: 'h1, h2, h3, h4, h5, h6',

					// If slides do not have a matching title, attempt to use the
					// start of the text content as the title instead
					useTextContentForMissingTitles: false,

					// Hide slides from the menu that do not have a title.
					// Set to 'true' to only list slides with titles.
					hideMissingTitles: false,

					// Adds markers to the slide titles to indicate the 
					// progress through the presentation. Set to 'false'
					// to hide the markers.
					markers: true,

					// Specify custom panels to be included in the menu, by
					// providing an array of objects with 'title', 'icon'
					// properties, and either a 'src' or 'content' property.
					custom: false,

					// Specifies the themes that will be available in the themes
					// menu panel. Set to 'true' to show the themes menu panel
					// with the default themes list. Alternatively, provide an
					// array to specify the themes to make available in the
					// themes menu panel, for example...
					// [
					//     { name: 'Black', theme: 'css/theme/black.css' },
					//     { name: 'White', theme: 'css/theme/white.css' },
					//     { name: 'League', theme: 'css/theme/league.css' }
					// ]
					themes: true,

					// Specifies the path to the default theme files. If your
					// presentation uses a different path to the standard reveal
					// layout then you need to provide this option, but only
					// when 'themes' is set to 'true'. If you provide your own 
					// list of themes or 'themes' is set to 'false' the 
					// 'themesPath' option is ignored.
					themesPath: 'css/theme/',

					// Specifies if the transitions menu panel will be shown.
					// Set to 'true' to show the transitions menu panel with
					// the default transitions list. Alternatively, provide an
					// array to specify the transitions to make available in
					// the transitions panel, for example...
					// ['None', 'Fade', 'Slide']
					transitions: true,

					// Adds a menu button to the slides to open the menu panel.
					// Set to 'false' to hide the button.
					openButton: true,
			
					// If 'true' allows the slide number in the presentation to
					// open the menu panel. The reveal.js slideNumber option must 
					// be displayed for this to take effect
					openSlideNumber: false,
			
					// If true allows the user to open and navigate the menu using
					// the keyboard. Standard keyboard interaction with reveal
					// will be disabled while the menu is open.
					keyboard: true,
			
					// Normally the menu will close on user actions such as
					// selecting a menu item, or clicking the presentation area.
					// If 'true', the sticky option will leave the menu open
					// until it is explicitly closed, that is, using the close
					// button or pressing the ESC or m key (when the keyboard 
					// interaction option is enabled).
					sticky: false,
			
					// If 'true' standard menu items will be automatically opened
					// when navigating using the keyboard. Note: this only takes 
					// effect when both the 'keyboard' and 'sticky' options are enabled.
					autoOpen: true,
			
					// If 'true' the menu will not be created until it is explicitly
					// requested by calling RevealMenu.init(). Note this will delay
					// the creation of all menu panels, including custom panels, and
					// the menu button.
					delayInit: false,
			
					// If 'true' the menu will be shown when the menu is initialised.
					openOnInit: false,
			
					// By default the menu will load it's own font-awesome library
					// icons. If your presentation needs to load a different
					// font-awesome library the 'loadIcons' option can be set to false
					// and the menu will not attempt to load the font-awesome library.
					loadIcons: true,
			
					custom: [
						{ title: 'Links', icon: '<i class="fa fa-external-link">', src: 'links.html' },
						{ title: 'About', icon: '<i class="fa fa-info">', content: '<p>This slidedeck is created with reveal.js</p>' }
					]
				},
				hash: true,
				dependencies: [
					{ src: 'plugin/markdown/marked.js' },
					{ src: 'plugin/markdown/markdown.js' },
					{ src: 'plugin/highlight/highlight.js' },
					{ src: 'plugin/notes/notes.js', async: true },
					// Whiteboard
					{ src: 'reveal.js-plugins/chalkboard/chalkboard.js' },
					{ src: 'node_modules/reveal.js-menu/menu.js' },
				],
				keyboard: {
					// whiteboard
				    67: function() { RevealChalkboard.toggleNotesCanvas() },	// toggle notes canvas when 'c' is pressed
				    66: function() { RevealChalkboard.toggleChalkboard() },	// toggle chalkboard when 'b' is pressed
				    46: function() { RevealChalkboard.clear() },	// clear chalkboard when 'DEL' is pressed
				     8: function() { RevealChalkboard.reset() },	// reset chalkboard data on current slide when 'BACKSPACE' is pressed
				    68: function() { RevealChalkboard.download() },	// downlad recorded chalkboard drawing when 'd' is pressed
				    88: function() { RevealChalkboard.colorNext() },	// cycle colors forward when 'x' is pressed
				    89: function() { RevealChalkboard.colorPrev() },	// cycle colors backward when 'y' is pressed
				    // audio
				    82: function() { Recorder.toggleRecording(); },	// press 'r' to start/stop recording
				    90: function() { Recorder.downloadZip(); }, 	// press 'z' to download zip containing audio files
				    84: function() { Recorder.fetchTTS(); }, 	// press 't' to fetch TTS audio files
				},
			});
		</script>
	</body>
</html>