merge

27 files changed, 426 insertions, 229 deletions

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 0ce03db..5ba5d69 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -25,193 +25,218 @@ MX.Movements = function (cam) {
 			vx = vy = vz = 0,
 			creepFactor = 0.3
 
+	var mouseX, mouseY, dx, dy, rotX, rotY, dragging = false
+
+	var trackpad
+
 	var DEFAULT_SCALE = 1.0, scale = DEFAULT_SCALE
 	
 	var pos = { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0 }
 
   $(document).one("keydown", function(){ $("#keyhint").fadeOut(250) })
 
-	return {
+	var exports = {
 
 		init: function () {
+		
+		  trackpad = new wheel ({
+		  	el: scene.el,
+		  	update: exports.mousewheel,
+		  })
+		  
+			document.addEventListener('keydown', exports.keydown)
+			document.addEventListener('keyup', exports.keyup)
+			document.addEventListener('mousedown', exports.mousedown)
+			document.addEventListener('mousemove', exports.mousemove)
+			document.addEventListener('mouseup', exports.mouseup)
+			window.addEventListener('blur', exports.reset)
+			window.addEventListener('focus', exports.reset)
+		},
+		
+		keydown: function (e) {
+			// console.log(e.keyCode)
+			if (locked || e.altKey || e.metaKey || e.ctrlKey) {
+				return
+			}
+			switch ( e.keyCode ) {
+			
+				case 16: // shift
+					creeping = true
+					break
 
-			document.addEventListener('keydown', function (e) {
-        // console.log(e.keyCode)
-				if (locked || e.altKey || e.metaKey || e.ctrlKey) {
-				  return
-				}
-				switch ( e.keyCode ) {
-				
-					case 16: // shift
-						creeping = true
-						break
-
-					case 38: // up
-					case 87: // w
-						moveForward = true
-						break
+				case 38: // up
+				case 87: // w
+					moveForward = true
+					break
 
-					case 65: // a
-						moveLeft = true
-						break
+				case 65: // a
+					moveLeft = true
+					break
 
-					case 40: // down
-					case 83: // s
-						moveBackward = true
-						break
+				case 40: // down
+				case 83: // s
+					moveBackward = true
+					break
 
-					case 68: // d
-						moveRight = true
-						break
+				case 68: // d
+					moveRight = true
+					break
 
-					case 37: // left
-					case 81: // q
-						turnLeft = true
-						break
-							
-					case 39: // right
-					case 69: // e
-						turnRight = true
-						break
-				
-					case 82: // r
-						turnUp = true
-						break
+				case 37: // left
+				case 81: // q
+					turnLeft = true
+					break
+						
+				case 39: // right
+				case 69: // e
+					turnRight = true
+					break
+			
+				case 82: // r
+					turnUp = true
+					break
 
-					case 70: // f
-						turnDown = true
-						break
+				case 70: // f
+					turnDown = true
+					break
 
-					case 32: // space
-						if (gravity) {
-							jumping = true
-							vy = abs(vy) + jumpV * scale
-							if (e.shiftKey) {
-								vy *= -1
-							}
+				case 32: // space
+					if (gravity) {
+						jumping = true
+						vy = abs(vy) + jumpV * scale
+						if (e.shiftKey) {
+							vy *= -1
 						}
-						else {
-							if (e.shiftKey) {
-								moveDown = true
-							}
-							else {
-								moveUp = true
-							}
-						}
-						break
-
-					case 27:  // esc
-					  if (Scenery.nextMedia) {
-					    Scenery.nextMedia = null
-              app.tube('cancel-scenery')
-					  }
-					  else if (Scenery.nextWallpaper) {
-					    Scenery.nextWallpaper = null
-              app.tube('cancel-wallpaper')
-					  }
-						else if (app.controller && app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) {
-						  app.controller.mediaViewer.hide()
+					}
+					else {
+						if (e.shiftKey) {
+							moveDown = true
 						}
 						else {
-              app.controller.toolbar.toggleMap()
+							moveUp = true
 						}
-						break
-				}
-			})
+					}
+					break
 
-			document.addEventListener('keyup', function (e) {
-				if (locked) return;
-				switch ( e.keyCode ) {
-			
-					case 16: // shift
-						creeping = false
-						break
+				case 27:  // esc
+					if (Scenery.nextMedia) {
+						Scenery.nextMedia = null
+						app.tube('cancel-scenery')
+					}
+					else if (Scenery.nextWallpaper) {
+						Scenery.nextWallpaper = null
+						app.tube('cancel-wallpaper')
+					}
+					else if (app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) {
+						app.controller.mediaViewer.hide()
+					}
+					else if (app.controller.lightControl.$el.hasClass('active')) {
+						app.controller.lightControl.hide()
+					}
+					else {
+						app.controller.toolbar.toggleMap()
+					}
+					break
+			}
+		},
 
-					case 38: // up
-					case 87: // w
-						moveForward = false
-						break
+		keyup: function (e) {
+			if (locked) return;
+			switch ( e.keyCode ) {
+		
+				case 16: // shift
+					creeping = false
+					break
 
-					case 65: // a
-						moveLeft = false
-						break
+				case 38: // up
+				case 87: // w
+					moveForward = false
+					break
 
-					case 40: // down
-					case 83: // s
-						moveBackward = false
-						break
+				case 65: // a
+					moveLeft = false
+					break
 
-					case 68: // d
-						moveRight = false
-						break
+				case 40: // down
+				case 83: // s
+					moveBackward = false
+					break
 
-					case 37: // left
-					case 81: // q
-						turnLeft = false
-						break
-							
-					case 39: // right
-					case 69: // e
-						turnRight = false
-						break
+				case 68: // d
+					moveRight = false
+					break
 
-					case 82: // r
-						turnUp = false
-						break
+				case 37: // left
+				case 81: // q
+					turnLeft = false
+					break
+						
+				case 39: // right
+				case 69: // e
+					turnRight = false
+					break
 
-					case 70: // f
-						turnDown = false
-						break
+				case 82: // r
+					turnUp = false
+					break
 
-					case 32: // space
-						moveUp = moveDown = false
-						break
+				case 70: // f
+					turnDown = false
+					break
+
+				case 32: // space
+					moveUp = moveDown = false
+					break
 
 /*					
-					case 48: // 0
-						cam.rotationX = 0
-						cam.rotationY = 0
-						cam.x = 0
-						cam.y = viewHeight
-						cam.z = 0
-						break
+				case 48: // 0
+					cam.rotationX = 0
+					cam.rotationY = 0
+					cam.x = 0
+					cam.y = viewHeight
+					cam.z = 0
+					break
 */
-				}
-			})
-			
-			var mouseX, mouseY, dx, dy, rotX, rotY, dragging = false
-			document.addEventListener('mousedown', function (e) {
-				if (locked) return;
-				mouseX = e.pageX
-				mouseY = e.pageY
-				rotX = cam.rotationX
-				rotY = cam.rotationY
-				dragging = true
-			})
-			
-			document.addEventListener('mousemove', function (e) {
-				if (locked || ! dragging) return
-				var dx = (e.pageX - mouseX) / window.innerWidth * Math.PI/3
-				var dy = (e.pageY - mouseY) / window.innerHeight * Math.PI/3
-				cam.rotationY = rotY + dx
-				cam.rotationX = clamp( rotX - dy, rotationX_min, rotationX_max )
-			})
-			
-			document.addEventListener('mouseup', function (e) {
-				dragging = false
-			})
-			
-			window.addEventListener('blur', reset)
-			window.addEventListener('focus', reset)
-			function reset(){
-				moveForward = moveLeft = moveBackward = moveRight = moveUp = moveDown = turnLeft = turnRight = jumping = dragging = creeping = false
 			}
+		},
+
+		mousedown: function (e) {
+			if (locked) return;
+			mouseX = e.pageX
+			mouseY = e.pageY
+			rotX = cam.rotationX
+			rotY = cam.rotationY
+			dragging = true
+		},
+			
+		mousemove: function (e) {
+			if (locked || ! dragging) return
+			var dx = (e.pageX - mouseX) / window.innerWidth * Math.PI/3
+			var dy = (e.pageY - mouseY) / window.innerHeight * Math.PI/3
+			cam.rotationY = rotY + dx
+			cam.rotationX = clamp( rotX - dy, rotationX_min, rotationX_max )
+		},
+		
+		mouseup: function (e) {
+			dragging = false
+		},
+		
+		reset: function(){
+			moveForward = moveLeft = moveBackward = moveRight = moveUp = moveDown = turnLeft = turnRight = jumping = dragging = creeping = false
+		},
+		
+		mousewheel: function (e, deltaY, deltaX) {
+			cam.rotationY += deltaX / 20
+
+			pos.x += deltaY * Math.cos(cam.rotationY + Math.PI / 2) * 10
+			pos.z += deltaY * Math.sin(cam.rotationY + Math.PI / 2) * 10
 
+			app.tube("move", pos)
 		},
 
 		update: function () {
 
-			if (locked) return;
+			if (locked) { return }
 			
 			var ry = cam.rotationY
 			var s = creeping ? scale * creepFactor : scale
@@ -301,4 +326,6 @@ MX.Movements = function (cam) {
 		velocity: function(n){ v = clamp(n, 1, 50) },
 		jumpVelocity: function(n){ jumpV = clamp(n, 1, 50) },
 	}
+	
+	return exports
 }
diff --git a/public/assets/javascripts/rectangles/engine/map/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 6dc6c90..072ff7e 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
@@ -161,6 +161,8 @@ Map.UI.Editor = function(map){
 				cursor.y.abs().quantize(1)
 				var room = Rooms.add_with_rect( cursor )
 
+				Rooms.rebuild()
+
         UndoStack.push({
           type: "create-room",
           undo: { id: room.id },
@@ -201,7 +203,7 @@ Map.UI.Editor = function(map){
 
   var wheelState, wheelTimeout
 
-	function mousewheel (e, val, delta){
+	function mousewheel (e, deltaY, deltaX){
 		var cursor = base.mouse.cursor
 
 		var intersects = Rooms.filter(function(r){
@@ -211,7 +213,7 @@ Map.UI.Editor = function(map){
 		if (intersects.length) {
 			wheelState = wheelState || intersects[0].copy()
 			
-			intersects[0].height = clamp( ~~(intersects[0].height - delta), height_min, height_max )
+			intersects[0].height = clamp( ~~(intersects[0].height - deltaY), height_min, height_max )
 			
 			clearTimeout(wheelTimeout)
 			wheelTimeout = setTimeout(function(){
@@ -225,7 +227,7 @@ Map.UI.Editor = function(map){
 			}, 500)
 		}
 		else {
-			map.set_zoom(map.zoom_exponent - delta/20)
+			map.set_zoom(map.zoom_exponent - deltaY/20)
 		}
 	}
 	
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
index fabbdb9..0fdd336 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
@@ -72,8 +72,8 @@ Map.UI.Minimap = function(map){
 		base.dragging = false
 	}
 
-	function mousewheel (e, val, delta){
-		map.set_zoom(map.zoom_exponent - delta/20)
+	function mousewheel (e, deltaY, deltaX){
+		map.set_zoom(map.zoom_exponent - deltaY/20)
 	}
 	
 	function rightclick (e){
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
index b901a25..5686aba 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
@@ -13,6 +13,7 @@
 		vec2 = require('../../models/vec2')
 		Rect = require('../../models/rect')
 		Room = require('../../models/room')
+		Walls = require('./_walls')
 		UidGenerator = require('../../util/uid')
 		sort = require('../../util/sort')
 		_ = require('lodash')
@@ -59,7 +60,6 @@
 				height: 500
 			})
 			base.add(room)
-			Rooms.rebuild()
 			return room
 		}
 	
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
index 0da3b9a..119a659 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -134,19 +134,24 @@
       })
 		}
 		
+		base.luminance = function(rgb){
+			rgb = rgb || Walls.colors.wall
+			var rgb_max = Math.max.apply(0, rgb)
+			var rgb_min = Math.min.apply(255, rgb)
+			return (rgb_max + rgb_min ) / 2
+		}
+		
     base.setColor = {
     
       wall: function(rgb){
         var rgbaColor = rgba_string(rgb, app.defaults.wallOpacity)
         var rgbColor = rgb_string(rgb)
+        				
+				if (Rooms.mover.room) {
+					$("#header").toggleClass("black", base.luminance() < 100)
+					$("body").css("background-color", rgbColor)
+				}
         
-        var rgb_max = Math.max.apply(0, rgb)
-        var rgb_min = Math.min.apply(255, rgb)
-        var luminance = (rgb_max + rgb_min ) / 2
-
-        $("#header").toggleClass("black", luminance < 128)
-        $("body").css("background-color", rgbColor)
-                
         Walls.colors.wall = rgb
         Walls.list.forEach(function(wall){
           wall.outline(rgbaColor, null)
diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js
index 98f80c5..a2d2223 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/mover.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js
@@ -43,6 +43,7 @@ Rooms.mover = new function(){
 
 			// in this case, we appear to have left the room..
 			// $(".face.active").removeClass("active")
+			$("#header").removeClass("black")
 			$("body").css("background-color", "transparent")
 			base.room = null
 		}
@@ -59,6 +60,7 @@ Rooms.mover = new function(){
 		// did we actually enter a room?
 		if (intersects.length) {
 			base.room = intersects[0]
+			$("#header").toggleClass("black", Walls.luminance() < 100)
 			$("body").css("background-color", rgb_string( Walls.colors.wall ))
       app.tube("change-room", { room: base.room })
 		}
diff --git a/public/assets/javascripts/rectangles/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 6836772..712d470 100644
--- a/public/assets/javascripts/rectangles/util/wheel.js
+++ b/public/assets/javascripts/rectangles/util/wheel.js
@@ -21,37 +21,44 @@ function wheel (opt) {
 		val: 0,
 	})
 
-	opt.el.addEventListener('mousewheel', onMouseWheel, false);
+	opt.el.addEventListener('wheel', onMouseWheel, false);
+// 	opt.el.addEventListener('mousewheel', onMouseWheel, false);
 	opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false);
 
 	function onMouseWheel (e) {
 		if (opt.locked) {
 			return
 		}
+
 		if (! opt.propagate) {
 			e.stopPropagation()
 			e.preventDefault()
 		}
 		
-		var delta = 0;
+		var deltaX = 0, deltaY = 0;
 		
 		// WebKit
-		if ( event.wheelDeltaY ) {
-			delta -= event.wheelDeltaY * opt.ratio
+		if ( event.deltaY ) {
+			deltaY -= event.deltaY * opt.ratio
+			deltaX -= event.deltaX * opt.ratio
+		}
+		else if ( event.wheelDeltaY ) {
+			deltaY -= event.wheelDeltaY * opt.ratio
+			deltaX -= event.wheelDeltaX * opt.ratio
 		}
 		// Opera / Explorer 9
 		else if ( event.wheelDelta ) {
-			delta -= event.wheelDelta * opt.ratio
+			deltaY -= event.wheelDelta * opt.ratio
 		}
 		// Firefox
 		else if ( event.detail ) {
-			delta += event.detail * 2
+			deltaY += event.detail * 2
 		}
-		if (! opt.reversible && delta < 0) return;
+		if (! opt.reversible && (deltaY < 0 && deltaX < 0)) return;
 		
-		opt.val = clamp(opt.val + delta, opt.min, opt.max)
+		// opt.val = clamp(opt.val + delta, opt.min, opt.max)
 		
-		opt.update(e, opt.val, delta)
+		opt.update(e, deltaY, deltaX)
 	}
 
 	opt.lock = function(){ opt.locked = true }
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js
index 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/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index 0c68de5..ac361a7 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -170,6 +170,7 @@ 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 ) )
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 9837304..4f07d1f 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -9,7 +9,6 @@ var EditorToolbar = View.extend({
 		"click [data-role='toggle-project-settings']": 'toggleSettings',
 		"click [data-role='open-media-viewer']": 'openMediaViewer',
     "click [data-role='toggle-presets']": 'togglePresets',
-// 		"click [data-role='destroy-media']": 'destroyMedia',
 		"click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper',
 		"click [data-role='toggle-light-control']": 'toggleLightControl',
 		"click [data-role='toggle-text-editor']": 'toggleTextEditor',
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 6aff601..ccd6c63 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -41,6 +41,7 @@ var EditorView = View.extend({
 		$("#map").hide()
 
 		this.settings.load(data)
+		this.info.load(data)
 	},
 	
 	readyLayout: function(data){
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 3eb2861..34a5a51 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -64,6 +64,7 @@ var LightControl = View.extend({
   pick: function(rgb, Lab){
     this.labColor = Lab
     this.setSwatchColor(this.mode, rgb)
+    // console.log(rgb)
     Walls.setColor[ this.mode ](rgb)
   },
   
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index fddfefc..9799f99 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -55,9 +55,7 @@ var MediaUpload = UploadView.extend({
 	
 	add: function(media){
 		console.log(media)
-		this.parent.mediaViewer.add(media, this.parent.mediaViewer.$myMedia)
-    this.parent.mediaViewer.$deleteMedia.show()
-    this.parent.mediaViewer.$noMedia.hide()
+		this.parent.mediaViewer.addUploadedMedia(media)
 	},
 	
 	beforeUpload: function(){
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index c18fb49..10819af 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -4,23 +4,30 @@ var MediaViewer = ModalView.extend({
 	destroyAction: "/api/media/destroy",
 	usesFileUpload: true,
 	loaded: false,
-	
+	perPage: 12,
+	offset: 0,
+	fixedClose: true,
+
 	events: {
 	  'mousedown': "stopPropagation",
 		'click .foundToggle': "foundToggle",
 		'click .userToggle': "userToggle",
 		'click #deleteMedia': "deleteArmed",
 		'click .mediaContainer': "pick",
+		'click .viewMore': "load",
 	},
 	
 	initialize: function(opt){
 		this.__super__.initialize.call(this)
 		this.parent = opt.parent
 		this.$myMedia = this.$(".myMedia")
+		this.$myMediaContainer = this.$(".myMedia > .container")
 		this.$userToggle = this.$(".userToggle")
 		this.$foundMedia = this.$(".foundMedia")
+		this.$foundMediaContainer = this.$(".foundMedia > .container")
 		this.$foundToggle = this.$(".foundToggle")
 		this.$deleteMedia = this.$("#deleteMedia")
+		this.$viewMore = this.$(".viewMore")
 		this.$noMedia = this.$(".noMedia")
   },
 
@@ -55,7 +62,7 @@ var MediaViewer = ModalView.extend({
 	},
 
 	load: function(){
-		$.get("/api/media/user", this.populate.bind(this))
+		$.get("/api/media/user", { offset: this.offset, limit: this.perPage }, this.populate.bind(this))
 	},
 	
 	loadTrending: function(){
@@ -85,7 +92,7 @@ var MediaViewer = ModalView.extend({
           width: img.naturalWidth,
           height: img.naturalHeight,
         }
-        this.add(media, this.$foundMedia)
+        this.add(media, this.$foundMediaContainer)
 		  }.bind(this)
 		  img.src = url
 		  if (img.complete && ! loaded) { img.onload() }
@@ -100,22 +107,40 @@ var MediaViewer = ModalView.extend({
   },
 
 	populate: function(data){
-		this.loaded = true
+		var scrollTop = this.loaded ? $('.myMedia .container').height() : 0
 		if (data && data.length) {
+			if (data.length < this.perPage) {
+				this.$viewMore.hide()
+			}
 		  data.forEach(function(media){
-		    this.add(media, this.$myMedia)
+		    this.add(media, this.$myMediaContainer)
+		    this.offset += 1
 		  }.bind(this))
 		  this.$noMedia.hide()
       this.$deleteMedia.show()
 		}
 		else {
+			this.$viewMore.hide()
 		  this.$noMedia.show()
 		  this.$deleteMedia.hide()
 		}
-		this.__super__.show.call(this)
+		if (this.loaded) {
+			this.$el.delay(300).animate({ scrollTop: scrollTop }, 200)
+		}
+		else  {
+			this.loaded = true
+			this.__super__.show.call(this)
+		}
+	},
+	
+	addUploadedMedia: function(media){
+    this.parent.mediaViewer.$deleteMedia.show()
+    this.parent.mediaViewer.$noMedia.hide()
+    this.add(media, this.$myMedia, true) // prepend
+		this.offset += 1
 	},
 	
-	add: function(media, $container){
+	add: function(media, $container, prepend){
 		var image = new Image ()
 		var $span = $("<span>")
 		$span.addClass("mediaContainer")
@@ -142,7 +167,8 @@ var MediaViewer = ModalView.extend({
 		$span.data("media", media)
 		$span.append(image)
 
-		$container.prepend($span)
+		if (prepend) $container.prepend($span)
+		else $container.append($span)
 	},
 
 	deleteIsArmed: false,
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index a7e92b6..1e70aa2 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -2,8 +2,26 @@ var Presets = View.extend({
 	el: "#presets",
 	
 	events: {
+		"mousedown": "stopPropagation",
     "click .presets span": "selectPreset",
+    "click .swatches span": "selectColor",
 	},
+	
+	colors: [
+		[255,94,58],
+		[255,149,0],
+		[255,219,76],
+		[76,217,100],
+		[52,170,220],
+		[29,98,240],
+		[198,68,252],
+		[0,0,0],
+		[74,74,74],
+		[125,126,127],
+		[209,211,212],
+		[235,235,235],
+		[255,255,255],
+	],
 
   presets: {
     wireframe: {
@@ -34,6 +52,13 @@ var Presets = View.extend({
   
   initialize: function(opt){
     this.parent = opt.parent
+    this.$colors = this.$(".colors")
+    this.colors.forEach(function(color){
+    	var $swatch = $("<span>")
+    	$swatch.css("background-color","rgb(" + color + ")")
+    	$swatch.data('color', color)
+    	this.$colors.append($swatch)
+    }.bind(this))
   },
 
   toggle: function(state){
@@ -56,4 +81,9 @@ var Presets = View.extend({
     $(e.currentTarget).addClass('active')
   },
   
+  selectColor: function(e){
+    var preset = $(e.currentTarget).data('color')
+    console.log(preset)
+  },
+  
 })
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js
index c8879b3..b559ba5 100644
--- a/public/assets/javascripts/ui/editor/TextEditor.js
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -28,16 +28,15 @@ var TextEditor = FormView.extend({
 	},
 
   toggle: function(state){
-    $("#keyhint").fadeOut(200)
-    
     this.$el.toggleClass("active", state)
     if (state) {
+			$("#keyhint").fadeOut(200)
       Scenery.nextMedia = {
         type: 'text',
         width: 600,
         height: 450,
         scale: 0.5,
-        font: { family: 'Lato', size: 12, align: 'left' },
+        font: { family: 'Lato', size: 24, align: 'left', color: "#000" },
       }
       this.createMode(true)
     }
diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js
index d9b518a..1c41861 100644
--- a/public/assets/javascripts/ui/lib/ModalView.js
+++ b/public/assets/javascripts/ui/lib/ModalView.js
@@ -18,6 +18,10 @@ var ModalView = View.extend({
 		if (! this.usesFileUpload) {
 		  $(".fileUpload").removeClass("active")
 		}
+		if (this.fixedClose) {
+			$("#fixed_close").addClass("active")
+			$("#fixed_close").bind("click", this.hide.bind(this))
+		}
 		
 		this.$el.addClass("active")
     $("body").addClass("noOverflow")
@@ -25,6 +29,10 @@ var ModalView = View.extend({
 
 	hide: function(){
     // $(".mediaDrawer, .room1").removeClass("active editing");
+		if (this.fixedClose) {
+			$("#fixed_close").removeClass("active")
+			$("#fixed_close").unbind("click", this.hide.bind(this))
+		}
 		this.$el.removeClass("active");
     $("body").removeClass("noOverflow");
 	},
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 6d96f97..cf98170 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -138,10 +138,12 @@ a{
 	display: none;
 	z-index: 10;
 	pointer-events: none;
+	background-size: cover;
 }
 .floatingSwatch.scissors {
   background-image: url(/assets/img/scissors.png) !important;
   background-repeat: no-repeat;
+  background-size: auto;
   border: 0;
   box-shadow: 0 0 transparent;
 }
@@ -414,6 +416,17 @@ iframe.embed {
 	border-top: 1px solid black;
 }
 
+.mediaDrawer .viewMore {
+	clear: both;
+	float: none;
+	text-decoration: none;
+	font-size: 22px;
+	display: block;
+	text-align: center;
+	padding: 40px;
+	border: 0;
+	border-top: 1px solid black;
+}
 
 .holder {
 	display: table-cell;
@@ -1473,6 +1486,23 @@ border-left: 1px solid black;
 	padding-bottom: 6px;
 }
 
+#presets .colors {
+	margin-bottom: 5px;
+}
+#presets .colors span {
+	display: inline-block;
+	font-size: 0;
+	width: 20px;
+	height: 20px;
+	border: 1px solid #ddd;
+	margin: 0px 2px 0 0;
+	cursor: pointer;
+	transition: transform 0.2s;
+}
+#presets .colors span:hover {
+	transform: translateX(3px) translateY(-3px);
+}
+
 .toolButton {
 	border: 1px solid;
 	display: inline-block;
@@ -2163,13 +2193,27 @@ form li textarea {
 	right: 20px;
 	top: 20px;
 	z-index: 20;
-	background: #f9f9f9;
+	background: white;
 	width: 75px;
 	color: black;
 	border: 1px solid black;
 	box-shadow: -3px 4px black;
 	line-height: 75px;
-
+	text-align: center;
+}
+#fixed_close {
+	display: none;
+	transform: translateY(-200px) translateZ(0);
+}
+#fixed_close.active {
+	animation: visibility 0.2s;
+	animation-fill-mode: forwards;
+	display: block;
+}
+@keyframes visibility {
+	100% {
+		transform: translateY(0px) translateZ(0);
+	}
 }
 
 
@@ -2522,22 +2566,22 @@ a[data-role="forgot-password"] {
 	padding: 50px 0;
 	}
 	.page .viewMore.btn {
-	text-decoration: none;
-	font-size: 18px;
-	padding: 18px 0;
-}
-.footer a, .footer span {
-margin: 9px;
-}
-#keyhint {
-	display:none;
-}
-.projectList .projectItem {
-	width:100%;
-	margin: 20px 0;
-}
-.projectList .room {
-width: 100%;
-height: 260px;
-}
+		text-decoration: none;
+		font-size: 18px;
+		padding: 18px 0;
+	}
+	.footer a, .footer span {
+	margin: 9px;
+	}
+	#keyhint {
+		display:none;
+	}
+	.projectList .projectItem {
+		width:100%;
+		margin: 20px 0;
+	}
+	.projectList .room {
+	width: 100%;
+	height: 260px;
+	}
 }
\ No newline at end of file
diff --git a/public/assets/test/wheel.html b/public/assets/test/wheel.html
new file mode 100644
index 0000000..054945e
--- /dev/null
+++ b/public/assets/test/wheel.html
@@ -0,0 +1,29 @@
+<style>
+#cursor {
+	position:absolute;margin-top:-5px;margin-left:-5px;
+	width:10px;height:10px;border-radius:50%;
+	background:red;
+}
+</style>
+<div id="cursor"></div>
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/rectangles/util/wheel.js"></script>
+
+<script>
+x = window.innerWidth/2
+y = window.innerHeight/2
+function draw(){
+	cursor.style.top = y + 'px'
+	cursor.style.left = x + 'px'
+}
+new wheel({
+	el: document,
+	propagate: false,
+	update: function(e,dy,dx){
+		y = mod(y + dy, window.innerHeight)
+		x = mod(x + dx, window.innerWidth)
+		draw()
+	},
+})
+draw()
+</script>
\ No newline at end of file
diff --git a/server/lib/api/media.js b/server/lib/api/media.js
index 1eb08c1..4e2fad5 100644
--- a/server/lib/api/media.js
+++ b/server/lib/api/media.js
@@ -10,13 +10,19 @@ var _ = require('lodash'),
 var media = {
 
 	user: function(req, res){
+	  var offset = Number(req.query.offset) || 0
+	  var limit = Math.min( Number(req.query.limit), 50 ) || 20
 	  var query = { user_id: req.user._id }
 	  if (req.query.tag) {
 	    query.tag = req.query.tag
 	  }
-		Media.find(query, function(err, media){
-			res.json(media || [])
-		})
+		Media.find(query)
+			.sort({'created_at': -1})
+			.skip(offset)
+			.limit(limit)
+		  .exec(function(err, media){
+				res.json(media || [])
+			})
 	},
 	
 	create: function(req, res){
diff --git a/server/lib/api/projects.js b/server/lib/api/projects.js
index f699622..1bf046f 100644
--- a/server/lib/api/projects.js
+++ b/server/lib/api/projects.js
@@ -36,6 +36,7 @@ var projects = {
 		data.name = util.sanitize(data.name)
 		data.slug = util.slugify(data.name) + "-" + (+new Date)
 		data.description = util.sanitize(data.description)
+		data.viewHeight = Number(data.viewHeight || 0)
 		data.rooms = JSON.parse(data.rooms)
 		data.walls = JSON.parse(data.walls)
 		data.media = JSON.parse(data.media)
@@ -95,6 +96,7 @@ var projects = {
           data.slug = util.slugify(data.name) + "-" + (+new Date)
         }
         data.description = util.sanitize(data.description)
+        data.viewHeight = Number(data.viewHeight || 0)
         data.updated_at = new Date ()
 
 				_.extend(doc, data)
diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js
index d0c4bbc..a923d85 100644
--- a/server/lib/schemas/Project.js
+++ b/server/lib/schemas/Project.js
@@ -33,6 +33,7 @@ var ProjectSchema = new mongoose.Schema({
 	colors: mongoose.Schema.Types.Mixed,
 	startPosition: mongoose.Schema.Types.Mixed,
 	lastPosition: mongoose.Schema.Types.Mixed,
+	viewHeight: { type: Number },
 	user_id: { type: mongoose.Schema.ObjectId, index: true },
 	created_at: { type: Date },
 	updated_at: { type: Date },
diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs
index d800426..7996f84 100644
--- a/views/controls/editor/media-drawer.ejs
+++ b/views/controls/editor/media-drawer.ejs
@@ -1,28 +1,32 @@
-<span class="fileUpload">
-	<input type="hidden" name="_csrf" value="[[- token ]]">
-	<form>
-		<span class="ion-ios7-upload-outline upload-icon"></span><br>
-		Upload File
-		<input type="file" accept="image/*" class="file" multiple>
-	</form>
-	<small>~ or ~</small><br>
-	<input type="text" placeholder="Enter Vimeo or YouTube or image link" class="url">
-</span>
-
 <div class="ants">
 	<div class="leftborder"></div>
 	<img class="floatingImg">
 </div>
 
+<span class="close" id="fixed_close">X</span>
+
 <div class="mediaDrawer fixed animate mediaViewer">
-	<span class="close">X</span>
 	<h2><a href="#" class="userToggle active">Your Media</a> – <a href="#" class="foundToggle">Found Media</a></h2><br>
 	<h3 class="editBtn warn" id="deleteMedia"></h3>
 
 	<div class="myMedia">
 	  <div class="noMedia">You have no media yet.  Upload some!</div>
+	  <span class="container"></span>
+		<a href="#" class="viewMore btn">view more</a>
 	</div>
+
+	<span class="fileUpload">
+		<input type="hidden" name="_csrf" value="[[- token ]]">
+		<form>
+			<span class="ion-ios7-upload-outline upload-icon"></span><br>
+			Upload File
+			<input type="file" accept="image/*" class="file" multiple>
+		</form>
+		<small>~ or ~</small><br>
+		<input type="text" placeholder="Enter Vimeo or YouTube or image link" class="url">
+	</span>
 	
 	<div class="foundMedia">
-	</div>
+	  <span class="container"></span>
+ 	</div>
 </div>
\ No newline at end of file
diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs
index a41c527..70e48e3 100644
--- a/views/controls/editor/presets.ejs
+++ b/views/controls/editor/presets.ejs
@@ -1,4 +1,8 @@
 <div class="vvbox" id="presets">
+  <h4>Preset Colors</h4>
+  <div class="colors">
+  </div>
+
   <h4>Preset Styles</h4>
   <div class="presets">
     <span data-preset="wireframe">
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs
index ac025b5..5ca0390 100644
--- a/views/controls/editor/wallpaper.ejs
+++ b/views/controls/editor/wallpaper.ejs
@@ -14,7 +14,7 @@
     <form>
 
       <span class="ion-ios7-upload-outline upload-icon"></span>
-      <label>Upload wallpaper</label>
+      <label>Upload Wallpaper</label>
       <input type="file" accept="image/*" class="file" multiple>
     </form>
 <!--