Merge branch 'master' of github.com:okfocus/vvalls

35 files changed, 564 insertions, 262 deletions

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 0ce03db..5ba5d69 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -25,193 +25,218 @@ MX.Movements = function (cam) {
 			vx = vy = vz = 0,
 			creepFactor = 0.3
 
+	var mouseX, mouseY, dx, dy, rotX, rotY, dragging = false
+
+	var trackpad
+
 	var DEFAULT_SCALE = 1.0, scale = DEFAULT_SCALE
 	
 	var pos = { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0 }
 
   $(document).one("keydown", function(){ $("#keyhint").fadeOut(250) })
 
-	return {
+	var exports = {
 
 		init: function () {
+		
+		  trackpad = new wheel ({
+		  	el: scene.el,
+		  	update: exports.mousewheel,
+		  })
+		  
+			document.addEventListener('keydown', exports.keydown)
+			document.addEventListener('keyup', exports.keyup)
+			document.addEventListener('mousedown', exports.mousedown)
+			document.addEventListener('mousemove', exports.mousemove)
+			document.addEventListener('mouseup', exports.mouseup)
+			window.addEventListener('blur', exports.reset)
+			window.addEventListener('focus', exports.reset)
+		},
+		
+		keydown: function (e) {
+			// console.log(e.keyCode)
+			if (locked || e.altKey || e.metaKey || e.ctrlKey) {
+				return
+			}
+			switch ( e.keyCode ) {
+			
+				case 16: // shift
+					creeping = true
+					break
 
-			document.addEventListener('keydown', function (e) {
-        // console.log(e.keyCode)
-				if (locked || e.altKey || e.metaKey || e.ctrlKey) {
-				  return
-				}
-				switch ( e.keyCode ) {
-				
-					case 16: // shift
-						creeping = true
-						break
-
-					case 38: // up
-					case 87: // w
-						moveForward = true
-						break
+				case 38: // up
+				case 87: // w
+					moveForward = true
+					break
 
-					case 65: // a
-						moveLeft = true
-						break
+				case 65: // a
+					moveLeft = true
+					break
 
-					case 40: // down
-					case 83: // s
-						moveBackward = true
-						break
+				case 40: // down
+				case 83: // s
+					moveBackward = true
+					break
 
-					case 68: // d
-						moveRight = true
-						break
+				case 68: // d
+					moveRight = true
+					break
 
-					case 37: // left
-					case 81: // q
-						turnLeft = true
-						break
-							
-					case 39: // right
-					case 69: // e
-						turnRight = true
-						break
-				
-					case 82: // r
-						turnUp = true
-						break
+				case 37: // left
+				case 81: // q
+					turnLeft = true
+					break
+						
+				case 39: // right
+				case 69: // e
+					turnRight = true
+					break
+			
+				case 82: // r
+					turnUp = true
+					break
 
-					case 70: // f
-						turnDown = true
-						break
+				case 70: // f
+					turnDown = true
+					break
 
-					case 32: // space
-						if (gravity) {
-							jumping = true
-							vy = abs(vy) + jumpV * scale
-							if (e.shiftKey) {
-								vy *= -1
-							}
+				case 32: // space
+					if (gravity) {
+						jumping = true
+						vy = abs(vy) + jumpV * scale
+						if (e.shiftKey) {
+							vy *= -1
 						}
-						else {
-							if (e.shiftKey) {
-								moveDown = true
-							}
-							else {
-								moveUp = true
-							}
-						}
-						break
-
-					case 27:  // esc
-					  if (Scenery.nextMedia) {
-					    Scenery.nextMedia = null
-              app.tube('cancel-scenery')
-					  }
-					  else if (Scenery.nextWallpaper) {
-					    Scenery.nextWallpaper = null
-              app.tube('cancel-wallpaper')
-					  }
-						else if (app.controller && app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) {
-						  app.controller.mediaViewer.hide()
+					}
+					else {
+						if (e.shiftKey) {
+							moveDown = true
 						}
 						else {
-              app.controller.toolbar.toggleMap()
+							moveUp = true
 						}
-						break
-				}
-			})
+					}
+					break
 
-			document.addEventListener('keyup', function (e) {
-				if (locked) return;
-				switch ( e.keyCode ) {
-			
-					case 16: // shift
-						creeping = false
-						break
+				case 27:  // esc
+					if (Scenery.nextMedia) {
+						Scenery.nextMedia = null
+						app.tube('cancel-scenery')
+					}
+					else if (Scenery.nextWallpaper) {
+						Scenery.nextWallpaper = null
+						app.tube('cancel-wallpaper')
+					}
+					else if (app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) {
+						app.controller.mediaViewer.hide()
+					}
+					else if (app.controller.lightControl.$el.hasClass('active')) {
+						app.controller.lightControl.hide()
+					}
+					else {
+						app.controller.toolbar.toggleMap()
+					}
+					break
+			}
+		},
 
-					case 38: // up
-					case 87: // w
-						moveForward = false
-						break
+		keyup: function (e) {
+			if (locked) return;
+			switch ( e.keyCode ) {
+		
+				case 16: // shift
+					creeping = false
+					break
 
-					case 65: // a
-						moveLeft = false
-						break
+				case 38: // up
+				case 87: // w
+					moveForward = false
+					break
 
-					case 40: // down
-					case 83: // s
-						moveBackward = false
-						break
+				case 65: // a
+					moveLeft = false
+					break
 
-					case 68: // d
-						moveRight = false
-						break
+				case 40: // down
+				case 83: // s
+					moveBackward = false
+					break
 
-					case 37: // left
-					case 81: // q
-						turnLeft = false
-						break
-							
-					case 39: // right
-					case 69: // e
-						turnRight = false
-						break
+				case 68: // d
+					moveRight = false
+					break
 
-					case 82: // r
-						turnUp = false
-						break
+				case 37: // left
+				case 81: // q
+					turnLeft = false
+					break
+						
+				case 39: // right
+				case 69: // e
+					turnRight = false
+					break
 
-					case 70: // f
-						turnDown = false
-						break
+				case 82: // r
+					turnUp = false
+					break
 
-					case 32: // space
-						moveUp = moveDown = false
-						break
+				case 70: // f
+					turnDown = false
+					break
+
+				case 32: // space
+					moveUp = moveDown = false
+					break
 
 /*					
-					case 48: // 0
-						cam.rotationX = 0
-						cam.rotationY = 0
-						cam.x = 0
-						cam.y = viewHeight
-						cam.z = 0
-						break
+				case 48: // 0
+					cam.rotationX = 0
+					cam.rotationY = 0
+					cam.x = 0
+					cam.y = viewHeight
+					cam.z = 0
+					break
 */
-				}
-			})
-			
-			var mouseX, mouseY, dx, dy, rotX, rotY, dragging = false
-			document.addEventListener('mousedown', function (e) {
-				if (locked) return;
-				mouseX = e.pageX
-				mouseY = e.pageY
-				rotX = cam.rotationX
-				rotY = cam.rotationY
-				dragging = true
-			})
-			
-			document.addEventListener('mousemove', function (e) {
-				if (locked || ! dragging) return
-				var dx = (e.pageX - mouseX) / window.innerWidth * Math.PI/3
-				var dy = (e.pageY - mouseY) / window.innerHeight * Math.PI/3
-				cam.rotationY = rotY + dx
-				cam.rotationX = clamp( rotX - dy, rotationX_min, rotationX_max )
-			})
-			
-			document.addEventListener('mouseup', function (e) {
-				dragging = false
-			})
-			
-			window.addEventListener('blur', reset)
-			window.addEventListener('focus', reset)
-			function reset(){
-				moveForward = moveLeft = moveBackward = moveRight = moveUp = moveDown = turnLeft = turnRight = jumping = dragging = creeping = false
 			}
+		},
+
+		mousedown: function (e) {
+			if (locked) return;
+			mouseX = e.pageX
+			mouseY = e.pageY
+			rotX = cam.rotationX
+			rotY = cam.rotationY
+			dragging = true
+		},
+			
+		mousemove: function (e) {
+			if (locked || ! dragging) return
+			var dx = (e.pageX - mouseX) / window.innerWidth * Math.PI/3
+			var dy = (e.pageY - mouseY) / window.innerHeight * Math.PI/3
+			cam.rotationY = rotY + dx
+			cam.rotationX = clamp( rotX - dy, rotationX_min, rotationX_max )
+		},
+		
+		mouseup: function (e) {
+			dragging = false
+		},
+		
+		reset: function(){
+			moveForward = moveLeft = moveBackward = moveRight = moveUp = moveDown = turnLeft = turnRight = jumping = dragging = creeping = false
+		},
+		
+		mousewheel: function (e, deltaY, deltaX) {
+			cam.rotationY += deltaX / 20
+
+			pos.x += deltaY * Math.cos(cam.rotationY + Math.PI / 2) * 10
+			pos.z += deltaY * Math.sin(cam.rotationY + Math.PI / 2) * 10
 
+			app.tube("move", pos)
 		},
 
 		update: function () {
 
-			if (locked) return;
+			if (locked) { return }
 			
 			var ry = cam.rotationY
 			var s = creeping ? scale * creepFactor : scale
@@ -301,4 +326,6 @@ MX.Movements = function (cam) {
 		velocity: function(n){ v = clamp(n, 1, 50) },
 		jumpVelocity: function(n){ jumpV = clamp(n, 1, 50) },
 	}
+	
+	return exports
 }
diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index 99ede82..3a47dab 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -66,8 +66,8 @@ var Map = function(opt){
 		canvas.height = base.dimensions.b = window.innerHeight
 	}
 		
-	base.toggle = function(){
-		$(base.el).toggle()
+	base.toggle = function(state){
+		$(base.el).toggle(state)
 	}
 
 }
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index 7eb6e7c..eceda3c 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -177,11 +177,11 @@ Map.Draw = function(map, opt){
 		ctx.lineWidth = 1/map.zoom
 		
 		var sides = map.sides()
-		var quant = sides.clone().quantize(200)
-		for (var x = quant.x.a - 200; x <= quant.x.b; x += 200) {
+		var quant = sides.clone().quantize(MAP_GRID_SIZE)
+		for (var x = quant.x.a - MAP_GRID_SIZE; x <= quant.x.b; x += MAP_GRID_SIZE) {
 			line(x, sides.y.a, x, sides.y.b)
 		}
-		for (var y = quant.y.a - 200; y <= quant.y.b; y += 200) {
+		for (var y = quant.y.a - MAP_GRID_SIZE; y <= quant.y.b; y += MAP_GRID_SIZE) {
 			line(sides.x.a, y, sides.x.b, y)
 		}
 	}
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
index 3c3347b..072ff7e 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
@@ -161,18 +161,19 @@ Map.UI.Editor = function(map){
 				cursor.y.abs().quantize(1)
 				var room = Rooms.add_with_rect( cursor )
 
+				Rooms.rebuild()
+
         UndoStack.push({
           type: "create-room",
           undo: { id: room.id },
           redo: room.copy()
         })
         
+        Rooms.rebuild()
 				app.tube("builder-pick-room", room)
 			}
 		}
-		
     if (base.resizing || base.dragging) {
-
       var oldState = base.dragging.copy()
       
       if (base.resizing) {
@@ -187,14 +188,22 @@ Map.UI.Editor = function(map){
         undo: oldState,
         redo: base.dragging.copy()
       })
+      Rooms.rebuild()
     }
+		
+		var intersects = Rooms.filter(function(r){
+			return r.focused = r.rect.contains(cursor.x.a, cursor.y.a)
+		})
+		if (! intersects.length) {
+      app.tube("builder-pick-nothing")
+		}
     
 		base.creating = base.dragging = base.resizing = false
 	}
 
   var wheelState, wheelTimeout
 
-	function mousewheel (e, val, delta){
+	function mousewheel (e, deltaY, deltaX){
 		var cursor = base.mouse.cursor
 
 		var intersects = Rooms.filter(function(r){
@@ -204,7 +213,7 @@ Map.UI.Editor = function(map){
 		if (intersects.length) {
 			wheelState = wheelState || intersects[0].copy()
 			
-			intersects[0].height = clamp( ~~(intersects[0].height - delta), height_min, height_max )
+			intersects[0].height = clamp( ~~(intersects[0].height - deltaY), height_min, height_max )
 			
 			clearTimeout(wheelTimeout)
 			wheelTimeout = setTimeout(function(){
@@ -218,7 +227,7 @@ Map.UI.Editor = function(map){
 			}, 500)
 		}
 		else {
-			map.set_zoom(map.zoom_exponent - delta/20)
+			map.set_zoom(map.zoom_exponent - deltaY/20)
 		}
 	}
 	
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
index fabbdb9..0fdd336 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
@@ -72,8 +72,8 @@ Map.UI.Minimap = function(map){
 		base.dragging = false
 	}
 
-	function mousewheel (e, val, delta){
-		map.set_zoom(map.zoom_exponent - delta/20)
+	function mousewheel (e, deltaY, deltaX){
+		map.set_zoom(map.zoom_exponent - deltaY/20)
 	}
 	
 	function rightclick (e){
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
index b901a25..5686aba 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
@@ -13,6 +13,7 @@
 		vec2 = require('../../models/vec2')
 		Rect = require('../../models/rect')
 		Room = require('../../models/room')
+		Walls = require('./_walls')
 		UidGenerator = require('../../util/uid')
 		sort = require('../../util/sort')
 		_ = require('lodash')
@@ -59,7 +60,6 @@
 				height: 500
 			})
 			base.add(room)
-			Rooms.rebuild()
 			return room
 		}
 	
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
index 0da3b9a..119a659 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -134,19 +134,24 @@
       })
 		}
 		
+		base.luminance = function(rgb){
+			rgb = rgb || Walls.colors.wall
+			var rgb_max = Math.max.apply(0, rgb)
+			var rgb_min = Math.min.apply(255, rgb)
+			return (rgb_max + rgb_min ) / 2
+		}
+		
     base.setColor = {
     
       wall: function(rgb){
         var rgbaColor = rgba_string(rgb, app.defaults.wallOpacity)
         var rgbColor = rgb_string(rgb)
+        				
+				if (Rooms.mover.room) {
+					$("#header").toggleClass("black", base.luminance() < 100)
+					$("body").css("background-color", rgbColor)
+				}
         
-        var rgb_max = Math.max.apply(0, rgb)
-        var rgb_min = Math.min.apply(255, rgb)
-        var luminance = (rgb_max + rgb_min ) / 2
-
-        $("#header").toggleClass("black", luminance < 128)
-        $("body").css("background-color", rgbColor)
-                
         Walls.colors.wall = rgb
         Walls.list.forEach(function(wall){
           wall.outline(rgbaColor, null)
diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js
index 4619eb1..33333fb 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/builder.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js
@@ -293,7 +293,7 @@
         this.el = this.rect = this.face = null
 			}
 
-			// possible if walls are opaque
+			// preferable if walls are opaque
 			// el.el.classList.add("backface-hidden")
 
 			return el
diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js
index 98f80c5..a2d2223 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/mover.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js
@@ -43,6 +43,7 @@ Rooms.mover = new function(){
 
 			// in this case, we appear to have left the room..
 			// $(".face.active").removeClass("active")
+			$("#header").removeClass("black")
 			$("body").css("background-color", "transparent")
 			base.room = null
 		}
@@ -59,6 +60,7 @@ Rooms.mover = new function(){
 		// did we actually enter a room?
 		if (intersects.length) {
 			base.room = intersects[0]
+			$("#header").toggleClass("black", Walls.luminance() < 100)
 			$("body").css("background-color", rgb_string( Walls.colors.wall ))
       app.tube("change-room", { room: base.room })
 		}
diff --git a/public/assets/javascripts/rectangles/engine/scenery/randomize.js b/public/assets/javascripts/rectangles/engine/scenery/randomize.js
index 4f1144a..82b6bf9 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/randomize.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/randomize.js
@@ -10,11 +10,11 @@ Scenery.randomize = function (media_data) {
   var media_list = media_data.map(function(media){
     var width, height
     if (media.width > media.height) {
-      width = Math.min(300, media.width)
+      width = Math.min(DEFAULT_PICTURE_WIDTH, media.width)
       height = media.height/media.width * width
     }
     else {
-      height = Math.min(300, media.height)
+      height = Math.min(DEFAULT_PICTURE_WIDTH, media.height)
       width = media.width/media.height * height
     }
     return {
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js
index bed847b..10fc917 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js
@@ -7,7 +7,7 @@ Scenery.types.image = Scenery.types.base.extend(function(base){
 	
 		init: function(opt){
 
-			opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width)
+			opt.scale = opt.scale || (opt.data && opt.data.scale) || DEFAULT_PICTURE_WIDTH / max(DEFAULT_PICTURE_WIDTH, opt.media.width)
 
 			base.init.call(this, opt)
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index b723f56..a669a90 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -6,7 +6,7 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 	  type: 'video',
 	
 		init: function(opt){
-			opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width)
+			opt.scale = opt.scale || (opt.data && opt.data.scale) || DEFAULT_PICTURE_WIDTH / max(DEFAULT_PICTURE_WIDTH, opt.media.width)
 
 			base.init.call(this, opt)
 
diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js
index 198cc41..3bc314c 100644
--- a/public/assets/javascripts/rectangles/util/constants.js
+++ b/public/assets/javascripts/rectangles/util/constants.js
@@ -20,7 +20,9 @@ var height_min = 200,
 		side_min = 10,
 		side_max = 5000,
 		resize_margin = 8,
-		cursor_amp = 1.5
+		cursor_amp = 1.5,
+		DEFAULT_PICTURE_WIDTH = 350,
+		MAP_GRID_SIZE = 360          // 10 feet
 
 var painting_distance_from_wall = 10,
 		dot_distance_from_picture = 3
diff --git a/public/assets/javascripts/rectangles/util/wheel.js b/public/assets/javascripts/rectangles/util/wheel.js
index 6836772..712d470 100644
--- a/public/assets/javascripts/rectangles/util/wheel.js
+++ b/public/assets/javascripts/rectangles/util/wheel.js
@@ -21,37 +21,44 @@ function wheel (opt) {
 		val: 0,
 	})
 
-	opt.el.addEventListener('mousewheel', onMouseWheel, false);
+	opt.el.addEventListener('wheel', onMouseWheel, false);
+// 	opt.el.addEventListener('mousewheel', onMouseWheel, false);
 	opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false);
 
 	function onMouseWheel (e) {
 		if (opt.locked) {
 			return
 		}
+
 		if (! opt.propagate) {
 			e.stopPropagation()
 			e.preventDefault()
 		}
 		
-		var delta = 0;
+		var deltaX = 0, deltaY = 0;
 		
 		// WebKit
-		if ( event.wheelDeltaY ) {
-			delta -= event.wheelDeltaY * opt.ratio
+		if ( event.deltaY ) {
+			deltaY -= event.deltaY * opt.ratio
+			deltaX -= event.deltaX * opt.ratio
+		}
+		else if ( event.wheelDeltaY ) {
+			deltaY -= event.wheelDeltaY * opt.ratio
+			deltaX -= event.wheelDeltaX * opt.ratio
 		}
 		// Opera / Explorer 9
 		else if ( event.wheelDelta ) {
-			delta -= event.wheelDelta * opt.ratio
+			deltaY -= event.wheelDelta * opt.ratio
 		}
 		// Firefox
 		else if ( event.detail ) {
-			delta += event.detail * 2
+			deltaY += event.detail * 2
 		}
-		if (! opt.reversible && delta < 0) return;
+		if (! opt.reversible && (deltaY < 0 && deltaX < 0)) return;
 		
-		opt.val = clamp(opt.val + delta, opt.min, opt.max)
+		// opt.val = clamp(opt.val + delta, opt.min, opt.max)
 		
-		opt.update(e, opt.val, delta)
+		opt.update(e, deltaY, deltaX)
 	}
 
 	opt.lock = function(){ opt.locked = true }
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js
index 0bf2338..67834e7 100644
--- a/public/assets/javascripts/ui/builder/BuilderInfo.js
+++ b/public/assets/javascripts/ui/builder/BuilderInfo.js
@@ -13,6 +13,7 @@ var BuilderInfo = View.extend({
 		"change [name=units]": 'changeUnits',
 		"change [name=resolution]": 'changeResolution',
 		"change [name=viewHeight]": 'changeViewHeight',
+		"click [data-role=destroy-room]": 'destroy',
 	},
 	
 	initialize: function(opt){
@@ -25,17 +26,22 @@ var BuilderInfo = View.extend({
 		this.$units = this.$("[name=units]")
 		this.$viewHeight = this.$("[name=viewHeight]")
 		this.$unitName = this.$(".unitName")
+		this.$noSelection = this.$(".no-selection")
+		this.$settings = this.$(".setting")
 		app.on("builder-pick-room", this.pick.bind(this))
-		app.on("builder-destroy-room", this.destroy.bind(this))
+		app.on("builder-destroy-room", this.hide.bind(this))
+		app.on("builder-pick-nothing", this.deselect.bind(this))
 	},
 	
 	load: function(data){
-		this.$viewHeight.unitVal( data.viewHeight || app.defaults.viewHeight )
+		this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight )
 		this.$units.val( "ft" )
 		this.$unitName.html( "ft" )
 	},
 
 	toggle: function(state){
+    this.$settings.toggle( !! this.room )
+    this.$noSelection.toggle( ! this.room )
 		this.$el.toggleClass("active", state)
 	},
 	
@@ -43,7 +49,8 @@ var BuilderInfo = View.extend({
 		this.toggle(true)
 	},
 	
-	hide: function(){	
+	hide: function(){
+	  this.room = null
 		this.toggle(false)
 	},
 
@@ -58,8 +65,22 @@ var BuilderInfo = View.extend({
 		this.$y.unitVal( room.rect.y.a )
 	  this.show()
 	},
+	
+	deselect: function(){
+	  this.room = null
+	  this.toggle(true)
+	},
+
+	destroy: function(){
+    UndoStack.push({
+      type: "destroy-room",
+      undo: this.room.copy(),
+      redo: { id: this.room.id },
+    })
+
+    Rooms.remove(this.room)
+    app.tube("builder-destroy-room", this.room)
 
-	destroy: function(room){
 		this.room = null
 		this.hide()
 	},
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index 89040e1..ac361a7 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -15,6 +15,10 @@ var EditorSettings = FormView.extend({
 		"click [data-role='clone-project']": 'clone',
 		"click [data-role='clear-project']": 'clear',
 		"click [data-role='destroy-project']": 'destroy',
+    "click #startText": "setStartPosition",
+    "click #moveText": "confirmStartPosition",
+    "click #confirmText": "setStartPosition",
+    "click #goText": "goToStartPosition",
 	},
 	
 	initialize: function(opt){
@@ -26,6 +30,7 @@ var EditorSettings = FormView.extend({
 		this.$name = this.$("[name=name]")
 		this.$description = this.$("[name=description]")
 		this.$privacy = this.$("[name=privacy]")
+		this.$startPoint = this.$("#startpoint")
 	},
 	
 	load: function(data){
@@ -33,7 +38,11 @@ var EditorSettings = FormView.extend({
     this.parent.data = data
     
 		data.rooms && Rooms.deserialize(data.rooms, data.walls)
-		data.startPosition && scene.camera.move(data.startPosition)
+		if (data.startPosition) {
+		  scene.camera.move(data.startPosition)
+		  this.startPosition = data.startPosition
+		  this.$startPoint.addClass("confirmed")
+		}
 
     if (data.colors && data.colors.wall) {
       this.parent.lightControl.load(data.colors)
@@ -141,6 +150,19 @@ var EditorSettings = FormView.extend({
 		ErrorModal.alert($errors)
 	},
 	
+	startPosition: null,
+	setStartPosition: function(){
+	  this.$startPoint.addClass("active").removeClass("confirmed")
+	},
+	confirmStartPosition: function(){
+	  this.$startPoint.removeClass("active").addClass("confirmed")
+	  this.startPosition = app.position(scene.camera)
+	},
+	goToStartPosition: function(){
+	  if (! this.startPosition) return
+		scene.camera.move(this.startPosition)
+	},
+	
 	serialize: function(){
 		var fd = new FormData()
 		fd.append( "_csrf", this.$csrf.val() )
@@ -148,11 +170,13 @@ var EditorSettings = FormView.extend({
 		fd.append( "name", this.$name.val() )
 		fd.append( "description", this.$description.val() )
 		fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" )
+		fd.append( "viewHeight", window.viewHeight )
 		fd.append( "rooms", JSON.stringify( Rooms.serialize() ) )
  		fd.append( "walls", JSON.stringify( Walls.serialize() ) )
  		fd.append( "colors", JSON.stringify( Walls.colors ) )
 		fd.append( "media", JSON.stringify( Scenery.serialize() ) )
-		fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) )
+		fd.append( "startPosition", JSON.stringify( this.startPosition || false ) )
+		fd.append( "lastPosition", JSON.stringify( app.position(scene.camera) ) )
 		
 		if (this.thumbnailIsStale()) {
       var thumbnail = map.draw.render()
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 8a707ec..4f07d1f 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -4,11 +4,11 @@ var EditorToolbar = View.extend({
 
 	events: {
 	  "mousedown": 'stopPropagation',
+		"click [data-role='undo']": 'undo',
 		"click [data-role='toggle-map-view']": 'toggleMap',
 		"click [data-role='toggle-project-settings']": 'toggleSettings',
 		"click [data-role='open-media-viewer']": 'openMediaViewer',
     "click [data-role='toggle-presets']": 'togglePresets',
-// 		"click [data-role='destroy-media']": 'destroyMedia',
 		"click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper',
 		"click [data-role='toggle-light-control']": 'toggleLightControl',
 		"click [data-role='toggle-text-editor']": 'toggleTextEditor',
@@ -18,9 +18,22 @@ var EditorToolbar = View.extend({
 		this.parent = opt.parent
 	},
 
-	toggleMap: function(){
-		var state = ! $("[data-role='toggle-map-view']").hasClass("inuse")
-		this.resetControls()
+	undo: function(e){
+		if (e.shiftKey) {
+			var canRedo = UndoStack.redo()
+			console.log("can redo", canRedo)
+		}
+		else {
+			var canUndo = UndoStack.undo()
+			console.log("can undo", canUndo)
+		}
+	},
+	
+	toggleMap: function(state){
+		if (typeof state != "boolean") {
+		  state = ! $("[data-role='toggle-map-view']").hasClass("inuse")
+      this.resetControls()
+		}
     $("[data-role='toggle-map-view']").toggleClass("inuse", state)
 		map.toggle(state)
 		$("#minimap").toggleClass("hide", state)
@@ -29,6 +42,7 @@ var EditorToolbar = View.extend({
 	
 	toggleSettings: function(){
 // 	  this.resetMode()
+    this.toggleMap(false)
     this.parent.textEditor.hide()
 		this.parent.presets.hide()
 		this.parent.lightControl.hide()
@@ -42,6 +56,7 @@ var EditorToolbar = View.extend({
 		this.parent.mediaUpload.show()
 		this.resetMode()
 		this.resetControls()
+		this.toggleMap(false)
 	},
 
 	resetMode: function(){
@@ -55,6 +70,7 @@ var EditorToolbar = View.extend({
 	
 	resetControls: function(){
 	  $(".inuse").removeClass("inuse")
+    this.toggleMap(false)
     this.parent.textEditor.hide()
 		this.parent.wallpaperPicker.hide()
 		this.parent.presets.hide()
@@ -98,6 +114,7 @@ var EditorToolbar = View.extend({
     this.parent.textEditor.hide()
 		this.parent.settings.hide()
 		this.parent.presets.hide()
+		this.toggleMap(false)
 		this.parent.wallpaperPicker.toggle(state)
 	},
 	
@@ -110,6 +127,7 @@ var EditorToolbar = View.extend({
     this.parent.textEditor.hide()
 		this.parent.settings.hide()
 		this.parent.presets.hide()
+		this.toggleMap(false)
 		this.parent.lightControl.toggle(state)
 	},
 	
@@ -122,6 +140,7 @@ var EditorToolbar = View.extend({
 		this.parent.lightControl.hide()
 		this.parent.settings.hide()
 		this.parent.presets.hide()
+		this.toggleMap(false)
 		this.parent.textEditor.toggle(state)
   },
 
@@ -134,6 +153,7 @@ var EditorToolbar = View.extend({
     this.parent.textEditor.hide()
 		this.parent.settings.hide()
 		this.parent.lightControl.hide()
+		this.toggleMap(false)
 		this.parent.presets.toggle(state)
 	},
 })
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 6aff601..ccd6c63 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -41,6 +41,7 @@ var EditorView = View.extend({
 		$("#map").hide()
 
 		this.settings.load(data)
+		this.info.load(data)
 	},
 	
 	readyLayout: function(data){
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 3eb2861..34a5a51 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -64,6 +64,7 @@ var LightControl = View.extend({
   pick: function(rgb, Lab){
     this.labColor = Lab
     this.setSwatchColor(this.mode, rgb)
+    // console.log(rgb)
     Walls.setColor[ this.mode ](rgb)
   },
   
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index fddfefc..9799f99 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -55,9 +55,7 @@ var MediaUpload = UploadView.extend({
 	
 	add: function(media){
 		console.log(media)
-		this.parent.mediaViewer.add(media, this.parent.mediaViewer.$myMedia)
-    this.parent.mediaViewer.$deleteMedia.show()
-    this.parent.mediaViewer.$noMedia.hide()
+		this.parent.mediaViewer.addUploadedMedia(media)
 	},
 	
 	beforeUpload: function(){
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index c18fb49..10819af 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -4,23 +4,30 @@ var MediaViewer = ModalView.extend({
 	destroyAction: "/api/media/destroy",
 	usesFileUpload: true,
 	loaded: false,
-	
+	perPage: 12,
+	offset: 0,
+	fixedClose: true,
+
 	events: {
 	  'mousedown': "stopPropagation",
 		'click .foundToggle': "foundToggle",
 		'click .userToggle': "userToggle",
 		'click #deleteMedia': "deleteArmed",
 		'click .mediaContainer': "pick",
+		'click .viewMore': "load",
 	},
 	
 	initialize: function(opt){
 		this.__super__.initialize.call(this)
 		this.parent = opt.parent
 		this.$myMedia = this.$(".myMedia")
+		this.$myMediaContainer = this.$(".myMedia > .container")
 		this.$userToggle = this.$(".userToggle")
 		this.$foundMedia = this.$(".foundMedia")
+		this.$foundMediaContainer = this.$(".foundMedia > .container")
 		this.$foundToggle = this.$(".foundToggle")
 		this.$deleteMedia = this.$("#deleteMedia")
+		this.$viewMore = this.$(".viewMore")
 		this.$noMedia = this.$(".noMedia")
   },
 
@@ -55,7 +62,7 @@ var MediaViewer = ModalView.extend({
 	},
 
 	load: function(){
-		$.get("/api/media/user", this.populate.bind(this))
+		$.get("/api/media/user", { offset: this.offset, limit: this.perPage }, this.populate.bind(this))
 	},
 	
 	loadTrending: function(){
@@ -85,7 +92,7 @@ var MediaViewer = ModalView.extend({
           width: img.naturalWidth,
           height: img.naturalHeight,
         }
-        this.add(media, this.$foundMedia)
+        this.add(media, this.$foundMediaContainer)
 		  }.bind(this)
 		  img.src = url
 		  if (img.complete && ! loaded) { img.onload() }
@@ -100,22 +107,40 @@ var MediaViewer = ModalView.extend({
   },
 
 	populate: function(data){
-		this.loaded = true
+		var scrollTop = this.loaded ? $('.myMedia .container').height() : 0
 		if (data && data.length) {
+			if (data.length < this.perPage) {
+				this.$viewMore.hide()
+			}
 		  data.forEach(function(media){
-		    this.add(media, this.$myMedia)
+		    this.add(media, this.$myMediaContainer)
+		    this.offset += 1
 		  }.bind(this))
 		  this.$noMedia.hide()
       this.$deleteMedia.show()
 		}
 		else {
+			this.$viewMore.hide()
 		  this.$noMedia.show()
 		  this.$deleteMedia.hide()
 		}
-		this.__super__.show.call(this)
+		if (this.loaded) {
+			this.$el.delay(300).animate({ scrollTop: scrollTop }, 200)
+		}
+		else  {
+			this.loaded = true
+			this.__super__.show.call(this)
+		}
+	},
+	
+	addUploadedMedia: function(media){
+    this.parent.mediaViewer.$deleteMedia.show()
+    this.parent.mediaViewer.$noMedia.hide()
+    this.add(media, this.$myMedia, true) // prepend
+		this.offset += 1
 	},
 	
-	add: function(media, $container){
+	add: function(media, $container, prepend){
 		var image = new Image ()
 		var $span = $("<span>")
 		$span.addClass("mediaContainer")
@@ -142,7 +167,8 @@ var MediaViewer = ModalView.extend({
 		$span.data("media", media)
 		$span.append(image)
 
-		$container.prepend($span)
+		if (prepend) $container.prepend($span)
+		else $container.append($span)
 	},
 
 	deleteIsArmed: false,
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index a7e92b6..1e70aa2 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -2,8 +2,26 @@ var Presets = View.extend({
 	el: "#presets",
 	
 	events: {
+		"mousedown": "stopPropagation",
     "click .presets span": "selectPreset",
+    "click .swatches span": "selectColor",
 	},
+	
+	colors: [
+		[255,94,58],
+		[255,149,0],
+		[255,219,76],
+		[76,217,100],
+		[52,170,220],
+		[29,98,240],
+		[198,68,252],
+		[0,0,0],
+		[74,74,74],
+		[125,126,127],
+		[209,211,212],
+		[235,235,235],
+		[255,255,255],
+	],
 
   presets: {
     wireframe: {
@@ -34,6 +52,13 @@ var Presets = View.extend({
   
   initialize: function(opt){
     this.parent = opt.parent
+    this.$colors = this.$(".colors")
+    this.colors.forEach(function(color){
+    	var $swatch = $("<span>")
+    	$swatch.css("background-color","rgb(" + color + ")")
+    	$swatch.data('color', color)
+    	this.$colors.append($swatch)
+    }.bind(this))
   },
 
   toggle: function(state){
@@ -56,4 +81,9 @@ var Presets = View.extend({
     $(e.currentTarget).addClass('active')
   },
   
+  selectColor: function(e){
+    var preset = $(e.currentTarget).data('color')
+    console.log(preset)
+  },
+  
 })
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js
index c8879b3..b559ba5 100644
--- a/public/assets/javascripts/ui/editor/TextEditor.js
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -28,16 +28,15 @@ var TextEditor = FormView.extend({
 	},
 
   toggle: function(state){
-    $("#keyhint").fadeOut(200)
-    
     this.$el.toggleClass("active", state)
     if (state) {
+			$("#keyhint").fadeOut(200)
       Scenery.nextMedia = {
         type: 'text',
         width: 600,
         height: 450,
         scale: 0.5,
-        font: { family: 'Lato', size: 12, align: 'left' },
+        font: { family: 'Lato', size: 24, align: 'left', color: "#000" },
       }
       this.createMode(true)
     }
diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js
index d9b518a..1c41861 100644
--- a/public/assets/javascripts/ui/lib/ModalView.js
+++ b/public/assets/javascripts/ui/lib/ModalView.js
@@ -18,6 +18,10 @@ var ModalView = View.extend({
 		if (! this.usesFileUpload) {
 		  $(".fileUpload").removeClass("active")
 		}
+		if (this.fixedClose) {
+			$("#fixed_close").addClass("active")
+			$("#fixed_close").bind("click", this.hide.bind(this))
+		}
 		
 		this.$el.addClass("active")
     $("body").addClass("noOverflow")
@@ -25,6 +29,10 @@ var ModalView = View.extend({
 
 	hide: function(){
     // $(".mediaDrawer, .room1").removeClass("active editing");
+		if (this.fixedClose) {
+			$("#fixed_close").removeClass("active")
+			$("#fixed_close").unbind("click", this.hide.bind(this))
+		}
 		this.$el.removeClass("active");
     $("body").removeClass("noOverflow");
 	},
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index b09b8a5..42f0058 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -138,10 +138,12 @@ a{
 	display: none;
 	z-index: 10;
 	pointer-events: none;
+	background-size: cover;
 }
 .floatingSwatch.scissors {
   background-image: url(/assets/img/scissors.png) !important;
   background-repeat: no-repeat;
+  background-size: auto;
   border: 0;
   box-shadow: 0 0 transparent;
 }
@@ -414,6 +416,17 @@ iframe.embed {
 	border-top: 1px solid black;
 }
 
+.mediaDrawer .viewMore {
+	clear: both;
+	float: none;
+	text-decoration: none;
+	font-size: 22px;
+	display: block;
+	text-align: center;
+	padding: 40px;
+	border: 0;
+	border-top: 1px solid black;
+}
 
 .holder {
 	display: table-cell;
@@ -1473,6 +1486,23 @@ border-left: 1px solid black;
 	padding-bottom: 6px;
 }
 
+#presets .colors {
+	margin-bottom: 5px;
+}
+#presets .colors span {
+	display: inline-block;
+	font-size: 0;
+	width: 20px;
+	height: 20px;
+	border: 1px solid #ddd;
+	margin: 0px 2px 0 0;
+	cursor: pointer;
+	transition: transform 0.2s;
+}
+#presets .colors span:hover {
+	transform: translateX(3px) translateY(-3px);
+}
+
 .toolButton {
 	border: 1px solid;
 	display: inline-block;
@@ -1648,7 +1678,7 @@ input[type="range"]::-webkit-slider-thumb {
 	padding: 5px;
 }
 .presets span.active {
-  border-bottom: 1px dotted;
+	text-decoration: underline;
 }
 .color-swatches span {
 	display: inline-block;
@@ -1723,7 +1753,7 @@ input[type="range"]::-webkit-slider-thumb {
 .modalLink {
   text-decoration: none;
 }
-.modalLink:hover {
+.modalLink:hover span {
   text-decoration: underline;
 }
 
@@ -1737,30 +1767,41 @@ input[type="range"]::-webkit-slider-thumb {
     opacity:0.6;
   }
 }
-#startpoint.active #moveText{
+
+#moveText,
+#confirmText {
+  display: none;
+}
+#startpoint.active #moveText {
+  display:inline-block;
   -webkit-animation:fade 0.5s infinite;
   animation:fade 0.5s infinite;
 }
-#moveText{
-  display:none;
+#startpoint #goText,
+#startpoint.active #startText,
+#startpoint.active #goText,
+#startpoint.confirmed #startText {
+  display: none;
 }
-#moveText.show {
-  display:inline-block;
+#startpoint.confirmed #confirmText {
+  display: inline-block;
 }
-#startText.hide {
-  display:none;
+#startpoint.confirmed #goText {
+  display: inline-block;
 }
-#startpoint.active:after {
+#moveText .done {
   content: "done";
   background: black;
   color: white;
   padding: 2px;
   font-weight: 900;
   margin-left: 5px;
+  text-decoration: none !important;
 }
 #startpoint.active:hover {
   text-decoration:none;
 }
+
 .settings input[type="text"] {
   border: 1px solid #000;
   font-size: 15px;
@@ -2159,13 +2200,27 @@ form li textarea {
 	right: 20px;
 	top: 20px;
 	z-index: 20;
-	background: #f9f9f9;
+	background: white;
 	width: 75px;
 	color: black;
 	border: 1px solid black;
 	box-shadow: -3px 4px black;
 	line-height: 75px;
-
+	text-align: center;
+}
+#fixed_close {
+	display: none;
+	transform: translateY(-200px) translateZ(0);
+}
+#fixed_close.active {
+	animation: visibility 0.2s;
+	animation-fill-mode: forwards;
+	display: block;
+}
+@keyframes visibility {
+	100% {
+		transform: translateY(0px) translateZ(0);
+	}
 }
 
 
@@ -2518,22 +2573,22 @@ a[data-role="forgot-password"] {
 	padding: 50px 0;
 	}
 	.page .viewMore.btn {
-	text-decoration: none;
-	font-size: 18px;
-	padding: 18px 0;
-}
-.footer a, .footer span {
-margin: 9px;
-}
-#keyhint {
-	display:none;
-}
-.projectList .projectItem {
-	width:100%;
-	margin: 20px 0;
-}
-.projectList .room {
-width: 100%;
-height: 260px;
-}
+		text-decoration: none;
+		font-size: 18px;
+		padding: 18px 0;
+	}
+	.footer a, .footer span {
+	margin: 9px;
+	}
+	#keyhint {
+		display:none;
+	}
+	.projectList .projectItem {
+		width:100%;
+		margin: 20px 0;
+	}
+	.projectList .room {
+	width: 100%;
+	height: 260px;
+	}
 }
\ No newline at end of file
diff --git a/public/assets/test/wheel.html b/public/assets/test/wheel.html
new file mode 100644
index 0000000..054945e
--- /dev/null
+++ b/public/assets/test/wheel.html
@@ -0,0 +1,29 @@
+<style>
+#cursor {
+	position:absolute;margin-top:-5px;margin-left:-5px;
+	width:10px;height:10px;border-radius:50%;
+	background:red;
+}
+</style>
+<div id="cursor"></div>
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/rectangles/util/wheel.js"></script>
+
+<script>
+x = window.innerWidth/2
+y = window.innerHeight/2
+function draw(){
+	cursor.style.top = y + 'px'
+	cursor.style.left = x + 'px'
+}
+new wheel({
+	el: document,
+	propagate: false,
+	update: function(e,dy,dx){
+		y = mod(y + dy, window.innerHeight)
+		x = mod(x + dx, window.innerWidth)
+		draw()
+	},
+})
+draw()
+</script>
\ No newline at end of file
diff --git a/server/lib/api/media.js b/server/lib/api/media.js
index 1eb08c1..4e2fad5 100644
--- a/server/lib/api/media.js
+++ b/server/lib/api/media.js
@@ -10,13 +10,19 @@ var _ = require('lodash'),
 var media = {
 
 	user: function(req, res){
+	  var offset = Number(req.query.offset) || 0
+	  var limit = Math.min( Number(req.query.limit), 50 ) || 20
 	  var query = { user_id: req.user._id }
 	  if (req.query.tag) {
 	    query.tag = req.query.tag
 	  }
-		Media.find(query, function(err, media){
-			res.json(media || [])
-		})
+		Media.find(query)
+			.sort({'created_at': -1})
+			.skip(offset)
+			.limit(limit)
+		  .exec(function(err, media){
+				res.json(media || [])
+			})
 	},
 	
 	create: function(req, res){
diff --git a/server/lib/api/projects.js b/server/lib/api/projects.js
index 47e0458..1bf046f 100644
--- a/server/lib/api/projects.js
+++ b/server/lib/api/projects.js
@@ -36,11 +36,13 @@ var projects = {
 		data.name = util.sanitize(data.name)
 		data.slug = util.slugify(data.name) + "-" + (+new Date)
 		data.description = util.sanitize(data.description)
+		data.viewHeight = Number(data.viewHeight || 0)
 		data.rooms = JSON.parse(data.rooms)
 		data.walls = JSON.parse(data.walls)
 		data.media = JSON.parse(data.media)
 		data.colors = JSON.parse(data.colors)
 		data.startPosition = JSON.parse(data.startPosition)
+		data.lastPosition = JSON.parse(data.lastPosition)
 		data.created_at = new Date ()
 
 		upload.put("projects", req.files.thumbnail, {
@@ -94,6 +96,7 @@ var projects = {
           data.slug = util.slugify(data.name) + "-" + (+new Date)
         }
         data.description = util.sanitize(data.description)
+        data.viewHeight = Number(data.viewHeight || 0)
         data.updated_at = new Date ()
 
 				_.extend(doc, data)
@@ -102,7 +105,8 @@ var projects = {
 				doc.walls = JSON.parse(data.walls)
 				doc.colors = JSON.parse(data.colors)
 				doc.media = JSON.parse(data.media)
-				doc.startPosition = JSON.parse(data.startPosition)
+        doc.startPosition = JSON.parse(data.startPosition)
+        doc.lastPosition = JSON.parse(data.lastPosition)
 
 				doc.save(function(err, doc){
 					if (err || ! doc) { return res.json({ error: err }) }
diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js
index dd50da6..a923d85 100644
--- a/server/lib/schemas/Project.js
+++ b/server/lib/schemas/Project.js
@@ -32,6 +32,8 @@ var ProjectSchema = new mongoose.Schema({
 	media: [mongoose.Schema.Types.Mixed],
 	colors: mongoose.Schema.Types.Mixed,
 	startPosition: mongoose.Schema.Types.Mixed,
+	lastPosition: mongoose.Schema.Types.Mixed,
+	viewHeight: { type: Number },
 	user_id: { type: mongoose.Schema.ObjectId, index: true },
 	created_at: { type: Date },
 	updated_at: { type: Date },
diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs
index 7ef0b6a..205938f 100644
--- a/views/controls/builder/info.ejs
+++ b/views/controls/builder/info.ejs
@@ -1,4 +1,11 @@
 <div class="vvbox settings info" id="builderInfo">
+	<h4>Map Editor</h4>
+
+  <div class="no-selection">
+    Click a room to select it, or click and drag to make a new room.
+  </div>
+  
+	
 	<div class="setting number">
 		<label for="room-width">width</label>
 		<input type="text" class="units" name="width" id="room-width">
@@ -32,4 +39,8 @@
 		<input type="text" class="units" name="viewHeight" id="viewHeight">
 	</div>
 
+	<div class="setting">
+		<a href="#" class="warn btn" data-role="destroy-room">remove this room</a>
+	</div>
+
 </div>
diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs
index d800426..7996f84 100644
--- a/views/controls/editor/media-drawer.ejs
+++ b/views/controls/editor/media-drawer.ejs
@@ -1,28 +1,32 @@
-<span class="fileUpload">
-	<input type="hidden" name="_csrf" value="[[- token ]]">
-	<form>
-		<span class="ion-ios7-upload-outline upload-icon"></span><br>
-		Upload File
-		<input type="file" accept="image/*" class="file" multiple>
-	</form>
-	<small>~ or ~</small><br>
-	<input type="text" placeholder="Enter Vimeo or YouTube or image link" class="url">
-</span>
-
 <div class="ants">
 	<div class="leftborder"></div>
 	<img class="floatingImg">
 </div>
 
+<span class="close" id="fixed_close">X</span>
+
 <div class="mediaDrawer fixed animate mediaViewer">
-	<span class="close">X</span>
 	<h2><a href="#" class="userToggle active">Your Media</a> – <a href="#" class="foundToggle">Found Media</a></h2><br>
 	<h3 class="editBtn warn" id="deleteMedia"></h3>
 
 	<div class="myMedia">
 	  <div class="noMedia">You have no media yet.  Upload some!</div>
+	  <span class="container"></span>
+		<a href="#" class="viewMore btn">view more</a>
 	</div>
+
+	<span class="fileUpload">
+		<input type="hidden" name="_csrf" value="[[- token ]]">
+		<form>
+			<span class="ion-ios7-upload-outline upload-icon"></span><br>
+			Upload File
+			<input type="file" accept="image/*" class="file" multiple>
+		</form>
+		<small>~ or ~</small><br>
+		<input type="text" placeholder="Enter Vimeo or YouTube or image link" class="url">
+	</span>
 	
 	<div class="foundMedia">
-	</div>
+	  <span class="container"></span>
+ 	</div>
 </div>
\ No newline at end of file
diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs
index a41c527..70e48e3 100644
--- a/views/controls/editor/presets.ejs
+++ b/views/controls/editor/presets.ejs
@@ -1,4 +1,8 @@
 <div class="vvbox" id="presets">
+  <h4>Preset Colors</h4>
+  <div class="colors">
+  </div>
+
   <h4>Preset Styles</h4>
   <div class="presets">
     <span data-preset="wireframe">
diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs
index 5b3b553..7c40a75 100644
--- a/views/controls/editor/settings.ejs
+++ b/views/controls/editor/settings.ejs
@@ -3,11 +3,14 @@
 	<input type="hidden" name="_csrf" value="[[- token ]]">
 	<input type="hidden" name="_id" value="new">
 
-	<div class="setting">
-		<a href="#" class="modalLink" id="startpoint">
+	<div class="setting" id="startpoint">
+		<a href="#" class="modalLink">
 			<span class="ion-ios7-navigate-outline"></span>
-			<span id="startText">Select Startpoint</span>
-			<span id="moveText">Move to Desired Point</span></a>
+			<span id="startText">Set Startpoint</span>
+			<span id="moveText">Move to Desired Point <span class="done">done</span></span>
+			<span id="confirmText">Startpoint Confirmed</span>
+		</a>
+    <a href="#" class="modalLink" id="goText"><span>(go there)</span></span>
 	</div>
 	<div class="setting">
 	  <a href="#" class="modalLink" data-role='show-collaborators'>
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs
index 47d7c3c..57a98b9 100644
--- a/views/controls/editor/toolbar.ejs
+++ b/views/controls/editor/toolbar.ejs
@@ -1,10 +1,14 @@
 
 <div class="edit menu vvbox" id="editorToolbar" data-intro="This is the main toolbar. Add and select media, Apply wallpaper, change room name etc." data-position="left">
 	<span
+		data-role='undo'
+		data-info="undo"
+		class="ion-reply"></span>
+	<span
 		data-role='open-media-viewer'
 		data-info="add media"
 		class="ion-ios7-photos-outline"></span>
-  <span
+	<span
     data-role='toggle-presets'
     data-info="preset styles"
     class="ion-ios7-briefcase-outline"></span>
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs
index ac025b5..5ca0390 100644
--- a/views/controls/editor/wallpaper.ejs
+++ b/views/controls/editor/wallpaper.ejs
@@ -14,7 +14,7 @@
     <form>
 
       <span class="ion-ios7-upload-outline upload-icon"></span>
-      <label>Upload wallpaper</label>
+      <label>Upload Wallpaper</label>
       <input type="file" accept="image/*" class="file" multiple>
     </form>
 <!--