Scenery.resize = new function(){

	var base = this
	
	var obj
	var x, y, z, bounds
	var dragging = false
	
	var dots = [], dot

	base.init = function(){
		base.build()
		base.bind()
	}
	
	// create 9 dots at the corners of the div
	base.build = function(){
		[ TOP,
			TOP_RIGHT,
			RIGHT,
			BOTTOM_RIGHT,
			BOTTOM,
			BOTTOM_LEFT,
			LEFT,
			TOP_LEFT ].forEach(base.build_dot)
	}
	
	// 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
		}
	}

	// 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)
	}

	this.unbind = function(){
		dots.forEach(function(dot){
			Scenery.mouse.unbind_el(dot.el)
		})
		Scenery.mouse.off("drag", drag)
		Scenery.mouse.off("up", up)
	}
	
	function down (e, cursor){
		dragging = true
		bounds = obj.wall.bounds_for(img)
		document.body.classList.add("dragging")
	}

	function drag (e, cursor){
		if (! dragging) return
		// cursor.x.magnitude()*cursor_amp
	}

	function up (e, cursor){
		dragging = false
		document.body.classList.remove("dragging")
	}

}