merge

34 files changed, 500 insertions, 174 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 5ba5d69..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 = {
 
@@ -129,9 +137,19 @@ MX.Movements = function (cam) {
 					}
 					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.lightControl.$el.hasClass('active')) {
-						app.controller.lightControl.hide()
+					else if (app.controller.presets.$el.hasClass('active')) {
+						app.controller.presets.hide()
+						$(".inuse").removeClass("inuse")
 					}
 					else {
 						app.controller.toolbar.toggleMap()
@@ -214,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) {
@@ -226,12 +244,14 @@ MX.Movements = function (cam) {
 		},
 		
 		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)
+		  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 () {
@@ -240,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
 
@@ -273,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/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index 3a47dab..64372c5 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -67,7 +67,7 @@ var Map = function(opt){
 	}
 		
 	base.toggle = function(state){
-		$(base.el).toggle(state)
+		return $(base.el).toggle(state).is(':visible')
 	}
 
 }
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 119a659..fe5913d 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -135,11 +135,65 @@
 		}
 		
 		base.luminance = function(rgb){
-			rgb = rgb || Walls.colors.wall
+			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 = {
     
@@ -181,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 a2d2223..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,8 +44,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")
+			Walls.clearBodyColor()
 			base.room = null
 		}
 
@@ -60,8 +60,9 @@ 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 ))
+			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..9838232 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
 	}
 	
@@ -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..542c99a 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -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/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 34a5a51..61a7ef6 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/ColorControl.js
@@ -1,18 +1,33 @@
 
-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.$("#color-picker").append( this.colorPicker.canvas )
@@ -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")
   },
@@ -54,6 +77,7 @@ var LightControl = View.extend({
   },
   
   show: function(){
+    this.parent.cursor.message("colors")
     this.toggle(true)
   },
   
@@ -110,11 +134,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 ac361a7..240f713 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -45,10 +45,10 @@ var EditorSettings = FormView.extend({
 		}
 
     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) {
@@ -81,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
@@ -93,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()
 	},
 	
@@ -121,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) {
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 4f07d1f..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',
 	},
 	
@@ -30,12 +30,13 @@ var EditorToolbar = View.extend({
 	},
 	
 	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)
+// 		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)
 	},
@@ -45,7 +46,7 @@ var EditorToolbar = View.extend({
     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()
@@ -74,7 +75,7 @@ var EditorToolbar = View.extend({
     this.parent.textEditor.hide()
 		this.parent.wallpaperPicker.hide()
 		this.parent.presets.hide()
-		this.parent.lightControl.hide()
+		this.parent.colorControl.hide()
 		this.parent.settings.hide()
 	},
 	
@@ -110,7 +111,7 @@ 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()
@@ -118,17 +119,17 @@ var EditorToolbar = View.extend({
 		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.toggleMap(false)
-		this.parent.lightControl.toggle(state)
+		this.parent.colorControl.toggle(state)
 	},
 	
 	toggleTextEditor: function(){
@@ -137,7 +138,7 @@ 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)
@@ -152,7 +153,7 @@ 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 ccd6c63..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 })
diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js
new file mode 100644
index 0000000..9b6807e
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/HelpCursor.js
@@ -0,0 +1,60 @@
+
+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)
+  },
+  
+  move: function(e){
+    this.el.style.left = e.pageX + "px"
+    this.el.style.top = e.pageY + "px"
+  },
+
+  show: function(name){
+    this.showMessage(name)
+  },
+
+  message: function(name){
+    if (! this.active) return
+    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 9799f99..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,7 +56,7 @@ var MediaUpload = UploadView.extend({
 			request.done(this.add.bind(this))
 		}.bind(this))
 	},
-	
+
 	add: function(media){
 		console.log(media)
 		this.parent.mediaViewer.addUploadedMedia(media)
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 10819af..8cae4a4 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -20,29 +20,46 @@ var MediaViewer = ModalView.extend({
 	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(){
@@ -51,6 +68,7 @@ var MediaViewer = ModalView.extend({
 			this.loadTrending()
 		}
 		else {
+		  this.parent.cursor.message("media")
 			this.__super__.show.call(this)
 		}
 	},
@@ -59,6 +77,7 @@ var MediaViewer = ModalView.extend({
 		this.__super__.hide.call(this)
 		this.deleteArmed(false)
 		this.parent.mediaUpload.hide()
+		this.parent.cursor.message('start')
 	},
 
 	load: function(){
@@ -129,6 +148,7 @@ var MediaViewer = ModalView.extend({
 		}
 		else  {
 			this.loaded = true
+      this.parent.cursor.message("media")
 			this.__super__.show.call(this)
 		}
 	},
@@ -213,7 +233,8 @@ var MediaViewer = ModalView.extend({
 		}
 
 		this.hide()
-		
+		this.parent.cursor.message('addmedia')
+
 		var $ants = $('.ants');
 		var $floatingImg = $('.floatingImg');
 		
@@ -248,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 1e70aa2..0a0e0fe 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -5,24 +5,10 @@ var Presets = View.extend({
 		"mousedown": "stopPropagation",
     "click .presets span": "selectPreset",
     "click .swatches span": "selectColor",
+    "change .url": "tileWalls",
+    "keydown .url": "enterSetUrl",
 	},
 	
-	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: {
       wall: [255,255,255],
@@ -35,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],
@@ -48,21 +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.$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))
+    
+    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(){
@@ -76,9 +73,9 @@ 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){
@@ -86,4 +83,40 @@ var Presets = View.extend({
     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/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index 6bf2542..6bcd859 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")
@@ -28,6 +29,7 @@ var WallpaperPicker = UploadView.extend({
   loaded: false,
 	show: function(){
 		if (! this.loaded) {
+      this.parent.cursor.message("wallpaper")
 			this.load()
 		}
 		else {
@@ -55,14 +57,33 @@ 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()
+    this.seenWallpapers[ media.url ] = true
+	},
+	
+	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))
 	},
 
 	toggle: function (state) {
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) }
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index b8e2a2b..44247ef 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -901,7 +901,7 @@ border-left: 1px solid black;
 
 .face {
 	background-color: #fff;
-	transition: 0.1s background-color ease;
+	transition: 0.1s background-color ease, 0.05s background-color ease;
 }
 .front { background-color: #fff; }
 .back  { background-color: #fff; }
@@ -1271,7 +1271,7 @@ border-left: 1px solid black;
 .noMedia {
   margin: 40px;
 }
-.foundMedia {
+.foundMedia, .wallpaperMedia {
   position:absolute;
   top:0;
   left:0;
@@ -1282,8 +1282,7 @@ border-left: 1px solid black;
   padding-top:40px;
   width: 100%;
 }
-
-.foundMedia.active {
+.foundMedia.active, .wallpaperMedia.active {
   -webkit-transform: translateX(0%);
   transform: translateX(0%);
 }
@@ -1446,12 +1445,12 @@ border-left: 1px solid black;
 .wallpaper, #presets {
   right: 80px;
   margin-top: 77px;
-  width: 172px;
+  width: 202px;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   -webkit-transform: translateX(400px);
   transition: transform 0.1s ease-in-out;
   transform: translateX(400px);
-	padding: 5px 5px 9px 5px;
+	padding: 10px 12px 12px 12px;
 }
 
 #presets {
@@ -1467,7 +1466,8 @@ border-left: 1px solid black;
   height: 40px;
   display: inline-block;
   border: 1px solid;
-  background-size: contain;
+  background-size: 100%;
+  margin: 0 2px 4px 2px;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   line-height: 0;
   vertical-align: text-bottom;
@@ -1487,10 +1487,11 @@ border-left: 1px solid black;
 	padding-bottom: 6px;
 }
 
-#presets .colors {
+.vvbox .colors {
+  max-width: 155px;
 	margin-bottom: 5px;
 }
-#presets .colors span {
+.vvbox .colors span {
 	display: inline-block;
 	font-size: 0;
 	width: 20px;
@@ -1500,7 +1501,7 @@ border-left: 1px solid black;
 	cursor: pointer;
 	transition: transform 0.2s;
 }
-#presets .colors span:hover {
+.vvbox .colors span:hover {
 	transform: translateX(3px) translateY(-3px);
 }
 
@@ -1583,21 +1584,21 @@ border-left: 1px solid black;
 
 /* COLOR PICKER */
 
-.lightcontrol {
+.colorcontrol {
   margin-top: 8%;
   right: 80px;
-  padding: 13px 20px 20px 20px;
+  padding: 10px 12px 12px 12px;
   -webkit-transform: translateX(400px);
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
   transform: translateX(400px);
   transition: -webkit-transform 0.2s ease-in-out;
 }
 
-.lightcontrol.active {
+.colorcontrol.active {
   -webkit-transform: translateX(0px);
   transform: translateX(0px);
 }
-.lightcontrol .slider {  
+.colorcontrol .slider {  
 }
 h4 {
   font-weight:300;
@@ -1608,8 +1609,8 @@ input[type=range] {
   -moz-appearance: none;
   cursor: pointer;
   background-color: black;
-  width: 180px;
-  height:3px;
+  width: 155px;
+  height: 3px;
 }
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
@@ -1678,6 +1679,7 @@ input[type="range"]::-webkit-slider-thumb {
   border-bottom: 1px transparent solid;
 	padding: 5px;
 }
+.presets span:hover,
 .presets span.active {
 	text-decoration: underline;
 }
@@ -1698,13 +1700,19 @@ input[type="range"]::-webkit-slider-thumb {
 	width: 100%;
 	color: #555;
 }
+#presets .url {
+	margin: 4px 0;
+	padding: 2px;
+	font-size: 12px;
+	border: 1px black solid;
+	width: 100%;
+}
 
 .color-swatches span:nth-child(1),.color-swatches span:nth-child(2){
 	margin-bottom:5px;
 }
 .color-swatches span.active, .color-swatches span.active:hover{
-	background:#000;
-	color:white;
+	background: #fff;
 }
 .color-swatches span:nth-child(3){
 	clear:left;
@@ -1712,14 +1720,30 @@ input[type="range"]::-webkit-slider-thumb {
 .color-swatches span:hover {
 	background:#eee;
 }
+.color-swatches span.active label,
+.color-swatches span:hover label {
+	border-bottom: 1px solid;
+}
 
 .color-swatches label {
 	position: relative;
-	padding-left: 5px;
+	margin-left: 5px;
 	display: inline-block;
 	cursor: pointer;
 }
 
+#helpCursor {
+  position: fixed;
+  max-width: 200px;
+  font-size: 13px;
+  color: black;
+  background: #fff;
+  margin: 8px 0 0 8px;
+  padding: 4px;
+  font-weight: 500;
+  z-index: 22;
+  display: none;
+}
 
 .settings.info {
   right: auto;
diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs
index 205938f..2762207 100644
--- a/views/controls/builder/info.ejs
+++ b/views/controls/builder/info.ejs
@@ -2,7 +2,10 @@
 	<h4>Map Editor</h4>
 
   <div class="no-selection">
-    Click a room to select it, or click and drag to make a new room.
+    Click and drag to make a new room.
+    Click a room to select, move or resize it.
+    <br><br>
+    Press ESC to toggle the map.
   </div>
   
 	
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/color-control.ejs
index 8b20464..040808e 100644
--- a/views/controls/editor/light-control.ejs
+++ b/views/controls/editor/color-control.ejs
@@ -1,6 +1,10 @@
-<div class="vvbox lightcontrol">
+<div class="vvbox colorcontrol">
 	<h4>Edit Room Colors</h4>
-  <div id="color-picker">
+
+  <div class="colors">
+  </div>
+
+  <div id="color-picker" style="display: none">
   </div>
   
 	<div class="slider">
diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs
index 7996f84..d1e2c99 100644
--- a/views/controls/editor/media-drawer.ejs
+++ b/views/controls/editor/media-drawer.ejs
@@ -6,7 +6,13 @@
 <span class="close" id="fixed_close">X</span>
 
 <div class="mediaDrawer fixed animate mediaViewer">
-	<h2><a href="#" class="userToggle active">Your Media</a> – <a href="#" class="foundToggle">Found Media</a></h2><br>
+	<h2>
+	  <a href="#" class="userToggle active">Your Media</a>
+	  – <a href="#" class="foundToggle">Found Media</a>
+<!--
+	  – <a href="#" class="wallpaperToggle">Wallpaper</a>
+ -->
+	</h2><br>
 	<h3 class="editBtn warn" id="deleteMedia"></h3>
 
 	<div class="myMedia">
@@ -29,4 +35,9 @@
 	<div class="foundMedia">
 	  <span class="container"></span>
  	</div>
+ 	
+ 	<div class="wallpaperMedia">
+	  <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 70e48e3..02e9d42 100644
--- a/views/controls/editor/presets.ejs
+++ b/views/controls/editor/presets.ejs
@@ -1,21 +1,6 @@
 <div class="vvbox" id="presets">
-  <h4>Preset Colors</h4>
-  <div class="colors">
-  </div>
-
   <h4>Preset Styles</h4>
   <div class="presets">
-    <span data-preset="wireframe">
-      Wireframe
-    </span>
-    <span data-preset="shaded">
-      Shaded
-    </span>
-    <span data-preset="inverse">
-      Inverse
-    </span>
-    <span data-preset="pfunk">
-      P.Funk
-    </span>
   </div>
+  <input type="text" class="url" placeholder="enter a url">
 </div>
diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs
index 7c40a75..8443abb 100644
--- a/views/controls/editor/settings.ejs
+++ b/views/controls/editor/settings.ejs
@@ -1,3 +1,5 @@
+<span id="helpCursor"></span>
+
 <div class="vvbox settings" id="editorSettings">
 	<h4>Room Settings</h4>
 	<input type="hidden" name="_csrf" value="[[- token ]]">
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs
index 8ea21d5..7b08db6 100644
--- a/views/controls/editor/toolbar.ejs
+++ b/views/controls/editor/toolbar.ejs
@@ -1,6 +1,11 @@
 
 <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"
@@ -11,10 +16,6 @@
     class="ion-ios7-briefcase-outline"></span>
 <!-- 
 	<span
-	data-role='undo'
-	data-info="undo"
-	class="ion-reply"></span>
-	<span
 		data-role='resize-media'
 		data-info="resize media"
 		class="ion-arrow-resize"></span>
@@ -28,9 +29,10 @@
 		data-info="add wallpaper"
 		class="ion-ios7-keypad-outline"></span>
 	<span
-		data-role='toggle-light-control'
+		data-role='toggle-color-control'
 		data-info="edit room colors"
 		class="ion-ios7-sunny-outline"></span>
+<!-- 
   <span
     data-role='toggle-text-editor'
     data-info="add text to wall"
@@ -39,6 +41,7 @@
 		data-role='toggle-map-view'
 		data-info="toggle map view"
 		class="ion-ios7-world-outline"></span>
+ -->
 	<span
 		data-role='toggle-project-settings'
 		data-info="room settings"
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs
index 5ca0390..39a109b 100644
--- a/views/controls/editor/wallpaper.ejs
+++ b/views/controls/editor/wallpaper.ejs
@@ -12,7 +12,6 @@
   
   <div class="wallpaperUpload toolButton">
     <form>
-
       <span class="ion-ios7-upload-outline upload-icon"></span>
       <label>Upload Wallpaper</label>
       <input type="file" accept="image/*" class="file" multiple>
@@ -21,15 +20,18 @@
     <input type="text" placeholder="Enter Image URL" class="url">
  -->
   </div>
+  
   <div class="wallpaperRemove toolButton">
     <span class="ion-scissors"></span>
     <label>Remove Wallpaper</label>
   </div>
 
+<!--
   <div class="wallpaperResize toolButton">
     <span class="ion-arrow-resize"></span>
     <label>Resize Wallpaper</label>
   </div>
+-->
 
   <div class="wallpaperResizeControls">
     <span data-role="wallpaper-position" class="ion-arrow-expand"></span>
diff --git a/views/editor.ejs b/views/editor.ejs
index c0562e9..29db917 100755
--- a/views/editor.ejs
+++ b/views/editor.ejs
@@ -17,7 +17,7 @@
 			[[ include controls/editor/media-drawer ]]
 			[[ include controls/editor/media-editor ]]
 			[[ include controls/editor/wallpaper ]]
-			[[ include controls/editor/light-control ]]
+			[[ include controls/editor/color-control ]]
 			[[ include controls/editor/text-editor ]]
 			[[ include controls/editor/collaborators ]]
 			[[ include controls/editor/settings ]]
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 07ee7a5..c9b4c95 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -102,7 +102,8 @@
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorSettings.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorToolbar.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/editor/LightControl.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/editor/HelpCursor.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/editor/ColorControl.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/Collaborators.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaEditor.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaUpload.js"></script>