/*****************************************************************
 ** Author: Asvin Goel, goel@telematique.eu
 **
 ** A plugin for reveal.js adding a chalkboard. 
 **
 ** Version: 0.3
 ** 
 ** 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 path;
		if (document.currentScript) {
			path = document.currentScript.src.slice(0, -13);
		} else {
			var sel = document.querySelector('script[src$="/chalkboard.js"]')
			if (sel) {
				path = sel.src.slice(0, -13);
			}
		}
        //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 = [ path + 'img/boardmarker.png', path + 'img/boardmarker.png' ];
		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 = [ path + 'img/boardmarker.png', path + 'img/chalk.png' ];
		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 toggleEraserButton = config.toggleEraserButton == undefined ? true : config.toggleEraserButton;
	var transition = config.transition  || 800;

	var readOnly = config.readOnly;

    // MARIO
    var eraseMode = false;

    
    /*****************************************************************
     ** Setup
     ******************************************************************/

	var eraserDiameter = 20;

	if ( toggleChalkboardButton ) 
    {
		var buttonC = document.createElement( 'div' );
		buttonC.id             = "toggle-chalkboard";
		buttonC.style.position = "absolute";
		buttonC.style.zIndex   = 30;
		buttonC.style.fontSize = "20px";
		buttonC.style.left     = "10px";
		buttonC.style.bottom   = "10px";
		buttonC.style.top      = "auto";
		buttonC.style.right    = "auto";
		buttonC.style.padding  = "3px";
		buttonC.style.borderRadius = "3px";
        buttonC.style.color    = "lightgrey";
		buttonC.innerHTML      = '<i onclick="RevealChalkboard.toggleChalkboard()" class="fa fa-pencil-square-o"></i>';
		document.querySelector(".reveal").appendChild( buttonC );
	}

	if ( toggleNotesButton ) 
    {
		var buttonN = document.createElement( 'div' );
		buttonN.id             = "toggle-notes";
		buttonN.style.position = "absolute";
		buttonN.style.zIndex   = 30;
		buttonN.style.fontSize = "20px";
		buttonN.style.left     = "50px";
		buttonN.style.bottom   = "10px";
		buttonN.style.top      = "auto";
		buttonN.style.right    = "auto";
		buttonN.style.padding  = "3px";
		buttonN.style.borderRadius = "3px";
        buttonN.style.color    = "lightgrey";
		buttonN.innerHTML      = '<i onclick="RevealChalkboard.toggleNotesCanvas()" class="fa fa-pencil"></i>';
		document.querySelector(".reveal").appendChild( buttonN );
	}

	if ( toggleEraserButton ) 
    {
		var buttonE = document.createElement( 'div' );
		buttonE.id             = "button-eraser";
		buttonE.style.position = "absolute";
		buttonE.style.zIndex   = 30;
		buttonE.style.fontSize = "20px";
		buttonE.style.left     = "90px";
		buttonE.style.bottom   = "10px";
		buttonE.style.top      = "auto";
		buttonE.style.right    = "auto";
		buttonE.style.padding  = "3px";
		buttonE.style.borderRadius = "3px";
        buttonE.style.color    = "lightgrey";
		buttonE.innerHTML      = '<i onclick="RevealChalkboard.toggleSponge()" class="fa fa-eraser"></i>';
		document.querySelector(".reveal").appendChild( buttonE );
    }

	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 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 = 'url("' + pen[ id ] + '"), auto';

		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 = 'url("' + pen[ id ] + '"), auto';
		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));

	if ( config.src != null ) {
		loadData( config.src );
	}


	/**
	 * Load data.
	 */
	function loadData( filename ) {
		var xhr = new XMLHttpRequest();
		xhr.onload = function() {
			if (xhr.readyState === 4) {
				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';
					}
				}
			}
			else {
				config.readOnly = undefined;
				readOnly = undefined;
				console.warn( 'Failed to get file ' + filename +". ReadyState: " + xhr.readyState + ", Status: " + xhr.status);
			}
		};

		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 );
		}
	}

	/**
	 * Download data.
	 */
	function downloadData() {
		var a = document.createElement('a');
		document.body.appendChild(a);	
		try {
			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;
        //console.log("ID: " + id + "/" + mode );
		if (!indices) indices = slideIndices;
		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 ) {
				return storage[id].data[i];
			}
		}
        //console.log(JSON.stringify(indices) + " push");
        
		storage[id].data.push( { slide: indices, events: [], duration: 0 } );
		return storage[id].data[storage[id].data.length-1];
	}

	function hasSlideData( indices, id ) {
		if ( id == undefined ) id = mode;
		if (!indices) indices = slideIndices;
		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 ) {
				return storage[id].data[i].events.length > 0;
			}
		}
		return false;
	}

	/**
	 * 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 );

	function createPrintout( ) {

        // MARIO: we want to print the drawings
		//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;
			}

            // collect next-slides for all slides with board stuff
			for (var i = 0; i < storage[1].data.length; i++) {
                var h = storage[1].data[i].slide.h;
                var v = storage[1].data[i].slide.v;
                var f = storage[1].data[i].slide.f;
				var slide = f ? Reveal.getSlide(h,v,f) : Reveal.getSlide(h,v);
				nextSlide.push( slide.nextSibling );
			}

            // go through board storage, paint image, insert slide
			for (var i = 0; i < storage[1].data.length; i++)
            {
                var h = storage[1].data[i].slide.h;
                var v = storage[1].data[i].slide.v;
                var f = storage[1].data[i].slide.f;
				var slide = f ? Reveal.getSlide(h,v,f) : Reveal.getSlide(h,v);

				var slideData = getSlideData( storage[1].data[i].slide, 1 );

				var imgCanvas = document.createElement('canvas');
				imgCanvas.width  = 2*width;
				imgCanvas.height = 2*height;
                // MARIO: not sure why we have to multiply but 2, but now it looks much better
                // maybe a MacOS retina artifact

                
				var imgCtx = imgCanvas.getContext("2d");
                imgCtx.imageSmoothingEnabled = true;

                // setup drawing context: for print, use black on white drawing
                imgCtx.fillStyle = "white";
                color[1] = "black";
				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++) {
							erase( imgCtx, 
								   xOffset + slideData.events[j].curve[k].x*scale, 
								   yOffset + slideData.events[j].curve[k].y*scale
								 );
						}
						break;
					case "clear":
						var newSlide = document.createElement( 'section' );
						newSlide.classList.add( 'future' );
						newSlide.innerHTML = '<h1 style="visibility:hidden">Drawing</h1>';
						newSlide.setAttribute("data-background", 'url("' + imgCanvas.toDataURL("image/png") +'")' );
						slide.parentElement.insertBefore( newSlide, nextSlide[i] );

						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();
						break;
					default:
						break;
					}
				}
				var newSlide = document.createElement( 'section' );
				newSlide.classList.add( 'future' );
				newSlide.innerHTML = '<h1 style="visibility:hidden">Drawing</h1>';
				newSlide.setAttribute("data-background", 'url("' + imgCanvas.toDataURL("image/png") +'")' );
				slide.parentElement.insertBefore( newSlide, nextSlide[i] );

			} 
			Reveal.sync();
		};
		patImg.src = background[1];
	}



    /*****************************************************************
     ** Drawings
     ******************************************************************/

	function drawWithPen(context,fromX,fromY,toX,toY){
		context.lineWidth = 2;
		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 = 2;
		context.lineWidth = brushDiameter;
		context.lineCap = 'round';
		context.fillStyle = color[1]; // 'rgba(255,255,255,0.5)';	
		context.strokeStyle = color[1];
		context.beginPath();
  		context.moveTo(fromX, fromY);		
  		context.lineTo(toX, toY);
  		context.stroke();
	}
    
	function erase(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() {
		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;
	}


	/**
	 * Closes open chalkboard.
	 */
	function closeChalkboard() {
		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;
	}

	/**
	 * Clear current canvas.
	 */
	function clearCanvas( id ) {
		if ( id == 0 ) clearTimeout( slidechangeTimeout );
		drawingCanvas[id].context.clearRect(0,0,drawingCanvas[id].width,drawingCanvas[id].height);
	}

    /*****************************************************************
     ** 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();				
	});

	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 startPlayback( timestamp, finalMode ) {
		updateReadOnlyMode();			

        //console.log("playback " + timestamp );
		slideStart = Date.now() - timestamp;
		closeChalkboard();
		mode = 0;		
		for ( var id = 0; id < 2; id++ ) {
			clearCanvas( id );

            /* MARIO: don't just call getSlideData, since it pushed slide data when nothing is found
               which somehow inserts black slides for printing */
            if (hasSlideData( slideIndices, id ))
            {
			    var slideData = getSlideData( slideIndices, id );
			    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++;
			    }
		    }
        }
        
		if ( finalMode != undefined ) {
			mode = finalMode;
		}
		if( mode == 1 ) showChalkboard();
	};

    
	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 ) {
		var ctx = drawingCanvas[id].context;
		var scale = drawingCanvas[id].scale;
		var xOffset = drawingCanvas[id].xOffset;
		var yOffset = drawingCanvas[id].yOffset;
        
		if  ( event.curve.length > 1 )
        {
			var stepDuration = ( event.end - event.begin )/ ( event.curve.length - 1 );

			for (var i = 1; i < event.curve.length; i++) {
				if (event.begin + i * stepDuration <= (Date.now() - slideStart)) {
					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 ) {
					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 
					) );
				}
			}
		}
        else
        {
            // we need to record and play single points (for math equations)
            var x = xOffset + event.curve[0].x*scale;
            var y = yOffset + event.curve[0].y*scale;
			draw[id](ctx, x, y, x, y);
        }
	};

	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)) {
					erase(ctx, xOffset + event.curve[i].x*scale, yOffset + event.curve[i].y*scale); 
				}
				else if ( playback ) {
					timeouts.push( setTimeout( 
						erase, Math.max(0,event.begin + i * stepDuration - (Date.now() - slideStart)), ctx, 
						xOffset + event.curve[i].x * scale, 
						yOffset + event.curve[i].y * scale 
					) 
					             );
				}
			}
		}

	};

    /*****************************************************************
     ** 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;
			xLast = mouseX;
			yLast = mouseY;

            if (eraseMode)
            {
			    drawingCanvas[mode].sponge.style.visibility = "visible";
			    event = { type: "erase", begin: Date.now() - slideStart, end: null, curve: [{x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale}] };
            }
            else
            {
			    event = { type: "draw", begin: Date.now() - slideStart, end: null, curve: [{x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale}] };
            }
		}	
	}, false);

    
	document.addEventListener('touchmove', function(evt) {
		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];

        	// finger touch has force == 0 -> ignore
            // pencil touch has force != 0 -> process
            if (touch.force != 0)
            {
                mouseX = touch.pageX;
        	    mouseY = touch.pageY;

                if ((mouseX-xLast)*(mouseX-xLast) + (mouseY-yLast)*(mouseY-yLast) > 4.0)
                {
                    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" ; 
			                erase(ctx, mouseX, mouseY);
				        }
				        else
                        {
			                draw[mode](ctx, xLast, yLast, mouseX, mouseY);
				        }
                    
				        xLast = mouseX;
				        yLast = mouseY;
                    }
                }
			}
		}
	}, false);


	document.addEventListener('touchend', function(evt) {
		if ( event ) {
			// hide sponge image
			drawingCanvas[mode].sponge.style.visibility = "hidden"; 
			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 ) {
		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;

			mouseX = evt.pageX;
			mouseY = evt.pageY;
			xLast = mouseX;
			yLast = mouseY;

            if ( evt.button == 2 || eraseMode ) {
				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';
				erase(ctx,mouseX,mouseY);
			}
			else {
				event = { type: "draw", begin: Date.now() - slideStart, end: null, curve: [{x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale}] };
				drawingCanvas[mode].canvas.style.cursor = 'url("' + pen[mode] + '"), auto';
				draw[mode](ctx, xLast, yLast, mouseX,mouseY);
			}		
		}
	}, true );

    
	document.addEventListener( 'mousemove', function( evt ) {
		if ( event )
        {
			mouseX = evt.pageX;
			mouseY = evt.pageY;

            if ((mouseX-xLast)*(mouseX-xLast) + (mouseY-yLast)*(mouseY-yLast) > 4.0)
            {
			    var ctx     = drawingCanvas[mode].context;
			    var scale   = drawingCanvas[mode].scale;
			    var xOffset = drawingCanvas[mode].xOffset;
			    var yOffset = drawingCanvas[mode].yOffset;

			    event.curve.push({x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale});
			    if(mouseY < drawingCanvas[mode].height && mouseX < drawingCanvas[mode].width) {
				    if ( event.type == "erase" ) {
					    erase(ctx,mouseX,mouseY);
				    }
				    else {
					    draw[mode](ctx, xLast, yLast, mouseX,mouseY);
				    }
				    xLast = mouseX;
				    yLast = mouseY;
			    }
            }
		}
	});

    
	document.addEventListener( 'mouseup', function( evt ) {
		if ( event ) {
			if(evt.button == 2){
				drawingCanvas[mode].canvas.style.cursor = 'url("' + pen[mode] + '"), auto';
			}
			event.end = Date.now() - slideStart;

            // we need to record and play single points (for math equations)
			//if ( event.type == "erase" || event.curve.length > 1 )
            {
				recordEvent( event );
			}
			event = null;
		}
	} );

    
	window.addEventListener( "resize", function() {
        //console.log("resize");
        //console.log(Reveal.getScale());
		// 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 );

	} );

	function 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 = 'url("' + pen[0] + '"), auto';;
				drawingCanvas[1].container.style.cursor = 'url("' + pen[1] + '"), auto';;
				drawingCanvas[0].canvas.style.cursor = 'url("' + pen[0] + '"), auto';;
				drawingCanvas[1].canvas.style.cursor = 'url("' + pen[1] + '"), auto';;
			}
		}
	}

	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 {
			createPrintout();
		}
	});


    Reveal.addEventListener( 'slidechanged', function( evt ) {
		if ( !printMode ) {
			slideStart = Date.now();
			slideIndices = Reveal.getIndices();
			closeChalkboard();				
			clearCanvas( 0 );
			clearCanvas( 1 );
			if ( !playback ) {
                // MARIO: show stuff immediately
				//slidechangeTimeout = setTimeout( startPlayback, transition, getSlideDuration(), 0 );
				slidechangeTimeout = setTimeout( startPlayback, 50, getSlideDuration(), 0 );
			}
			if ( Reveal.isAutoSliding() ) {
				var event = new CustomEvent('startplayback');
				event.timestamp = 0;
				document.dispatchEvent( event );
			}
			
			updateReadOnlyMode();
		}
	});


    Reveal.addEventListener( 'fragmentshown', function( evt ) {
		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 );
			}
			updateReadOnlyMode();			
		}
	});


    Reveal.addEventListener( 'fragmenthidden', function( evt ) {
		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 ) {
		var event = new CustomEvent('startplayback');
		event.timestamp = 0;
		document.dispatchEvent( event );
	});
	Reveal.addEventListener( 'autoslidepaused', function( evt ) {
		document.dispatchEvent( new CustomEvent('stopplayback') );
		startPlayback( getSlideDuration(), 0 );
	});



    // check whether slide has blackboard scribbles, and then highlight icon
    function updateIcon()
    {
		if ( !printMode )
        {
		    var idx = Reveal.getIndices();
            if (hasSlideData(idx, 1))
            {
                buttonC.style.color    = "red";
		        buttonC.style.fontSize = "28px";
		        buttonC.style.left     = "6px";
		        buttonC.style.bottom   = "6px";
            }
            else
            {
                buttonC.style.color    = "lightgrey";
		        buttonC.style.fontSize = "20px";
		        buttonC.style.left     = "10px";
		        buttonC.style.bottom   = "10px";
            }
        }
    }
    Reveal.addEventListener( 'slidechanged',   updateIcon );
    Reveal.addEventListener( 'fragmentshown',  updateIcon );    
    Reveal.addEventListener( 'fragmenthidden', updateIcon );

    

    function toggleSponge()
    {
		if ( !readOnly )
        {
            if (eraseMode)
            {
                eraseMode = false;
				drawingCanvas[mode].canvas.style.cursor = 'url("' + pen[mode] + '"), auto';
                buttonE.style.color = "lightgrey";
            }
            else
            {
                eraseMode = true; 
			    drawingCanvas[mode].canvas.style.cursor = 'url("' + path + 'img/sponge.png") ' + eraserDiameter + ' ' + eraserDiameter + ', auto';
                buttonE.style.color = "#2a9ddf";
            }
        }
    }

    
	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";
                    buttonN.style.color = "lightgrey";
				}
				else {
					notescanvas.style.background = background[0]; //'rgba(255,0,0,0.5)';
					notescanvas.style.pointerEvents = "auto";
                    buttonN.style.color = "#2a9ddf";
				}
			}
		}
	};

	function toggleChalkboard() {
        //console.log("toggleChalkboard " + mode);
		if ( mode == 1 ) {
			event = null;
			// MARIO if ( !readOnly ) recordEvent( { type:"close", begin: Date.now() - slideStart } );
			closeChalkboard();
            buttonC.style.color = "lightgrey";
		}
		else {
			showChalkboard();
			// MARIO if ( !readOnly ) recordEvent( { type:"open", begin: Date.now() - slideStart } );
            buttonC.style.color = "#2a9ddf";
		}
	};

	function clear() {
		if ( !readOnly ) {
			recordEvent( { type:"clear", begin: Date.now() - slideStart } );
			clearCanvas( mode );
		}
	};

	function resetSlide( force ) {
		var ok = force || confirm("Please confirm to delete chalkboard drawings on this slide!");
		if ( ok ) {
			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();			
		}
	};

	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();			
		}
	};

	this.drawWithPen = drawWithPen;
	this.drawWithChalk = drawWithChalk;
	this.toggleNotesCanvas = toggleNotesCanvas;
	this.toggleChalkboard = toggleChalkboard;
	this.clear = clear;
	this.reset = resetSlide;
	this.resetAll = resetStorage;
	this.download = downloadData;
    this.toggleSponge = toggleSponge;
    
	return this;
})();