3 files changed, 98 insertions, 11 deletions
diff --git a/assets/javascripts/rectangles/engine/scenery.js b/assets/javascripts/rectangles/engine/scenery.js
index 07583c2..816bf06 100644
--- a/assets/javascripts/rectangles/engine/scenery.js
+++ b/assets/javascripts/rectangles/engine/scenery.js
@@ -1,19 +1,101 @@
+var wall_rotation = {}
+wall_rotation[FRONT] = PI
+wall_rotation[BACK] = 0
+wall_rotation[LEFT] = HALF_PI
+wall_rotation[RIGHT] = -HALF_PI
+
 var scenery = new function(){
 	
 	var base = this;
 	
 	base.init = function(){
-		var img = new MX.Image({
-			src:"http://i.asdf.us/im/48/_1398690981_jules.gif",
-			x: 0,
-			y: 50,
-			z: 0,
-			scale: 1.2,
-			rotationY: 3*PI/4,
-			backface: true,
+		var url = "https://s3.amazonaws.com/luckyplop/f5b2c20e602cdfc86383910f294dcf23d91fa956.png"
+		var img = new Image ()
+		img.onload = function(){ base.load(img) }
+		img.src = url
+		if (img.complete) base.load(img)
+	}
+	
+	base.load = function(img){
+		img.width = 300
+		img.height = ~~(300 * img.naturalHeight/img.naturalWidth)
+		clipper.rooms.forEach(function(room){
+			room.walls.forEach(function(wall){
+				new_image(wall, img)
+			})
 		})
-		scene.add(img)
+	}
 	
+	function new_image (wall, img) {
+		var x, z
+		if (wall.side & FRONT_BACK && wall.rect.x.length() < img.width) {
+			return
+		}
+		if (wall.side & LEFT_RIGHT && wall.rect.y.length() < img.width) {
+			return
+		}
+
+		switch (wall.side) {
+			case FRONT:
+				x = wall.rect.x.a + wall.rect.x.length()/2
+				z = wall.rect.y.a + 10
+				break
+			case BACK:
+				x = wall.rect.x.b - wall.rect.x.length()/2
+				z = wall.rect.y.b - 10
+				break
+			case LEFT:
+				x = wall.rect.x.a + 10
+				z = wall.rect.y.a + wall.rect.y.length()/2
+				break
+			case RIGHT:
+				x = wall.rect.x.b - 10
+ 				z = wall.rect.y.b - wall.rect.y.length()/2
+				break
+		}
+
+		var mx_img = new MX.Image({
+			src: img.src,
+			x: x,
+			y: 70,
+			z: z,
+			scale: 300/img.naturalWidth,
+			rotationY: wall_rotation[ wall.side ],
+			backface: false,
+		})
+		scene.add(mx_img)
+
+		// https://s3.amazonaws.com/luckyplop/f5b2c20e602cdfc86383910f294dcf23d91fa956.png
+		
+		var x = 0, y = 0, z = 0, ry = 3 * PI/4
+		
+		my_mouse = new mouse ({ el: mx_img.el })
+		my_mouse.tube.on("down", function(e, cursor){
+			console.log("down")
+			x = mx_img.x
+			y = mx_img.y
+			z = mx_img.z
+		})
+		my_mouse.tube.on("drag", function(e, cursor){
+			console.log("drag")
+			mx_img.y = y - cursor.y.magnitude()
+			switch (wall.side) {
+				case FRONT:
+					mx_img.x = x + cursor.x.magnitude()
+					break
+				case BACK:
+					mx_img.x = x - cursor.x.magnitude()
+					break
+				case LEFT:
+					mx_img.z = z - cursor.x.magnitude()
+					break
+				case RIGHT:
+					mx_img.z = z + cursor.x.magnitude()
+					break
+			}
+		})
+		my_mouse.tube.on("up", function(e, cursor){
+		})
 	}
 	
 	return base
diff --git a/assets/javascripts/rectangles/util/colors.js b/assets/javascripts/rectangles/util/colors.js
index 031690c..17f0d8f 100644
--- a/assets/javascripts/rectangles/util/colors.js
+++ b/assets/javascripts/rectangles/util/colors.js
@@ -43,7 +43,7 @@
 				wall.randomize_colors()
 			})
 		})
-
+		select.blur()
 	})
 
 	window.colors = color_palettes[select.value]
diff --git a/assets/javascripts/rectangles/util/mouse.js b/assets/javascripts/rectangles/util/mouse.js
index 8d94201..09fee0d 100644
--- a/assets/javascripts/rectangles/util/mouse.js
+++ b/assets/javascripts/rectangles/util/mouse.js
@@ -49,6 +49,8 @@ function mouse (opt) {
 	opt.up && base.tube.on("up", opt.up)
 	opt.rightclick && base.tube.on("rightclick", opt.rightclick)
 	
+	var offset = opt.el.getBoundingClientRect()
+	
 	base.init = function (){
 		base.bind()
 	}
@@ -61,7 +63,6 @@ function mouse (opt) {
 	}
 
 	function positionFromMouse(e) {
-		var offset = opt.el.getBoundingClientRect()
 		var mx = offset.left - e.pageX
 		var my = e.pageY - offset.top
 
@@ -71,6 +72,8 @@ function mouse (opt) {
 	base.mousedown = function(e){
 		e.stopPropagation()
 		
+		offset = opt.el.getBoundingClientRect()
+		
 		var pos = positionFromMouse(e)
 		
 		var x = pos.a, y = pos.b
@@ -82,6 +85,8 @@ function mouse (opt) {
 	base.mousemove = function(e){
 		e.stopPropagation()
 		
+		if (! offset) return;
+		
 		var pos = positionFromMouse(e)
 
 		if (e.shiftKey) {