if the canvas element exists, call the draw method with the canvas_id as parameter, added a reset image button to undo the HSB sort

foozy.html

@@ -27,20 +27,10 @@
                 return false;
             });
 
-			$("#sort_hue").click(function() {
+			$("#sort_reset").click( function() { lol.displayImg(); return false; });
-				lol.displayHue();
+			$("#sort_hue").click( function() { lol.displayHue(); return false; });			
-				return false;
+			$("#sort_sat").click( function() { lol.displaySat(); return false; });
-			}); 
+			$("#sort_val").click( function() { lol.displayBright(); return false; });
-			
-			$("#sort_sat").click(function() {
-				lol.displaySat();
-				return false;
-			}); 
-			
-			$("#sort_val").click(function() {
-				lol.displayBright();
-				return false;
-			});
         });
     </script>
 </head>
@@ -79,6 +69,7 @@
 
 <div id="options">
 	<p id="hsv">
+        <a href="#" id="sort_reset" title="Reset to original">Reset</a> 
         <a href="#" id="sort_hue" title="Sort by Hue">Sort by Hue</a> 
         <a href="#" id="sort_sat" title="Sort by Saturation">Saturation</a>
         <a href="#" id="sort_val" title="Sort by Brightness">Brightness</a>

js/franz.js

@@ -46,7 +46,7 @@ var franz = function(franzProps) {
         var that = this;
         franz.util.loadEvent(function() {
             document.body.appendChild(that.canvas);
-		    that.draw();
+            typeof that.canvas_id !== 'undefined' ? that.draw(that.canvas_id) : that.draw();
             if(typeof franzProps.callback !== "undefined" && typeof franzProps.callback === "function") franzProps.callback();
         });
 	} else {
@@ -83,7 +83,6 @@ franz.prototype = {
     rgba: [],
     hsb: [],
     hsl: [],
-	origIndex: [],
     
     extra_canvas: null,
     extra_ctx: null,
@@ -94,7 +93,7 @@ franz.prototype = {
             this.extra_canvas = document.getElementById(different_canvas);
             this.extra_ctx = this.extra_canvas.getContext('2d');
         }
-        
+
         var working = this;
         working.img = new Image();
 		working.img.onload = function() {
@@ -108,7 +107,7 @@ franz.prototype = {
 		/* If you're looking for the non-<canvas> portion of this, check the associated Flash files. */
         var hidden_canvas = document.getElementById("lol_hidden"),
             extra_ctx = hidden_canvas.getContext('2d');
-        
+
         extra_ctx.drawImage(this.img, 0, 0, 33, 33);
 		var imageData = extra_ctx.getImageData(1, 1, 32, 32).data;
 
@@ -141,11 +140,15 @@ franz.prototype = {
 	},
 
 	displayColors: function(order_array) {
-		console.log("displaying colors");
         var docStr = "";
-		
+        if (typeof order_array === 'undefined'){
-        for(var i = 0; i < this.rgba.length; i++) {
+            for(var i = 0; i < this.rgba.length; i++) {
-			docStr += '<div class="color_boxd" style="background-color: rgb(' + this.rgba[order_array[i]][0] + ', ' + this.rgba[order_array[i]][1] + ',' + this.rgba[order_array[i]][2] + ');"></div>';
+                docStr += '<div class="color_boxd" style="background-color: rgb(' + this.rgba[i][0] + ', ' + this.rgba[i][1] + ',' + this.rgba[i][2] + ');"></div>';
+            }
+        } else {
+            for(var i = 0; i < this.rgba.length; i++) {
+                docStr += '<div class="color_boxd" style="background-color: rgb(' + this.rgba[order_array[i]][0] + ', ' + this.rgba[order_array[i]][1] + ',' + this.rgba[order_array[i]][2] + ');"></div>';
+            }
         }
 
         document.getElementById("log_colors").innerHTML = docStr;
@@ -159,14 +162,19 @@ franz.prototype = {
 	},
 
 	displayImg: function() {
-		this.resetIndex();
+		this.displayColors();
-		this.displayColors(this.origIndex);
 		return false;
 	},
 
-    displayHue: function() { this.sortArray(this.hsb,0); },
+    displayHue: function() { this.sortArray(this.hsb,0); this.displayOut(this.hsb); },
-    displaySat: function() { this.sortArray(this.hsb,1); },
+    displaySat: function() { this.sortArray(this.hsb,1); this.displayOut(this.hsb);},
-    displayBright: function() { this.sortArray(this.hsb,2); },
+    displayBright: function() { this.sortArray(this.hsb,2); this.displayOut(this.hsb);},
+    displayOut: function(array) {
+        var index = [];
+        for(var i=0;i<array.length;i++){index[i] = array[i][3];}    /* rebuilding index */
+		this.displayColors(index);
+		return false;
+    },
 
     /* array should be a (rgba.length)x4 2d array where position 0,1, or 2
         eg: pass in hsb ==>  hsb[] = [h,s,b,index][]
@@ -176,11 +184,6 @@ franz.prototype = {
      */
     sortArray: function(array,position) {
         array.sort(function(a,b){ return a[position] - b[position]; });
-
-        var index = [];
-        for(var i=0;i<array.length;i++){index[i] = array[i][3];}    /* rebuilding index */
-		this.displayColors(index);
-		return false;
     },
 	
 	/* calculates density of array data given interval and step size - both controlling data error
@@ -202,14 +205,6 @@ franz.prototype = {
 		}
 		
 		return densityArray;
-	},
-
-	resetIndex: function() {
-		/* keep track of original index so we don't have to revert back to RGB just to display output */
-		for(var i = 0; i < this.rgba.length; i++) {
-            this.origIndex[i] = i;
-		}
-		return false;
 	}
 }