merge

31 files changed, 569 insertions, 159 deletions

diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js
index 98e1820..f8372cd 100644
--- a/public/assets/javascripts/app.js
+++ b/public/assets/javascripts/app.js
@@ -18,10 +18,6 @@ else {
 new WOW().init();
 
 
-$('#help-button').click( function(){
-   $('body').chardinJs('start')
-});
-
 var scene, cam, map;
 
 var app = new function(){}
diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js
index 9ba0b4d..12aed62 100644
--- a/public/assets/javascripts/defaults.js
+++ b/public/assets/javascripts/defaults.js
@@ -3,7 +3,7 @@ app.defaults = {
 	units: app.units = "ft",
 	footResolution: 36,
 	meterResolution: 100,
-	wallOpacity: 0.95,
+	wallOpacity: 0.98,
 	outlineWidth: 2,
 	colors: {
     wall: [255,255,255],
diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 2b7e671..386819a 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -34,6 +34,14 @@ MX.Movements = function (cam) {
 	var pos = { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0 }
 
   $(document).one("keydown", function(){ $("#keyhint").fadeOut(250) })
+	function clampRotation( vr ) {
+		if (Rooms.mover.noclip) {
+			return clamp(vr, PI/-2, PI/2 )
+		}
+		else {
+			return clamp(vr, PI/-4, PI/6 )
+		}
+	}
 
 	var exports = {
 
@@ -127,8 +135,21 @@ MX.Movements = function (cam) {
 						Scenery.nextWallpaper = null
 						app.tube('cancel-wallpaper')
 					}
-					else if (app.controller && app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) {
+					else if (app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) {
 						app.controller.mediaViewer.hide()
+						$(".inuse").removeClass("inuse")
+					}
+					else if (app.controller.colorControl.$el.hasClass('active')) {
+						app.controller.colorControl.hide()
+						$(".inuse").removeClass("inuse")
+					}
+					else if (app.controller.wallpaperPicker.$el.hasClass('active')) {
+						app.controller.wallpaperPicker.hide()
+						$(".inuse").removeClass("inuse")
+					}
+					else if (app.controller.presets.$el.hasClass('active')) {
+						app.controller.presets.hide()
+						$(".inuse").removeClass("inuse")
 					}
 					else {
 						app.controller.toolbar.toggleMap()
@@ -211,7 +232,7 @@ MX.Movements = function (cam) {
 			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 )
+			cam.rotationX = clampRotation( rotX - dy )
 		},
 		
 		mouseup: function (e) {
@@ -223,13 +244,14 @@ MX.Movements = function (cam) {
 		},
 		
 		mousewheel: function (e, deltaY, deltaX) {
-			console.log(deltaX != 0 && deltaY != 0)
-			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)
+		  if (e.shiftKey) {
+        cam.rotationY -= deltaY / 150
+      }
+      else {
+        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 () {
@@ -238,7 +260,7 @@ MX.Movements = function (cam) {
 			
 			var ry = cam.rotationY
 			var s = creeping ? scale * creepFactor : scale
-			var vrrrr = creeping ? vr * creepFactor * 5 : vr
+			var vrrrr = creeping ? vr * creepFactor * 5 : vr * 0.5
 			var moving = moveForward || moveBackward || moveRight || moveLeft || moveUp || moveDown || turnLeft || turnRight || turnUp || turnDown
 			vx = vz = 0
 
@@ -271,10 +293,10 @@ MX.Movements = function (cam) {
 				}
 
 				if (turnUp) {
-					cam.rotationX = clamp( cam.rotationX - vrrrr*s, rotationX_min, rotationX_max)
+					cam.rotationX = clampRotation( cam.rotationX - vrrrr*s )
 				}
 				if (turnDown) {
-					cam.rotationX = clamp( cam.rotationX + vrrrr*s, rotationX_min, rotationX_max)
+					cam.rotationX = clampRotation( cam.rotationX + vrrrr*s )
 				}
 				if (turnLeft) {
 					cam.rotationY += vrrrr*s
diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js
index ecde3ca..3221bac 100644
--- a/public/assets/javascripts/rectangles/_env.js
+++ b/public/assets/javascripts/rectangles/_env.js
@@ -10,8 +10,8 @@ environment.init = function(){
 			"z": 0,
 			"rotationX": 0, // PI/2,
 			"rotationY": PI/2, // PI
-// 			"rotationX": 0,
-// 			"rotationY": PI
+      // "rotationX": 0,
+      // "rotationY": PI
 		})
 		
 		scene.camera.radius = 20
diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index 99ede82..64372c5 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){
+		return $(base.el).toggle(state).is(':visible')
 	}
 
 }
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 072ff7e..9d69990 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
@@ -26,6 +26,13 @@ Map.UI.Editor = function(map){
 		resize: true,
 		destroy: false,
 	})
+
+	base.blur = function(){
+		Rooms.forEach(function(r){
+			return r.focused = false
+		})
+		app.tube("builder-pick-nothing")
+	}
 	
 	//
 	
@@ -190,7 +197,7 @@ Map.UI.Editor = function(map){
       })
       Rooms.rebuild()
     }
-		
+
 		var intersects = Rooms.filter(function(r){
 			return r.focused = r.rect.contains(cursor.x.a, cursor.y.a)
 		})
@@ -207,13 +214,14 @@ Map.UI.Editor = function(map){
 		var cursor = base.mouse.cursor
 
 		var intersects = Rooms.filter(function(r){
-			return r.focused = r.rect.contains(cursor.x.a, cursor.y.a)
+			return r.focused // = r.rect.contains(cursor.x.a, cursor.y.a)
 		})
 		
 		if (intersects.length) {
 			wheelState = wheelState || intersects[0].copy()
 			
-			intersects[0].height = clamp( ~~(intersects[0].height - deltaY), height_min, height_max )
+			intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max )
+		  app.tube("builder-pick-room", intersects[0])
 			
 			clearTimeout(wheelTimeout)
 			wheelTimeout = setTimeout(function(){
@@ -224,7 +232,7 @@ Map.UI.Editor = function(map){
         })
         Rooms.rebuild()
         wheelState = null
-			}, 500)
+			}, 250)
 		}
 		else {
 			map.set_zoom(map.zoom_exponent - deltaY/20)
@@ -233,4 +241,5 @@ Map.UI.Editor = function(map){
 	
 	function rightclick (e){
 	}
+
 }
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
index 0da3b9a..fe5913d 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -134,19 +134,78 @@
       })
 		}
 		
+		base.luminance = function(rgb){
+			rgb = rgb || Walls.colors.ceiling
+			var rgb_max = Math.max.apply(0, rgb)
+			var rgb_min = Math.min.apply(255, rgb)
+			return (rgb_max + rgb_min ) / 2
+		}
+    
+    base.setBodyColor = function(){
+  		$("#header").toggleClass("black", Walls.luminance() < 100)
+			$("body").css("background-color", rgb_string( Walls.colors.wall ))
+		}
+		base.clearBodyColor = function(){
+			$("#header").removeClass("black")
+			$("body").css("background-color", "transparent")
+		}
+		
+		base.setWallpaper = {
+			wall: function(background){
+				var img = new Image ()
+				img.onload = function(){
+					Walls.list.forEach(function(wall){
+						wall.wallpaper(background, img)
+					})
+				}.bind(this)
+				img.src = background.src
+				img.complete && img.onload()
+			},
+			floor: function(background){
+				Walls.floors.forEach(function(floor){
+					if (floor.ceiling) return
+					floor.wallpaper(background)
+				})
+			},
+			ceiling: function(background){
+				Walls.floors.forEach(function(floor){
+					if (! floor.ceiling) return
+					floor.wallpaper(background)
+				})
+			},
+		}
+		
+		base.clearWallpaper = {
+			wall: function(){
+				Walls.list.forEach(function(wall){
+					wall.wallpaper("none")
+				})
+			},
+			floor: function(){
+				Walls.floors.forEach(function(floor){
+					if (floor.ceiling) return
+					wall.wallpaper("none")
+				})
+			},
+			ceiling: function(){
+				Walls.floors.forEach(function(floor){
+					if (! floor.ceiling) return
+					wall.wallpaper("none")
+				})
+			},
+		}
+		
     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)
@@ -176,7 +235,6 @@
           room.setCeilingColor(rgbColor)
         })
       },
-  
     }
   }
 
diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js
index 33333fb..c95734b 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/builder.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js
@@ -280,7 +280,7 @@
 			return el
 		}
 		this.make_wall = function (klass) {
-		  // klass += ".backface-hidden"
+		  klass += ".backface-hidden"
 			var el = new MX.Object3D(".face" + (klass || ""))
 			el.width = el.height = el.scaleX = el.scaleY = el.scaleZ = 1
 			el.z = el.y = el.x = 0
diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js
index 98f80c5..fae2ce6 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/mover.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js
@@ -11,7 +11,8 @@ Rooms.mover = new function(){
 	
 	base.bind = function(){
 		app.on("move", base.update)
-		keys.on("backslash", function(){
+		keys.on("backslash", function(e){
+		  if ( ! (e.ctrlKey || e.metaKey) ) return
 			base.noclip = ! base.noclip
 			base.room = null
 			app.movements.gravity( ! base.noclip )
@@ -43,7 +44,7 @@ Rooms.mover = new function(){
 
 			// in this case, we appear to have left the room..
 			// $(".face.active").removeClass("active")
-			$("body").css("background-color", "transparent")
+			Walls.clearBodyColor()
 			base.room = null
 		}
 
@@ -59,7 +60,9 @@ Rooms.mover = new function(){
 		// did we actually enter a room?
 		if (intersects.length) {
 			base.room = intersects[0]
-			$("body").css("background-color", rgb_string( Walls.colors.wall ))
+			if (! base.noclip) {
+				Walls.setBodyColor()
+			}
       app.tube("change-room", { room: base.room })
 		}
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js
index bee8c49..ff4f911 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/undo.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js
@@ -122,7 +122,7 @@
       type: "update-colors",
       undo: function(state){
         Walls.setColor[ state.mode ]( state.rgb )
-        app.router.editorView.lightControl.setSwatchColor( state.mode, state.rgb )
+        app.router.editorView.colorControl.setSwatchColor( state.mode, state.rgb )
 
         Minotaur.watch( app.router.editorView.settings )
       },
diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js
index 7ed52a1..a144ecd 100644
--- a/public/assets/javascripts/rectangles/models/floor.js
+++ b/public/assets/javascripts/rectangles/models/floor.js
@@ -15,6 +15,7 @@
 	var Floor = function(opt){
 		this.id = opt.id
 		this.side = opt.side
+		this.ceiling = opt.side & CEILING
 		this.mx = opt.mx
 	}
 	
@@ -39,7 +40,7 @@
 					if (Scenery.nextWallpaper) {
 					  var oldState = base.serialize()
 						base.wallpaper(Scenery.nextWallpaper)
-						Scenery.nextWallpaper = null
+						// Scenery.nextWallpaper = null
 
   					UndoStack.push({
   					  type: 'update-wallpaper',
@@ -114,8 +115,6 @@
 	  this.background.x = background.x || this.background.x
 	  this.background.y = background.y || this.background.y
 	  this.background.scale = background.scale || this.background.scale || 1
-	  
-		var shouldFlip = this.side & (CEILING)
 
 		var mx, dx, dy
 		var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale )
@@ -125,7 +124,7 @@
       
       var region = mx.rect
       
-      if (shouldFlip) {
+      if (this.ceiling) {
         dx = Math.round( this.background.x - region.x.a )
         dy = Math.round( this.background.y - region.y.a )
       }
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 7ff9015..eb445a7 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -104,7 +104,7 @@
 					else if (Scenery.nextWallpaper) {
 					  var oldState = base.serialize()
 						base.wallpaper(Scenery.nextWallpaper)
-						Scenery.nextWallpaper = null
+						// Scenery.nextWallpaper = null
 
   					UndoStack.push({
   					  type: 'update-wallpaper',
@@ -213,7 +213,7 @@
 		this.$walls.css("background-color", color)
 	}
 	
-	Wall.prototype.wallpaper = function(background){
+	Wall.prototype.wallpaper = function(background, img){
 	  if (! background) {
 	    background = { src: "none" }
 	  }
@@ -235,7 +235,7 @@
 		  return
 		}
 		
-		var img = new Image ()
+		img = img || new Image ()
 		img.onload = function(){
 		  this.backgroundImage = img
 		  this.wallpaperLoad(this.background.src)
@@ -260,24 +260,34 @@
 	  this.background.y = background.y || this.background.y
 	  this.background.scale = background.scale || this.background.scale || 1
 	  
-		var useX = this.side & FRONT_BACK
-		var shouldFlip = this.side & (LEFT | BACK)
-
 		var mx, dx, dy
 		var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale )
 		var h = Math.round( this.backgroundImage.naturalHeight * this.background.scale )
 
 		this.surface.faces.forEach(function(face, i){
-      
-      if (shouldFlip) {
-        mx = this.mx[this.mx.length-1-i]
-        dx = Math.round( this.background.x + face.x.a )
-        dy = Math.round( this.background.y + face.y.b )
-      }
-      else {
-        mx = this.mx[i]
-        dx = Math.round( this.background.x - face.x.b )
-        dy = Math.round( this.background.y + face.y.b )
+      // this.mx[i].el.innerHTML = sidesToString(this.side)
+
+      switch (this.side) {
+      	case LEFT:
+					mx = this.mx[this.mx.length-1-i]
+					dx = Math.round( this.background.x + face.x.a )
+					dy = Math.round( this.background.y + face.y.b )
+					break
+				case RIGHT:
+					mx = this.mx[this.mx.length-1-i]
+					dx = Math.round( this.background.x + face.x.b )
+					dy = Math.round( this.background.y + face.y.b )
+					break
+				case FRONT:
+					mx = this.mx[this.mx.length-1-i]
+					dx = Math.round( this.background.x + face.x.b )
+					dy = Math.round( this.background.y + face.y.b )
+					break
+				case BACK:
+					mx = this.mx[i]
+					dx = Math.round( this.background.x - face.x.a )
+					dy = Math.round( this.background.y + face.y.b )
+					break
       }
       
       mx.el.style.backgroundPosition = dx + 'px ' + dy + 'px'
@@ -286,7 +296,6 @@
 	}
 	
 	Wall.prototype.outline = function(wallColor, outlineColor){
-		var useX = this.side & FRONT_BACK
 		var mx = this.mx
 
 		var len = this.mx.length
diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js
index a38325e..3bc314c 100644
--- a/public/assets/javascripts/rectangles/util/constants.js
+++ b/public/assets/javascripts/rectangles/util/constants.js
@@ -21,7 +21,8 @@ var height_min = 200,
 		side_max = 5000,
 		resize_margin = 8,
 		cursor_amp = 1.5,
-		DEFAULT_PICTURE_WIDTH = 400
+		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 64aaa64..712d470 100644
--- a/public/assets/javascripts/rectangles/util/wheel.js
+++ b/public/assets/javascripts/rectangles/util/wheel.js
@@ -38,7 +38,11 @@ function wheel (opt) {
 		var deltaX = 0, deltaY = 0;
 		
 		// WebKit
-		if ( event.wheelDeltaY ) {
+		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
 		}
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js
index 196eca6..67834e7 100644
--- a/public/assets/javascripts/ui/builder/BuilderInfo.js
+++ b/public/assets/javascripts/ui/builder/BuilderInfo.js
@@ -34,7 +34,7 @@ var BuilderInfo = View.extend({
 	},
 	
 	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" )
 	},
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
index fe67e9b..c8c8880 100644
--- a/public/assets/javascripts/ui/builder/BuilderSettings.js
+++ b/public/assets/javascripts/ui/builder/BuilderSettings.js
@@ -30,7 +30,7 @@ var BuilderSettings = FormView.extend({
 		this.$id.val(data._id)
 		this.$name.val(data.name)
 
-		this.parent.lightControl.loadDefaults()
+		this.parent.colorControl.loadDefaults()
 
 		data.rooms && Rooms.deserialize(data.rooms)
 		data.startPosition && scene.camera.move(data.startPosition)
diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js
index a89111f..735274e 100644
--- a/public/assets/javascripts/ui/builder/BuilderView.js
+++ b/public/assets/javascripts/ui/builder/BuilderView.js
@@ -11,7 +11,7 @@ var BuilderView = View.extend({
 		this.info = new BuilderInfo ({ parent: this })
 		this.toolbar = new BuilderToolbar ({ parent: this })
 		this.settings = new BuilderSettings ({ parent: this })
-		this.lightControl = new LightControl ({ parent: this })
+		this.colorControl = new ColorControl ({ parent: this })
 	},
 
 	load: function(name){
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/ColorControl.js
index 3eb2861..459ac1e 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/ColorControl.js
@@ -1,20 +1,35 @@
 
-var LightControl = View.extend({
-  el: ".lightcontrol",
+var ColorControl = View.extend({
+  el: ".colorcontrol",
   
   events: {
     "mousedown": "stopPropagation",
-    "click .color-swatches span": "select",
-    "input #shadow-control": "updateShadow",
     "mousedown #brightness-control": "beginBrightness",
     "input #brightness-control": "updateBrightness",
-    "input #outline-hue": "updateShadow",
-    "input #wall-hue": "updateShadow",
+    "click .color-swatches span": "setSurface",
+    "click .colors span": "setHue",
   },
+
+	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],
+	],
   
-  initialize: function(){
+  initialize: function(opt){
+    this.parent = opt.parent
 
-    this.colorPicker = new LabColorPicker(this, 180, 180)
+    this.colorPicker = new LabColorPicker(this, 155, 155)
     this.$("#color-picker").append( this.colorPicker.canvas )
     this.$("#color-picker").append( this.colorPicker.cursor )
     
@@ -27,14 +42,22 @@ var LightControl = View.extend({
       ceiling: this.$("#ceiling-color"),
     }
     this.$brightnessControl = this.$("#brightness-control")
+
+    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))    
   },
 
   modes: [ "wall", "outline", "floor", "ceiling" ],
 
   load: function(data){
     this.modes.forEach(function(mode){
-      Walls.setColor[mode](data[mode])
-      this.$swatch[ mode ].css("background-color", rgb_string(data[mode]))
+			Walls.setColor[mode](data[mode])
+			this.$swatch[ mode ].css("background-color", rgb_string(data[mode]))
     }.bind(this))
     this.setMode("wall")
   },
@@ -50,6 +73,9 @@ var LightControl = View.extend({
   },
   
   toggle: function(state){
+    if (state) {
+      this.parent.cursor.message("colors")
+    }
     this.$el.toggleClass("active", state);
   },
   
@@ -64,6 +90,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)
   },
   
@@ -109,11 +136,20 @@ var LightControl = View.extend({
     this.$brightnessControl.val( this.labColor[0] )
   },
   
-  select: function(e){
+  setSurface: function(e){
     var mode = $('.swatch', e.currentTarget).data('mode')
     this.setMode(mode)
   },
   
+  setHue: function(e){
+  	var color = $(e.currentTarget).data('color')
+
+    this.labColor = this.colorPicker.load(color)
+    this.$brightnessControl.val( this.labColor[0] )
+
+    this.pick(color, this.labColor)
+  },
+  
   beginBrightness: function(){
     this.begin()
     $(window).one("mouseup", this.finalize.bind(this))
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index 89040e1..240f713 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,13 +38,17 @@ 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)
+      this.parent.colorControl.load(data.colors)
     }
     else {
-		  this.parent.lightControl.loadDefaults()
+		  this.parent.colorControl.loadDefaults()
     }
     
     if (data.walls) {
@@ -72,7 +81,9 @@ var EditorSettings = FormView.extend({
 	  this.parent.collaborators.show()
 	},
 	
-	clone: function(){
+	clone: function(e){
+		e.preventDefault()
+
 		var names = this.$name.val().split(" ")
 		if ( ! isNaN(Number( names[names.length-1] )) ) {
 			names[names.length-1] = Number( names[names.length-1] ) + 1
@@ -84,11 +95,14 @@ var EditorSettings = FormView.extend({
 		this.$id.val('new')
 		this.$name.val( names.join(" ") )
 		this.action = this.createAction
+		this.thumbnailState = null
 		
-		window.history.pushState(null, document.title, "/builder/new")
+		window.history.pushState(null, document.title, "/project/new")
 	},
 	
-	clear: function(){
+	clear: function(e){
+		e.preventDefault()
+
 		Scenery.removeAll()
 	},
 	
@@ -112,6 +126,9 @@ var EditorSettings = FormView.extend({
 		
  	  $(".inuse").removeClass("inuse")
 		$("[data-role='toggle-project-settings']").toggleClass("inuse", state)
+    if (state) {
+      this.parent.cursor.message("settings")
+    }
 	},
 
 	enterSubmit: function (e) {
@@ -141,6 +158,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 +178,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 93cc998..dceae3c 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -10,7 +10,7 @@ var EditorToolbar = View.extend({
 		"click [data-role='open-media-viewer']": 'openMediaViewer',
     "click [data-role='toggle-presets']": 'togglePresets',
 		"click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper',
-		"click [data-role='toggle-light-control']": 'toggleLightControl',
+		"click [data-role='toggle-color-control']": 'toggleColorControl',
 		"click [data-role='toggle-text-editor']": 'toggleTextEditor',
 	},
 	
@@ -29,20 +29,24 @@ var EditorToolbar = View.extend({
 		}
 	},
 	
-	toggleMap: function(){
-		var state = ! $("[data-role='toggle-map-view']").hasClass("inuse")
-		this.resetControls()
-    $("[data-role='toggle-map-view']").toggleClass("inuse", state)
-		map.toggle(state)
+	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)
+		var state = map.toggle(state)
+		if (state) { map.ui.blur() }
 		$("#minimap").toggleClass("hide", state)
 		this.parent.info.toggle(state)
 	},
 	
 	toggleSettings: function(){
 // 	  this.resetMode()
+    this.toggleMap(false)
     this.parent.textEditor.hide()
 		this.parent.presets.hide()
-		this.parent.lightControl.hide()
+		this.parent.colorControl.hide()
 		this.parent.wallpaperPicker.hide()
 		this.parent.mediaEditor.hide()
 		this.parent.settings.toggle()
@@ -53,6 +57,7 @@ var EditorToolbar = View.extend({
 		this.parent.mediaUpload.show()
 		this.resetMode()
 		this.resetControls()
+		this.toggleMap(false)
 	},
 
 	resetMode: function(){
@@ -66,10 +71,11 @@ var EditorToolbar = View.extend({
 	
 	resetControls: function(){
 	  $(".inuse").removeClass("inuse")
+    this.toggleMap(false)
     this.parent.textEditor.hide()
 		this.parent.wallpaperPicker.hide()
 		this.parent.presets.hide()
-		this.parent.lightControl.hide()
+		this.parent.colorControl.hide()
 		this.parent.settings.hide()
 	},
 	
@@ -105,23 +111,25 @@ var EditorToolbar = View.extend({
 		this.resetMode()
 		$("[data-role='toggle-wallpaper-panel']").toggleClass("inuse", state)
 		this.parent.mediaEditor.hide()
-		this.parent.lightControl.hide()
+		this.parent.colorControl.hide()
     this.parent.textEditor.hide()
 		this.parent.settings.hide()
 		this.parent.presets.hide()
+		this.toggleMap(false)
 		this.parent.wallpaperPicker.toggle(state)
 	},
 	
-	toggleLightControl: function(){
-		var state = ! $("[data-role='toggle-light-control']").hasClass("inuse")
+	toggleColorControl: function(){
+		var state = ! $("[data-role='toggle-color-control']").hasClass("inuse")
 		this.resetMode()
-		$("[data-role='toggle-light-control']").toggleClass("inuse", state)
+		$("[data-role='toggle-color-control']").toggleClass("inuse", state)
 		this.parent.mediaEditor.hide()
 		this.parent.wallpaperPicker.hide()
     this.parent.textEditor.hide()
 		this.parent.settings.hide()
 		this.parent.presets.hide()
-		this.parent.lightControl.toggle(state)
+		this.toggleMap(false)
+		this.parent.colorControl.toggle(state)
 	},
 	
 	toggleTextEditor: function(){
@@ -130,9 +138,10 @@ var EditorToolbar = View.extend({
 		$("[data-role='toggle-text-editor']").toggleClass("inuse", state)
 		this.parent.mediaEditor.hide()
 		this.parent.wallpaperPicker.hide()
-		this.parent.lightControl.hide()
+		this.parent.colorControl.hide()
 		this.parent.settings.hide()
 		this.parent.presets.hide()
+		this.toggleMap(false)
 		this.parent.textEditor.toggle(state)
   },
 
@@ -144,7 +153,8 @@ var EditorToolbar = View.extend({
 		this.parent.wallpaperPicker.hide()
     this.parent.textEditor.hide()
 		this.parent.settings.hide()
-		this.parent.lightControl.hide()
+		this.parent.colorControl.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..9946feb 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -9,6 +9,7 @@ var EditorView = View.extend({
 	},
 	
 	initialize: function(){
+	  this.cursor = new HelpCursor ({ parent: this })
 		this.toolbar = new EditorToolbar ({ parent: this })
 		this.settings = new EditorSettings ({ parent: this })
 		this.info = new BuilderInfo ({ parent: this })
@@ -16,7 +17,7 @@ var EditorView = View.extend({
 		this.mediaUpload = new MediaUpload ({ parent: this })
 		this.mediaEditor = new MediaEditor ({ parent: this })
 		this.wallpaperPicker = new WallpaperPicker ({ parent: this })
-		this.lightControl = new LightControl ({ parent: this })
+		this.colorControl = new ColorControl ({ parent: this })
 		this.textEditor = new TextEditor ({ parent: this })
 		this.collaborators = new Collaborators ({ parent: this })
 		this.presets = new Presets ({ parent: this })
@@ -41,6 +42,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/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js
new file mode 100644
index 0000000..d0e1825
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/HelpCursor.js
@@ -0,0 +1,73 @@
+
+var HelpCursor = View.extend({
+	el: "#helpCursor",
+	
+	active: false,
+	
+	messages: {
+	  start: "Welcome to VValls!  Click one of the tools at right to learn about it.",
+	  media: "This is where you pick media to go on the walls.  You can upload media and paste links.",
+	  addmedia: "Great, now click a wall to place this image.",
+	  resize: "Drag the image to position it, or use the dots to resize.",
+	  presets: "These are some basic presets to get you started. Click em! :-)",
+	  wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.",
+	  colors: "Use these colors to change the color of the walls, floor, and ceiling.",
+	  settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.",
+	},
+
+  initialize: function(){
+		$('#help-button').click(this.toggle.bind(this));
+  },
+  
+  toggle: function(){
+    this.active ? this.stop() : this.start()
+  },
+  
+  start: function(){
+    if (this.active) return
+    this.active = true
+    this.message('start')
+    this.$el.show()
+//     $('body').chardinJs('start')
+//     $(window).one("click", function(){
+//       $('body').chardinJs('stop')
+//     })
+    this.move({ pageX: -1000, pageY: -10000 })
+    this.moveFn = this.move.bind(this)
+    document.addEventListener("mousemove", this.moveFn)
+  },
+  
+  stop: function(){
+    this.active = false
+    this.$el.hide()
+    document.removeEventListener("mousemove", this.moveFn)
+  },
+  
+  offset: 100,
+  lastPosition: { pageX: 0, pageY: 0 },
+  move: function(e){
+    this.el.style.right = clamp(window.innerWidth - e.pageX, this.offset, window.innerWidth) + "px"
+    this.el.style.top = e.pageY + "px"
+    this.lastPosition = e
+  },
+
+  show: function(name){
+    this.showMessage(name)
+  },
+
+  message: function(name){
+    if (! this.active) return
+    if (name == "start" || name == "media" || name == "settings") {
+      this.offset = 100
+    }
+    else if (name == "colors") {
+      this.offset = 270
+    }
+    else {
+      this.offset = 290
+    }
+    this.move(this.lastPosition)
+    this.$el.html(this.messages[name])
+  },
+
+})
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index fddfefc..b3f4ac3 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -26,6 +26,7 @@ var MediaUpload = UploadView.extend({
 	},
 	
 	enterSubmit: function(e){
+		e.stopPropagation()
 		if (e.keyCode == 13) {
 			e.preventDefault()
 			this.parse()
@@ -35,7 +36,10 @@ var MediaUpload = UploadView.extend({
 	parse: function(){
 		var url = this.$url.val()
 		this.$url.val("")
-		
+		this.parseUrl(url)
+	},
+	
+	parseUrl: function(url){
 		Parser.parse(url, function(media){
 			if (! media) {
 				alert("Not a valid image/video link")
@@ -52,12 +56,10 @@ var MediaUpload = UploadView.extend({
 			request.done(this.add.bind(this))
 		}.bind(this))
 	},
-	
+
 	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..8cae4a4 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -4,38 +4,62 @@ 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.$wallpaperMedia = this.$(".wallpaperMedia")
+		this.$wallpaperMediaContainer = this.$(".wallpaperMedia > .container")
+		this.$wallpaperToggle = this.$(".wallpaperToggle")
+
 		this.$deleteMedia = this.$("#deleteMedia")
+		this.$viewMore = this.$(".viewMore")
 		this.$noMedia = this.$(".noMedia")
   },
 
+	wallpaperToggle: function(){
+    this.$wallpaperMedia.addClass("active")
+    this.$foundMedia.addClass("inactive")
+    this.$myMedia.addClass("inactive")
+    this.$("a").removeClass("active")
+    this.$foundToggle.addClass("active")
+	},
+	
 	foundToggle: function(){
-    this.$foundMedia.addClass("active");
-    this.$myMedia.addClass("inactive");
-    this.$("a").removeClass("active");
-    this.$foundToggle.addClass("active");
+    this.$wallpaperMedia.removeClass("active")
+    this.$foundMedia.addClass("active")
+    this.$myMedia.addClass("inactive")
+    this.$("a").removeClass("active")
+    this.$foundToggle.addClass("active")
 	},
 	
 	userToggle: function(){
-    this.$foundMedia.removeClass("active");
-    this.$myMedia.removeClass("inactive");
-    this.$("a").removeClass("active");
-    this.$userToggle.addClass("active");
+    this.$wallpaperMedia.removeClass("active")
+    this.$foundMedia.removeClass("active")
+    this.$myMedia.removeClass("inactive")
+    this.$("a").removeClass("active")
+    this.$userToggle.addClass("active")
 	},
 
 	show: function(){
@@ -44,6 +68,7 @@ var MediaViewer = ModalView.extend({
 			this.loadTrending()
 		}
 		else {
+		  this.parent.cursor.message("media")
 			this.__super__.show.call(this)
 		}
 	},
@@ -52,10 +77,11 @@ var MediaViewer = ModalView.extend({
 		this.__super__.hide.call(this)
 		this.deleteArmed(false)
 		this.parent.mediaUpload.hide()
+		this.parent.cursor.message('start')
 	},
 
 	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 +111,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 +126,41 @@ 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.parent.cursor.message("media")
+			this.__super__.show.call(this)
+		}
 	},
 	
-	add: function(media, $container){
+	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, prepend){
 		var image = new Image ()
 		var $span = $("<span>")
 		$span.addClass("mediaContainer")
@@ -142,7 +187,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,
@@ -187,7 +233,8 @@ var MediaViewer = ModalView.extend({
 		}
 
 		this.hide()
-		
+		this.parent.cursor.message('addmedia')
+
 		var $ants = $('.ants');
 		var $floatingImg = $('.floatingImg');
 		
@@ -222,6 +269,7 @@ var MediaViewer = ModalView.extend({
 			$(window).off('mousedown', _hideCursor)
       app.off('cancel-scenery', _hideCursor)
 			$floatingImg.parent().removeClass('edit')
+			app.controller.cursor.message('resize')
 		}
 		$(window).on('mousemove', _followCursor)
 		$(window).on('mousedown', _hideCursor)
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index a7e92b6..0a0e0fe 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -2,9 +2,13 @@ var Presets = View.extend({
 	el: "#presets",
 	
 	events: {
+		"mousedown": "stopPropagation",
     "click .presets span": "selectPreset",
+    "click .swatches span": "selectColor",
+    "change .url": "tileWalls",
+    "keydown .url": "enterSetUrl",
 	},
-
+	
   presets: {
     wireframe: {
       wall: [255,255,255],
@@ -17,8 +21,9 @@ var Presets = View.extend({
       outline: [0,0,0],
       floor: [109,116,106],
       ceiling: [159,163,157],
+      background: [109,116,106],
     },
-    pfunk: {
+    "p.Funk": {
       wall: [255,63,78],
       outline: [255,246,0],
       floor: [255,255,0],
@@ -30,14 +35,31 @@ var Presets = View.extend({
       floor: [0,0,0],
       ceiling: [0,0,0],
     },
+    matrix: {
+    	wall: { src: "http://dump.fm/images/20130225/1361818675427-dumpfm-melipone-matrixremixtransfast.gif", scale: 4.0, color: [0,0,0] },
+    	outline: [0,0,0],
+      floor: [10,15,10],
+      ceiling: [0,0,0],
+    },
   },
   
   initialize: function(opt){
     this.parent = opt.parent
+    
+    this.$url = this.$(".url")
+    
+		this.$presets = this.$(".presets")
+  	_.keys(this.presets).forEach(function(name){
+			var $swatch = $("<span>")
+			$swatch.html(capitalize(name))
+			$swatch.data('preset', name)
+			this.$presets.append($swatch)
+  	}.bind(this))
   },
 
   toggle: function(state){
-    this.$el.toggleClass("active", state);
+    this.$el.toggleClass("active", state)
+    this.parent.cursor.message(state ? "presets" : "start")
   },
   
   show: function(){
@@ -51,9 +73,50 @@ var Presets = View.extend({
   selectPreset: function(e){
     var preset = $(e.currentTarget).data('preset')
     if (! this.presets[preset]) return
-    this.parent.lightControl.load(this.presets[preset])
     this.$(".active").removeClass('active')
     $(e.currentTarget).addClass('active')
+    this.load(this.presets[preset])
+  },
+  
+  selectColor: function(e){
+    var preset = $(e.currentTarget).data('color')
+    console.log(preset)
   },
   
+  lastPreset: {wall:[1],outline:[1],floor:[1],ceiling:[1]},
+  load: function(preset){
+    this.parent.colorControl.modes.forEach(function(mode){
+    	if (! preset[mode].length) {
+    		Walls.setWallpaper[mode](preset[mode])
+				Walls.setColor[mode](preset[mode].color)
+			}
+			else {
+				if (! this.lastPreset[mode].length) {
+					Walls.clearWallpaper[mode]()
+				}
+				Walls.setColor[mode](preset[mode])
+				this.parent.colorControl.$swatch[ mode ].css("background-color", rgb_string(preset[mode]))
+    	}
+    }.bind(this))
+    this.parent.colorControl.setMode(preset.wall.color ? "wall" : "floor")
+    Walls.setBodyColor()
+    this.lastPreset = preset
+  },
+  
+  tileWalls: function(){
+  	var url = this.$url.sanitize()
+  	if (url.length && url.indexOf("http://") == 0) {
+			Walls.setWallpaper.wall({ src: url })
+			Walls.setWallpaper.floor({ src: url })
+			Walls.setWallpaper.ceiling({ src: url })
+  	}
+  	app.controller.wallpaperPicker.addUrl(url)
+  },
+	enterSetUrl: function (e) {
+		e.stopPropagation()
+		if (e.keyCode == 13) {
+			setTimeout(this.tileWalls.bind(this), 100)
+		}
+	},
+
 })
\ 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/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index 6bf2542..afdfca7 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -3,6 +3,7 @@ var WallpaperPicker = UploadView.extend({
 	el: ".wallpaper",
 	
 	mediaTag: "wallpaper",
+	createAction: "/api/media/new",
 	uploadAction: "/api/media/upload",
 
 	events: {
@@ -10,10 +11,10 @@ var WallpaperPicker = UploadView.extend({
 		"click .swatch": 'pick',
 		"click .wallpaperRemove": 'remove',
     "input [data-role='wallpaper-scale']": 'updateScale',
-
   },
 	
-	initialize: function(){
+	initialize: function(opt){
+	  this.parent = opt.parent
 	  this.__super__.initialize.call(this)
 	  this.$swatches = this.$(".swatches")
 	  this.$remove = this.$(".wallpaperRemove")
@@ -27,18 +28,28 @@ var WallpaperPicker = UploadView.extend({
 	
   loaded: false,
 	show: function(){
-		if (! this.loaded) {
-			this.load()
-		}
-		else {
-      this.toggle(true)
-		}
+    this.toggle(true)
 	},
-	
 	hide: function(){
-		this.__super__.hide.call(this)
+		this.toggle(false)
 	},
-
+// 	hide: function(){
+// 		this.__super__.hide.call(this)
+// 	},
+  
+	toggle: function (state) {
+    app.tube('cancel-wallpaper')
+    this.$el.toggleClass("active", state)
+	  if (state) {
+      this.parent.cursor.message("wallpaper")
+	    if (! this.loaded) {
+        this.load()
+      }
+	  }
+    // toggle the class that makes the cursor a paintbucket
+    // $("body").removeClass("pastePaper")
+	},
+		
 	load: function(){
 		$.get("/api/media/user", { tag: this.mediaTag }, this.populate.bind(this))
 	},
@@ -55,31 +66,35 @@ var WallpaperPicker = UploadView.extend({
     this.toggle(true)
 	},
 	
+	seenWallpapers: {},
 	add: function (media) {
 	  if (media.type !== "image") { return }
+	  if (this.seenWallpapers[ media.url ]) { return }
 	  var swatch = document.createElement("div")
 	  swatch.className = "swatch"
 	  swatch.style.backgroundImage = "url(" + media.url + ")"
 	  this.$swatches.append(swatch)
     this.$swatches.show()
     this.$(".txt").hide()
-	},
-
-	toggle: function (state) {
-	  if (state && ! this.loaded) {
-	    this.show()
-	  }
-	  else {
-      this.$el.toggleClass("active", state)
-	  }
-    // toggle the class that makes the cursor a paintbucket
-    // $("body").removeClass("pastePaper")
+    this.seenWallpapers[ media.url ] = true
 	},
 	
-	hide: function(){
-		this.toggle(false)
+	addUrl: function (url){
+		Parser.loadImage(url, function(media){
+			if (! media) return
+			media._csrf = $("[name=_csrf]").val()
+			media.tag = this.mediaTag
+			
+			var request = $.ajax({
+				type: "post",
+				url: this.createAction,
+				data: media,
+			})
+			request.done(this.add.bind(this))
+			
+		}.bind(this))
 	},
-	
+
 	beforeUpload: function(){
 	},
 	
@@ -124,7 +139,7 @@ var WallpaperPicker = UploadView.extend({
 				$floatingSwatch.removeClass("scissors").hide()
 			}
 			$(window).on('mousemove', _followCursor)
-			$(window).one('click', _hideCursor);
+			// $(window).one('click', _hideCursor);
       app.on('cancel-wallpaper', _hideCursor)
 			$floatingSwatch.show()
 			_followCursor(e);
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/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js
index 52c96e6..aa8c480 100644
--- a/public/assets/javascripts/ui/lib/Parser.js
+++ b/public/assets/javascripts/ui/lib/Parser.js
@@ -5,9 +5,12 @@ var Parser = {
 		fetch: function(url, done) {
 			var img = new Image ()
 			img.onload = function(){
+				if (!img) return
 				var width = img.naturalWidth, height = img.naturalHeight
 				img = null
 				done({
+					url: url,
+					type: "image",
 					token: "",
 					thumbnail: "",
 					title: "",
@@ -32,6 +35,8 @@ var Parser = {
 				var width = video.videoWidth, height = video.videoHeight
 				video = null
 				done({
+					url: url,
+					type: "video",
 					token: "",
 					thumbnail: "",
 					title: "",
@@ -63,6 +68,8 @@ var Parser = {
 				success: function(result){
 					var res = result.items[0]
 					done({
+						url: url,
+						type: "youtube",
 						token: id,
 						thumbnail: thumb,
 						title: res.snippet.title,
@@ -92,6 +99,8 @@ var Parser = {
 					  return
 					}
 					done({
+						url: url,
+						type: "vimeo",
 						token: id,
 						thumbnail: res.thumbnail_large,
 						title: res.title,
@@ -119,6 +128,8 @@ var Parser = {
 					+ '0673fbe6fc794a7750f680747e863b10',
 				success: function(result) {
 					done({
+						url: url,
+						type: "soundcloud",
 						token: result.id,
 						thumbnail: "",
 						title: "",
@@ -138,6 +149,8 @@ var Parser = {
 		regex: /^http.+/i,
 		fetch: function(url, done) {
 			done({
+				url: url,
+				type: "link",
 				token: "",
 				thumbnail: "",
 				title: "",
@@ -156,8 +169,6 @@ var Parser = {
 		var matched = Parser.integrations.some(function(integration){
 			if (integration.regex.test(url)) {
 				integration.fetch(url, function(res){
-					res.url = url
-					res.type = integration.type					
 					cb(res)
 				})
 				return true
@@ -176,6 +187,15 @@ var Parser = {
 	  return ""
 	},
 
+	loadImage: function(url, cb, error){
+		if (Parser.lookup.image.regex.test(url)) {
+			Parser.lookup.image.fetch(url, function(media){
+				cb(media)
+			})
+		}
+		else error && error()
+	},
+	
   thumbnail: function (media) {
     return '<img src="' + (media.thumbnail || media.url) + '" class="thumb">';
   },
diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js
index 76c5c7b..367e20e 100644
--- a/public/assets/javascripts/util.js
+++ b/public/assets/javascripts/util.js
@@ -4,10 +4,11 @@ if (window.$) {
   $.fn.string = function() { return trim($(this).val()) }
   $.fn.enable = function() { return $(this).attr("disabled",null) }
   $.fn.disable = function() { return $(this).attr("disabled","disabled") }
+  $.fn.sanitize = function(s) { return trim(sanitize($(this).val())) }
   $.fn.htmlSafe = function(s) { return $(this).html(sanitize(s)) }
 }
 
-function trim(s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") }
+function trim (s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") }
 function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") }
 function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") }
 function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) }