From a2db134e2230b26115fd3466987010c6f1216022 Mon Sep 17 00:00:00 2001
From: Bala Clark <balaclark@gmail.com>
Date: Wed, 7 Jul 2010 12:58:37 +0100
Subject: [PATCH] implemented double page mode, note that manual zooming is now
 broken :/

---
 scripts.js | 76 ++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 57 insertions(+), 19 deletions(-)

diff --git a/scripts.js b/scripts.js
index f0fa9f8..d4a3d43 100644
--- a/scripts.js
+++ b/scripts.js
@@ -10,8 +10,7 @@ window.onload = function() {
 		"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/03.jpg",
 		"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/04.jpg",
 		"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/05.jpg",
-		"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/06.jpg",
-		"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/07.jpg"
+		"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/06.jpg"
 	];
 
 	book = new ComicBook();
@@ -30,7 +29,8 @@ function ComicBook() {
 	var loaded = 0;
 	
 	var scale = 1;
-	var zoomMode = "fitWidth"; // manual / fitWidth / fitHeight
+	var displayMode = "double" // single / double
+	var zoomMode = "manual"; // manual / fitWidth / fitHeight
 
 	/* 
 	 * @param {String} id The canvas ID to draw the comic on.
@@ -56,6 +56,7 @@ function ComicBook() {
 	 * @param new_scale {Number} Scale the canvas to this ratio
 	 */
 	this.zoom = function(new_scale) {
+		zoomMode = "manual";
 		scale = new_scale;
 		drawPage();
 	}
@@ -92,27 +93,64 @@ function ComicBook() {
 	 */
 	function drawPage() {
 
-		var width, height, page = pages[pointer];
-		
-		if (typeof page != "object") throw "invalid page type";
+		console.log(scale, displayMode, zoomMode);
 
-		// update the page scale if a non manual mode has been chosen
-		switch(zoomMode) {
-			case "fitWidth":
-				scale =  (window.innerWidth > page.width)
-					  ? ((window.innerWidth - page.width) / window.innerWidth) + 1 // scale up if the window is wider than the page
-					  : window.innerWidth / page.width; // scale down if the window is narrower than the page
-				break;
+		var zoom_scale;
+		var page = pages[pointer];
+		var page2 = pages[pointer + 1];
+		
+		if (typeof page != "object") throw "invalid page";
+
+		var width = page.width;
+		var height = page.height;
+		
+		if (displayMode == "double") {
+
+			// for double page spreads, factor in the width of both pages, set the height to the tallest page
+			if (typeof page2 == "object") {
+				width += page2.width;
+				if (page2.height > page.height) height = page2.height;
+			}
+			
+			// if this is the last page and there is no page2, still keep the canvas wide
+			else width += width;
 		}
 		
-		width  = page.width * scale;
-		height = page.height * scale;
+		// update the page scale if a non manual mode has been chosen
+		switch(zoomMode) {
 
-		// make sure the canvas is always at least full screen, even if the page is more narrow than the screen
-		canvas.width = (height < window.innerWidth) ? window.innerWidth : width;
-		canvas.height = (height < window.innerHeight) ? window.innerHeight : height;
+			case "manual":
+				zoom_scale = (displayMode == "double") ? scale * 2 : scale;
+				break;
+				
+			case "fitWidth":
+				zoom_scale =  (window.innerWidth > width)
+					  ? ((window.innerWidth - width) / window.innerWidth) + 1 // scale up if the window is wider than the page
+					  : window.innerWidth / width; // scale down if the window is narrower than the page
+				
+				break;
+
+			default: throw "invalid zoomMode";
+		}
+
+		// set the page dimensions based on scale
+		width  = page.width * zoom_scale;
+		height = page.height * zoom_scale;
 		
-		context.drawImage(page, 0, 0, width, height);
+		// make sure the canvas is always at least full screen, even if the page is more narrow than the screen
+		canvas.width = (width < window.innerWidth) ? window.innerWidth : width;
+		canvas.height = (height < window.innerHeight) ? window.innerHeight : height;
+
+		// draw the page
+		if (zoomMode == "manual") {
+			context.drawImage(page, 0, 0, page.width, page.height);
+			if (displayMode == "double" && typeof page2 == "object") context.drawImage(page2, page.width, 0, page2.width, page2.height);
+		}
+		// draw page with scaled dimensions in dynamic display modes
+		else {
+			context.drawImage(page, 0, 0, width, height);
+			if (displayMode == "double" && typeof page2 == "object") context.drawImage(page2, width, 0, width, height);
+		}
 	}
 
 	/**