asciidoctor-revealjs 1.1.3 → 2.0.0

data/Rakefile

@@ -3,10 +3,11 @@
 require 'asciidoctor'
 require 'asciidoctor/doctest'
 require 'colorize'
-require 'thread_safe'
 require 'tilt'
 
 CONVERTER_FILE = 'lib/asciidoctor-revealjs/converter.rb'
+JS_FILE = 'build/asciidoctor-reveal.js'
+DIST_FILE = 'dist/main.js'
 TEMPLATES_DIR = 'templates'
 
 file CONVERTER_FILE => FileList["#{TEMPLATES_DIR}/*"] do
@@ -25,6 +26,26 @@ namespace :build do
   task 'converter:opal' => 'clean' do
     build_converter :opal
   end
+
+  desc "Transcompile to JavaScript and generate #{JS_FILE}"
+  task :js => 'converter:opal' do
+    require 'opal'
+
+    builder = Opal::Builder.new(compiler_options: {
+      dynamic_require_severity: :error,
+    })
+    builder.append_paths 'lib'
+    builder.build 'asciidoctor-revealjs'
+
+    mkdir_p [File.dirname(JS_FILE), File.dirname(DIST_FILE)]
+    File.open(JS_FILE, 'w') do |file|
+      template = File.read('src/asciidoctor-revealjs.tmpl.js')
+      file << template.sub('//OPAL-GENERATED-CODE//', builder.to_s)
+    end
+    File.binwrite "#{JS_FILE}.map", builder.source_map
+
+    cp JS_FILE, DIST_FILE, :verbose => true
+  end
 end
 
 task :build => 'build:converter'

data/asciidoctor-revealjs.gemspec

@@ -11,7 +11,6 @@ Gem::Specification.new do |s|
   s.summary = 'Converts AsciiDoc to HTML for a Reveal.js presentation'
   s.description = 'Reveal.JS back-end for Asciidoctor and Asciidoctor.js. Write slides in AsciiDoc!'
   s.license = 'MIT'
-  s.required_ruby_version = '>= 1.9.3'
 
   files = begin
     if (result = Open3.popen3('git ls-files -z') {|_, out| out.read }.split %(\0)).empty?
@@ -30,17 +29,20 @@ Gem::Specification.new do |s|
   s.extra_rdoc_files = Dir['README.adoc', 'LICENSE.adoc', 'HACKING.adoc']
   s.require_paths = ['lib']
 
-  s.add_runtime_dependency 'asciidoctor', '~> 1.5.6'
+  s.add_runtime_dependency 'asciidoctor', ['>= 1.5.6', '< 2.1']
   s.add_runtime_dependency 'thread_safe', '~> 0.3.5'
+  s.add_runtime_dependency 'concurrent-ruby', '~> 1.0'
 
   s.add_development_dependency 'rake', '~> 10.4.2'
-  s.add_development_dependency 'asciidoctor-doctest', '= 2.0.0.beta.4'
+  s.add_development_dependency 'asciidoctor-doctest', '= 2.0.0.beta.5'
   s.add_development_dependency 'pry', '~> 0.10.4'
   if RUBY_ENGINE != 'jruby'
     s.add_development_dependency 'pry-byebug'
   end
   s.add_development_dependency 'colorize'
-  s.add_development_dependency 'asciidoctor-templates-compiler', '~> 0.3.0'
+  s.add_development_dependency 'asciidoctor-templates-compiler', '~> 0.4.2'
   s.add_development_dependency 'slim', '~> 3.0.6'
   s.add_development_dependency 'slim-htag', '~> 0.1.0'
+  # Overriden in Gemfile and Gemfile.upstream for now
+  #s.add_development_dependency 'opal', '~> 0.11.1'
 end

data/examples/background-color.adoc

@@ -0,0 +1,45 @@
+// .revealjs-background-color
+// Demonstration of background color features of both reveal.js and what can be done with CSS.
+// :include: //div[@class="slides"]
+// :header_footer:
+= Colorful Presentation
+:backend: revealjs
+:customcss: background-color.css
+:topic: state=title
+:icons: font
+
+// classic
+[background-color="yellow"]
+== Hello
+
+// New: with roles backed by CSS (see background-color.css)
+[.red.background]
+== Here
+
+Red
+
+[.green]
+== We
+
+Green
+
+NOTE: Green background color shouldn't be applied to the whole slide
+
+[.blue.canvas]
+== Go
+
+Blue
+
+// role that alter style but not slide color
+[.topic]
+== Default color
+
+but fancy font
+
+// style role *and* color role (using shorthand markup)
+// could also be written in long form like this:
+// [role="topic red background"]
+[.topic.red.background]
+== fancy font
+
+and color!

data/examples/background-color.css

@@ -0,0 +1,18 @@
+section.red.background {
+  background-color: red;
+}
+
+section.green {
+  background-color: green;
+}
+
+section.blue.canvas {
+  background-color: blue;
+}
+
+/* font example */
+@import 'https://fonts.googleapis.com/css?family=Baloo+Bhai';
+section.topic h2,
+section.topic div p {
+    font-family: 'Baloo Bhai', cursive;
+}

data/examples/history-regression-tests.adoc

@@ -11,7 +11,7 @@
 == 3rd Slide
 // slide that starts with a number
 
-== P3rhaps this won't work
+== P3rhaps this will not work
 // Second char is a number
 
 == 5th Slide
@@ -19,9 +19,15 @@
 
 == Illegal çhàrâctérß
 
-[[explicit]]
+[[explicit_with_anchor]]
 == Explicit section id
 
+[id=explicit_with_id]
+== Another Explicit Section Id
+
+[#explicit_with_short_anchor]
+== 3rd Explicit is the Charm
+
 == 67848727
 // Everything should be stripped in the id
 
@@ -32,3 +38,7 @@
 
 == Repeated title
 // Exact same title means exact same id
+
+== hello こんにちは
+
+== hello 你好

data/examples/images.adoc

@@ -17,3 +17,35 @@ image::web_surfing_time.gif[]
 == Hardcoded
 
 image::web_surfing_time.gif[width="1200"]
+
+== Image Floating
+
+image::web_surfing_time.gif[width=400px,float=right]
+
+* Some
+* Points
+* You
+* Won't
+* Look At
+
+== Image Role Right
+
+// This is asciidoctor-revealjs specific, it allows you to put an image on the right even though it is not part of the same block
+// It uses custom CSS, see #197.
+
+image::web_surfing_time.gif[role=right,width=400px]
+
+* Some
+* Points
+* You
+* Won't
+* Look At
+
+== Image Role Right [alt syntax]
+
+[.right]
+image::web_surfing_time.gif[alt text,width=400px]
+
+* Yup
+* That
+* Too

data/examples/revealjs-features.adoc

@@ -0,0 +1,23 @@
+// .revealjs-features
+// This example tests some of Reveal.js 3.7.0 features
+// :include: //body/script | //div[@class="slides"]
+// :header_footer:
+= Reveal.JS
+:revealjs_history: true
+:revealjs_fragmentInURL: true
+
+== Slide One
+
+Some content
+
+=== And
+
+With Reveal.JS 3.6
+
+=== Fragments
+
+Can now be displayed in URLs
+
+== Second slide
+
+Done

data/examples/revealjs-plugin-activation.adoc

@@ -0,0 +1,16 @@
+// .revealjs-plugin-activation
+// Use of the revealjs_plugin_... attributes to enable and disable some revealjs plugins
+// :include: //body/script | //div[@class="slides"]
+// :header_footer:
+= Default Plugins Changes
+Author
+:revealjs_plugins_pdf: enabled
+:revealjs_plugins_marked: disabled
+
+== Slide 1
+
+Content 1
+
+== Slide 2
+
+Content 2

data/examples/revealjs-plugins-conf.js

@@ -0,0 +1,10 @@
+menu: {
+    side: 'right'
+},
+keyboard: {
+	    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
+},

data/examples/revealjs-plugins.adoc

@@ -0,0 +1,16 @@
+// .revealjs-plugins
+// Use of the revealjs_plugins attribute to load custom revealjs plugins
+// :include: //body/script | //div[@class="slides"]
+// :header_footer:
+= Custom Plugins
+Author
+:revealjs_plugins: examples/revealjs-plugins.js
+:revealjs_plugins_configuration: examples/revealjs-plugins-conf.js
+
+== Slide 1
+
+Content 1
+
+== Slide 2
+
+Content 2

data/examples/revealjs-plugins.js

@@ -0,0 +1,2 @@
+{ src: 'revealjs-plugins/reveal.js-menu/menu.js' },
+{ src: 'revealjs-plugins/chalkboard/chalkboard.js' }

data/examples/revealjs-plugins/chalkboard/README.md

@@ -0,0 +1,124 @@
+# Chalkboard
+
+With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:
+
+- you can make notes directly on the slides, e.g. to comment on certain aspects,
+- you can open a chalkboard on which you can make notes.
+
+The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes. 
+
+The plugin records all drawings made so that they can be play backed using the ```autoSlide``` feature or the ```audio-slideshow``` plugin. 
+
+[Check out the live demo](https://rajgoel.github.io/reveal.js-demos/chalkboard-demo.html)
+
+The chalkboard effect is based on [Chalkboard](https://github.com/mmoustafa/Chalkboard) by Mohamed Moustafa.
+
+## Installation
+
+Copy the file ```chalkboard.js``` and the  ```img``` directory into the plugin folder of your reveal.js presentation, i.e. ```plugin/chalkboard```.
+
+Add the plugins to the dependencies in your presentation as shown below. 
+
+```javascript
+Reveal.initialize({
+	// ...
+	chalkboard: { 
+		// optionally load pre-recorded chalkboard drawing from file
+		src: "chalkboard.json",
+	},
+	dependencies: [
+		// ... 
+		{ src: 'plugin/chalkboard/chalkboard.js' },
+		// ... 
+	],
+	keyboard: {
+	    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
+	},
+	// ...
+
+});
+```
+In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that ```font-awesome``` is available. The easiest way is to include 
+```
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+```
+to the ```head``` section of you HTML-file.
+
+## Usage
+
+### Enable & disable 
+
+With above configuration the notes canvas is opened and closed when pressing 'c' and the chalkboard is opened and closed when pressing 'b'.
+
+### Mouse
+- Click the left mouse button and drag to write on notes canvas or chalkboard
+- Click the right mouse button and drag to wipe away previous drawings
+
+### Touch
+- Touch and move to write on notes canvas or chalkboard
+- Touch and hold for half a second, then move to wipe away previous drawings
+
+### Keyboard
+- Click the 'DEL' key to clear the chalkboard </li>
+- Click the 'd' key to download chalkboard drawings</li>
+- Click the 'BACKSPACE' key to delete all chalkboard drawings on the current slide</li>
+
+## Playback
+
+If the ```autoSlide``` feature is set or if the ```audio-slideshow``` plugin is used, pre-recorded chalkboard drawings can be played. The slideshow plays back the user interaction with the chalkboard in the same way as it was conducted when recording the data.
+
+## PDF-Export
+
+If the slideshow is opened in [print mode](https://github.com/hakimel/reveal.js/#pdf-export) the pre-recorded chalkboard drawings (which must be provided in a file, see ```src``` option) are included in the PDF-file. Each drawing on the chalkboard is added after the slide that was shown when opening the chalkboard. Drawings are also included if they had been cleared (using the 'DEL' key). Drawings on the notes canvas are not included in the PDF-file.   
+
+
+## Configuration
+
+The plugin has several configuration options:
+
+- ```src```: Optional filename for pre-recorded drawings.
+- ```readOnly```: Configuation option allowing to prevent changes to existing drawings. If set to ```true``` no changes can be made, if set to false ```false``` changes can be made, if unset or set to ```undefined``` no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the 'DEL' key (i.e. by using the ```RevealChalkboard.clear()``` function).
+- ```toggleNotesButton```: If set to ```true``` a button for opening and closing the notes canvas is shown. Alternatively, the css position attributes can be provided if the default position is not appropriate. 
+- ```toggleChalkboardButton```: If set to ```true``` a button for opening and closing the chalkboard is shown. Alternatively, the css position attributes can be provided if the default position is not appropriate. 
+- ```transition```: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
+- ```theme```: Can be set to either ```"chalkboard"``` or ```"whiteboard"```.
+
+The following configuration options allow to change the appearance of the notes canvas and the chalkboard. All of these options require two values, the first gives the value for the notes canvas, the second for the chalkboard.
+
+- ```color```: The first value gives the pen color, the second value gives the color of the chalk.
+- ```background```: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
+- ```pen```: The first value expects a filename for an image of the pen used for the notes canvas, the second value expects a filename  for an image of the pen used for the chalkboard.
+
+All of the configurations are optional and the default values shown below are used if the options are not provided.
+
+```javascript
+Reveal.initialize({
+	// ...
+	chalkboard: { 
+		src: null,
+		readOnly: undefined, 
+		toggleChalkboardButton: { left: "30px", bottom: "30px", top: "auto", right: "auto" },
+		toggleNotesButton: { left: "30px", bottom: "30px", top: "auto", right: "auto" },
+		transition: 800,
+		theme: "chalkboard",
+		// configuration options for notes canvas and chalkboard
+		color: [ 'rgba(0,0,255,1)', 'rgba(255,255,255,0.5)' ],
+		background: [ 'rgba(127,127,127,.1)' , 'reveal.js-plugins/chalkboard/img/blackboard.png' ],
+		pen:  [ 'url(reveal.js-plugins/chalkboard/img/boardmarker.png), auto', 'url(reveal.js-plugins/chalkboard/img/chalk.png), auto' ],
+	},
+	// ...
+
+});
+```
+
+**Note:** Customisation of pens has changed since version 0.5 of the plugin, it is now possible to use standard cursors, e.g. by setting ```pen:  [ 'crosshair', 'pointer' ]```. Please update your parameters if migrating from an older version.
+
+## License
+
+MIT licensed
+
+Copyright (C) 2016 Asvin Goel

data/examples/revealjs-plugins/chalkboard/chalkboard.js

@@ -0,0 +1,1288 @@
+/*****************************************************************
+** Author: Asvin Goel, goel@telematique.eu
+**
+** A plugin for reveal.js adding a chalkboard. 
+**
+** Version: 0.6
+** 
+** License: MIT license (see LICENSE.md)
+**
+** Credits: 
+** Chalkboard effect by Mohamed Moustafa https://github.com/mmoustafa/Chalkboard
+******************************************************************/
+
+var RevealChalkboard = window.RevealChalkboard || (function(){
+	var path = scriptPath();
+	function scriptPath() {
+		// obtain plugin path from the script element
+		var src;
+		if (document.currentScript) {
+			src = document.currentScript.src;
+		} else {
+			var sel = document.querySelector('script[src$="/chalkboard.js"]')
+			if (sel) {
+				src = sel.src;
+			}
+		}
+
+		var path = typeof src === undefined ? src
+			: src.slice(0, src.lastIndexOf("/") + 1);
+//console.log("Path: " + path);
+		return path;
+}
+
+/*****************************************************************
+** Configuration
+******************************************************************/
+	var config = Reveal.getConfig().chalkboard || {};
+
+	var background, pen, draw, color;
+	var theme = config.theme || "chalkboard"; 
+	switch ( theme ) {
+		case "whiteboard":
+			background = [ 'rgba(127,127,127,.1)' , path + 'img/whiteboard.png' ];
+			pen = [ 'url(' + path + 'img/boardmarker.png), auto',
+				'url(' + path + 'img/boardmarker.png), auto' ];
+			draw = [ drawWithPen , drawWithPen ];
+			color = [ 'rgba(0,0,255,1)', 'rgba(0,0,255,1)' ];
+			break;
+		default:
+			background = [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ];
+			pen = [ 'url(' + path + 'img/boardmarker.png), auto',
+				'url(' + path + 'img/chalk.png), auto' ];
+			draw = [ drawWithPen , drawWithChalk ];
+			color = [ 'rgba(0,0,255,1)', 'rgba(255,255,255,0.5)'  ];
+	}
+	
+	if ( config.background ) background = config.background;
+	if ( config.pen ) pen = config.pen;
+	if ( config.draw ) draw = config.draw;
+	if ( config.color ) color = config.color;
+
+	var toggleChalkboardButton = config.toggleChalkboardButton == undefined ? true : config.toggleChalkboardButton;
+	var toggleNotesButton = config.toggleNotesButton == undefined ? true : config.toggleNotesButton;
+	var transition = config.transition  || 800;
+
+	var readOnly = config.readOnly;
+
+	var legacyFileSupport = config.legacyFileSupport;
+	if ( legacyFileSupport ) { console.warn("Legacy file support is deprecated and may be removed in future versions!") }
+
+/*****************************************************************
+** Setup
+******************************************************************/
+
+	function whenReady( callback ) {
+		// wait for drawings to be loaded and markdown to be parsed
+		if ( loaded == null || document.querySelector('section[data-markdown]:not([data-markdown-parsed])') ) {
+			setTimeout( whenReady, 100, callback )
+		}
+		else {
+			callback();
+		}
+	}
+
+	var eraserDiameter = 20;
+
+	if ( toggleChalkboardButton ) {
+//console.log("toggleChalkboardButton")
+		var button = document.createElement( 'div' );
+		button.className = "chalkboard-button";
+		button.id = "toggle-chalkboard";
+		button.style.visibility = "visible";
+		button.style.position = "absolute";
+		button.style.zIndex = 30;
+		button.style.fontSize = "24px";
+
+		button.style.left = toggleChalkboardButton.left || "30px";
+		button.style.bottom = toggleChalkboardButton.bottom ||  "30px";
+		button.style.top = toggleChalkboardButton.top ||  "auto";
+		button.style.right = toggleChalkboardButton.right ||  "auto";
+
+		button.innerHTML = '<a href="#" onclick="RevealChalkboard.toggleChalkboard(); return false;"><i class="fa fa-pencil-square-o"></i></a>'
+		document.querySelector(".reveal").appendChild( button );
+	}
+	if ( toggleNotesButton ) {
+//console.log("toggleNotesButton")
+		var button = document.createElement( 'div' );
+		button.className = "chalkboard-button";
+		button.id = "toggle-notes";
+		button.style.position = "absolute";
+		button.style.zIndex = 30;
+		button.style.fontSize = "24px";
+
+		button.style.left = toggleNotesButton.left || "70px";
+		button.style.bottom = toggleNotesButton.bottom ||  "30px";
+		button.style.top = toggleNotesButton.top ||  "auto";
+		button.style.right = toggleNotesButton.right ||  "auto";
+
+		button.innerHTML = '<a href="#" onclick="RevealChalkboard.toggleNotesCanvas(); return false;"><i class="fa fa-pencil"></i></a>'
+		document.querySelector(".reveal").appendChild( button );
+	}
+//alert("Buttons");
+
+	var drawingCanvas = [ {id: "notescanvas" }, {id: "chalkboard" } ];
+	setupDrawingCanvas(0);
+	setupDrawingCanvas(1);
+
+	var mode = 0; // 0: notes canvas, 1: chalkboard
+
+	var mouseX = 0;
+	var mouseY = 0;
+	var xLast = null;
+	var yLast = null;
+
+	var slideStart = Date.now();
+	var slideIndices =  { h:0, v:0 };
+        var event = null;
+        var timeouts = [ [], [] ];
+	var touchTimeout = null;
+	var slidechangeTimeout = null;
+	var playback = false;
+
+	function setupDrawingCanvas( id ) {
+		var container = document.createElement( 'div' );
+		container.id = drawingCanvas[id].id;
+		container.classList.add( 'overlay' );
+		container.setAttribute( 'data-prevent-swipe', '' );
+		container.oncontextmenu = function() { return false; } 
+		container.style.cursor = pen[ id ];
+
+		drawingCanvas[id].width = window.innerWidth;
+		drawingCanvas[id].height = window.innerHeight;
+		drawingCanvas[id].scale = 1;
+		drawingCanvas[id].xOffset = 0;
+		drawingCanvas[id].yOffset = 0;
+
+
+		if ( id == "0" ) {
+			container.style.background = 'rgba(0,0,0,0)';
+			container.style.zIndex = "24";
+			container.classList.add( 'visible' )
+			container.style.pointerEvents = "none";
+
+			var slides = document.querySelector(".slides");
+			var aspectRatio = Reveal.getConfig().width / Reveal.getConfig().height;
+			if ( drawingCanvas[id].width > drawingCanvas[id].height*aspectRatio ) {
+				drawingCanvas[id].xOffset = (drawingCanvas[id].width - drawingCanvas[id].height*aspectRatio) / 2;
+			}
+			else if ( drawingCanvas[id].height > drawingCanvas[id].width/aspectRatio ) {
+				drawingCanvas[id].yOffset = ( drawingCanvas[id].height - drawingCanvas[id].width/aspectRatio ) / 2;
+			}
+		}
+		else {
+			container.style.background = 'url("' + background[id] + '") repeat';
+			container.style.zIndex = "26";
+		}
+
+		var sponge = document.createElement( 'img' );
+		sponge.src = path + 'img/sponge.png';
+		sponge.id = "sponge";
+		sponge.style.visibility = "hidden";
+		sponge.style.position = "absolute";
+		container.appendChild( sponge );
+		drawingCanvas[id].sponge = sponge;
+
+		var canvas = document.createElement( 'canvas' );
+		canvas.width = drawingCanvas[id].width;
+		canvas.height = drawingCanvas[id].height;
+		canvas.setAttribute( 'data-chalkboard', id );
+		canvas.style.cursor = pen[ id ];
+		container.appendChild( canvas );
+		drawingCanvas[id].canvas = canvas;
+
+		drawingCanvas[id].context = canvas.getContext("2d");
+
+
+		document.querySelector( '.reveal' ).appendChild( container );
+		drawingCanvas[id].container = container;
+	}
+
+
+/*****************************************************************
+** Storage
+******************************************************************/
+	var storage = [
+			{ width: drawingCanvas[0].width - 2 * drawingCanvas[0].xOffset, height: drawingCanvas[0].height - 2 * drawingCanvas[0].yOffset, data: []},
+			{ width: drawingCanvas[1].width, height: drawingCanvas[1].height, data: []}
+		];
+//console.log( JSON.stringify(storage));
+
+	var loaded = null;
+	if ( config.src != null ) {
+		loadData( config.src );
+	}
+
+
+	/**
+	 * Load data.
+	 */
+	function loadData( filename ) {
+		var xhr = new XMLHttpRequest();
+		xhr.onload = function() {
+			if (xhr.readyState === 4 && xhr.status != 404 ) {
+				storage = JSON.parse(xhr.responseText);
+				for (var id = 0; id < storage.length; id++) {
+					if ( drawingCanvas[id].width != storage[id].width || drawingCanvas[id].height != storage[id].height ) {
+						drawingCanvas[id].scale = Math.min( drawingCanvas[id].width/storage[id].width, drawingCanvas[id].height/storage[id].height);
+						drawingCanvas[id].xOffset = (drawingCanvas[id].width - storage[id].width * drawingCanvas[id].scale)/2;
+						drawingCanvas[id].yOffset = (drawingCanvas[id].height - storage[id].height * drawingCanvas[id].scale)/2;
+					}
+					if ( config.readOnly ) {
+						drawingCanvas[id].container.style.cursor = 'default';
+						drawingCanvas[id].canvas.style.cursor = 'default';
+					}
+				}
+				loaded = true;
+//console.log("Drawings loaded");
+			}
+			else {
+				config.readOnly = undefined;
+				readOnly = undefined;
+				console.warn( 'Failed to get file ' + filename +". ReadyState: " + xhr.readyState + ", Status: " + xhr.status);
+				loaded = false;
+			}
+		};
+
+		xhr.open( 'GET', filename, true );
+		try {
+			xhr.send();
+		}
+		catch ( error ) {
+			config.readOnly = undefined;
+			readOnly = undefined;
+			console.warn( 'Failed to get file ' + filename + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + error );
+			loaded = false;
+		}
+	}
+
+	/**
+	 * Download data.
+	 */
+	function downloadData() {
+		var a = document.createElement('a');
+		document.body.appendChild(a);	
+		try {
+			// cleanup slide data without events
+			for (var id = 0; id < 2; id++) {
+				for (var i = storage[id].data.length-1; i >= 0; i--) {
+					if (storage[id].data[i].events.length == 0) {
+						storage[id].data.splice(i, 1);
+					}
+				}
+			}
+			a.download = "chalkboard.json";
+			var blob = new Blob( [ JSON.stringify( storage ) ], { type: "application/json"} );
+			a.href = window.URL.createObjectURL( blob );
+		} catch( error ) {
+			a.innerHTML += " (" + error + ")";
+		}
+		a.click();
+		document.body.removeChild(a);
+	}
+
+	/**
+	 * Returns data object for the slide with the given indices.
+	 */
+	function getSlideData( indices, id ) {
+		if ( id == undefined ) id = mode;
+		if (!indices) indices = slideIndices;
+		var data;
+		for (var i = 0; i < storage[id].data.length; i++) {
+			if (storage[id].data[i].slide.h === indices.h && storage[id].data[i].slide.v === indices.v && storage[id].data[i].slide.f === indices.f ) {
+				data = storage[id].data[i];
+				return data;
+			}
+			if ( !legacyFileSupport && 
+			     ( storage[id].data[i].slide.h > indices.h || 
+                               ( storage[id].data[i].slide.h === indices.h && storage[id].data[i].slide.v > indices.v ) || 
+			       ( storage[id].data[i].slide.h === indices.h && storage[id].data[i].slide.v === indices.v && storage[id].data[i].slide.f > indices.f ) 
+			     )
+			   ) {
+				storage[id].data.splice( i, 0, { slide: indices, events: [], duration: 0 } );
+				data = storage[id].data[i];
+				return data;
+			}
+		}
+		storage[id].data.push( { slide: indices, events: [], duration: 0 } );
+		data = storage[id].data[storage[id].data.length-1];
+		return data;
+	}
+
+	/**
+	 * Returns maximum duration of slide playback for both modes
+	 */
+	function getSlideDuration( indices ) {
+		if (!indices) indices = slideIndices;
+		var duration = 0;
+		for (var id = 0; id < 2; id++) {
+			for (var i = 0; i < storage[id].data.length; i++) {
+				if (storage[id].data[i].slide.h === indices.h && storage[id].data[i].slide.v === indices.v && storage[id].data[i].slide.f === indices.f ) {
+					duration = Math.max( duration, storage[id].data[i].duration );
+					break;
+				}
+			}
+		}
+//console.log( duration );
+		return duration;
+	}
+
+/*****************************************************************
+** Print
+******************************************************************/
+	var printMode = ( /print-pdf/gi ).test( window.location.search );
+//console.log("createPrintout" + printMode)
+
+	function createPrintout( ) {
+//console.log( 'Create printout for ' + storage[1].data.length + " slides");
+		drawingCanvas[0].container.classList.remove( 'visible' ); // do not print notes canvas
+
+		var patImg = new Image(); 
+		patImg.onload = function () {
+			var nextSlide = [];
+			var width = Reveal.getConfig().width;
+			var height = Reveal.getConfig().height;
+			var scale = 1;
+			var xOffset = 0;
+			var yOffset = 0;
+			if ( width != storage[1].width || height != storage[1].height ) {
+				scale = Math.min( width/storage[1].width, height/storage[1].height);
+				xOffset = (width - storage[1].width * scale)/2;
+				yOffset = (height - storage[1].height * scale)/2;
+			}
+
+			for (var i = 0; i < storage[1].data.length; i++) {
+				var slide = Reveal.getSlide( storage[1].data[i].slide.h, storage[1].data[i].slide.v );
+				nextSlide.push( slide.nextSibling );
+			}
+			for (var i = 0; i < storage[1].data.length; i++) {
+console.log( 'Create printout for slide ' + storage[1].data[i].slide.h + "." + storage[1].data[i].slide.v );
+				var parent = Reveal.getSlide( storage[1].data[i].slide.h, storage[1].data[i].slide.v ).parentElement;
+				var slideData = getSlideData( storage[1].data[i].slide, 1 );
+
+				var imgCanvas = document.createElement('canvas');
+				imgCanvas.width = width;
+				imgCanvas.height = height;
+
+				var imgCtx = imgCanvas.getContext("2d");
+				imgCtx.fillStyle = imgCtx.createPattern( patImg ,'repeat');
+				imgCtx.rect(0,0,imgCanvas.width,imgCanvas.height);
+				imgCtx.fill();
+
+				for (var j = 0; j < slideData.events.length; j++) {
+					switch ( slideData.events[j].type ) {
+						case "draw":
+							for (var k = 1; k < slideData.events[j].curve.length; k++) {
+								draw[1]( imgCtx, 
+									xOffset + slideData.events[j].curve[k-1].x*scale, 
+									yOffset + slideData.events[j].curve[k-1].y*scale, 
+									xOffset + slideData.events[j].curve[k].x*scale, 
+									yOffset + slideData.events[j].curve[k].y*scale
+								);
+							}
+							break;
+						case "erase":
+							for (var k = 0; k < slideData.events[j].curve.length; k++) {
+								eraseWithSponge( imgCtx, 
+									xOffset + slideData.events[j].curve[k].x*scale, 
+									yOffset + slideData.events[j].curve[k].y*scale
+								);
+							}
+							break;
+						case "clear":
+							addPrintout( parent, nextSlide[i], imgCanvas, patImg );
+							imgCtx.clearRect(0,0,imgCanvas.width,imgCanvas.height);
+							imgCtx.fill();
+							break;
+						default:
+							break;
+					}
+				}
+				if ( slideData.events.length ) {
+					addPrintout( parent, nextSlide[i], imgCanvas, patImg );
+				}
+			} 
+			Reveal.sync();
+		};
+		patImg.src = background[1];
+	}
+
+	function addPrintout( parent, nextSlide, imgCanvas, patImg ) {
+		var slideCanvas = document.createElement('canvas');
+		slideCanvas.width = Reveal.getConfig().width;
+		slideCanvas.height = Reveal.getConfig().height;	
+		var ctx = slideCanvas.getContext("2d");
+		ctx.fillStyle = ctx.createPattern( patImg ,'repeat');
+		ctx.rect(0,0,slideCanvas.width,slideCanvas.height);
+		ctx.fill();
+		ctx.drawImage(imgCanvas, 0, 0);
+
+		var newSlide = document.createElement( 'section' );
+		newSlide.classList.add( 'present' );
+		newSlide.innerHTML = '<h1 style="visibility:hidden">Drawing</h1>';
+		newSlide.setAttribute("data-background-size", '100% 100%' );
+		newSlide.setAttribute("data-background-repeat", 'norepeat' );
+		newSlide.setAttribute("data-background", 'url("' + slideCanvas.toDataURL("image/png") +'")' );
+		if ( nextSlide != null ) {
+			parent.insertBefore( newSlide, nextSlide );
+		}
+		else {
+			parent.append( newSlide );
+		}
+	}
+
+/*****************************************************************
+** Drawings
+******************************************************************/
+
+	function drawWithPen(context,fromX,fromY,toX,toY){
+		context.lineWidth = 3;
+		context.lineCap = 'round';
+		context.strokeStyle = color[0];
+		context.beginPath();
+  		context.moveTo(fromX, fromY);		
+  		context.lineTo(toX, toY);
+  		context.stroke();
+	}
+
+	function drawWithChalk(context,fromX,fromY,toX,toY) {
+		var brushDiameter = 7;
+		context.lineWidth = brushDiameter;
+		context.lineCap = 'round';
+		context.fillStyle = color[1]; // 'rgba(255,255,255,0.5)';	
+		context.strokeStyle = color[1];
+		var opacity = Math.min(0.8, Math.max(0,color[1].replace(/^.*,(.+)\)/,'$1') - 0.1)) + Math.random()*0.2;
+		context.strokeStyle = context.strokeStyle.replace(/[\d\.]+\)$/g, opacity + ')');
+		context.beginPath();
+  		context.moveTo(fromX, fromY);		
+  		context.lineTo(toX, toY);
+  		context.stroke();
+  		// Chalk Effect
+		var length = Math.round(Math.sqrt(Math.pow(toX-fromX,2)+Math.pow(toY-fromY,2))/(5/brushDiameter));
+		var xUnit = (toX-fromX)/length;
+		var yUnit = (toY-fromY)/length;
+		for(var i=0; i<length; i++ ){
+			var xCurrent = fromX+(i*xUnit);	
+			var yCurrent = fromY+(i*yUnit);
+			var xRandom = xCurrent+(Math.random()-0.5)*brushDiameter*1.2;			
+			var yRandom = yCurrent+(Math.random()-0.5)*brushDiameter*1.2;
+	    		context.clearRect( xRandom, yRandom, Math.random()*2+2, Math.random()+1);
+		}
+	}
+
+	function eraseWithSponge(context,x,y) {
+		context.save();
+		context.beginPath();
+		context.arc(x, y, eraserDiameter, 0, 2 * Math.PI, false);
+		context.clip();
+		context.clearRect(x - eraserDiameter - 1, y - eraserDiameter - 1, eraserDiameter * 2 + 2, eraserDiameter * 2 + 2);
+		context.restore();
+	}
+
+
+
+	/**
+	 * Opens an overlay for the chalkboard.
+	 */
+	function showChalkboard() {
+//console.log("showChalkboard");
+		clearTimeout(touchTimeout);
+		touchTimeout = null;
+		drawingCanvas[0].sponge.style.visibility = "hidden"; // make sure that the sponge from touch events is hidden
+		drawingCanvas[1].sponge.style.visibility = "hidden"; // make sure that the sponge from touch events is hidden
+		drawingCanvas[1].container.classList.add( 'visible' );
+		mode = 1;
+		// broadcast
+		var message = new CustomEvent('send');
+		message.content = { sender: 'chalkboard-plugin', type: 'showChalkboard' };
+		document.dispatchEvent( message );
+	}
+
+
+	/**
+	 * Closes open chalkboard.
+	 */
+	function closeChalkboard() {
+		clearTimeout(touchTimeout);
+		touchTimeout = null;
+		drawingCanvas[0].sponge.style.visibility = "hidden"; // make sure that the sponge from touch events is hidden
+		drawingCanvas[1].sponge.style.visibility = "hidden"; // make sure that the sponge from touch events is hidden
+		drawingCanvas[1].container.classList.remove( 'visible' );
+		xLast = null;
+		yLast = null;
+		event = null;
+		mode = 0;
+		// broadcast
+		var message = new CustomEvent('send');
+		message.content = { sender: 'chalkboard-plugin', type: 'closeChalkboard' };
+		document.dispatchEvent( message );
+	}
+
+	/**
+	 * Clear current canvas.
+	 */
+	function clearCanvas( id ) {
+		if ( id == 0 ) clearTimeout( slidechangeTimeout );
+		drawingCanvas[id].context.clearRect(0,0,drawingCanvas[id].width,drawingCanvas[id].height);
+	}
+
+/*****************************************************************
+** Broadcast
+******************************************************************/
+	document.addEventListener( 'received', function ( message ) {
+//console.log(JSON.stringify(message));
+		if ( message.content && message.content.sender == 'chalkboard-plugin' ) {
+			switch ( message.content.type ) {
+				case 'showChalkboard':
+					showChalkboard();
+					break;
+				case 'closeChalkboard':
+					closeChalkboard();
+					break;
+				case 'startDrawing':
+					startDrawing(message.content.x, message.content.y, message.content.erase);
+					break;
+				case 'startErasing':
+					if ( event ) {
+						event.type = "erase";
+						event.begin = Date.now() - slideStart;
+						eraseWithSponge(drawingCanvas[mode].context, message.content.x, message.content.y);
+					}
+					break;
+				case 'drawSegment':
+					drawSegment(message.content.x, message.content.y, message.content.erase);
+					break;
+				case 'stopDrawing':
+					stopDrawing();
+					break;
+				case 'clear':
+					clear();
+					break;
+				case 'resetSlide':
+					resetSlide(true);
+					break;
+				case 'init':
+					storage = message.content.storage;
+					for (var id = 0; id < 2; id++ ) {
+						drawingCanvas[id].scale = Math.min( drawingCanvas[id].width/storage[id].width, drawingCanvas[id].height/storage[id].height );
+						drawingCanvas[id].xOffset = (drawingCanvas[id].width - storage[id].width * drawingCanvas[id].scale)/2;
+						drawingCanvas[id].yOffset = (drawingCanvas[id].height - storage[id].height * drawingCanvas[id].scale)/2;
+					}
+					clearCanvas( 0 );
+					clearCanvas( 1 );
+					if ( !playback ) {
+						slidechangeTimeout = setTimeout( startPlayback, transition, getSlideDuration(), 0 );
+					}
+					if ( mode == 1 && message.content.mode == 0) {
+						setTimeout( closeChalkboard, transition + 50 );
+					}
+					if ( mode == 0 && message.content.mode == 1) {
+						setTimeout( showChalkboard, transition + 50 );
+					}
+					mode = message.content.mode;
+					break;
+				default:
+					break;
+			}
+		}
+	});
+
+	document.addEventListener( 'newclient', function() {
+		// broadcast storage
+		var message = new CustomEvent('send');
+		message.content = { sender: 'chalkboard-plugin', type: 'init', storage: storage, mode: mode };
+		document.dispatchEvent( message );
+	});
+
+/*****************************************************************
+** Playback
+******************************************************************/
+
+	document.addEventListener('seekplayback', function( event ) {
+//console.log('event seekplayback ' + event.timestamp);
+		stopPlayback();				
+		if ( !playback || event.timestamp == 0) {
+			// in other cases startplayback fires after seeked
+			startPlayback( event.timestamp );				
+		}
+//console.log('seeked');
+	});
+
+
+	document.addEventListener('startplayback', function( event ) {
+//console.log('event startplayback ' + event.timestamp);
+		stopPlayback();				
+		playback = true;
+		startPlayback( event.timestamp );				
+	});
+
+	document.addEventListener('stopplayback', function( event ) {
+//console.log('event stopplayback ' + (Date.now() - slideStart) );
+		playback = false;
+		stopPlayback();				
+	});
+
+	document.addEventListener('startrecording', function( event ) {
+//console.log('event startrecording ' + event.timestamp);
+		startRecording();				
+	});
+
+	function recordEvent( event ) {
+		var slideData = getSlideData();
+		var i = slideData.events.length;
+		while ( i > 0 && event.begin < slideData.events[i-1].begin ) {
+			i--;
+		}
+		slideData.events.splice( i, 0, event);
+		slideData.duration = Math.max( slideData.duration, Date.now() - slideStart ) + 1;
+	}
+
+	function startRecording() {
+		resetSlide( true );
+		updateReadOnlyMode();
+		slideStart = Date.now();
+	}
+
+	function startPlayback( timestamp, finalMode, resized ) {
+//console.log("playback " + timestamp );
+		if ( resized == undefined ) {
+			updateReadOnlyMode();			
+		}
+		slideStart = Date.now() - timestamp;
+		closeChalkboard();
+		mode = 0;		
+		for ( var id = 0; id < 2; id++ ) {
+			clearCanvas( id );
+			var slideData = getSlideData( slideIndices, id );
+//console.log( timestamp +" / " + JSON.stringify(slideData));
+			var index = 0;
+			while ( index < slideData.events.length && slideData.events[index].begin < (Date.now() - slideStart) ) {
+				playEvent( id, slideData.events[index], timestamp );
+				index++;
+			} 
+
+			while ( playback && index < slideData.events.length ) {
+				timeouts[id].push( setTimeout( playEvent, slideData.events[index].begin - (Date.now() - slideStart), id, slideData.events[index], timestamp ) );
+				index++;
+			}
+		} 
+//console.log("Mode: " + finalMode + "/" + mode );
+		if ( finalMode != undefined ) {
+			mode = finalMode;
+		}
+		if( mode == 1 ) showChalkboard();
+//console.log("playback (ok)");
+		
+	};
+
+	function stopPlayback() {
+//console.log("stopPlayback");
+//console.log("Timeouts: " + timeouts[0].length + "/"+ timeouts[1].length);
+		for ( var id = 0; id < 2; id++ ) {
+			for (var i = 0; i < timeouts[id].length; i++) {
+ 				clearTimeout(timeouts[id][i]);
+			}
+			timeouts[id] = [];
+		}
+	};
+
+	function playEvent( id, event, timestamp ) {
+//console.log( timestamp +" / " + JSON.stringify(event));
+//console.log( id + ": " + timestamp +" / " +  event.begin +" / " + event.type +" / " + mode );
+		switch ( event.type ) {
+			case "open":
+				if ( timestamp <= event.begin ) {
+					showChalkboard();
+				}
+				else { 
+					mode = 1;
+				}
+	
+				break;
+			case "close":
+				if ( timestamp < event.begin ) {
+					closeChalkboard();
+				}
+				else { 
+					mode = 0;
+				}
+				break;
+			case "clear":
+				clearCanvas( id );
+				break;
+			case "draw":
+				drawCurve( id, event, timestamp );
+				break;
+			case "erase":
+				eraseCurve( id, event, timestamp );
+				break;
+
+		}
+	};
+
+	function drawCurve( id, event, timestamp ) {
+		if  ( event.curve.length > 1 ) {
+			var ctx = drawingCanvas[id].context;
+			var scale = drawingCanvas[id].scale;
+			var xOffset = drawingCanvas[id].xOffset;
+			var yOffset = drawingCanvas[id].yOffset;
+
+			var stepDuration = ( event.end - event.begin )/ ( event.curve.length - 1 );
+//console.log("---");
+			for (var i = 1; i < event.curve.length; i++) {
+				if (event.begin + i * stepDuration <= (Date.now() - slideStart)) {
+//console.log( "Draw " + timestamp +" / " + event.begin + " + " + i + " * " + stepDuration );
+					draw[id](ctx, xOffset + event.curve[i-1].x*scale, yOffset + event.curve[i-1].y*scale, xOffset + event.curve[i].x*scale, yOffset + event.curve[i].y*scale); 
+				}
+				else if ( playback ) {
+//console.log( "Cue " + timestamp +" / " + (Date.now() - slideStart) +" / " + event.begin + " + " + i + " * " + stepDuration + " = " + Math.max(0,event.begin + i * stepDuration - timestamp) );
+					timeouts.push( setTimeout( 
+						draw[id], Math.max(0,event.begin + i * stepDuration - (Date.now() - slideStart)), ctx, 
+							xOffset + event.curve[i-1].x*scale,	
+							yOffset + event.curve[i-1].y*scale, 
+							xOffset + event.curve[i].x*scale, 
+							yOffset + event.curve[i].y*scale 
+						) 
+					);
+				}
+			}
+		}
+
+	};
+
+	function eraseCurve( id, event, timestamp ) {
+		if  ( event.curve.length > 1 ) {
+			var ctx = drawingCanvas[id].context;
+			var scale = drawingCanvas[id].scale;
+			var xOffset = drawingCanvas[id].xOffset;
+			var yOffset = drawingCanvas[id].yOffset;
+
+			var stepDuration = ( event.end - event.begin )/ event.curve.length;
+			for (var i = 0; i < event.curve.length; i++) {
+				if (event.begin + i * stepDuration <= (Date.now() - slideStart)) {
+					eraseWithSponge(ctx, xOffset + event.curve[i].x*scale, yOffset + event.curve[i].y*scale); 
+				}
+				else if ( playback ) {
+					timeouts.push( setTimeout( 
+						eraseWithSponge, Math.max(0,event.begin + i * stepDuration - (Date.now() - slideStart)), ctx, 
+							xOffset + event.curve[i].x * scale, 
+							yOffset + event.curve[i].y * scale 
+						) 
+					);
+				}
+			}
+		}
+
+	};
+
+
+	function startDrawing( x, y, erase ) {
+			var ctx = drawingCanvas[mode].context;
+			var scale = drawingCanvas[mode].scale;
+			var xOffset = drawingCanvas[mode].xOffset;
+			var yOffset = drawingCanvas[mode].yOffset;
+			xLast = x * scale + xOffset;
+			yLast = y * scale + yOffset;
+			if ( erase == true) {
+				event = { type: "erase", begin: Date.now() - slideStart, end: null, curve: [{x: x, y: y}]};
+				drawingCanvas[mode].canvas.style.cursor = 'url("' + path + 'img/sponge.png") ' + eraserDiameter + ' ' + eraserDiameter + ', auto';
+				eraseWithSponge(ctx, x * scale + xOffset, y * scale + yOffset);
+			}
+			else {
+				event = { type: "draw", begin: Date.now() - slideStart, end: null, curve: [{x: x, y: y}] };
+			}		
+	}
+
+
+	function showSponge(x,y) {
+		if ( event ) {
+			event.type = "erase";
+			event.begin = Date.now() - slideStart;
+			// show sponge image 
+			drawingCanvas[mode].sponge.style.left = (x - eraserDiameter) +"px" ;
+			drawingCanvas[mode].sponge.style.top = (y - eraserDiameter) +"px" ;
+			drawingCanvas[mode].sponge.style.visibility = "visible";
+			eraseWithSponge(drawingCanvas[mode].context,x,y);
+			// broadcast
+			var message = new CustomEvent('send');
+			message.content = { sender: 'chalkboard-plugin', type: 'startErasing', x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale };
+			document.dispatchEvent( message );
+		}
+	}
+
+	function drawSegment( x, y, erase ) {
+		var ctx = drawingCanvas[mode].context;
+		var scale = drawingCanvas[mode].scale;
+		var xOffset = drawingCanvas[mode].xOffset;
+		var yOffset = drawingCanvas[mode].yOffset;
+		if ( !event ) {
+			// safeguard if broadcast hickup
+			startDrawing( x, y, erase );
+		}
+		event.curve.push({x: x, y: y});
+		if(y * scale + yOffset < drawingCanvas[mode].height && x * scale + xOffset < drawingCanvas[mode].width) {
+			if ( erase ) {
+				eraseWithSponge(ctx, x * scale + xOffset, y * scale + yOffset);
+			}
+			else {
+				draw[mode](ctx, xLast, yLast, x * scale + xOffset, y * scale + yOffset);
+			}
+			xLast = x * scale + xOffset;
+			yLast = y * scale + yOffset;
+		}
+	}
+
+	function stopDrawing() {
+		if ( event ) {
+			event.end = Date.now() - slideStart;
+			if ( event.type == "erase" || event.curve.length > 1 ) {
+				// do not save a line with a single point only
+				recordEvent( event );
+			}
+			event = null;
+		}
+	}
+
+
+/*****************************************************************
+** User interface
+******************************************************************/
+
+
+// TODO: check all touchevents
+	document.addEventListener('touchstart', function(evt) {
+		if ( !readOnly && evt.target.getAttribute('data-chalkboard') == mode ) {
+//			var ctx = drawingCanvas[mode].context;
+			var scale = drawingCanvas[mode].scale;
+			var xOffset = drawingCanvas[mode].xOffset;
+			var yOffset = drawingCanvas[mode].yOffset;
+
+			evt.preventDefault();
+		        var touch = evt.touches[0];
+		        mouseX = touch.pageX;
+		        mouseY = touch.pageY;
+			startDrawing( (mouseX - xOffset)/scale, (mouseY-yOffset)/scale, false );
+			// broadcast
+			var message = new CustomEvent('send');
+			message.content = { sender: 'chalkboard-plugin', type: 'startDrawing', x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale, erase: false };
+			document.dispatchEvent( message );
+/*
+			xLast = mouseX;
+			yLast = mouseY;
+			event = { type: "draw", begin: Date.now() - slideStart, end: null, curve: [{x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale}] };
+*/
+			touchTimeout = setTimeout( showSponge, 500, mouseX, mouseY );
+		}	
+	}, false);
+
+	document.addEventListener('touchmove', function(evt) {
+		clearTimeout( touchTimeout );
+		touchTimeout = null;
+		if ( event ) {
+//			var ctx = drawingCanvas[mode].context;
+			var scale = drawingCanvas[mode].scale;
+			var xOffset = drawingCanvas[mode].xOffset;
+			var yOffset = drawingCanvas[mode].yOffset;
+
+		        var touch = evt.touches[0];
+        		mouseX = touch.pageX;
+        		mouseY = touch.pageY;
+        		if (mouseY < drawingCanvas[mode].height && mouseX < drawingCanvas[mode].width) {
+        		    	evt.preventDefault();
+				// move sponge
+				if ( event.type == "erase" ) {
+					drawingCanvas[mode].sponge.style.left = (mouseX - eraserDiameter) +"px" ; 
+					drawingCanvas[mode].sponge.style.top = (mouseY - eraserDiameter) +"px" ; 
+				}
+			}
+
+			drawSegment( (mouseX - xOffset)/scale, (mouseY-yOffset)/scale, ( event.type == "erase" ) );
+			// broadcast
+			var message = new CustomEvent('send');
+			message.content = { sender: 'chalkboard-plugin', type: 'drawSegment', x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale, erase: ( event.type == "erase" ) };
+			document.dispatchEvent( message );
+/*
+        		if (mouseY < drawingCanvas[mode].height && mouseX < drawingCanvas[mode].width) {
+        		    	evt.preventDefault();
+				event.curve.push({x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale});
+				if ( event.type == "erase" ) {
+					drawingCanvas[mode].sponge.style.left = (mouseX - eraserDiameter) +"px" ; 
+					drawingCanvas[mode].sponge.style.top = (mouseY - eraserDiameter) +"px" ; 
+			                eraseWithSponge(ctx, mouseX, mouseY);
+				}
+				else {
+			                draw[mode](ctx, xLast, yLast, mouseX, mouseY);
+				}
+				xLast = mouseX;
+				yLast = mouseY;
+			}
+*/
+		}
+	}, false);
+
+
+	document.addEventListener('touchend', function(evt) {
+		clearTimeout( touchTimeout );
+		touchTimeout = null;
+		// hide sponge image
+		drawingCanvas[mode].sponge.style.visibility = "hidden"; 
+		stopDrawing();
+		// broadcast
+		var message = new CustomEvent('send');
+		message.content = { sender: 'chalkboard-plugin', type: 'stopDrawing' };
+		document.dispatchEvent( message );
+/*
+		if ( event ) {
+			event.end = Date.now() - slideStart;
+			if ( event.type == "erase" || event.curve.length > 1 ) {
+				// do not save a line with a single point only
+				recordEvent( event );
+			}
+			event = null;
+		}
+*/
+	}, false);
+
+	document.addEventListener( 'mousedown', function( evt ) {
+//console.log( "Read only: " + readOnly );
+		if ( !readOnly && evt.target.getAttribute('data-chalkboard') == mode ) {
+//console.log( "mousedown: " + evt.button );
+//			var ctx = drawingCanvas[mode].context;
+			var scale = drawingCanvas[mode].scale;
+			var xOffset = drawingCanvas[mode].xOffset;
+			var yOffset = drawingCanvas[mode].yOffset;
+
+			mouseX = evt.pageX;
+			mouseY = evt.pageY;
+			startDrawing( (mouseX - xOffset)/scale, (mouseY-yOffset)/scale, ( evt.button == 2) );
+			// broadcast
+			var message = new CustomEvent('send');
+			message.content = { sender: 'chalkboard-plugin', type: 'startDrawing', x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale, erase: ( evt.button == 2) };
+			document.dispatchEvent( message );
+/*
+			xLast = mouseX;
+			yLast = mouseY;
+			if ( evt.button == 2) {
+				event = { type: "erase", begin: Date.now() - slideStart, end: null, curve: [{x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale}]};
+				drawingCanvas[mode].canvas.style.cursor = 'url("' + path + 'img/sponge.png") ' + eraserDiameter + ' ' + eraserDiameter + ', auto';
+				eraseWithSponge(ctx,mouseX,mouseY);
+			}
+			else {
+				event = { type: "draw", begin: Date.now() - slideStart, end: null, curve: [{x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale}] };
+			}		
+*/
+		}
+	} );
+
+
+	document.addEventListener( 'mousemove', function( evt ) {
+		if ( event ) {
+//			var ctx = drawingCanvas[mode].context;
+			var scale = drawingCanvas[mode].scale;
+			var xOffset = drawingCanvas[mode].xOffset;
+			var yOffset = drawingCanvas[mode].yOffset;
+
+			mouseX = evt.pageX;
+			mouseY = evt.pageY;
+			drawSegment( (mouseX - xOffset)/scale, (mouseY-yOffset)/scale, ( event.type == "erase" ) );
+			// broadcast
+			var message = new CustomEvent('send');
+			message.content = { sender: 'chalkboard-plugin', type: 'drawSegment', x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale, erase: ( event.type == "erase" ) };
+			document.dispatchEvent( message );
+/*
+			event.curve.push({x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale});
+			if(mouseY < drawingCanvas[mode].height && mouseX < drawingCanvas[mode].width) {
+				if ( event.type == "erase" ) {
+					eraseWithSponge(ctx,mouseX,mouseY);
+				}
+				else {
+					draw[mode](ctx, xLast, yLast, mouseX,mouseY);
+				}
+				xLast = mouseX;
+				yLast = mouseY;
+			}
+*/
+		}
+	} );
+
+	
+	document.addEventListener( 'mouseup', function( evt ) {
+		drawingCanvas[mode].canvas.style.cursor = pen[mode];
+		if ( event ) {
+			stopDrawing();
+			// broadcast
+			var message = new CustomEvent('send');
+			message.content = { sender: 'chalkboard-plugin', type: 'stopDrawing' };
+			document.dispatchEvent( message );
+/*			if(evt.button == 2){
+			}
+			event.end = Date.now() - slideStart;
+			if ( event.type == "erase" || event.curve.length > 1 ) {
+				// do not save a line with a single point only
+				recordEvent( event );
+			}
+			event = null;
+*/
+		}
+	} );
+
+
+	window.addEventListener( "resize", function() {
+//console.log("resize");
+		// Resize the canvas and draw everything again
+		var timestamp = Date.now() - slideStart;
+	        if ( !playback ) {
+			timestamp = getSlideDuration();
+		}
+
+//console.log( drawingCanvas[0].scale + "/" + drawingCanvas[0].xOffset + "/" +drawingCanvas[0].yOffset );
+		for (var id = 0; id < 2; id++ ) {
+			drawingCanvas[id].width  = window.innerWidth;
+			drawingCanvas[id].height = window.innerHeight;
+			drawingCanvas[id].canvas.width  = drawingCanvas[id].width;
+			drawingCanvas[id].canvas.height = drawingCanvas[id].height;
+			drawingCanvas[id].context.canvas.width  = drawingCanvas[id].width;
+			drawingCanvas[id].context.canvas.height = drawingCanvas[id].height;
+
+			drawingCanvas[id].scale = Math.min( drawingCanvas[id].width/storage[id].width, drawingCanvas[id].height/storage[id].height );
+			drawingCanvas[id].xOffset = (drawingCanvas[id].width - storage[id].width * drawingCanvas[id].scale)/2;
+			drawingCanvas[id].yOffset = (drawingCanvas[id].height - storage[id].height * drawingCanvas[id].scale)/2;
+//console.log( drawingCanvas[id].scale + "/" + drawingCanvas[id].xOffset + "/" +drawingCanvas[id].yOffset );
+		}
+//console.log( window.innerWidth + "/" + window.innerHeight);
+		startPlayback( timestamp, mode, true );
+
+	} );
+
+	function updateReadOnlyMode() {
+//console.log("updateReadOnlyMode");
+		if ( config.readOnly == undefined ) {
+			readOnly = ( getSlideDuration() > 0 );	
+			if ( readOnly ) {
+				drawingCanvas[0].container.style.cursor = 'default';
+				drawingCanvas[1].container.style.cursor = 'default';
+				drawingCanvas[0].canvas.style.cursor = 'default';
+				drawingCanvas[1].canvas.style.cursor = 'default';
+				if ( notescanvas.style.pointerEvents != "none" ) {
+					event = null;
+					notescanvas.style.background = 'rgba(0,0,0,0)';
+					notescanvas.style.pointerEvents = "none";
+				}
+	
+			}
+			else {
+				drawingCanvas[0].container.style.cursor = pen[0];
+				drawingCanvas[1].container.style.cursor = pen[1];
+				drawingCanvas[0].canvas.style.cursor = pen[0];
+				drawingCanvas[1].canvas.style.cursor = pen[1];
+			}
+		}
+	}
+
+	Reveal.addEventListener( 'ready', function( evt ) {
+//console.log('ready');
+		if ( !printMode ) {
+			slideStart = Date.now();
+			slideIndices = Reveal.getIndices();
+			if ( !playback ) {
+				startPlayback( getSlideDuration(), 0 );
+			}
+			if ( Reveal.isAutoSliding() ) {
+				var event = new CustomEvent('startplayback');
+				event.timestamp = 0;
+				document.dispatchEvent( event );
+			}
+			updateReadOnlyMode();			
+		}
+		else {
+			whenReady( createPrintout );
+		}
+	});
+	Reveal.addEventListener( 'slidechanged', function( evt ) {
+//		clearTimeout( slidechangeTimeout );
+//console.log('slidechanged');
+		if ( !printMode ) {
+			slideStart = Date.now();
+			slideIndices = Reveal.getIndices();
+			closeChalkboard();				
+			clearCanvas( 0 );
+			clearCanvas( 1 );
+			if ( !playback ) {
+				slidechangeTimeout = setTimeout( startPlayback, transition, getSlideDuration(), 0 );
+			}
+			if ( Reveal.isAutoSliding() ) {
+				var event = new CustomEvent('startplayback');
+				event.timestamp = 0;
+				document.dispatchEvent( event );
+			}
+			
+			updateReadOnlyMode();			
+		}
+	});
+	Reveal.addEventListener( 'fragmentshown', function( evt ) {
+//		clearTimeout( slidechangeTimeout );
+//console.log('fragmentshown');
+		if ( !printMode ) {
+			slideStart = Date.now();		
+			slideIndices = Reveal.getIndices();		
+			closeChalkboard();				
+			clearCanvas( 0 );
+			clearCanvas( 1 );
+			if ( Reveal.isAutoSliding() ) {
+				var event = new CustomEvent('startplayback');
+				event.timestamp = 0;
+				document.dispatchEvent( event );
+			}				
+			else if ( !playback ) {
+				// 
+				startPlayback( getSlideDuration(), 0 );
+//				closeChalkboard();				
+			}
+			updateReadOnlyMode();			
+		}
+	});
+	Reveal.addEventListener( 'fragmenthidden', function( evt ) {
+//		clearTimeout( slidechangeTimeout );
+//console.log('fragmenthidden');
+		if ( !printMode ) {
+			slideStart = Date.now();		
+			slideIndices = Reveal.getIndices();		
+			closeChalkboard();				
+			clearCanvas( 0 );
+			clearCanvas( 1 );
+			if ( Reveal.isAutoSliding() ) {
+				document.dispatchEvent( new CustomEvent('stopplayback') );
+			}				
+			else if ( !playback ) {
+				startPlayback( getSlideDuration() );
+				closeChalkboard();				
+			}
+			updateReadOnlyMode();			
+		}
+	});
+
+	Reveal.addEventListener( 'autoslideresumed', function( evt ) {
+//console.log('autoslideresumed');
+		var event = new CustomEvent('startplayback');
+		event.timestamp = 0;
+		document.dispatchEvent( event );
+	});
+	Reveal.addEventListener( 'autoslidepaused', function( evt ) {
+//console.log('autoslidepaused');
+		document.dispatchEvent( new CustomEvent('stopplayback') );
+
+		// advance to end of slide
+//		closeChalkboard();				
+		startPlayback( getSlideDuration(), 0 );
+	});
+
+	function toggleNotesCanvas() {
+		if ( !readOnly ) {
+			if ( mode == 1 ) {
+				toggleChalkboard();
+				notescanvas.style.background = background[0]; //'rgba(255,0,0,0.5)';
+				notescanvas.style.pointerEvents = "auto";
+			}
+			else {
+				if ( notescanvas.style.pointerEvents != "none" ) {
+					event = null;
+					notescanvas.style.background = 'rgba(0,0,0,0)';
+					notescanvas.style.pointerEvents = "none";
+				}
+				else {
+					notescanvas.style.background = background[0]; //'rgba(255,0,0,0.5)';
+					notescanvas.style.pointerEvents = "auto";
+				}
+			}
+		}
+	};
+
+	function toggleChalkboard() {
+//console.log("toggleChalkboard " + mode);
+		if ( mode == 1 ) {
+			event = null;
+			if ( !readOnly ) recordEvent( { type:"close", begin: Date.now() - slideStart } );
+			closeChalkboard();
+		}
+		else {
+			showChalkboard();
+			if ( !readOnly ) recordEvent( { type:"open", begin: Date.now() - slideStart } );
+		}
+	};
+
+	function clear() {
+		if ( !readOnly ) {
+			recordEvent( { type:"clear", begin: Date.now() - slideStart } );
+			clearCanvas( mode );
+			// broadcast
+			var message = new CustomEvent('send');
+			message.content = { sender: 'chalkboard-plugin', type: 'clear' };
+			document.dispatchEvent( message );
+		}
+	};
+
+	function resetSlide( force ) {
+		var ok = force || confirm("Please confirm to delete chalkboard drawings on this slide!");
+		if ( ok ) {
+//console.log("resetSlide ");
+			stopPlayback();
+			slideStart = Date.now();			
+			event = null;
+			closeChalkboard();
+
+			clearCanvas( 0 );
+			clearCanvas( 1 );
+
+			mode = 1;
+			var slideData = getSlideData();	
+			slideData.duration = 0;
+			slideData.events = [];
+			mode = 0;
+			var slideData = getSlideData();	
+			slideData.duration = 0;
+			slideData.events = [];
+
+			updateReadOnlyMode();			
+			// broadcast
+			var message = new CustomEvent('send');
+			message.content = { sender: 'chalkboard-plugin', type: 'resetSlide' };
+			document.dispatchEvent( message );
+		}
+	};
+
+	function resetStorage( force ) {
+		var ok = force || confirm("Please confirm to delete all chalkboard drawings!");
+		if ( ok ) {
+			stopPlayback();
+			slideStart = Date.now();
+			clearCanvas( 0 );
+			clearCanvas( 1 );
+			if ( mode == 1 ) {
+				event = null;
+				closeChalkboard();
+			}
+			storage = [
+					{ width: drawingCanvas[0].width - 2 * drawingCanvas[0].xOffset, height: drawingCanvas[0].height - 2 * drawingCanvas[0].yOffset, data: []},
+					{ width: drawingCanvas[1].width, height: drawingCanvas[1].height, data: []}
+				];
+
+			updateReadOnlyMode();			
+			// broadcast
+			var message = new CustomEvent('send');
+			message.content = { sender: 'chalkboard-plugin', type: 'init', storage: storage, mode: mode };
+			document.dispatchEvent( message );
+		}
+	};
+
+	this.drawWithPen = drawWithPen;
+	this.drawWithChalk = drawWithChalk;
+	this.toggleNotesCanvas = toggleNotesCanvas;
+	this.toggleChalkboard = toggleChalkboard;
+	this.startRecording = startRecording;
+	this.clear = clear;
+	this.reset = resetSlide;
+	this.resetAll = resetStorage;
+	this.download = downloadData;
+
+	return this;
+})();