namespaced css classes

lib/ComicBook.js

@@ -4,7 +4,6 @@
 	TODOs:
 
 	Fo sho:
-		- namespace all css / ids
 		- page controls - button to init color controls, zoom, current page indicator
 		- improve prev/next buttons, only show them when they can possibly work (not at beginning/end)
 		- an "alert" control for any error messages / notifications ( & remove any instances of alert() )
@@ -49,7 +48,7 @@ function merge(a, b) {
  * Exception class. Always throw an instance of this when throwing exceptions.
  *
  * @param {String} type
- * @param {mixed} object
+ * @param {Object} object
  * @returns {ComicBookException}
  */
 function ComicBookException(type, object) {
@@ -100,7 +99,7 @@ function ComicBook(id, srcs, opts) {
 
 	/**
 	 * enables the back button
-	 **/
+	 */
 	function checkHash() {
 
 		var hash = getHash();
@@ -183,8 +182,8 @@ function ComicBook(id, srcs, opts) {
 		 * TODO: split out brightness / contrast controls?
 		 */
 		color: $(document.createElement("div"))
-			.attr("id", "color")
-			.addClass("control floating")
+			.attr("id", "cb-control-color")
+			.addClass("cb-control floating")
 			.append("<label>brightness</label>")
 			.append($("<div id='brightness'></div>").slider({
 				value: 0,
@@ -230,13 +229,13 @@ function ComicBook(id, srcs, opts) {
 		navigation: {
 
 			left: $(document.createElement("div"))
-				.addClass("control navigate left")
+				.addClass("cb-control cb-navigate left")
 				.click(function(e){
 					ComicBook.prototype.drawPrevPage();
 				}),
 
 			right: $(document.createElement("div"))
-				.addClass("control navigate right")
+				.addClass("cb-control cb-navigate right")
 				.click(function(e) {
 					ComicBook.prototype.drawNextPage();
 				})
@@ -349,8 +348,8 @@ function ComicBook(id, srcs, opts) {
 		//if (i - buffer >= 0) { i = i - buffer; } // start loading from the first requested page - buffer
 
 		// show load status panel
-		if ($("#status").length === 0) {
-			$(canvas).after('<div class="floating control" id="status"><p></p></div>');
+		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
@@ -359,7 +358,7 @@ function ComicBook(id, srcs, opts) {
 
 			var page = new Image();
 
-			$("#status p").text("loading page " + (i + 1) + " of " + no_pages);
+			$("#cb-status p").text("loading page " + (i + 1) + " of " + no_pages);
 
 			page.src = srcs[i];
 
@@ -383,7 +382,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) { $("#status").fadeOut(150).remove(); }
+				if (loaded.length === no_pages) { $("#cb-status").fadeOut(150).remove(); }
 			};
 		}
 
@@ -494,7 +493,7 @@ function ComicBook(id, srcs, opts) {
 		if (is_double_page_spread) { options.displayMode = "double"; }
 
 		// resize navigation controls
-		$(".control.navigate").height(window.innerHeight);
+		$(".cb-control.cb-navigate").height(window.innerHeight);
 
 		// user callback
 		if (typeof options.afterDrawPage === "function") {