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,
		rightclick: rightclick,
	})

	base.wheel = new wheel({
		el: base.el,
		update: mousewheel,
	})
	
	//
	
	function down (e, cursor){
		cursor.x.div(map.zoom).add(  map.center.a + map.bounds.a/2 )
		cursor.y.div(map.zoom).add( -map.center.b - map.bounds.b/2 )
console.log(cursor+"")
		if (e.ctrlKey || e.which === 3) {
			map.center.a = cursor.x.a + map.bounds.a * map.zoom
			map.center.b = -cursor.y.a + map.bounds.b * map.zoom
			console.log(map.center+"")
			cursor.x.b = cursor.x.a
			cursor.y.b = cursor.y.a
			base.mouse.down = false
			e.preventDefault()
			e.stopPropagation()
			return
		}

		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.div(map.zoom).add(  map.center.a + map.bounds.a/2 )
		cursor.y.div(map.zoom).add( -map.center.b - map.bounds.b/2 )
	}

	function drag (e, cursor) {
		cursor.x.b = (cursor.x.b / map.zoom) + map.center.a + map.bounds.a/2
		cursor.y.b = (cursor.y.b / map.zoom) - 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, new_cursor) {

		new_cursor.x.div(map.zoom).add(  map.center.a + map.bounds.a/2 )
		new_cursor.y.div(map.zoom).add( -map.center.b - map.bounds.b/2 )

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

		base.creating = base.dragging = false
	}

	function mousewheel (e, val, delta){
		var cursor = base.mouse.cursor

		var intersects = clipper.rooms.filter(function(r){
			return r.focused = r.rect.contains(cursor.x.a, cursor.y.a)
		})
		
		if (intersects.length) {
			intersects[0].height = clamp( ~~(intersects[0].height - delta), 200, 800 )
			clipper.update()
		}
	}
	
	function rightclick (e){
	}
}