From f865073ea8439ecb99150043abae8332010441a7 Mon Sep 17 00:00:00 2001
From: Veno Server <ryan@venodesigns.net>
Date: Fri, 4 Sep 2009 02:24:03 -0500
Subject: [PATCH] Merged Texture work over to the main index. Using a hidden
 <canvas>, we can now draw their selected color in with a transparent texture
 PNG, get the base64 encoded string, and apply it to the mini layout - total
 ownage. :D

---
 index.php     | 13 ++++++++++++-
 js/texture.js |  9 ++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/index.php b/index.php
index 38882d8..e65f4bd 100644
--- a/index.php
+++ b/index.php
@@ -7,6 +7,7 @@
     <script type="text/javascript" src="http://images.webs.com/static/global/js/jquery/jquery-1.3.2.min.js"></script>
 	<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" src="js/texture.js"></script>
     <script type="text/javascript">
         var img_input, 
             layoutMods, 
@@ -93,6 +94,14 @@
                 return false;
             });
 
+            $("#setTextureBG").click(function() {
+                texture.draw('lol_texture', 'img/test1.png', [selectedColor], function() {
+                    newBase64String = texture.getBase64();
+                    $("#testLayout").css({'background': 'transparent url(' + newBase64String + ')'});
+                });
+                return false;
+            });
+
             $("#setHeaderBG").click(function() {
                 previewBannerBG.css({"background-color": selectedColor});
                 return false;
@@ -132,6 +141,7 @@
     <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>
+    <a href="#" id="setTextureBG" title="Set as Main BG w/ Texture">Set as Main BG w/ Texture</a>
 </div>
 
 <div id="testLayout">
@@ -181,9 +191,10 @@
         </p>
 		
     </div>
-	
 </div>
 
+<canvas id="lol_texture" width="50" height="50" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"></canvas>
+
 <div id="options">
 	<p id="hsv">
         <a href="#" id="sort_hue" title="Sort by Hue">Sort by Hue</a> 
diff --git a/js/texture.js b/js/texture.js
index 62516bd..f5d7381 100644
--- a/js/texture.js
+++ b/js/texture.js
@@ -15,7 +15,7 @@ var texture = {
      *  @Param: baseImage - base image to use (generally a semi-transparent PNG)
      *  @Param: colorArray - array of colors to use in the texture (Right now, this only accepts two colors, primary and secondary)
     */
-    draw: function(drawingCanvas, baseImage, colorArray) {
+    draw: function(drawingCanvas, baseImage, colorArray, callbackfn) {
         texture.canvas = document.getElementById(drawingCanvas);
         texture.ctx = texture.canvas.getContext('2d');
 
@@ -25,7 +25,10 @@ var texture = {
             texture.ctx.fillStyle = colorArray[0];
             texture.ctx.fillRect(0, 0, 50, 50);
             texture.ctx.drawImage(img, 0, 0, 50, 50);
-		}
+		    callbackfn();
+        }
 		img.src = baseImage;
-    }
+    },
+
+    getBase64: function() { return document.getElementById("lol_texture").toDataURL("image/png"); }
 }