Scenery.image.resize = function(base){

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

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

	this.bind = function(){
		dots.forEach(function(dot){
			Scenery.mouse.bind_el(dot.el)
		})
		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
		x = base.mx_img.x
		y = base.mx_img.y
		z = base.mx_img.z
		bounds = base.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
		}
	}

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

}