design improvements to demo page

index.html

@@ -47,56 +47,68 @@
 
 <!-- Using Mustache templating -->
 <script id='template' type='text/x-mustache'>
-  {{#files}}
-  <div class="imageSection">
+  {{#images}}
+  <div class="imageSection clearfix {{class}} ">
     <div class="imageWrap">
-      <img class="targetImage" src="img/{{.}}" />
+      <img class="targetImage" src="img/{{file}}" data-colorcount="{{colorCount}}" />
     </div>
     <div class="colors">
-      <div class="function dominantColor">
+      <div class="function dominantColor clearfix">
         <h3>Dominant Color</h3>
-        <div class="swatches"></div>
+        <div class="swatches clearfix"></div>
       </div>
-      <div class="function medianCutPalette">
+      <div class="function medianCutPalette clearfix">
         <h3>Palette</h3>
-        <div class="swatches"></div>
+        <div class="swatches clearfix"></div>
       </div>
     </div>
   </div>
-  {{/files}}
+  {{/images}}
 </script>
 
 <script>
 $(document).ready(function(){
 
   // Use mustache.js templating to create layout
-	var images = { files: [ "1.jpg", "10.jpg", "2.jpg", "icon1.png"] };
-	var html = Mustache.to_html($('#template').html(), images);
+  
+  var imageArray = { images: [
+    {"file": "3.jpg"},
+    {"file": "4.jpg"},  
+    {"file": "5.jpg"}, 
+    {"file": "logo1.png"},
+    {"file": "icon1.png", "colorCount": "4", "class": "fbIcon"}  
+  ]};
+
+	var html = Mustache.to_html($('#template').html(), imageArray);
 	$('#main').append(html);
 
   // Use lettering.js to give letter by letter styling control for the h1 title
   $("h1").lettering();
 
 	
-	// Once images are loaded, loop through each one, getting dominant color
-	// and palette and displaying them.
-	$('img').imagesLoaded(function(){
+  // Once images are loaded, loop through each one, getting dominant color
+  // and palette and displaying them.
+  $('img').imagesLoaded(function(){
 	
-		$('img').each(function(index){
+    $('img').each(function(index){
 
-      // Get the dominant color and palette for this image
-			var dominantColor = getDominantColor(this),
-			    medianPalette = createPalette(this, 10),
-			    imageSection = $(this).closest('.imageSection'),
+      var imageSection = $(this).closest('.imageSection'),
           swatchEl;
 
       // Dominant Color
+	    var dominantColor = getDominantColor(this);
+	
 			swatchEl = $('<div>', {
 				'class': 'swatch'
 			}).css('background-color','rgba('+dominantColor.r+','+dominantColor.g+ ','+dominantColor.b+', 1)');
 			imageSection.find('.dominantColor .swatches').append(swatchEl);
 
+
+
       // Palette
+      var colorCount = $(this).attr('data-colorcount')? $(this).data('colorcount'): 10;
+	    var medianPalette = createPalette(this, colorCount);
+
 			var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
       $.each(medianPalette, function(index, value){
 				swatchEl = $('<div>', {