1 files changed, 64 insertions, 11 deletions

diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index dedae8b..93e1f42 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -140,7 +140,6 @@
 	
 	Wall.prototype.deserialize = function(data){
 	  this.wallpaper( data.background )
-	  this.wallpaperPosition( data.background_x, data.background_y, data.background_scale )
 	}
 
 
@@ -215,24 +214,78 @@
 	}
 	
 	Wall.prototype.wallpaper = function(background){
-		this.background = background || "none"
+	  if (! background) {
+	    background = { src: "none" }
+	  }
+	  else if (typeof background == "string") {
+	    background = { src: background }
+	  }
+	  else if (! background.src) {
+	    background = { src: "none" }
+	  }
+    background.x = background.x || 0
+    background.y = background.y || 0
+    background.scale = background.scale || 1
+
+		this.background = background
+		this.background.src = this.background.src.replace("url(","").replace(")","")
+
+		console.log(background)
+
+		if (this.background.src == "none") {
+		  this.wallpaperLoad(this.background.src)
+		  return
+		}
+		
+		var img = new Image ()
+		img.onload = function(){
+		  this.backgroundImage = img
+		  this.wallpaperLoad(this.background.src)
+		  this.wallpaperPosition(background)
+		}.bind(this)
+		img.src = this.background.src
+		img.complete && img.onload()
+	}
+	
+	Wall.prototype.wallpaperLoad = function(url){
+	  if (url !== "none") {
+	    url = "url(" + url + ")"
+	  }
 		this.mx.forEach(function(mx){
-      mx.el.style.backgroundImage = background
+      mx.el.style.backgroundImage = url
     })
 	}
 
-	Wall.prototype.wallpaperPosition = function(x, y, scale){
+	Wall.prototype.wallpaperPosition = function(background){
+	  if (this.background.src == "none") { return }
+	  this.background.x = background.x || this.background.x
+	  this.background.y = background.y || this.background.y
+	  this.background.scale = background.scale || this.background.scale || 1
+	  
 		var useX = this.side & FRONT_BACK
 		var shouldFlip = this.side & (LEFT | BACK)
 
-		this.mx.forEach(function(mx){
-      var partitionOffset = useX ? mx.x : mx.z
-      if (shouldFlip) partitionOffset *= -1
-      partitionOffset += mx.width/2
-      var floorOffset = mx.y + mx.height/2
+		var mx, dx, dy
+		var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale )
+		var h = Math.round( this.backgroundImage.naturalHeight * this.background.scale )
 
-      mx.el.style.backgroundPosition = (~~partitionOffset) + "px " + (~~floorOffset) + "px"
-    })
+		this.surface.faces.forEach(function(face, i){
+      
+      if (shouldFlip) {
+        mx = this.mx[this.mx.length-1-i]
+        dx = Math.round( this.background.x + face.x.a )
+        dy = Math.round( this.background.y + face.y.b )
+      }
+      else {
+        mx = this.mx[i]
+        dx = Math.round( this.background.x - face.x.b )
+        dy = Math.round( this.background.y + face.y.b )
+      }
+      
+      mx.el.style.backgroundPosition = dx + 'px ' + dy + 'px'
+      mx.el.style.backgroundSize = w + 'px ' + h + 'px'
+    }.bind(this))
+    bbb = this
 	}