added simple click controls, click left side to go back, right side to go forward

scripts.js

@@ -3,8 +3,6 @@ var book;
 
 window.onload = function() {
 
-	book = new ComicBook();
-	
 	var srcs = {
 		1: "http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/00.jpg",
 		2: "http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/01.jpg",
@@ -16,6 +14,8 @@ window.onload = function() {
 		8: "http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/07.jpg"
 	};
 
+	book = new ComicBook();
+
 	book.draw("comic", srcs);
 }
 
@@ -28,30 +28,40 @@ function ComicBook() {
 	
 	var buffer = 4;
 	var pointer = 0;
-
+	var loaded = 0;
+	
 	/* 
 	 * @param {String} id The canvas ID to draw the comic on.
-	 * @param {Array} srcs An array of all the comic page srcs, in order
+	 * @param {Object} srcs An array of all the comic page srcs, in order
+	 * @see #preload
 	 */
 	this.draw = function(id, srcs) {
-
+	
 		// setup canvas
 		canvas = document.getElementById(id);
 		context = canvas.getContext("2d");
-		
-		preload(srcs);
-	}
-	
-	function preload(srcs) {
 
-		var loaded = 0;
+		// preload images
+		preload(srcs);
+		
+		// add page controls
+		canvas.addEventListener("click", comicOnClick, false);
+	}
+
+	/**
+	 * Preload all images, draw the page only after a given number have been loaded.
+	 *
+	 * @param srcs {Object} srcs
+	 * @see #drawPage
+	 */
+	function preload(srcs) {
 
 		if (srcs.length < buffer) buffer = srcs.length; // don't get stuck if the buffer level is higher than the number of pages
 
 		for (i in srcs) {
 		
 			var page = new Image();
-
+			
 			page.src = srcs[i];
 			
 			page.onload = function() {
@@ -62,27 +72,71 @@ function ComicBook() {
 	}
 
 	/**
+	 * Draw the current page in the canvas
+	 *
 	 * TODO: break this down into drawSinglePage() & drawDoublePage()
 	 * TODO: if the current browser doesn't have canvas support, use img tags
 	 */
 	function drawPage() {
 
-		console.log(pointer, pages);
-
 		var page = pages[pointer];
 		
 		canvas.width = page.width;
 		canvas.height = page.height;
 		context.drawImage(page, 0, 0);
 	}
-	
+
-	this.drawNextPage = function() {
+	/**
-		if (pointer < pointer + 1) pointer++;
+	 * Increment the counter and draw the page in the canvas
-		drawPage();
+	 * 
+	 * @see #drawPage
+	 */
+	function drawNextPage() {
+		if (pointer < pointer + 1) {
+			pointer++;
+			drawPage();
+		}
 	}
 
-	this.drawPrevPage = function() {
+
-		if (pointer > 0) pointer--;
+	/**
-		drawPage();
+	 * Decrement the counter and draw the page in the canvas
+	 *
+	 * @see #drawPage
+	 */
+	function drawPrevPage() {
+		if (pointer > 0) {
+			pointer--;
+			drawPage();
+		}
+	}
+
+	function comicOnClick(e) {
+		switch (getCursorPosition(e)) {
+			case "left": drawPrevPage(); break;
+			case "right": drawNextPage(); break;
+		}
+	}
+
+	/**
+	 * Figure out the cursor position relative to the canvas.
+	 * 
+	 * Thanks to: Mark Pilgrim & http://diveintohtml5.org/canvas.html
+	 */
+	function getCursorPosition(e) {
+		
+		var x;
+
+		// check if page relative positions exist
+		if (e.pageX) x = e.pageX;
+
+		// if not figure them out
+		else  x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+
+		// make the position relative to the canvas
+		x -= canvas.offsetLeft;
+
+		// check if the user clicked on the left or right side
+		return (x <= canvas.width / 2) ? 'left' : 'right';
 	}
 }

styles.css

@@ -1,4 +1,6 @@
 canvas {
+	/*
 	background-color: #ddd;
 	width: 100%;
+	*/
 }