From 690ce20537d06931c14025a0abf78cf831979f17 Mon Sep 17 00:00:00 2001
From: Bala Clark <balaclark@gmail.com>
Date: Thu, 1 Sep 2011 00:25:00 +0200
Subject: [PATCH] moved loading indicator to toolbar

---
 css/styles.css   |  9 ++++-----
 lib/ComicBook.js | 29 +++++++++++++----------------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 8e3b9e4..414c4a8 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -52,6 +52,10 @@
 	opacity: 0;
 }
 
+#cb-toolbar #cb-status {
+	float: right;
+}
+
 #cb-toolbar:hover {
 	opacity: 1;
 }
@@ -60,8 +64,3 @@
 	width: 200px;
 	height: 150px;
 }
-
-#cb-status {
-	top: 0;
-	right: 0;
-}
diff --git a/lib/ComicBook.js b/lib/ComicBook.js
index 16b6e9c..85dce82 100755
--- a/lib/ComicBook.js
+++ b/lib/ComicBook.js
@@ -152,17 +152,18 @@ function ComicBook(id, srcs, opts) {
 		canvas = document.getElementById(canvas_id);
 		context = canvas.getContext("2d");
 
+		// render user controls
+		if (controlsRendered === false) {
+			ComicBook.prototype.renderControls();
+			controlsRendered = true;
+		}
+
 		// add page controls
 		// TODO: add IE event listeners too.
 		canvas.addEventListener("click", ComicBook.prototype.navigation, false);
 		window.addEventListener("keydown", ComicBook.prototype.navigation, false);
 		window.addEventListener("hashchange", checkHash, false);
 		//setInterval(function() { checkHash(); }, 300); // TODO: enable this when there is no onhashchange event
-
-		if (controlsRendered === false) {
-			ComicBook.prototype.renderControls();
-			controlsRendered = true;
-		}
 	}
 
 	/**
@@ -208,7 +209,8 @@ function ComicBook(id, srcs, opts) {
 					.click(function(){
 						ComicBook.prototype.zoom(scale + 0.1);
 					})
-			),
+			)
+			.append("<p id='cb-status'></p>"),
 
 		/**
 		 * Image enhancements
@@ -286,7 +288,7 @@ function ComicBook(id, srcs, opts) {
 			.after(this.getControl("navigation").right)
 			.after(this.getControl("color").hide());
 
-		$("#desaturate").click(function(e){
+		$("#desaturate").click(function(){
 			if ($(this).is(":checked")) {
 				ComicBook.prototype.enhance.desaturate();
 			} else {
@@ -294,7 +296,7 @@ function ComicBook(id, srcs, opts) {
 			}
 		});
 
-		$("#reset").click(function(e){
+		$("#reset").click(function() {
 			// TODO: improve performance here.
 			$("#cb-brightness").slider("value", 0)
 			$("#cb-saturation").slider("value", 0);
@@ -390,18 +392,13 @@ function ComicBook(id, srcs, opts) {
 		var i = pointer; // the current page counter for this method
 		//if (i - buffer >= 0) { i = i - buffer; } // start loading from the first requested page - buffer
 
-		// show load status panel
-		if ($("#cb-status").length === 0) {
-			$(canvas).after('<div class="floating cb-control" id="cb-status"><p></p></div>');
-		}
-
 		// I am using recursion instead of a forEach loop so that the next image is
 		// only loaded when the previous one has completely finished
 		function preload(i) {
 
 			var page = new Image();
-
-			$("#cb-status p").text("loading page " + (i + 1) + " of " + no_pages);
+			
+			$("#cb-status").text("loading page " + (i + 1) + " of " + no_pages);
 
 			page.src = srcs[i];
 
@@ -425,7 +422,7 @@ function ComicBook(id, srcs, opts) {
 
 				// start rendering the comic when the buffer level has been reached (FIXME: buggy, fails if trying to load the last couple of pages)
 				if (loaded[loaded.length-1] === pointer + buffer) { ComicBook.prototype.drawPage(); }
-				if (loaded.length === no_pages) { $("#cb-status").fadeOut(150).remove(); }
+				if (loaded.length === no_pages) { $("#cb-status").remove(); }
 			};
 		}