1 files changed, 53 insertions, 115 deletions

diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index 2309e22..61ecb78 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -1,44 +1,70 @@
 
-var WallpaperPicker = View.extend({
+var WallpaperPicker = UploadView.extend({
 	el: ".wallpaper",
 	
+	mediaTag: "wallpaper",
+	uploadAction: "/api/media/upload",
+
 	events: {
 		"click .swatch": 'pick',
-	},
+  },
 	
 	initialize: function(){
-	  this.el.innerHTML = "wallpaper coming soon"
-	  this.el.style.padding = "10px"
-	  this.el.style.fontWeight = "300"
-	  return
-		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()
+	  this.__super__.initialize.call(this)
+	  this.$swatches = this.$(".swatches")
+	},
+	
+  loaded: false,
+	show: function(){
+		if (! this.loaded) {
+			this.load()
+		}
+		else {
+      this.toggle(true)
+		}
+	},
+	
+	hide: function(){
+		this.__super__.hide.call(this)
 	},
 
-	toggle: function(state){
-    this.$el.toggleClass("active", state);
-    // toggle the class that makes the cursor a paintbucket
-    // $("body").removeClass("pastePaper");
+	load: function(){
+		$.get("/api/media/user", { tag: this.mediaTag }, this.populate.bind(this))
 	},
-	show: function(){
-		this.toggle(true)
+
+	populate: function(data){
+	  console.log(data)
+		this.loaded = true
+		data && data.forEach(this.add.bind(this))
+    this.toggle(true)
+	},
+	
+	add: function (media) {
+	  if (media.type !== "image") { return }
+	  var swatch = document.createElement("div")
+	  swatch.className = "swatch"
+	  swatch.style.backgroundImage = "url(" + media.url + ")"
+	  this.$swatches.append(swatch)
+	},
+
+	toggle: function (state) {
+	  if (state && ! this.loaded) {
+	    this.show()
+	  }
+	  else {
+      this.$el.toggleClass("active", state)
+	  }
+    // toggle the class that makes the cursor a paintbucket
+    // $("body").removeClass("pastePaper")
 	},
+	
 	hide: function(){
 		this.toggle(false)
 	},
 	
+	beforeUpload: function(){
+	},
+	
 	pick: function(e){
     var $swatch = $(e.currentTarget)
 		var $floatingSwatch = $(".floatingSwatch")
@@ -62,94 +88,6 @@ var WallpaperPicker = View.extend({
 			$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