consolidated js into color-thief.js

index.html

@@ -115,9 +115,57 @@
 <script src="js/libs/jquery.imagesloaded.js"></script>
 <script src="js/libs/mustache.js"></script>
 
-<script src="js/canvasimage.js"></script>
+<script src="js/color-thief.js"></script>
-<script src="js/functions.js"></script>
+
-<script src="js/app.js"></script>
+<script>
+$(document).ready(function(){
+
+
+	var view = {
+	  title: "Joe",
+	  calc: function() {
+	    return 2 + 4;
+	  }
+	}
+
+	var template = "{{title}} spends {{calc}}";
+
+	var html = Mustache.to_html(template, view);
+
+	$('body').prepend(html);
+	
+	$('img').imagesLoaded(function(){
+	
+		$('img').each(function(index){
+
+			var dominantColor = getDominantColor(this);
+			var medianPalette = createPalette(this, 10);
+
+			var imageSection = $(this).closest('.imageSection');
+
+			var switchEl;
+
+			swatchEl = $('<div>', {
+				'class': 'swatch'
+			}).css('background-color','rgba('+dominantColor.r+','+dominantColor.g+ ','+dominantColor.b+', 1)');
+
+			imageSection.find('.dominantColor').append(swatchEl);
+
+			var medianCutPalette = imageSection.find('.medianCutPalette');
+
+			$.each(medianPalette, function(index, value){
+				swatchEl = $('<div>', {
+					'class': 'swatch'
+				}).css('background-color','rgba('+value[0]+','+value[1]+ ','+value[2]+', 1)');
+				medianCutPalette.append(swatchEl);
+			});
+
+		});
+
+	});
+});
+  
+</script>
 
 </body>
 </html>

js/app.js

@@ -1,46 +0,0 @@
-$(document).ready(function(){
-
-	var view = {
-	  title: "Joe",
-	  calc: function() {
-	    return 2 + 4;
-	  }
-	}
-
-	var template = "{{title}} spends {{calc}}";
-
-	var html = Mustache.to_html(template, view);
-
-	$('body').prepend(html);
-	
-	$('img').imagesLoaded(function(){
-	
-		$('img').each(function(index){
-
-			var dominantColor = getDominantColor(this);
-			var medianPalette = createPalette(this, 10);
-
-			var imageSection = $(this).closest('.imageSection');
-
-			var switchEl;
-
-			swatchEl = $('<div>', {
-				'class': 'swatch'
-			}).css('background-color','rgba('+dominantColor.r+','+dominantColor.g+ ','+dominantColor.b+', 1)');
-
-			imageSection.find('.dominantColor').append(swatchEl);
-
-			var medianCutPalette = imageSection.find('.medianCutPalette');
-
-			$.each(medianPalette, function(index, value){
-				swatchEl = $('<div>', {
-					'class': 'swatch'
-				}).css('background-color','rgba('+value[0]+','+value[1]+ ','+value[2]+', 1)');
-				medianCutPalette.append(swatchEl);
-			});
-
-		});
-
-	});
-
-});

js/canvasimage.js

@@ -1,37 +0,0 @@
-/*
-	Class that wraps the html image element and canvas.
-	It also simplifies some of the canvas context manipulation 
-	with a set of helper functions.
-*/
-var CanvasImage = function(image){
-	// If jquery object is passed in, get html element
-	this.imgEl = (image.jquery)? image[0]: image;
-
-	this.canvas = document.createElement('canvas'),
-    this.context = this.canvas.getContext('2d');
-
-	document.body.appendChild(this.canvas);
-
-	this.width = this.canvas.width = $(this.imgEl).width(),
-	this.height = this.canvas.height = $(this.imgEl).height();	
-
-	this.context.drawImage(this.imgEl, 0, 0);
-}
-
-CanvasImage.prototype.clear = function() {
-	this.context.clearRect(0, 0, this.width, this.height);  
-}
-
-CanvasImage.prototype.update = function(imageData) {
-	console.log('worked');
-	this.context.putImageData(imageData, 0, 0);
-}
-
-CanvasImage.prototype.getPixelCount = function() {
-	return this.width * this.height;
-}
-
-CanvasImage.prototype.getImageData = function() {
-	return this.context.getImageData(0, 0, this.width, this.height);
-}
-

js/color-thief.js

@@ -7,14 +7,57 @@
  * The median cut palette function uses quantize.js which is written by Nick Rabinowitz
  * and licensed under the MIT license. Big props to Nick as this is where the magic happens.
  *
+ * == Classes
+ * CanvasImage
  * == Functions
  * getDominantColor()
  * createPalette()
  * getAverageRGB()
  * createAreaBasedPalette()
+ *
+ * Requires jquery and quantize.js.
 */
 
 
+/*
+	CanvasImage Class
+	Class that wraps the html image element and canvas.
+	It also simplifies some of the canvas context manipulation 
+	with a set of helper functions.
+*/
+var CanvasImage = function(image){
+	// If jquery object is passed in, get html element
+	this.imgEl = (image.jquery)? image[0]: image;
+
+	this.canvas = document.createElement('canvas'),
+    this.context = this.canvas.getContext('2d');
+
+	document.body.appendChild(this.canvas);
+
+	this.width = this.canvas.width = $(this.imgEl).width(),
+	this.height = this.canvas.height = $(this.imgEl).height();	
+
+	this.context.drawImage(this.imgEl, 0, 0);
+}
+
+CanvasImage.prototype.clear = function() {
+	this.context.clearRect(0, 0, this.width, this.height);  
+}
+
+CanvasImage.prototype.update = function(imageData) {
+	console.log('worked');
+	this.context.putImageData(imageData, 0, 0);
+}
+
+CanvasImage.prototype.getPixelCount = function() {
+	return this.width * this.height;
+}
+
+CanvasImage.prototype.getImageData = function() {
+	return this.context.getImageData(0, 0, this.width, this.height);
+}
+
+
 /*
  * getDominantColor(sourceImage)
  * returns {r: num, g: num, b: num}