From 5a5dc68dd2f9ae198864d7f25b4c9840dbe14d77 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 15 Jul 2014 17:45:10 -0400
Subject: rudimentary wallpaper picking

---
 .../assets/javascripts/rectangles/models/wall.js   |  7 ++++
 .../javascripts/ui/editor/WallpaperPicker.js       | 40 ++++++++++++++++++++--
 public/assets/stylesheets/app.css                  | 11 ++++++
 views/controls/editor/wallpaper.ejs                | 12 ++-----
 4 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index cc298c6..7ff4ccb 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -45,6 +45,9 @@ window.Wall = (function(){
 				if (Scenery.nextMedia) {
 					Scenery.addNextToWall(base)
 				}
+				else if (Scenery.nextWallpaper) {
+					base.wallpaper()
+				}
 				else {
 					app.controller.hideExtras()
 				}
@@ -112,6 +115,10 @@ window.Wall = (function(){
 		this.$walls && this.$walls.css("background-color", color)
 	}
 	
+	Wall.prototype.wallpaper = function(){
+		this.$walls.css("background-image", Scenery.nextWallpaper)
+	}
+	
 	Wall.prototype.siblings = function(){
 		var base = this
 		var match = base.side | base.half_side
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index 474d4c1..cb1e361 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -3,10 +3,24 @@ var WallpaperPicker = View.extend({
 	el: ".wallpaper",
 	
 	events: {
-		"click .paper1": 'pick',
+		"click .swatch": 'pick',
 	},
 	
 	initialize: function(){
+		var wm = new WallpaperManager()
+		app.on('wallpaper-ready', function(){
+			var black = [0,0,0,1.0]
+			var white = [255,255,255,1.0]
+			var swatches = wm.buildSwatches(black, white, 2)
+			swatches.forEach(function(swatch){
+				var dataUrl = swatch.toDataURL()
+				var span = document.createElement('span')
+				span.style.backgroundImage = "url(" + dataUrl + ")"
+				span.className = "swatch"
+				this.$el.append(span)
+			}.bind(this))
+		}.bind(this))
+		wm.init()
 	},
 
 	toggle: function(){
@@ -16,8 +30,28 @@ var WallpaperPicker = View.extend({
 	},
 	
 	pick: function(e){
-    $("body").toggleClass("pastePaper");
-    $(e.currentTarget).toggleClass("active");
+    var $swatch = $(e.currentTarget)
+		var $floatingSwatch = $(".floatingSwatch")
+
+    $floatingSwatch.css('background-image', $swatch.css('background-image'))
+
+		Scenery.nextWallpaper = $swatch.css('background-image')
+
+		setTimeout(function(){
+			function _followCursor(e) {
+				$floatingSwatch.css({
+					top: (e.pageY + 10) + 'px',
+					left: (e.pageX + 10) + 'px'
+				});
+			}
+			$(window).on('mousemove', _followCursor);
+			$(window).one('click', function () {
+				$(window).off('mousemove', _followCursor);
+				$floatingSwatch.hide();
+			});
+			$floatingSwatch.show()
+			_followCursor(e);
+		})
 	}
 
 })
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index a2d2120..2583284 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -58,6 +58,17 @@ a{
 
 }
 
+.floatingSwatch {
+	width: 50px;
+	height: 50px;
+	position:absolute;
+	border: 2px solid black;
+	box-shadow: -2px 2px #fff;
+	display: none;
+	z-index: 10;
+	pointer-events: none;
+}
+
 .ants {
 	max-width:320px;
 	height: auto;
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs
index 82460b7..144e419 100644
--- a/views/controls/editor/wallpaper.ejs
+++ b/views/controls/editor/wallpaper.ejs
@@ -1,10 +1,4 @@
 <div class="vvbox wallpaper">
-	<span class="paper1"></span>
-	<span class="paper2"></span>
-	<span class="paper3"></span>
-	<span class="paper4"></span>
-	<span class="paper5"></span>
-	<span class="paper6"></span>
-	<span class="paper7"></span>
-	<span class="paper8"></span>
-</div>
\ No newline at end of file
+</div>
+
+<div class="floatingSwatch"></div>
-- 
cgit v1.2.3-70-g09d2