started working on the toolbar, added buttons for layout switching, enhancements, zoom

css/styles.css

@@ -3,13 +3,13 @@
 	color: #fff;
 	font-size: 12px;
 	background-color: #111;
-	margin: 5px;
+	padding: 10px;
-	padding: 8px;
 	opacity: .9;
 	position: fixed !important;
 }
 
 .cb-control.floating {
+	margin: 5px;
 	border: 2px solid #444;
 	border-radius: 4px;
 	-webkit-border-radius: 4px;
@@ -29,7 +29,6 @@
 }
 
 .cb-control.cb-navigate:hover {
-	display: block;
 	opacity: 1;
 }
 
@@ -47,6 +46,16 @@
 	cursor: move;
 }
 
+#cb-toolbar {
+	top: 0;
+	height: 25px;
+	opacity: 0;
+}
+
+#cb-toolbar:hover {
+	opacity: 1;
+}
+
 #cb-color {
 	width: 200px;
 	height: 150px;

lib/ComicBook.js

@@ -177,6 +177,39 @@ function ComicBook(id, srcs, opts) {
 	 */
 	ComicBook.prototype.control = {
 		
+		toolbar: $(document.createElement("div"))
+			.attr("id", "cb-toolbar")
+			.addClass("cb-control")
+			.append(
+				$(document.createElement("button"))
+					.text("layout")
+					.addClass(options.displayMode)
+					.click(function(){
+						ComicBook.prototype.toggleLayout();
+					})
+			)
+			.append(
+				$(document.createElement("button"))
+					.text("enhance")
+					.click(function(){
+						ComicBook.prototype.toggleControl("color");
+					})
+			)
+			.append(
+				$(document.createElement("button"))
+					.text("zoom out")
+					.click(function(){
+						ComicBook.prototype.zoom(scale - 0.1);
+					})
+			)
+			.append(
+				$(document.createElement("button"))
+					.text("zoom in")
+					.click(function(){
+						ComicBook.prototype.zoom(scale + 0.1);
+					})
+			),
+
 		/**
 		 * Image enhancements
 		 * TODO: split out brightness / contrast controls?
@@ -287,7 +320,7 @@ function ComicBook(id, srcs, opts) {
 
 	ComicBook.prototype.hideControl = function(control) {
 		this.getControl(control).hide();
-	}
+	};
 
 	ComicBook.prototype.toggleControl = function(control) {
 		if (this.getControl(control).is(":visible")) {
@@ -295,7 +328,16 @@ function ComicBook(id, srcs, opts) {
 		} else {
 			this.showControl(control);
 		}
-	}
+	};
+
+	ComicBook.prototype.toggleLayout = function() {
+		if (options.displayMode === "double") {
+			options.displayMode = "single";
+		} else {
+			options.displayMode = "double";
+		}
+		ComicBook.prototype.draw();
+	};
 	
 	/**
 	 * Get the image for a given page.
@@ -495,6 +537,7 @@ function ComicBook(id, srcs, opts) {
 
 		// resize navigation controls
 		$(".cb-control.cb-navigate").height(window.innerHeight);
+		$("#cb-toolbar").width(window.innerWidth);
 
 		// user callback
 		if (typeof options.afterDrawPage === "function") {