moved loading status out of toolbar

css/styles.css

@@ -66,15 +66,21 @@
 	box-shadow: none;
 }
 
+#cb-status {
+	font-size: 12px;
+	right: 0;
+	bottom: 0;
+	margin: 8px;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+}
+
 #cb-toolbar {
 	top: 0;
 	border-bottom: 2px solid #444;
 }
 
-#cb-toolbar #cb-status {
-	float: right;
-}
-
 #cb-toolbar button {
 	height: 32px;
 	width: 32px;

lib/ComicBook.js

@@ -183,6 +183,10 @@ function ComicBook(id, srcs, opts) {
 	 */
 	ComicBook.prototype.control = {
 
+		status: $(document.createElement("p"))
+			.attr("id", "cb-status")
+			.addClass("cb-control"),
+
 		toolbar: $(document.createElement("div"))
 			.hide()
 			.attr("id", "cb-toolbar")
@@ -235,8 +239,7 @@ function ComicBook(id, srcs, opts) {
 						options.zoomMode = "fitWidth"
 						ComicBook.prototype.drawPage();
 					})
-			)
+			),
-			.append("<p id='cb-status'></p>"),
 
 		/**
 		 * Image enhancements
@@ -316,7 +319,8 @@ function ComicBook(id, srcs, opts) {
 	ComicBook.prototype.renderControls = function() {
 
 		$(canvas)
-			.before(this.getControl("loadingIndicator").hide())
+			.before(this.getControl("loadingIndicator"))
+			.before(this.getControl("status"))
 			.after(this.getControl("toolbar"))
 			.after(this.getControl("navigation").left)
 			.after(this.getControl("navigation").right)
@@ -497,7 +501,7 @@ function ComicBook(id, srcs, opts) {
 					ComicBook.prototype.drawPage();
 					ComicBook.prototype.hideControl("loadingIndicator");
 				}
-				if (loaded.length === no_pages) { $("#cb-status").remove(); }
+				if (loaded.length === no_pages) { ComicBook.prototype.hideControl("status") }
 			};
 		}