added left/right navigation arrows

lib/ComicBook.js

@@ -183,14 +183,35 @@ function ComicBook(id, srcs, opts) {
 				top: "40%",
 				left: "40%"
 			})
-			.draggable()
+			.draggable(),
+		
+		/**
+		 * Page navigation
+		 */
+		navigation: {
+			
+			left: $(document.createElement("div"))
+				.addClass("control navigate left")
+				.click(function(e){
+					ComicBook.prototype.drawPrevPage();
+				}),
+			
+			right: $(document.createElement("div"))
+				.addClass("control navigate right")
+				.click(function(e) {
+					ComicBook.prototype.drawNextPage();
+				})
+		}
 	};
 	
 	/**
 	 * TODO: center, make sure they never leave the visible portion of the screen
 	 */
 	ComicBook.prototype.renderControls = function() {
-		$(canvas).after(this.getControl("image").hide());
+		$(canvas)
+			.after(this.getControl("navigation").left)
+			.after(this.getControl("navigation").right)
+			.after(this.getControl("image").hide());
 	};
 	
 	ComicBook.prototype.getControl = function(control) {
@@ -263,7 +284,7 @@ function ComicBook(id, srcs, opts) {
 
 		// show load status panel
 		if ($("#status").length === 0) {
-			$(canvas).after('<div class="control" id="status"><p></p></div>');
+			$(canvas).after('<div class="floating control" id="status"><p></p></div>');
 		}
 		
 		// I am using recursion instead of a forEach loop so that the next image is
@@ -352,7 +373,8 @@ function ComicBook(id, srcs, opts) {
 					  : window.innerWidth / width; // scale down if the window is narrower than the page
 				break;
 				
-			default:throw "invalid zoomMode";
+			default:
+				throw "invalid zoomMode";
 		}
 		
 		var canvas_width  = page.width * zoom_scale;
@@ -402,6 +424,9 @@ function ComicBook(id, srcs, opts) {
 		// revert page mode back to double if it was auto switched for a double page spread
 		if (is_double_page_spread) { options.displayMode = "double"; }
 		
+		// resize navigation controls
+		$(".control.navigate").height(window.innerHeight);
+		
 		// user callback
 		if (typeof options.afterDrawPage === "function") {
 			options.afterDrawPage(pointer + 1);

styles.css

@@ -9,15 +9,41 @@ body {
 }
 
 .control {
-	background-color: #000;
 	color: #fff;
 	background-color: #111;
 	margin: 5px;
 	padding: 8px;
+	opacity: .9;
+}
+
+.control.floating {
 	-webkit-border-radius: 4px;
 	-moz-border-radius: 4px;
 	border-radius: 4px;
-	opacity: .9;
+}
+
+.control.navigate {
+	position: fixed;
+	top: 0;
+	cursor: pointer;
+	width: 128px;
+	background: center no-repeat;
+	opacity: 0;
+}
+
+.control.navigate:hover {
+	display: block;
+	opacity: 1;
+}
+
+.control.navigate.left {
+	left: 0;
+	background-image: url(img/left.png);
+}
+
+.control.navigate.right {
+	right: 0;
+	background-image: url(img/right.png);
 }
 
 .ui-draggable {