Finalized the layout color applying part, at least in terms of a POC. Now we have a solid base to work on auto-applying kickass color schemes that we build from the picture.

css/example.css

@@ -181,7 +181,7 @@ a:hover { text-decoration: underline; }
     top: 20px;
     right: 20px;
     width: 200px;
-    height: 200px;
+    height: 226px;
     padding: 5px;
     opacity: .7;
     background-color: #292929;
@@ -191,15 +191,18 @@ a:hover { text-decoration: underline; }
     -webkit-box-shadow: 1px 1px 7px #333;
 }
 
-#testBanner, #testContent {
+#testBanner, #testContent, #testSidebar, #testFooter {
     padding: 5px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     background-color: #000;
 }
 
+#testFooter { clear: both; }
 #testBanner { height: 20px; margin: 0 0 5px 0; }
-#testContent { height: 155px; }
+#testContent, #testSidebar { height: 155px; margin-bottom: 5px; }
+#testContent { float: left; width: 125px; }
+#testSidebar { float: right; width: 50px; }
 #testContent p { margin: 0 0 5px 0; }
 
 #layoutMods {
@@ -207,24 +210,26 @@ a:hover { text-decoration: underline; }
     position: absolute;
     top: 10px;
     left: 10px;
-    width: 330px;
+    width: 140px;
     background-color: #000;
-    opacity: .8;
+    opacity: .9;
-    padding: 10px 4px;
+    padding: 4px 4px 0;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
+    -moz-box-shadow: 1px 1px 7px #333;
+    -webkit-box-shadow: 1px 1px 7px #333;
 }
 
 #layoutMods a {
+    display: block;
     background-color: #498FB2;
     border: 1px solid #55A2C9;
-    padding: 5px 10px 4px;
+    padding: 5px 5px 4px;
     color: #fff;
     text-decoration: none;
-    -moz-border-radius: 4px;
+    -moz-border-radius: 2px;
-    -webkit-border-radius: 4px;
+    -webkit-border-radius: 2px;
-    opacity: .8;
     margin: 0 0 4px 0;
 }
 
-#layoutMods a:hover { text-decoration: none; opacity: 1; }
+#layoutMods a:hover { text-decoration: none; opacity: .8; }

index.php

@@ -8,7 +8,14 @@
 	<script type="text/javascript" src="js/franz.js"></script>
     <script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
     <script type="text/javascript">
-        var img_input;
+        var img_input, 
+            layoutMods, 
+            selectedColor,
+            previewMainBG,
+            previewBannerBG,
+            previewContentBG,
+            previewSidebarBG,
+            previewFooterBG;
 
         /* Oh god a global function wrrrryyyy */
         function lol() {
@@ -18,6 +25,12 @@
         }
 
         $(document).ready(function() {
+            layoutMods = $("#layoutMods");
+            previewMainBG = $("#testLayout");
+            previewBannerBG = $("#testBanner");
+            previewContentBG = $("#testContent");
+            previewSidebarBG = $("#testSidebar");
+            previewFooterBG = $("#testFooter");
             franz.init("lol");
 
             img_input = document.getElementById("img_input");
@@ -75,16 +88,72 @@
 				return false;
 			});
 
-            $(".color_boxd").live("click", function() {
+            $("#setMainBG").click(function() {
-                // It's 4AM, and I'm tired. I'm not building a damn regular expression, so yeah, we'll multiple .replace() ;P
+                previewMainBG.css({"background-color": selectedColor});
-                alert("This hex color: " + franz.RGBtoHex($(this)[0].style.backgroundColor.replace(")", "").replace("rgb(", "").replace(" ", "").split(",")));
+                return false;
+            });
+
+            $("#setHeaderBG").click(function() {
+                previewBannerBG.css({"background-color": selectedColor});
+                return false;
+            });
+
+            $("#setContentBG").click(function() {
+                previewContentBG.css({"background-color": selectedColor});
+                return false;
+            });
+
+            $("#setFooterBG").click(function() {
+                previewFooterBG.css({"background-color": selectedColor});
+                return false;
+            });
+
+            $("#setSidebarBG").click(function() {
+                previewSidebarBG.css({"background-color": selectedColor});
+                return false;
+            });
+
+            $(".color_boxd").live("mousedown", function(e) {
+                // Yes, this function is horribly un-optimized. It's 4AM, we'll clean it up later. ;P
+                selectedColor = franz.RGBtoHex($(this)[0].style.backgroundColor.replace(")", "").replace("rgb(", "").replace(" ", "").split(","));
+                var coords = {x: e.pageX, y: e.pageY};
+                layoutMods.hide();
+                layoutMods.css({"top": coords.y + "px", "left": coords.x + "px"}); 
+                layoutMods.fadeIn("slow");
             });
-        
         });
     </script>
 </head>
 <body>
 
+<div id="layoutMods">
+    <a href="#" id="setMainBG" title="Set as background color">Set as Main Background</a>
+    <a href="#" id="setHeaderBG" title="Set as Header BG">Set as Header Background</a>
+    <a href="#" id="setContentBG" title="Set as Content BG">Set as Content Background</a>
+    <a href="#" id="setSidebarBG" title="Set as Sidebar BG">Set as Sidebar Background</a>
+    <a href="#" id="setFooterBG" title="Set as Footer BG">Set as Footer Background</a>
+</div>
+
+<div id="testLayout">
+    <div id="testBanner">
+        This is an example layout
+    </div>
+    <div id="testContent">
+        <p>
+            This is an example layout to test colors with.
+        </p>
+        <p>
+            Click on a color to set it for one of these layout sections!
+        </p>
+    </div>
+    <div id="testSidebar">
+        Sidebar
+    </div>
+    <div id="testFooter">
+        &copy; lol enterprises
+    </div>
+</div>
+
 <h1>Franz - client side color swatches</h1>
 
 <div id="container_top">
@@ -113,12 +182,6 @@
 		
     </div>
 	
-	<!-- might log colors later on
-	<ul id="logHSV">
-		<li><p id="logHue">Hue: </p></li>
-		<li><p id="logSat">Sat: </p></li>
-		<li><p id="logVal">Val: </p></li>
-	</ul> -->
 </div>
 
 <div id="options">

index2.php

@@ -8,8 +8,14 @@
 	<script type="text/javascript" src="js/franz.js"></script>
     <script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
     <script type="text/javascript">
-        var img_input,
+        var img_input, 
-            layoutMods = $("#layoutMods");
+            layoutMods, 
+            selectedColor,
+            previewMainBG,
+            previewBannerBG,
+            previewContentBG,
+            previewSidebarBG,
+            previewFooterBG;
 
         /* Oh god a global function wrrrryyyy */
         function lol() {
@@ -19,6 +25,12 @@
         }
 
         $(document).ready(function() {
+            layoutMods = $("#layoutMods");
+            previewMainBG = $("#testLayout");
+            previewBannerBG = $("#testBanner");
+            previewContentBG = $("#testContent");
+            previewSidebarBG = $("#testSidebar");
+            previewFooterBG = $("#testFooter");
             franz.init("lol");
 
             img_input = document.getElementById("img_input");
@@ -76,25 +88,50 @@
 				return false;
 			});
 
-            $(".color_boxd").live("mousedown", function(e) {
+            $("#setMainBG").click(function() {
-                var coords = {x: e.pageX, y: e.pageY};
+                previewMainBG.css({"background-color": selectedColor});
-                layoutMods.fadeIn("slow");
+                return false;
-                //layoutMods.css({"top": coords.x + "px", "left": coords.y + "px"});
+            });
-                /*
+
-                // It's 4AM, and I'm tired. I'm not building a damned regular expression, so yeah, we'll multiple .replace() ;P
+            $("#setHeaderBG").click(function() {
-                alert("This hex color: " + franz.RGBtoHex($(this)[0].style.backgroundColor.replace(")", "").replace("rgb(", "").replace(" ", "").split(",")));
+                previewBannerBG.css({"background-color": selectedColor});
-                */
+                return false;
+            });
+
+            $("#setContentBG").click(function() {
+                previewContentBG.css({"background-color": selectedColor});
+                return false;
+            });
+
+            $("#setFooterBG").click(function() {
+                previewFooterBG.css({"background-color": selectedColor});
+                return false;
+            });
+
+            $("#setSidebarBG").click(function() {
+                previewSidebarBG.css({"background-color": selectedColor});
+                return false;
+            });
+
+            $(".color_boxd").live("mousedown", function(e) {
+                // Yes, this function is horribly un-optimized. It's 4AM, we'll clean it up later. ;P
+                selectedColor = franz.RGBtoHex($(this)[0].style.backgroundColor.replace(")", "").replace("rgb(", "").replace(" ", "").split(","));
+                var coords = {x: e.pageX, y: e.pageY};
+                layoutMods.hide();
+                layoutMods.css({"top": coords.y + "px", "left": coords.x + "px"}); 
+                layoutMods.fadeIn("slow");
             });
-        
         });
     </script>
 </head>
 <body>
 
 <div id="layoutMods">
-    <a href="#" title="Set as background color">Main Background</a>
+    <a href="#" id="setMainBG" title="Set as background color">Set as Main Background</a>
-    <a href="#" title="Set as Header BG">Header Background</a>
+    <a href="#" id="setHeaderBG" title="Set as Header BG">Set as Header Background</a>
-    <a href="#" title="Set as Content BG">Content Background</a>
+    <a href="#" id="setContentBG" title="Set as Content BG">Set as Content Background</a>
+    <a href="#" id="setSidebarBG" title="Set as Sidebar BG">Set as Sidebar Background</a>
+    <a href="#" id="setFooterBG" title="Set as Footer BG">Set as Footer Background</a>
 </div>
 
 <div id="testLayout">
@@ -109,6 +146,12 @@
             Click on a color to set it for one of these layout sections!
         </p>
     </div>
+    <div id="testSidebar">
+        Sidebar
+    </div>
+    <div id="testFooter">
+        &copy; lol enterprises
+    </div>
 </div>
 
 <h1>Franz - client side color swatches</h1>