map.ui = new function(){

	var base = this
	base.el = document.querySelector("#map")

	base.creating = base.dragging = false

	base.mouse = new mouse({
		el: base.el,
		down: down,
		move: move,
		drag: drag,
		up: up,
	})

	base.wheel = new wheel({
		el: base.el,
		update: function(e, val, delta){
			// do something with val
		},
	})
	
	//
	
	function down (e, cursor){
		cursor.x.add( map.center.a + map.bounds.a/2 )
		cursor.y.add( -map.center.b - map.bounds.b/2 )

		var intersects = clipper.rooms.filter(function(r){
			return r.focused = r.rect.contains(cursor.x.a, cursor.y.a)
		})

		if (intersects.length){
			base.dragging = intersects[0]
		}
		else {
			base.creating = true
		}

		if (e.shiftKey && base.dragging) {
			base.dragging.rect.quantize(10)
		}
	}

	function move (e, cursor) {
		cursor.x.add( map.center.a + map.bounds.a/2 )
		cursor.y.add( -map.center.b - map.bounds.b/2 )
		z=true
	}

	function drag (e, cursor) {
		cursor.x.b += map.center.a + map.bounds.a/2
		cursor.y.b += -map.center.b - map.bounds.b/2

		if (base.dragging) {
			base.dragging.rect.translation.a = cursor.x.magnitude()
			base.dragging.rect.translation.b = cursor.y.magnitude()
		}
	}

	function up (e, cursor) {

		if (base.creating) {
			if (cursor.height() != 0 && cursor.width() != 0) {
				cursor.x.abs()
				cursor.y.abs()
				clipper.add_room( cursor )
			}
		}
		
		if (base.dragging) {
			base.dragging.rect.translate()
		}

		base.creating = base.dragging = false
	}
}