build macpaint swatches

3 files changed, 94 insertions, 2 deletions

diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 20c3577..93d97ed 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -3,6 +3,7 @@ var LightControl = View.extend({
 	el: ".lightcontrol",
 	
 	events: {
+		"mousedown": "stopPropagation",
 	},
 
 	toggle: function(){
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index 1ffe7b8..f9eaad5 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -39,7 +39,7 @@ var MediaEditor = FormView.extend({
 	
 	togglePaused: function(state){
 		var state = this.scenery.toggle(state)
-		this.$playButton.toggleClass("playing", ! state)
+		this.$playButton.toggleClass("paused", ! state)
 	},
 	
 	pick: function(scenery) {
@@ -72,7 +72,7 @@ var MediaEditor = FormView.extend({
 				this.$(".video").show()
 				this.$(".image").hide()
 				
-				this.$playButton.toggleClass("paused", this.scenery.paused())
+				this.$playButton.toggleClass("paused", ! this.scenery.paused())
 				this.$autoplay.prop('checked', !! media.autoplay)
 				this.$loop.prop('checked', !! media.loop)
 				this.$mute.prop('checked', !! media.mute)
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index ffbd935..474d4c1 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -5,6 +5,9 @@ var WallpaperPicker = View.extend({
 	events: {
 		"click .paper1": 'pick',
 	},
+	
+	initialize: function(){
+	},
 
 	toggle: function(){
     this.$el.toggleClass("active");
@@ -18,3 +21,91 @@ var WallpaperPicker = View.extend({
 	}
 
 })
+
+// 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