Page Flip Demo: Page Tabs

The standard Page Flip Demo does not allow links and input elements displayed on the canvas to be clicked. However, adding the CSS attribute "pointer-events" with a value of "none" to the canvas element fixes this problem for links, rendering them "clickable" again. To make input elements usable, line 82 in the JS "event.preventDefault();" needs to be removed or commented out. However, the result of this is that text selection on the page is re-enabled, making the page flip animation less attractive (as the page text is selected when the page is dragged). In order to fix this we can use a CSS-only solution: "user-select" and "-webkit-touch-callout" applied to the containing div of each page.

HTML

<body>
		<div id="book">
			<canvas id="pageflip-canvas"></canvas>
			<div id="pages">
                <section>
					<div id="page0">
						<h2>Test Page</h2>
						<p>This demo is fantastic, apart from the fact that link and input elements aren't supported. The canvas element and JS on which the entire magic relies, renders both "unclickable" - a major drawback. See below:</p>
                        <p><a href="#">Click me!</a></p>
                        <p><input type="text"></input></p>
                    </div>
                </section>
				<section>
					<div id="page1">
						<h2>History</h2>
						<p>Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component, powering applications like Dashboard widgets and the Safari browser. Later, it was adopted by Gecko browsers and Opera and standardized by the WHATWG on new proposed specifications for next generation web technologies.</p>
					</div>
				</section>
				<section>
					<div id="page2">
						<h2>Usage</h2>
						<p>Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition.</p>
					</div>
				</section>
				<section>
					<div id="page3">
						<h2>Reactions</h2>
						<p>At the time of its introduction the canvas element was met with mixed reactions from the web standards community. There have been arguments against Apple's decision to create a new proprietary element instead of supporting the SVG standard. There are other concerns about syntax e.g. the absence of a namespace.</p>
					</div>
				</section>
				<section>
					<div id="page4">
						<h2>Support</h2>
						<p>The element is currently supported by the latest versions of Mozilla Firefox, Google Chrome, Safari, and...

CSS

body, h2, p {
	margin: 0;
	padding: 0;
}

body {
	background-color: #444;
	color: #333;
	font-family: Helvetica, sans-serif;
}

#book {
	background: url("https://dl.dropboxusercontent.com/u/3799114/page-flip-demo/book.png") no-repeat;
	position: absolute;
	width: 830px;
	height: 260px;
	left: 50%;
	top: 50%;
	margin-left: -400px;
	margin-top: -125px;
}

#pages section {
	background: url("https://dl.dropboxusercontent.com/u/3799114/page-flip-demo/paper.png") no-repeat;
	display: block;
	width: 400px;
	height: 250px;
	position: absolute;
	left: 415px;
	top: 5px;
	overflow: hidden;
    
    /* The purpose of this block is to disable text selection, re-enabled on account of the removal of "event.preventDefault();" from the JS */ 
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}
	#pages section>div {
		display: block;
		width: 400px;
		height: 250px;
		font-size: 12px;
    

	}
	#pages section p,
	#pages section h2 {
		padding: 3px 35px;
		line-height: 1.4em;
		text-align: justify;
	}
	#pages section h2{
		margin: 15px 0 10px;
	}

#pageflip-canvas {
	position: absolute;
	z-index: 100;
    pointer-events: none;
}

.nav {
    position: absolute;
    bottom: -30px;
}

.nav a {
    color: #FFF;
    text-decoration: none;
    padding-right: 20px;
}
.nav a:hover {
    color: red;
}
}

JavaScript

(function() {
	
	// Dimensions of the whole book
	var BOOK_WIDTH = 830;
	var BOOK_HEIGHT = 260;
	
	// Dimensions of one page in the book
	var PAGE_WIDTH = 400;
	var PAGE_HEIGHT = 250;
	
	// Vertical spacing between the top edge of the book and the papers
	var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
	
	// The canvas size equals to the book dimensions + this padding
	var CANVAS_PADDING = 60;
	
	var page = 0;
	
	var canvas = document.getElementById( "pageflip-canvas" );
	var context = canvas.getContext( "2d" );
	
	var mouse = { x: 0, y: 0 };
	
	var flips = [];
	
	var book = document.getElementById( "book" );
	
	// List of all the page elements in the DOM
	var pages = book.getElementsByTagName( "section" );
	
	// Organize the depth of our pages and create the flip definitions
	for( var i = 0, len = pages.length; i < len; i++ ) {
		pages[i].style.zIndex = len - i;
		
		flips.push( {
			// Current progress of the flip (left -1 to right +1)
			progress: 1,
			// The target value towards which progress is always moving
			target: 1,
			// The page DOM element related to this flip
			page: pages[i], 
			// True while the page is being dragged
			dragging: false
		} );
	}
	
	// Resize the canvas to match the book size
	canvas.width = BOOK_WIDTH + ( CANVAS_PADDING * 2 );
	canvas.height = BOOK_HEIGHT + ( CANVAS_PADDING * 2 );
	
	// Offset the canvas so that it's padding is evenly spread around the book
	canvas.style.top = -CANVAS_PADDING + "px";
	canvas.style.left = -CANVAS_PADDING + "px";
	
	// Render the page flip 60 times a second
	setInterval( render, 1000 / 60 );
	
	document.addEventListener( "mousemove", mouseMoveHandler, false );
	document.addEventListener( "mousedown", mouseDownHandler, false );
	document.addEventListener( "mouseup", mouseUpHandler, false );
	
	function mouseMoveHandler( event ) {
		// Offset mouse position so that the top of the book spine is 0,0
		mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
		mouse.y = event.clientY -...