1 files changed, 128 insertions, 3 deletions

diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index ffbd935..cb1e361 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -3,7 +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(){
@@ -13,8 +30,116 @@ 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);
+		})
 	}
 
 })
+
+// pattern
+// scale
+// foreground
+// background
+
+var WallpaperManager = function () {
+
+	var image = new Image ()
+	var imageData
+	var w, h
+	
+	this.masks = []
+	
+	this.init = function(){
+		this.load()
+	}
+	
+	this.load = function(){
+		image.onload = function(){
+			this.loadImageData()
+			this.buildMasks()
+			app.tube('wallpaper-ready')
+		}.bind(this)
+		
+		image.src = "/assets/img/palette.gif"
+	}
+	
+	this.loadImageData = function(){
+		var canvas = document.createElement('canvas')
+		var ctx = canvas.getContext('2d')
+		w = canvas.width = image.naturalWidth
+		h = canvas.height = image.naturalHeight
+		ctx.drawImage(image, 0,0)
+		imageData = ctx.getImageData(0,0,image.naturalWidth,image.naturalHeight).data
+	}
+	
+	this.buildMasks = function(){
+		var mask
+		for (var y = 0; y < 6; y++) {
+			for (var x = 0; x < 16; x++) {
+				mask = this.buildMask(x,y)
+				this.masks.push(mask)
+			}
+		}
+	}
+	
+	this.buildMask = function(x,y){
+		// add the offset of the top-left swatch
+		x = (x * 18) + 15
+		y = (y * 16) + 5
+
+		var mask = new Array(64)
+		var t = 0
+		for (var i = 0; i < 8; i++) {
+			for (var j = 0; j < 8; j++) {
+				t = ( w*(y+j) + x+i ) * 4
+				mask[j*8+i] = imageData[t] === 0
+			}
+		}
+		return mask
+	}
+	
+	this.buildSwatches = function(black, white, scale) {
+		var swatches = this.masks.map(function(mask){
+			return this.buildSwatch(mask,black,white,scale)
+		}.bind(this))
+		
+		return swatches
+	}
+	
+	this.buildSwatch = function(mask,black,white,scale){
+		black = 'rgba(' + black.join(',') + ')'
+		white = 'rgba(' + white.join(',') + ')'
+		var canvas = document.createElement("canvas")
+		canvas.width = 8*scale
+		canvas.height = 8*scale
+		var ctx = canvas.getContext('2d')
+		for (var i = 0; i < 8; i++) {
+			for (var j = 0; j < 8; j++) {
+				ctx.fillStyle = mask[j*8+i] ? black : white
+				ctx.fillRect(i*scale, j*scale, scale, scale)
+			}
+		}
+		return canvas
+	}
+	
+}
\ No newline at end of file