merge

27 files changed, 247 insertions, 95 deletions

diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js
index 3117112..2d7961b 100644
--- a/public/assets/javascripts/app.js
+++ b/public/assets/javascripts/app.js
@@ -93,6 +93,7 @@ app.position = function(obj){
 		rotationX: obj.rotationX,
 		rotationY: obj.rotationY
 	}
+	console.log(obj.scale)
 	if (obj.scale !== 1) {
 		pos.scale = obj.scale
 	}
diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index d02b2d2..f176e8b 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -25,7 +25,7 @@ MX.Movements = function (cam, viewHeight) {
 			vx = vy = vz = 0,
 			creepFactor = 0.3
 
-	var DEFAULT_SCALE = scale = 1.0
+	var DEFAULT_SCALE = 1.0, scale = DEFAULT_SCALE
 	
 	var pos = { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0 }
 
diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js
index 8b11473..e36c857 100644
--- a/public/assets/javascripts/mx/primitives/mx.image.js
+++ b/public/assets/javascripts/mx/primitives/mx.image.js
@@ -9,6 +9,7 @@ MX.Image = MX.Object3D.extend({
 		layer.x = ops.x || 0
 		layer.y = ops.y || 0
 		layer.z = ops.z || 0
+		layer.scale = ops.scale || 1
 		layer.backface = ops.backface || false
 		layer.media = ops.media
 		
@@ -37,8 +38,8 @@ MX.Image = MX.Object3D.extend({
     var image = new Image()
     image.onload = function(){
       layer.scale = layer.ops.scale || 1
-      layer.width = image.naturalWidth
-      layer.height = image.naturalHeight
+      layer.width = layer.ops.width || image.naturalWidth
+      layer.height = layer.ops.height || image.naturalHeight
       layer.x = layer.ops.x || 0
       layer.y = layer.ops.y || 0
       layer.z = layer.ops.z || 0
diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js
index 1b95989..1e89696 100644
--- a/public/assets/javascripts/rectangles/_env.js
+++ b/public/assets/javascripts/rectangles/_env.js
@@ -22,15 +22,25 @@ environment.init = function(){
 	
 	app.movements.gravity(true)
 	
-	// $("#map").hide()
-	
 	Rooms.init()
 	Scenery.init()
 	
 	scene.update()
 	environment.update()
+	
+	var minimap_el = document.querySelector("#minimap .el")
+	if (minimap_el) {
+		window.minimap = new Map ({
+			type: "minimap",
+			el: document.querySelector("#minimap .el"),
+			width: 130,
+			height: 130,
+			zoom: -4.8
+		})
+	}
 }
 environment.update = function(t){
 	map.update()
+	window.minimap && window.minimap.update && minimap.update()
 	z = false
 }
diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index c27c159..d5a8442 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -1,42 +1,70 @@
 /*
 */
 
-var Map = function(){
+var Map = function(opt){
+	
+	opt = defaults(opt, {
+		type: "editor",
+		el: document.querySelector("#map"),
+		width: window.innerWidth,
+		height: window.innerHeight,
+		zoom: -2,
+		zoom_min: -6.2,
+		zoom_max: 0,
+	})
+	
 	var base = this
-	base.el = document.querySelector("#map")
+	base.el = opt.el
 	
 	if (! base.el) return
 	
-	base.dimensions = new vec2(window.innerWidth, window.innerHeight)
+	base.dimensions = new vec2(opt.width, opt.height)
 	base.center = new vec2(0,0)
 	
-	base.sides = function(){
+	base.sides_for_center = function(){
 		var sides = base.dimensions.clone().div(2).div(base.zoom)
 		return new Rect( base.center.a - sides.a, -base.center.b - sides.b,
 										 base.center.a + sides.a, -base.center.b + sides.b )
 	}
+	base.sides_for_camera = function(){
+		var sides = base.dimensions.clone().div(2).div(base.zoom)
+		return new Rect( scene.camera.x - sides.a, scene.camera.z - sides.b,
+										 scene.camera.x + sides.a, scene.camera.z + sides.b )
+	}
+
 
-	base.zoom = 1/4
-	base.zoom_exponent = -2
 	base.set_zoom = function (n) {
+		n = clamp(n, opt.zoom_min, opt.zoom_max)
 		base.zoom_exponent = n
-		base.zoom = pow(2, base.zoom_exponent)
+		base.zoom = pow(2, n)
 	}
+	base.set_zoom(opt.zoom)
 
 	var canvas = base.canvas = document.createElement("canvas")
 	canvas.width = base.dimensions.a
 	canvas.height = base.dimensions.b
 	
-	document.querySelector("#map").appendChild(canvas)
+	base.el.appendChild(canvas)
 	
-	base.draw = new MapDraw (base)
-	base.ui = new MapUI (base)
+	switch (opt.type) {
+		case "editor":
+			base.draw = new Map.Draw (base)
+			base.ui = new Map.UI.Editor (base)
+			base.sides = base.sides_for_center
+			$(window).resize(base.resize)
+			break
+		
+		case "minimap":
+			base.draw = new Map.Draw (base, { center: scene.camera, minimap: true })
+			base.ui = new Map.UI.Minimap (base)
+			base.sides = base.sides_for_camera
+			break
+	}
 	
 	base.resize = function(){
 		canvas.width = base.dimensions.a = window.innerWidth
 		canvas.height = base.dimensions.b = window.innerHeight
 	}
-	$(window).resize(base.resize)
 
 	base.update = function(){
 		base.draw.animate()
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index a441de4..8e1fe5a 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -1,5 +1,7 @@
 
-var MapDraw = function(map){
+Map.Draw = function(map, opt){
+
+	opt = defaults(opt, { minimap: false })
 
 	var draw = this
 	
@@ -8,17 +10,30 @@ var MapDraw = function(map){
 	draw.animate = function(){
 		ctx.save()
 		draw.clear()
-		draw.ruler()
+		// draw.ruler()
 
-		ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
-		ctx.scale( map.zoom, map.zoom )
-		ctx.translate( map.center.a,  map.center.b)
-		ctx.scale( -1, 1 )
+		if (opt.minimap) {
+			ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
+			ctx.scale( map.zoom, map.zoom )
+			ctx.translate( opt.center.x, - opt.center.z )
+			ctx.scale( -1, 1 )
 
-		draw.regions(Rooms.regions, colors)
-		draw.mouse(map.ui.mouse.cursor)
-		draw.coords()
-		scene && draw.camera(scene.camera)
+			draw.coords()
+			draw.regions(Rooms.regions, [ "#fff" ])
+			draw.camera(scene.camera)
+		}
+		
+		else {
+			ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
+			ctx.scale( map.zoom, map.zoom )
+			ctx.translate( map.center.a,  map.center.b )
+			ctx.scale( -1, 1 )
+
+			draw.regions(Rooms.regions, colors)
+			draw.mouse(map.ui.mouse.cursor)
+			draw.coords()
+			scene && draw.camera(scene.camera)
+		}
 
 		ctx.restore()
 	}
@@ -29,7 +44,7 @@ var MapDraw = function(map){
 
 		ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
 		ctx.scale( map.zoom, map.zoom )
-		ctx.translate( map.center.a,  map.center.b)
+		ctx.translate( map.center.a,  map.center.b )
 		ctx.scale( -1, 1 )
 
 		draw.regions(Rooms.regions, ["#fff"])
@@ -109,6 +124,7 @@ var MapDraw = function(map){
 	}
 
 	draw.coords = function(){
+		/*
 		ctx.fillStyle = "#888";
 		dot_at(0,0)
 		ctx.fillStyle = "#bbb";
@@ -120,6 +136,7 @@ var MapDraw = function(map){
 		ctx.fillStyle = "#eee";
 		dot_at(300,0)
 		dot_at(0,300)
+		*/
 		
 		ctx.strokeStyle = "rgba(0,0,0,0.1)"
 		ctx.lineWidth = 1/map.zoom
diff --git a/public/assets/javascripts/rectangles/engine/map/ui.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
index 7890c9b..262272b 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
@@ -1,5 +1,6 @@
 
-var MapUI = function(map){
+Map.UI = Map.UI || {}
+Map.UI.Editor = function(map){
 
 	var base = this
 
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
new file mode 100644
index 0000000..fabbdb9
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
@@ -0,0 +1,81 @@
+
+Map.UI = Map.UI || {}
+
+Map.UI.Minimap = function(map){
+
+	var base = this
+
+	base.creating = base.dragging = base.resizing = false
+
+	base.mouse = new mouse({
+		el: map.el,
+		down: down,
+		move: move,
+		drag: drag,
+		up: up,
+		rightclick: rightclick,
+	})
+
+	base.wheel = new wheel({
+		el: map.el,
+		update: mousewheel,
+	})
+	
+	var x, z
+	
+	//
+	
+	function down (e, cursor){
+		cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+		cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+		
+		x = scene.camera.x
+		z = scene.camera.z
+
+		if (e.ctrlKey || e.which === 3) {
+			cursor.quantize(1/map.zoom)
+			map.center.a = cursor.x.a
+			map.center.b = -cursor.y.a
+			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
+		}
+	}
+
+	function move (e, cursor) {
+		cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+		cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+	}
+
+	function drag (e, cursor) {
+		cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
+		cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b
+
+		scene.camera.x = x + cursor.x.magnitude() * map.zoom * 16
+		scene.camera.z = z + cursor.y.magnitude() * map.zoom * 16
+		Rooms.mover.room = null
+
+		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.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+		new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+
+		base.dragging = false
+	}
+
+	function mousewheel (e, val, delta){
+		map.set_zoom(map.zoom_exponent - delta/20)
+	}
+	
+	function rightclick (e){
+	}
+}
diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
index 0a3187c..3fe6b66 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
@@ -45,7 +45,6 @@ var Scenery = new function(){
 		var scenery = base.media.map(function(media){
 			return media.serialize()
 		})
-		console.log(scenery)
 		return scenery
 	}
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js
index ce4f297..8acc1c2 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/move.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/move.js
@@ -56,11 +56,11 @@ Scenery.move = function(base){
 	function switch_wall (e, new_wall, cursor){
 		if (! dragging) return
 		if (new_wall.uid == base.wall.uid) return
-		if (! new_wall.fits(base.media)) return
+		if (! new_wall.fits(base.media, base.scale)) return
 
 		var old_wall_side = base.wall.side
 		var wall_group = old_wall_side | new_wall.side
-		
+
 		base.set_wall(new_wall)
 
 		bounds = base.bounds
diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js
index 2a400f5..ac13326 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/resize.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js
@@ -6,7 +6,7 @@ Scenery.resize = new function(){
 	var obj
 	var x, y, z, bounds
 	var dragging = false
-	var dimensions, position
+	var dimensions, position, scale
 
 	var dots = [], dot, selected_dot
 
@@ -147,54 +147,48 @@ Scenery.resize = new function(){
 		selected_dot = selection[0]
 		dragging = true
 		
-		dimensions = new vec2(obj.mx.width, obj.mx.height)
+		dimensions = obj.dimensions
 		position = new vec3(obj.mx.x, obj.mx.y, obj.mx.z)
+		scale = obj.mx.scale
 
-		console.log("down on", sidesToString(selected_dot.side))
-		
 		document.body.classList.add("dragging")
 	}
 
 	function drag (e, cursor){
 		if (! dragging) return
-		// cursor.x.magnitude()*cursor_amp
 
 		var x_sign = selected_dot.side & LEFT ? -1 : selected_dot.side & RIGHT ? 1 : 0
 		var y_sign = selected_dot.side & TOP ? -1 : selected_dot.side & BOTTOM ? 1 : 0
+		var width = cursor.x.magnitude()
+		var height = cursor.y.magnitude()
+		var mag = cursor.magnitude()
+		var old_width = dimensions.a * scale
+
+		if (abs(width) > abs(height)) {
+			mag = x_sign * mag * sign(width)
+		}
+		else {
+			mag = y_sign * mag * sign(height)
+		}
 		
-		var translation = new vec2( x_sign * cursor.x.magnitude() * cursor_amp, y_sign * cursor.y.magnitude() * cursor_amp )
+ 		obj.mx.scale = scale * (old_width + mag) / old_width
 
 		if (selected_dot.side & LEFT_RIGHT) {
-			obj.mx.width = dimensions.a + translation.a
-			obj.mx.x = position.a + x_sign * cos(rotationY) * translation.a/2 * obj.mx.scale
-			obj.mx.z = position.c + x_sign * sin(rotationY) * translation.a/2 * obj.mx.scale
+			obj.mx.x = position.a + cos(rotationY) * mag/2 * (x_sign)
+			obj.mx.z = position.c + sin(rotationY) * mag/2 * (x_sign)
 		}
 		if (selected_dot.side & TOP_BOTTOM) {
-			obj.mx.height = dimensions.b + translation.b
-			obj.mx.y = position.b - y_sign * translation.b/2 * obj.mx.scale
+			obj.mx.y = position.b - mag/2 * y_sign
 		}
-		
-// 		bounds = obj.wall.bounds_for(dimensions)
-
-// 		base.mx.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp )
-// 		switch (base.wall.side) {
-// 			case FRONT:
-// 			case BACK:
-// 				base.mx.x = bounds.x.clamp( x + cos(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp )
-// 				break
-// 			case LEFT:
-// 			case RIGHT:
-// 				base.mx.z = bounds.x.clamp( z + sin(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp )
-// 				break
-// 		}
 
 		base.move_dots()
-		
 	}
 
 	function up (e, cursor){
 		dragging = false
 		selected_dot = null
+		obj.scale = obj.mx.ops.scale = obj.mx.scale
+		obj.set_wall()
 		document.body.classList.remove("dragging")
 	}
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
index f892c0c..1aa037c 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
@@ -8,6 +8,7 @@ Scenery.types.base = Fiber.extend(function(base){
 			this.move = new Scenery.move (this)
 			this.media = opt.media
 			this.dimensions = new vec2(this.media.width, this.media.height)
+			this.scale = this.media.scale
 			
 			if (opt.wall) {
 				this.set_wall(opt.wall)
@@ -42,7 +43,7 @@ Scenery.types.base = Fiber.extend(function(base){
 
 		set_wall: function(wall){
 			this.wall = wall || this.wall
-			this.bounds = this.wall.bounds_for(this.media)
+			this.bounds = this.wall.bounds_for(this.media, this.scale)
 			this.center = this.wall.center()
 		},
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js
index 98b26f4..b668e6a 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js
@@ -5,7 +5,7 @@ Scenery.types.image = Scenery.types.base.extend(function(base){
 	
 		init: function(opt){
 			base.init.call(this, opt)
-			this.scale = this.media.scale = 300 / max(300, this.media.width)
+			this.scale = 300 / max(300, this.media.width)
 
 			this.build()
 			this.bind()
@@ -16,6 +16,7 @@ Scenery.types.image = Scenery.types.base.extend(function(base){
 		build: function(){
 			this.mx = new MX.Image({
 				src: this.media.url,
+				scale: this.scale,
 				y: this.scale * this.media.height/2,
 				backface: false,
 			})
@@ -24,12 +25,13 @@ Scenery.types.image = Scenery.types.base.extend(function(base){
 
 		serialize: function(){
 			var data = base.serialize.call(this)
-			console.log(data)
 			return data
 		},
 	
 		deserialize: function(data){
 			this.mx.move(data.position)
+			this.mx.ops.width = data.dimensions.a
+			this.mx.ops.height = data.dimensions.b
 		},
 	}
 	
diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js
index cb14e66..a4fbd87 100644
--- a/public/assets/javascripts/rectangles/models/rect.js
+++ b/public/assets/javascripts/rectangles/models/rect.js
@@ -25,6 +25,12 @@ window.Rect = (function(){
 	Rect.prototype.area = function(){
 		return this.x.length() * this.y.length()
 	}
+	Rect.prototype.magnitude = function(){
+		return dist(this.x.a, this.y.a, this.x.b, this.y.b)
+	}
+	Rect.prototype.maxDimension = function(){
+		return abs(this.width) > abs(this.height) ? this.width : this.height
+	}
 
 	Rect.prototype.mul = function(n){
 		this.x.mul(n)
diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js
index e56a010..5cdd54c 100644
--- a/public/assets/javascripts/rectangles/models/vec2.js
+++ b/public/assets/javascripts/rectangles/models/vec2.js
@@ -8,6 +8,9 @@ vec2.prototype.magnitude = function(){
 vec2.prototype.length = function(){
 	return abs(this.b-this.a)
 }
+vec2.prototype.dist = function(){
+	return dist(0,this.a,0,this.b)
+}
 vec2.prototype.clone = function(){
 	return new vec2(this.a, this.b)
 }
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index e327070..b2a5b12 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -40,8 +40,8 @@ window.Wall = (function(){
 			mousemove: function(e){
 			},
 			mousedown: function(){
-				base.randomize_colors()
-				console.log(sidesToString(base.side))
+				// base.randomize_colors()
+				// console.log(sidesToString(base.side))
 				if (Scenery.nextMedia) {
 					Scenery.addNextToWall(base)
 				}
@@ -49,19 +49,21 @@ window.Wall = (function(){
 		})
 	}
 	
-	Wall.prototype.bounds_for = function(img) {
+	Wall.prototype.bounds_for = function(img, scale) {
+		scale = scale || 1
 		var coord = this.side & FRONT_BACK ? this.rect.x : this.rect.y
-		var halfWidth = img.width/2 * img.scale
-		var halfHeight = img.height/2 * img.scale
+		var halfWidth = img.width/2 * scale
+		var halfHeight = img.height/2 * scale
 
 		return new Rect( new vec2( coord.a + halfWidth, coord.b - halfWidth ),
 		                 new vec2( halfHeight, Rooms.list[this.room].height - halfHeight ) )
 	}
-	Wall.prototype.fits = function(img){
-		if (this.side & FRONT_BACK && this.rect.x.length() < img.width * img.scale) {
+	
+	Wall.prototype.fits = function(img, scale){
+		if (this.side & FRONT_BACK && this.rect.x.length() < img.width * scale) {
 			return false
 		}
-		if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width * img.scale) {
+		if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width * scale) {
 			return false
 		}
 		return true
@@ -117,7 +119,7 @@ window.Wall = (function(){
 	}
 
 	Wall.prototype.randomize_colors = function(){
-		var color = choice(window.colors)
+		var color = window.grayColors[ this.side | this.half_side ]
 		this.siblings().forEach(function(w){ w.color(color) })
 	}
 
diff --git a/public/assets/javascripts/rectangles/util/colors.js b/public/assets/javascripts/rectangles/util/colors.js
index 58553b1..c590072 100644
--- a/public/assets/javascripts/rectangles/util/colors.js
+++ b/public/assets/javascripts/rectangles/util/colors.js
@@ -16,10 +16,10 @@
 			"rgba(0,0,0,0.4)",
 		],
 		bone: [
-			"hsla(0,0%,90%,0.95)",
-			"hsla(0,0%,80%,0.95)",
+			"hsla(0,0%,91%,0.95)",
+			"hsla(0,0%,88%,0.95)",
 			"hsla(0,0%,85%,0.95)",
-			"hsla(0,0%,75%,0.95)",
+			"hsla(0,0%,82%,0.95)",
 		],
 		colors: [
 			"rgba(255,0,0,0.5)",
@@ -53,5 +53,9 @@
 	})
 
 	window.colors = color_palettes[select ? select.value : 'bone']
+	window.grayColors = {}
+	_.zip([FRONT, LEFT, BACK, RIGHT], color_palettes.bone).map(function(pair){
+		window.grayColors[pair[0]] = pair[1]
+	})
 	window.palettes = color_palettes
 })()
diff --git a/public/assets/javascripts/ui/SiteRouter.js b/public/assets/javascripts/ui/SiteRouter.js
index f0c5530..dae2131 100644
--- a/public/assets/javascripts/ui/SiteRouter.js
+++ b/public/assets/javascripts/ui/SiteRouter.js
@@ -12,6 +12,7 @@ var SiteRouter = Router.extend({
 		"click [data-role='edit-document-modal']": 'editDocument',
 		"click [data-role='delete-document-modal']": 'destroyDocument',
 		"click [data-role='show-layouts-modal']": 'layoutPicker',
+		"click [data-role='show-projects-modal']": 'projectPicker',
 	},
 	
 	routes: {
@@ -61,7 +62,6 @@ var SiteRouter = Router.extend({
 		this.layoutsModal.load()
 	},
 
-
 	projectPicker: function(e){
 		e && e.preventDefault()
 		window.history.pushState(null, document.title, "/project")
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 76218fe..f966ab6 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -7,9 +7,9 @@ var EditorToolbar = View.extend({
 		"click [data-role='toggle-project-settings']": 'toggleSettings',
 		"click [data-role='open-media-viewer']": 'openMediaViewer',
 		"click [data-role='resize-media']": 'resize',
+		"click [data-role='delete-media']": 'deleteMedia',
 		"click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper',
 		"click [data-role='toggle-light-control']": 'toggleLightControl',
-		"click [data-role='delete-media']": 'deleteMedia',
 		"click [data-role='edit-wall-text']": 'editWallText',
 	},
 	
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index d4969c1..b87ac83 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -29,6 +29,7 @@ var EditorView = View.extend({
 	
 	ready: function(data){
 		$("#map").hide()
+				
 		this.settings.load(data)
 	},
 	
@@ -37,6 +38,5 @@ var EditorView = View.extend({
 		this.ready(data)
 	}
 
-
 })
 
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index 30287a5..b7fea07 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -60,6 +60,8 @@ var MediaUpload = View.extend({
 	handleFileSelect: function(e) {
 		e.stopPropagation();
 		e.preventDefault();
+		
+		this.parent.mediaViewer.deleteArmed(false)
 
 		var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
 
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 05e666b..2535f1b 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -35,7 +35,7 @@ var MediaViewer = ModalView.extend({
 	
 	hide: function(){
 		this.__super__.hide.call(this)
-		this.deleteArmed(null, false)
+		this.deleteArmed(false)
 		this.parent.mediaUpload.hide()
 	},
 
@@ -72,7 +72,10 @@ var MediaViewer = ModalView.extend({
 
 	deleteIsArmed: false,
 	deleteArmed: function(e, state){
-		if (typeof state != "boolean") {
+		if (typeof e == "boolean") {
+			state = e
+		}
+		else if (typeof state != "boolean") {
 			state = ! this.deleteIsArmed
 		}
 		this.deleteIsArmed = state
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index 47fa193..46ed634 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -52,6 +52,11 @@ var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 		
 		// actually do
 		window.location.pathname = "/project/" + $layout.data("slug")
+	},
+	
+	newProject: function(e){
+		e && e.preventDefault()
+		window.location.pathname = "/project/new"
 	}
 
 })
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 93d68ca..4152a1e 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -748,10 +748,10 @@ h5 {
   background-image:url(https://s3.amazonaws.com/luckyplop/735c46b0268cd511a22c37bc0c11e9f60c4459b2.png)!important;
   cursor:move;
 }
-.deleteActive .image {
+.deleteActive .mx-object3d.image {
   cursor:pointer;
 }
-.deleteActive .image:after {
+.deleteActive .mx-object3d.image:after {
   content: "\e68f";
   font-family: 'ionicons';
   speak: none;
@@ -978,9 +978,12 @@ h5 {
 	left: 20px;
 	color: black;
 	cursor:pointer;
-	background:black;
+	background:white;
 	-webkit-transform: translateY(0px);
   transform: translateY(0px);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
 }
 #minimap.hide{
   -webkit-transform: translateY(155px);
diff --git a/views/editor.ejs b/views/editor.ejs
index cd31b41..a79eb9a 100755
--- a/views/editor.ejs
+++ b/views/editor.ejs
@@ -20,21 +20,9 @@
 			[[ include controls/editor/settings ]]
 		</div>
 
-	<!-- 
 		<div id="minimap" class="vvbox">
 			<span class="el"></span>
 		</div>
-	 -->
-
-		<select id="palette">
-			<option>colors</option>
-			<option>redblue</option>
-			<option>gray</option>
-			<option selected>bone</option>
-			<option>alpha</option>
-			<option>white</option>
-			<option>black</option>
-		</select>
 
 		<div id="hud">
 			<div id="map" style="display: block">
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 55505ed..e83f42a 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -7,7 +7,7 @@
 		<a href="/layout" data-role="show-layouts-modal" class="topLink">Layouts</a>
 	[[ } ]]
 
-	<a href="/project" class="topLink">Projects</a>
+	<a href="/project" data-role="show-projects-modal" class="topLink">Projects</a>
 
 	[[ if (profile && String(user._id) == String(profile._id)) { ]]
 	<a href="/profile" data-role="edit-profile-modal" class="topLink editProfile">Edit Profile <span class="icon-ios7-gear-outline"></span></a>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 2d34480..abc9623 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -10,8 +10,8 @@
 <script type="text/javascript" src="/assets/javascripts/util.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/rectangles/_env.js"></script>
-<script type="text/javascript" src="/assets/javascripts/rectangles/util/colors.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/util/colors.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/debug.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/sort.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/wheel.js"></script>
@@ -38,7 +38,8 @@
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/video.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
-<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui_editor.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui_minimap.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/mx/mx.js"></script>