merge

15 files changed, 402 insertions, 94 deletions

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">';
   },