1 files changed, 105 insertions, 39 deletions

diff --git a/assets/javascripts/rectangles/engine/scenery/image/resize.js b/assets/javascripts/rectangles/engine/scenery/image/resize.js
index 9dbd349..52d61bd 100644
--- a/assets/javascripts/rectangles/engine/scenery/image/resize.js
+++ b/assets/javascripts/rectangles/engine/scenery/image/resize.js
@@ -1,17 +1,20 @@
-Scenery.image.resize = function(base){
+Scenery.resize = new function(){
 
+	var base = this
+	
+	var obj
 	var x, y, z, bounds
 	var dragging = false
 	
 	var dots = [], dot
 
-	this.init = function(){
+	base.init = function(){
 		base.build()
 		base.bind()
 	}
 	
 	// create 9 dots at the corners of the div
-	this.build = function(){
+	base.build = function(){
 		[ TOP,
 			TOP_RIGHT,
 			RIGHT,
@@ -22,25 +25,108 @@ Scenery.image.resize = function(base){
 			TOP_LEFT ].forEach(base.build_dot)
 	}
 	
-	this.build_dot = function(direction) {
-		var dot = new MX.Dot ()
-		dot.direction = direction
-		switch (wall.side) {
-			case FRONT:
-			case BACK:
-				base.mx_img.x = bounds.x.clamp( x + sin(wall_rotation[wall.side]) * cursor.x.magnitude()*cursor_amp )
-				break
-			case LEFT:
-			case RIGHT:
-				base.mx_img.z = bounds.x.clamp( z + cos(wall_rotation[wall.side]) * cursor.x.magnitude()*cursor_amp )
-				break
+	// generate a dot element
+	base.build_dot = function(side) {
+		var dot = new MX.Object3D('.dot')
+		dot.width = 10
+		dot.height = 10
+		dot.side = side
+		$(dot.el).on({
+			mouseenter: function(){ base.hovering = true },
+			mouseleave: function(){ base.hovering = false },
+		})
+		dots.push(dot)
+	}
+
+	base.add_dots = function(){
+		dots.forEach(function(dot){
+			scene.add(dot)
+		})
+	}
+	
+	// rotate the dots as appropriate
+	base.rotate_dots = function(){
+		rotationY = wall_rotation[obj.wall.side]
+		dots.forEach(function(dot){
+			dot.rotationY = rotationY
+		})
+	}
+	
+	// move all the dots to the object's current position
+	base.move_dots = function(){		
+		x = obj.mx_img.x + sin(rotationY) * 3
+		y = obj.mx_img.y
+		z = obj.mx_img.z - cos(rotationY) * 3
+
+		dots.forEach(function(dot){
+			base.move_dot(dot)
+		})
+	}
+		
+	// move a dot .. to the initial position of the image
+	base.move_dot = function(dot){
+		dot.x = x
+		dot.y = y
+		dot.z = z
+		
+		if (dot.side & TOP) {
+			dot.y += obj.img.height / 2
+		}
+		if (dot.side & BOTTOM) {
+			dot.y -= obj.img.height / 2
+		}
+		if (dot.side & LEFT) {
+			dot.x -= cos(rotationY) * obj.img.width / 2
+			dot.z -= sin(rotationY) * obj.img.width / 2
+		}
+		if (dot.side & RIGHT) {
+			dot.x += cos(rotationY) * obj.img.width / 2
+			dot.z += sin(rotationY) * obj.img.width / 2
 		}
-		base.dots.push(dot)
 	}
 
-	this.bind = function(){
+	// pick a new object to focus on and show the dots
+	base.show = function(new_object) {
+		if (obj === new_object) return
+		
+		obj = new_object
+		
+		base.add_dots()
+		base.rotate_dots()
+		base.move_dots()
+	}
+
+	// dismiss the dots on blur
+	var dotsHideTimeout;
+	base.defer_hide = function(){
+		clearTimeout(dotsHideTimeout)
+
+		dotsHideTimeout = setTimeout(function(){
+			if (Scenery.image.hovering || Scenery.resize.hovering || Scenery.mouse.down) return
+			Scenery.resize.hide()
+		}, dot_hide_delay)
+	}
+	base.hide = function () {
+		obj = null
+		dots.forEach(function(dot){
+			scene.remove(dot)
+		})
+	}
+	
+	base.bind = function(){
 		dots.forEach(function(dot){
 			Scenery.mouse.bind_el(dot.el)
+			$(dot.el).bind({
+				mouseenter: function(e){
+					console.log('entered a dot')
+					Scenery.resize.hovering = true 
+				},
+				mouseleave: function(e){
+					console.log('left a dot')
+					Scenery.resize.hovering = false
+					base.defer_hide()
+				}
+			})
 		})
 		Scenery.mouse.on("drag", drag)
 		Scenery.mouse.on("up", up)
@@ -54,35 +140,15 @@ Scenery.image.resize = function(base){
 		Scenery.mouse.off("up", up)
 	}
 	
-	
-	
 	function down (e, cursor){
 		dragging = true
-		x = base.mx_img.x
-		y = base.mx_img.y
-		z = base.mx_img.z
-		bounds = base.wall.bounds_for(img)
+		bounds = obj.wall.bounds_for(img)
 		document.body.classList.add("dragging")
 	}
 
 	function drag (e, cursor){
 		if (! dragging) return
-		
-		base.mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp )
-		switch (wall.side) {
-			case FRONT:
-				base.mx_img.x = bounds.x.clamp( x - cursor.x.magnitude()*cursor_amp )
-				break
-			case BACK:
-				base.mx_img.x = bounds.x.clamp( x + cursor.x.magnitude()*cursor_amp )
-				break
-			case LEFT:
-				base.mx_img.z = bounds.x.clamp( z + cursor.x.magnitude()*cursor_amp )
-				break
-			case RIGHT:
-				base.mx_img.z = bounds.x.clamp( z - cursor.x.magnitude()*cursor_amp )
-				break
-		}
+		// cursor.x.magnitude()*cursor_amp
 	}
 
 	function up (e, cursor){