added basic controls for brightness/contrast

lib/ComicBook.js

@@ -9,6 +9,7 @@
 		- show loading graphic & then fade in new page if user is ahead of the last loaded page
 		- check for html5 feature support where used: diveintohtml5.org/everything.html or www.modernizr.com
 		- really need to speed up enhancements, try to use webworkers
+		- namespace all css / ids
 	
 	Nice 2 have:
 		- offline access
@@ -65,6 +66,7 @@ function ComicBook(id, srcs, opts) {
 	var loaded = [];	// the images that have been loaded so far
 	var scale = 1;		// page zoom scale, 1 = 100%
 	var is_double_page_spread = false;
+	var controlsRendered = false; // have the user controls been inserted into the dom yet?
 	
 	// the current page, can pass a default as a url hash
 	var pointer = (parseInt(location.hash.substring(1),10) - 1) || 0;
@@ -130,8 +132,83 @@ function ComicBook(id, srcs, opts) {
 		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;
+		}
 	}
 	
+	/**
+	 * TODO: add reset links,
+	 * TODO: style
+	 * TODO: don't allow draggable controls to leave the visible window
+	 * TODO: remember draggable position
+	 * TODO: show/hide controls
+	 *
+	 * User controls
+	 */
+	ComicBook.prototype.control = {
+		
+		/**
+		 * Image enhancements
+		 * TODO: split out brightness / contrast controls?
+		 */
+		image: $(document.createElement("div"))
+			.attr("id", "color")
+			.addClass("control")
+			.append("<label>brightness</label>")
+			.append($("<div id='brightness'></div>").slider({
+				value: 0,
+				step: 10,
+				min: -1000,
+				max: 1000,
+				slide: function(event, ui) {
+					ComicBook.prototype.enhance.brightness({ brightness: ui.value });
+				}
+			}))
+			.append("<label>contrast</label>")
+			.append($("<div id='contrast'></div>").slider({
+				value: 0,
+				step: 0.1,
+				min: 0,
+				max: 1,
+				slide: function(event, ui) {
+					ComicBook.prototype.enhance.brightness({ contrast: ui.value });
+				}
+			}))
+			.css({
+				position: "absolute",
+				top: "40%",
+				left: "40%"
+			})
+			.draggable()
+	};
+	
+	/**
+	 * TODO: center, make sure they never leave the visible portion of the screen
+	 */
+	ComicBook.prototype.renderControls = function() {
+		$(canvas).after(this.getControl("image").hide());
+	};
+	
+	ComicBook.prototype.getControl = function(control) {
+		
+		if (typeof this.control[control] === "undefined") {
+			throw "invalid control: " + control;
+		}
+		
+		return this.control[control];
+	};
+	
+	ComicBook.prototype.showControl = function(control) {
+		this.getControl(control).show();
+	};
+
+	ComicBook.prototype.hideControl = function(control) {
+		this.getControl(control).hide();
+	}
+		
 	/**
 	 * Get the image for a given page.
 	 *

styles.css

@@ -19,3 +19,12 @@ body {
 	border-radius: 4px;
 	opacity: .9;
 }
+
+.ui-draggable {
+	cursor: move;
+}
+
+#color {
+	width: 200px;
+	height: 150px;
+}