merge

40 files changed, 592 insertions, 228 deletions

diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
index 9a557b9..f9334e6 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
@@ -38,7 +38,6 @@ Map.UI.Editor = function(map){
 			cursor.quantize(1/map.zoom)
 			map.center.a = cursor.x.a
 			map.center.b = -cursor.y.a
-			console.log(map.center+"")
 			cursor.x.b = cursor.x.a
 			cursor.y.b = cursor.y.a
 			base.mouse.down = false
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
index cb3e980..6f96275 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
@@ -109,6 +109,14 @@
 			})
 			Rooms.clipper.update()
 		}
+		
+		base.report = function(){
+		  var data = []
+		  base.rooms.forEach(function(room){
+        data.push( room.report() )
+      })
+      return data
+		}
 
 		base.sorted_by_position = function(){
 			return sort.rooms_by_position( base.values() )
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
index f2f395b..82ccb87 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -87,7 +87,21 @@
 			  wall.deserialize( wall_data )
 			})
     },
-
+		
+		base.paint = function(){
+      var wallColor = rgba_string(Walls.colors.wall, app.defaults.wallOpacity)
+      var outlineColor = rgb_string(Walls.colors.outline)
+      var floorColor = rgb_string(Walls.colors.floor)
+      var ceilingColor = rgb_string(Walls.colors.ceiling)
+      Walls.forEach(function(wall){
+        wall.outline(wallColor, outlineColor)
+      })
+      Rooms.forEach(function(room){
+        room.setFloorColor(floorColor)
+        room.setCeilingColor(ceilingColor)
+      })
+		}
+		
     base.setColor = {
     
       wall: function(rgb){
diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js
index f0935d4..6a89158 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/builder.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js
@@ -44,9 +44,10 @@
 				base.clear()
 				base.build()
 				Rooms.grouper.build()
+				app.tube("rooms-built")
 			}
 		}
-		
+
 		base.build = function (){
 			Rooms.regions.forEach(function(region){
 				this.build_walls(region).forEach(function(el){
diff --git a/public/assets/javascripts/rectangles/engine/rooms/grouper.js b/public/assets/javascripts/rectangles/engine/rooms/grouper.js
index ba510e1..663d29d 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/grouper.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/grouper.js
@@ -20,6 +20,8 @@
 		Surface = require('../../models/surface')
 		sort = require('../../util/sort')
 		_ = require('lodash')
+		MX = require('../../../../../../test/mocks/mx.js')
+		scene = MX.Scene
 		FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8, FLOOR = 0x10, CEILING = 0x20
 		PI = Math.PI
 		HALF_PI = PI/2
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index e8bc7f7..ef25d8d 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -10,14 +10,20 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 
 			this.build()
 			this.bind()
-			
+
 			if (opt.data) {
+        if (opt.wall) {
+        	var position = opt.wall.mxToPosition(opt.data.position)
+        	opt.index = opt.wall.surface.index_for_x( position.a, 0 )
+        }
+      	this.set_wall(opt)
         this.deserialize(opt.data)
       }
       else {
-        this.recenter()
+      	this.set_wall(opt)
+        this.bounds && this.recenter()
       }
-		},
+    },
 
 		build: function(){
 			switch (this.media.type) {
diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js
index e6a37e0..0fcc766 100644
--- a/public/assets/javascripts/rectangles/util/minotaur.js
+++ b/public/assets/javascripts/rectangles/util/minotaur.js
@@ -53,7 +53,9 @@
     }
     
     base.hide = function () {
-      base.$el.removeClass()
+      setTimeout(function(){
+        base.$el.removeClass()
+      }, 500)
     }
     
     base.init();
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js
index 2fffdba..e6b7e97 100644
--- a/public/assets/javascripts/ui/builder/BuilderInfo.js
+++ b/public/assets/javascripts/ui/builder/BuilderInfo.js
@@ -55,6 +55,7 @@ var BuilderInfo = View.extend({
 		this.$height.unitVal( room.height )
 		this.$x.unitVal( room.rect.x.a )
 		this.$y.unitVal( room.rect.y.a )
+	  this.show()
 	},
 
 	destroy: function(room){
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
index 796c398..94eed29 100644
--- a/public/assets/javascripts/ui/builder/BuilderSettings.js
+++ b/public/assets/javascripts/ui/builder/BuilderSettings.js
@@ -9,7 +9,7 @@ var BuilderSettings = FormView.extend({
 	events: {
 		"keydown": 'stopPropagation',
 		"keydown [name=name]": 'enterSubmit',
-		"click [data-role='save-layout']": 'save',
+		"click [data-role='save-layout']": 'clickSave',
 		"click [data-role='clone-layout']": 'clone',
 		"click [data-role='clear-layout']": 'clear',
 		"click [data-role='destroy-layout']": 'destroy',
@@ -118,6 +118,11 @@ var BuilderSettings = FormView.extend({
 		fd.append( "thumbnail", dataUriToBlob(map.canvas.toDataURL()) )
 		return fd
 	},
+
+	clickSave: function(){
+    this.toggle(false)
+    this.save()
+	},
 	
 	success: function(data){
 		this.$id.val(data._id)
diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js
index a89111f..81dce52 100644
--- a/public/assets/javascripts/ui/builder/BuilderView.js
+++ b/public/assets/javascripts/ui/builder/BuilderView.js
@@ -12,6 +12,11 @@ var BuilderView = View.extend({
 		this.toolbar = new BuilderToolbar ({ parent: this })
 		this.settings = new BuilderSettings ({ parent: this })
 		this.lightControl = new LightControl ({ parent: this })
+
+		app.on("rooms-built", function(){
+		  Walls.paint()
+		})
+
 	},
 
 	load: function(name){
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index 2a3929a..92eff2b 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -10,15 +10,15 @@ var EditorSettings = FormView.extend({
 		"keydown": 'stopPropagation',
 		"keydown [name=name]": 'enterSubmit',
 		"click [data-role='show-collaborators']": 'showCollaborators',
-		"click [data-role='save-project']": 'save',
+		"click [data-role='save-project']": 'clickSave',
 		"click [data-role='clone-project']": 'clone',
 		"click [data-role='clear-project']": 'clear',
 		"click [data-role='destroy-project']": 'destroy',
 	},
 	
 	initialize: function(opt){
-		this.parent = opt.parent
-		this.__super__.initialize.call(this)
+    this.parent = opt.parent
+    this.__super__.initialize.call(this)
 		
 		this.$id = this.$("[name=_id]")
 		this.$csrf = this.$("[name=_csrf]")
@@ -41,6 +41,16 @@ var EditorSettings = FormView.extend({
     else {
 		  this.parent.lightControl.loadDefaults()
     }
+    
+    if (data.walls) {
+      data.walls.some(function(wall){
+        if (wall.background !== "none") {
+          this.parent.wallpaperPicker.$remove.show()
+          return true
+        }
+        return false
+      }.bind(this))
+    }
 
 		if (data.isNew) {
 		  this.$name.val( "Room " + moment().format("DD/MM/YYYY ha") )
@@ -96,8 +106,11 @@ var EditorSettings = FormView.extend({
 		}.bind(this))
 	},
 
-	toggle: function(){
-		this.$el.toggleClass("active")
+	toggle: function(state){
+	  var state = typeof state == 'boolean' ? state : ! this.$el.hasClass("active")
+		this.$el.toggleClass("active", state)
+
+		$("[data-role='toggle-project-settings']").toggleClass("inuse", state)
 	},
 
 	enterSubmit: function (e) {
@@ -158,6 +171,11 @@ var EditorSettings = FormView.extend({
 	  return false
 	},
 	
+	clickSave: function(){
+    this.toggle(false)
+    this.save()
+	},
+	
 	success: function(data){
 		this.$id.val(data._id)
 		this.$name.val(data.name)
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index c631317..e91da0f 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -23,6 +23,11 @@ var EditorToolbar = View.extend({
 	},
 	
 	toggleSettings: function(){
+	  this.resetMode()
+	  $(".inuse").removeClass("inuse")
+		this.parent.lightControl.hide()
+		this.parent.wallpaperPicker.hide()
+		this.parent.mediaEditor.hide()
 		this.parent.settings.toggle()
 	},
 	
@@ -84,7 +89,9 @@ var EditorToolbar = View.extend({
 		var state = ! $("[data-role='toggle-wallpaper-panel']").hasClass("inuse")
 		this.resetMode()
 		$("[data-role='toggle-wallpaper-panel']").toggleClass("inuse", state)
+		this.parent.mediaEditor.hide()
 		this.parent.lightControl.hide()
+		this.parent.settings.hide()
 		this.parent.wallpaperPicker.toggle(state)
 	},
 	
@@ -92,7 +99,9 @@ var EditorToolbar = View.extend({
 		var state = ! $("[data-role='toggle-light-control']").hasClass("inuse")
 		this.resetMode()
 		$("[data-role='toggle-light-control']").toggleClass("inuse", state)
+		this.parent.mediaEditor.hide()
 		this.parent.wallpaperPicker.hide()
+		this.parent.settings.hide()
 		this.parent.lightControl.toggle(state)
 	},
 	
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index d975180..3eb2861 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -4,8 +4,7 @@ var LightControl = View.extend({
   
   events: {
     "mousedown": "stopPropagation",
-    "click .swatch": "clickSwatch",
-    "click label": "clickLabel",
+    "click .color-swatches span": "select",
     "input #shadow-control": "updateShadow",
     "mousedown #brightness-control": "beginBrightness",
     "input #brightness-control": "updateBrightness",
@@ -14,8 +13,10 @@ var LightControl = View.extend({
   },
   
   initialize: function(){
+
     this.colorPicker = new LabColorPicker(this, 180, 180)
-    this.$el.prepend( this.colorPicker.canvas )
+    this.$("#color-picker").append( this.colorPicker.canvas )
+    this.$("#color-picker").append( this.colorPicker.cursor )
     
     this.$swatches = this.$(".swatch")
     this.$labels = this.$(".swatch + label")
@@ -100,21 +101,16 @@ var LightControl = View.extend({
   setMode: function (mode) {
     var color, brightness
     this.mode = mode
-    this.$swatches.removeClass("selected")
-    this.$labels.removeClass("selected")
-    this.$swatch[ mode ].addClass("selected")
+    this.$(".active").removeClass("active")
+    this.$swatch[ mode ].parent().addClass("active")
     color = Walls.colors[ mode ]
     
-    this.$(".swatch.selected").next("label").addClass("selected")
     this.labColor = this.colorPicker.load(color)
     this.$brightnessControl.val( this.labColor[0] )
   },
   
-  clickLabel: function(e){
-    $(e.currentTarget).prev(".swatch").trigger("click")
-  },
-  clickSwatch: function(e){
-    var mode = $(e.currentTarget).data('mode')
+  select: function(e){
+    var mode = $('.swatch', e.currentTarget).data('mode')
     this.setMode(mode)
   },
   
@@ -138,8 +134,8 @@ var LabColorPicker = function (parent, w, h) {
   var imageData = ctx.createImageData(w,h)
   var data = imageData.data
 
-//   var cursor = this.cursor = document.createElement("div")
-//   cursor.className = "colorPickerCursor"
+  var cursor = this.cursor = document.createElement("div")
+  cursor.className = "colorPickerCursor"
 
   canvas.width = w
   canvas.height = h
@@ -179,9 +175,12 @@ var LabColorPicker = function (parent, w, h) {
     return rgb
   }
   this.pick = function(i, j){
+    i = clamp(i, 0, w)
+    j = clamp(j, 0, h)
     var x = mix( i/ww, a_range[0], a_range[1] )
     var y = mix( j/hh, b_range[0], b_range[1] )
     var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round)
+    this.moveCursor(i, j)
     parent.pick( rgb, [val,x,y] )
   }
   this.load = function(rgba){
@@ -189,10 +188,15 @@ var LabColorPicker = function (parent, w, h) {
     var val = clamp( Lab[0], L_range[0], L_range[1] )
     var x = mix( norm(Lab[1], a_range[0], a_range[1]), 0, ww )
     var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh )
-    // move the cursor
+    
+    this.moveCursor(x,y)
     this.setLab(Lab)
     return Lab
   }
+  this.moveCursor = function(x,y){
+    cursor.style.left = x + "px"
+    cursor.style.top = y + "px"
+  }
   this.paint = function() {
     val = clamp(val, L_range[0], L_range[1])
     var x, y, t
@@ -247,11 +251,11 @@ var LabColorPicker = function (parent, w, h) {
     var var_G = ( RGB[1] / 255 )        // G from 0 to 255
     var var_B = ( RGB[2] / 255 )        // B from 0 to 255
 
-    if ( var_R > 0.04045 ) var_R = ( ( var_R + 0.055 ) / 1.055 ) ^ 2.4
+    if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4)
     else                   var_R = var_R / 12.92
-    if ( var_G > 0.04045 ) var_G = ( ( var_G + 0.055 ) / 1.055 ) ^ 2.4
+    if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4)
     else                   var_G = var_G / 12.92
-    if ( var_B > 0.04045 ) var_B = ( ( var_B + 0.055 ) / 1.055 ) ^ 2.4
+    if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4)
     else                   var_B = var_B / 12.92
 
     var_R = var_R * 100
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index 750cf41..9b20a43 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -39,6 +39,9 @@ var MediaEditor = FormView.extend({
 	},
 	
 	toggle: function(state) {
+    if (state) {
+      this.parent.settings.toggle()
+    }
     this.$el.toggleClass("active", state);
 	},
 	
@@ -142,9 +145,15 @@ var MediaEditor = FormView.extend({
 	},
 	
 	unbind: function(){
-	  if (this.scenery && this.scenery.mx) {
-      this.scenery.mx.bound = false
-      this.scenery.mx.el.classList.remove("picked")
+	  if (this.scenery) {
+      this.scenery.media.title = this.$name.val()
+      this.scenery.media.description = this.$description.val()
+      Minotaur.watch( app.router.editorView.settings )
+
+	    if (this.scenery.mx) {
+        this.scenery.mx.bound = false
+        this.scenery.mx.el.classList.remove("picked")
+      }
     }
     this.scenery = null
 	},
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 7cfa863..436c0cb 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -6,23 +6,33 @@ var MediaViewer = ModalView.extend({
 	
 	events: {
 		'click .foundToggle': "foundToggle",
-		'click .yourMedia': "userToggle",
+		'click .userToggle': "userToggle",
 		'click #deleteMedia': "deleteArmed",
 		'click .mediaContainer': "pick",
 	},
 	
+	initialize: function(opt){
+		this.__super__.initialize.call(this)
+		this.parent = opt.parent
+		this.$foundMedia = this.$(".foundMedia")
+		this.$myMedia = this.$(".myMedia")
+		this.$foundToggle = this.$(".foundToggle")
+		this.$userToggle = this.$(".userToggle")
+		this.$deleteMedia = this.$("#deleteMedia")
+	},
+
 	foundToggle: function(){
-    this.$(".foundMedia").addClass("active");
-    this.$(".myMedia").addClass("inactive");
+    this.foundMedia.addClass("active");
+    this.myMedia.addClass("inactive");
     this.$("a").removeClass("active");
-    this.$(".foundToggle").addClass("active");
+    this.foundToggle.addClass("active");
 	},
 	
 	userToggle: function(){
-    this.$(".foundMedia").removeClass("active");
-    this.$(".myMedia").removeClass("inactive");
+    this.foundMedia.removeClass("active");
+    this.myMedia.removeClass("inactive");
     this.$("a").removeClass("active");
-    this.$(".yourMedia").addClass("active");
+    this.userToggle.addClass("active");
 	},
 
 	show: function(){
@@ -46,7 +56,12 @@ var MediaViewer = ModalView.extend({
 
 	populate: function(data){
 		this.loaded = true
-		data && data.forEach(this.add.bind(this))
+		if (data && data.length) {
+		  data.forEach(this.add.bind(this))
+		}
+		else {
+		  this.$deleteMedia.hide()
+		}
 		this.__super__.show.call(this)
 	},
 	
@@ -78,6 +93,7 @@ var MediaViewer = ModalView.extend({
 		$span.append(image)
 
 		this.$(".myMedia").prepend($span)		
+    this.$deleteMedia.show()
 	},
 
 	deleteIsArmed: false,
@@ -112,6 +128,11 @@ var MediaViewer = ModalView.extend({
 		if (this.deleteIsArmed) {
 			this.destroy(media._id)
 			$target.remove()
+
+			if ($(".myMedia .mediaContainer").length == 0) {
+        this.$deleteMedia.hide()
+        this.deleteArmed(false)
+			}
 			return
 		}
 
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index bcae3c5..0dd2921 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -13,6 +13,8 @@ var WallpaperPicker = UploadView.extend({
 	initialize: function(){
 	  this.__super__.initialize.call(this)
 	  this.$swatches = this.$(".swatches")
+	  this.$remove = this.$(".wallpaperRemove")
+	  this.$remove.hide()
 	},
 	
   loaded: false,
@@ -34,9 +36,10 @@ var WallpaperPicker = UploadView.extend({
 	},
 
 	populate: function(data){
-	  console.log(data)
 		this.loaded = true
-		data && data.forEach(this.add.bind(this))
+		if (data && data.length) {
+		  data.forEach(this.add.bind(this))
+		}
     this.toggle(true)
 	},
 	
@@ -46,6 +49,7 @@ var WallpaperPicker = UploadView.extend({
 	  swatch.className = "swatch"
 	  swatch.style.backgroundImage = "url(" + media.url + ")"
 	  this.$swatches.append(swatch)
+    this.$swatches.show()
 	},
 
 	toggle: function (state) {
@@ -69,6 +73,7 @@ var WallpaperPicker = UploadView.extend({
 	pick: function(e){
     var $swatch = $(e.currentTarget)
     this.follow( e, $swatch.css('background-image') )
+    this.$remove.show()
   },
   
 	remove: function(e){
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index f109ec3..2449465 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -25,9 +25,11 @@ var LayoutsIndex = View.extend({
 			// $span.html(JSON.stringify(room))
 			$span.data("slug", room.slug)
 			$span.css("background-image", "url(" + room.photo + ")")
+			$span.attr("data-name", room.name)
 			
 			this.$templates.append($span)
 		}.bind(this))
+		console.log(this.$templates.html())
 		this.show()
 	}
 
@@ -57,7 +59,7 @@ var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 		this.$(".templates .active").removeClass("active")
 		var $layout = $(e.currentTarget)
 		$layout.addClass("active")
-		
+				
 		// actually do
 		window.location.pathname = "/project/" + $layout.data("slug") + "/edit"
 	},
diff --git a/public/assets/javascripts/ui/site/ProjectList.js b/public/assets/javascripts/ui/site/ProjectList.js
index ee1b89f..993d805 100644
--- a/public/assets/javascripts/ui/site/ProjectList.js
+++ b/public/assets/javascripts/ui/site/ProjectList.js
@@ -4,8 +4,8 @@ var ProjectList = View.extend({
 	el: ".projectList",
 
 	events: {
-		"mouseenter td.border": 'spinOn',
-		"mouseleave td.border": 'spinOff',
+		"mouseenter .room": 'spinOn',
+		"mouseleave .room": 'spinOff',
 	},
 	
 	initialize: function(){
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 17a7dc0..ebc21a8 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -6,6 +6,9 @@
 	outline:0;
 	font-family: 'Lato', sans-serif;
 	-webkit-font-smoothing: subpixel-antialiased;
+	-webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
 }
 *, *:before, *:after {
   moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
@@ -164,26 +167,19 @@ h5 {
 .page.profile {
   color:white;
 }
-.page table.demo,
-.page table.profilepage,
-.page table.projectList {
+
+.page .profilepage,
+.page .projectList {
   width: 100%;
-  border-top: 1px solid;
   margin: 40px 0 0 0;
   border-spacing: 0;
   clear: both;
 }
-.page table.profilepage tr,
-.page table.projectList tr {
-  height: 400px;
-}
-.page table.showcase {
+
+.page .showcase {
   height:70vh;
 }
-.page table.projectList td.border {
-	position: relative;
-  border-right: 1px solid;
-}
+
 iframe.embed {
 	width: 100%;
 	height: 100%;
@@ -194,34 +190,43 @@ iframe.embed {
 	z-index: -1;
 	pointer-events: none;
 }
-.page table.demo td,
-.page table.profilepage td,
-.page table.projectList td {
+.projectList {
+	display: inline-block;
+	float: left;
+	width: 100%;
+}
+.projectList .room {
   width: 33.3333%;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  border-bottom:1px solid black;
+	height:40vh;
+	display:table;
+	position: relative;
+	float:left;
+	border-top:1px solid black;
+}
+.projectList .room:nth-child(4n+1){
+	width:100%;
 }
+.page .btn {
+	clear: both;
+	padding: 30px 0;
+	border: 0;
 
-.page table.showcase td {
-  height: 70vh;
-  background-size: cover;
 }
 
-.viewMore {
-  color: #017cfe;
+.page .viewMore {
   text-decoration: none;
-  font-weight: 300;
   font-size: 22px;
-  padding-top: 20px;
   display: block;
-  border-bottom: 1px solid black;
-  padding-bottom: 19px;
+	border-top: 1px solid black;
+	border-bottom: 1px solid black;
 }
 
-.viewMore:hover {
-  text-decoration:underline;
+
+.holder {
+	display: table-cell;
+	height: 100%;
+	width: 100%;
+	vertical-align: middle;
 }
 
 .page .roomName {
@@ -305,22 +310,15 @@ iframe.embed {
   padding:80px;
 }
 .subButtons a {
-  margin: 9px 0;
-  border: 0;
-  background: transparent;
-  font-size: 15px;
-  font-weight: 300;
-  width: 33.33333333333%;
   display: inline-block;
   float: left;
-  text-decoration:none;
 }
-.subButtons a:hover {
-  text-decoration:underline;
+
+.subButtons a:nth-child(2){
+ margin-left:5px;
 }
 .subButtons a:nth-child(3){
- color:#FF3A2D; 
- float: right;
+ float:right;
 }
 .page .questions span{
   font-weight:300;
@@ -339,6 +337,8 @@ iframe.embed {
   font-size: 80px;
   font-weight: 100;
   padding-top: 25px;
+	float: left;
+	width: 100%;
 }
 
 /* DOCUMENTATION / ABOUT SECTION / FAQ PAGES */
@@ -367,8 +367,9 @@ iframe.embed {
 }
 
 .footer {
-  width: 100%;
-  margin: 80px 0;
+	width: 100%;
+	padding: 80px 0;
+	background: #f9f9f9;
 }
 
 .footer a, .footer span{
@@ -388,7 +389,8 @@ iframe.embed {
   margin-right: 10px;
   color: black;
   font-weight: 100;
-  text-decoration: none
+  text-decoration: none;
+	padding: 50px 0 100px 0;
 }
 .editProfile span {
   vertical-align: middle;
@@ -398,24 +400,21 @@ iframe.embed {
 	z-index: 3;
 	position: relative;
   font-size: 18px;
-  padding: 8px;
-  margin: 14px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
 }
 .topLinks span {
   font-weight: 300;
 }
 .topLinks a {
-  padding: 8px;
+  padding: 20px 8px;
   color: black;
   font-weight: 300;
+	float:right;
   text-decoration: none;
   border-bottom:1px solid transparent;
 }
 .topLinks a:hover {
-  border-bottom:1px solid lightgreen;
+	background: black;
+	color: white;
 }
 .profilepage .bio {
   text-align: left;
@@ -483,6 +482,7 @@ iframe.embed {
 .templates {
 	overflow: auto;
 	max-height: 80%;
+	width: 100%;
 }
 .no-templates {
 	display: none;
@@ -499,6 +499,18 @@ iframe.embed {
   display: inline-block;
   margin: 4vw;
   border:1px solid white;
+  position: relative;
+}
+
+.templates span:after {
+  content: attr(data-name);
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  left: 0;
+  background: #fff;
+  padding: 5px;
+  border-top: 1px solid black;
 }
 
 .templates span:hover {
@@ -652,7 +664,7 @@ iframe.embed {
 
 #minotaur {
   position: absolute;
-  top: 26px;
+  top: 25px;
   right: 260px;
   opacity: 0;
 }
@@ -662,8 +674,11 @@ iframe.embed {
   font-weight: 300;
 }
 #minotaur.saving {
-  background: #8fd;
+  background: white;
   opacity: 1;
+  z-index: 20;
+  font-size: 13px;
+  border: 1px solid;
 }
 #minotaur.saving .label:after {
   content: 'SAVING';
@@ -675,7 +690,7 @@ iframe.embed {
 }
 .logo {
   float:left;
-  padding:10px;
+  padding:7px 0 0 10px;
   z-index:4;
   position:relative;
   -webkit-user-select: none;
@@ -705,6 +720,9 @@ iframe.embed {
   display: inline-block;
   background: white;
   box-shadow: -3px 3px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
 }
 
 .edit-video.menu,
@@ -1002,7 +1020,7 @@ iframe.embed {
 }
 
 .editBtn:hover {
- background:lightgreen;
+ background:black;
 }
 
 .deleteArmed .mediaDrawer h3 {
@@ -1213,6 +1231,12 @@ iframe.embed {
   transform: translateX(400px);
   transition: -webkit-transform 0.2s ease-in-out;
 }
+.lightcontrol h4 {
+	font-weight: 600;
+	font-size: 12px;
+	line-height: 0;
+	margin-top: 15px;
+}
 .lightcontrol.active {
   -webkit-transform: translateX(0px);
   transform: translateX(0px);
@@ -1238,34 +1262,73 @@ input[type="range"]::-webkit-slider-thumb {
   border-radius:10px;
   cursor:pointer;
 }
+#color-picker {
+  position: relative;
+}
 .colorPicker {
   cursor: crosshair;
 }
+.colorPickerCursor {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: -4px;
+  margin-top: -4px;
+}
+
 .swatch {
   width: 20px;
   height: 20px;
-  border: 1px solid black;
+  border: 1px solid #eee;
   display: inline-block;
   cursor: pointer;
+	float:left;
+}
+span:hover .swatch {
+	border: 1px solid red;
 }
-.swatch.selected {
-  border-width: 2px;
+.active .swatch {
+  border: 1px solid #000;
 }
 .color-swatches {
   margin-top: 10px;
 }
+.color-swatches span {
+	display: inline-block;
+	width: 50%;
+	float:left;
+	cursor:pointer;
+}
+.color-swatches span:nth-child(1),.color-swatches span:nth-child(2){
+	margin-bottom:5px;
+}
+.color-swatches span.active{
+	background:red;
+	color:white;
+}
+.color-swatches span:nth-child(3){
+	clear:left;
+}
+.color-swatches span:hover {
+	background:#eee;
+}
+
+.color-swatches span.active:hover {
+	background:red;
+}
 .color-swatches label {
-  font-size: 11px;
-  font-weight: 300;
-  position: relative;
-  top: -6px;
-  padding-left: 5px;
-  display: inline-block;
-  min-width: 35px;
-  cursor: pointer;
+	font-size: 14px;
+	font-weight: 300;
+	position: relative;
+	padding-left: 5px;
+	display: inline-block;
+	cursor: pointer;
+	top: -2px;
 }
-.color-swatches label.selected {
-  font-weight: 500;
+.color-swatches span.active label {
+  font-weight: 600;
 }
 
 
@@ -1353,6 +1416,10 @@ input[type="range"]::-webkit-slider-thumb {
 .settings .setting {
   margin-bottom:10px;
 }
+.settings
+.settings .setting a {
+	text-decoration:none;
+}
 .setting.subButtons {
   display: inline-block;
   width: 100%;
@@ -1360,10 +1427,8 @@ input[type="range"]::-webkit-slider-thumb {
 }
 .settings .subButtons a {
   font-size: 12px;
-  font-weight: 300;
-  width: 40px;
-  margin: 0;
 }
+
 .settings .setting:last-child{
   margin-bottom:0px;
 }
@@ -1382,6 +1447,10 @@ input[type="range"]::-webkit-slider-thumb {
 	float: left;
 	position: relative;
 	top: 5px;
+	font-weight:600;
+}
+.setting.number label:after {
+	content:":";
 }
 .setting.number.halflines {
 	height: 30px;
@@ -1446,22 +1515,45 @@ input[type="range"]::-webkit-slider-thumb {
 	padding-right: 3px;
 }
 
+.btn, button {
+	background:white;
+	color:black;
+	padding:3px;
+	text-decoration:none;
+	 cursor: pointer;
+	border:1px solid;
+}
+
+.btn:hover, button:hover {
+  background:black;
+  color:white;
+}
+.btn.marg {
+	margin-top:10px;
+}
+.warn {
+	background:red;
+	display: inline-block;
+	color:white;
+	text-decoration:none;
+	border:1px solid red;
+	text-align: center;
+}
+
 button {
   padding: 8px;
-  border: 1px solid;
   float: right;
   font-weight: 500;
-  background: white;
-  cursor: pointer;
   width: 100%;
+	font-size:14px;
 }
 
-button:hover {
-  background:black;
-  color:white;
+#builder-units {
+	width:100%;
+}
+#mediaEditor .warn {
+	width:100%;
 }
-
-
 
 .radio-group {  
   width: 182px;
@@ -1469,6 +1561,7 @@ button:hover {
   table-layout: fixed;
   border-spacing: 0;
   border-collapse: separate;
+	overflow:hidden;
 }
 
 .radio-group__label {
@@ -1478,7 +1571,7 @@ button:hover {
   vertical-align: middle;
   text-align: center;
   position: relative;
-  border: 1px solid #ccc;
+  border: 1px solid #000;
   cursor:pointer;
   border-style: solid none solid solid;
  /* border-radius: 5px 0 0 5px;*/
@@ -1491,19 +1584,19 @@ button:hover {
 }
   
 .radio-group__label + input + .radio-group__label:before {
-  content: " ";
-  display: block;
-  position: absolute;
-  top:-1px;
-  width: 100%;
-  height: 100%;
-  border: 1px solid #000;
-  /*border-radius: 5px 0 0 5px;*/
-  -webkit-transform: translate3d(-103%,0,0);
-  -webkit-transition: all 250ms;
-  transform: translate3d(-103%,0,0);
-  transition: all 250ms;
-  background:;
+	content: " ";
+	display: block;
+	position: absolute;
+	top: 0px;
+	width: 94px;
+	height: 100%;
+	border: 0;
+	/* border-radius: 5px 0 0 5px; */
+	-webkit-transform: translate3d(-103%,0,0);
+	-webkit-transition: all 250ms;
+	transform: translate3d(-103%,0,0);
+	transition: all 250ms;
+	background: rgba(0,0,0,0.1);
 }  
 
 .radio-group__label + input:checked + .radio-group__label:before {
@@ -1528,6 +1621,24 @@ form {
 form div {
 	float:right;
 }
+form div.hidden {
+	height: 0;
+	overflow: hidden;
+}
+form h3.link {
+	content:"?";
+}
+form h3.link:after {
+	content:"?";
+}
+
+form h3.link:hover {
+	color:#017cfe;
+	cursor:pointer;
+}
+
+
+
 form li {
 	font-size: 20px;
 	font-weight: 300;
@@ -1554,9 +1665,9 @@ form input[type="submit"] {
 	padding: 10px 0;
 }
 form input[type="submit"]:hover {
-	background:lightgreen;
+	background:black;
 	color:white;
-	border:1px solid lightgreen;
+	border:1px solid black;
 	cursor:pointer;
 }
 form p{
@@ -1607,45 +1718,62 @@ form li textarea {
 	margin-top: 20px;
 }
 
-.demo .video {
-  height:80vh;
-  min-height:300px;
-}
-
-.demo .video span {
-  font-size:100px;
-  color:white;
-  cursor:pointer;
+.hero {
+	float:left;
+	width:100%;
+	clear:both;
+	height:70vh;
+	display:table;
+	background-size:cover;
 }
-.demo .video span.videoTitle {
-  font-size: 29px;
-  font-weight: 300;
-  padding: 3px 7px;
+.hero .circle {
+	font-size: 20px;
+	font-weight: 300;
+	background: white;
+	display: inline-block;
+	padding: 60px 20px;
+	border-radius: 230px;
 }
 
-.demo .video span.icon-ios7-play-outline:hover {
-  color:lightgreen;
+.hero .circle:hover {
+	background:black;
+	color:white;
+	cursor:pointer;
 }
 
+
 .box {
   display: table-cell;
   vertical-align: middle;
   width: 100%;
 }
+.question {
+	font-size: 43px;
+	font-weight: 300;
+	margin-bottom: 10px;
+	display: inline-block;
+}
 
 .close {
-  font-weight: 100;
-  font-size: 120px;
-  float: right;
-  cursor: pointer;
-  position: fixed;
-  right: 20px;
-  top: 20px;
-  z-index: 20;
+	font-weight: 100;
+	font-size: 70px;
+	float: right;
+	cursor: pointer;
+	position: fixed;
+	right: 20px;
+	top: 20px;
+	z-index: 20;
+	background: #f9f9f9;
+	width: 75px;
+	color: black;
+	border: 1px solid black;
+	box-shadow: -3px 4px black;
+	line-height: 75px;
 }
 
 .close:hover {
-  color:lightgreen;
+  background:black;
+	color:white;
 }
 
 
@@ -1664,7 +1792,7 @@ form li textarea {
 }
 /*
 .facebook:hover{
-  background:lightgreen;
+  background:black;
 }
 */
 .box b.signin-tagline {
@@ -1673,6 +1801,8 @@ form li textarea {
   margin-bottom: 18px;
   font-weight: 500;
   font-size: 12px;
+	border-bottom: 1px solid #444;
+	padding-bottom: 20px;
   letter-spacing: 2px;
 }
 .facebook b {
@@ -1680,6 +1810,11 @@ form li textarea {
   font-size: 50px;
 }
 
+a[data-role="forgot-password"] {
+	font-size:11px;
+	margin-top:10px;
+}
+
 .facebook span {
   vertical-align: bottom;
   padding-right: 14px;
@@ -1697,6 +1832,14 @@ form li textarea {
   border: 1px solid;
 }
 
+.aboutRoom h1 {
+	font-size:28px;
+}
+.txt {
+	font-size:12px;
+	padding:5px 0;
+	display: inline-block;
+}
 .aboutRoom h1 a{
   text-decoration: none;
   font-style: italic;
@@ -1707,14 +1850,22 @@ form li textarea {
 }
 
 .aboutRoom .editlink {
-  color: red;
-  text-decoration: none;
-  border-bottom: 1px dotted;
+	border-bottom: 0;
+	padding: 6px;
+	display: inline-block;
+	margin-top: 10px;
+	width: 100%;
+	text-align: center;
+}
+
+.aboutRoom .editlink:hover {
+	background:black;
+	color:white;
 }
 
 .aboutRoom h2{
   font-size: 13px;
-  margin: 5px 0;
+  margin: 5px 0 0 0;
 }
 
 .share {
diff --git a/server/index.js b/server/index.js
index 952ade9..c2df4ca 100644
--- a/server/index.js
+++ b/server/index.js
@@ -61,7 +61,7 @@ site.setup = function(){
 	app.use(passport.initialize());
 	app.use(passport.session());
 	app.use(app.router);
-	app.enable('trust proxy')
+	app.set('trust proxy', true)
 	app.get('env') === 'development' && app.use(express.errorHandler());
 
 	// Essential middleware
@@ -134,6 +134,7 @@ site.route = function () {
 
 	app.get('/api/project', middleware.ensureAuthenticated, api.projects.index)
 	app.get('/api/project/:slug', api.projects.show)
+	app.get('/api/rooms/:slug', api.rooms.show)
 	app.post('/api/project/new', middleware.ensureAuthenticated, api.projects.create)
 	app.post('/api/project/edit', middleware.ensureAuthenticated, api.projects.update)
 	app.delete('/api/project/destroy', middleware.ensureAuthenticated, api.projects.destroy)
diff --git a/server/lib/api/index.js b/server/lib/api/index.js
index ad86daa..11e13fc 100644
--- a/server/lib/api/index.js
+++ b/server/lib/api/index.js
@@ -6,6 +6,7 @@ var api = {
 	media: require('./media'),
 	profile: require('./profile'),
 	projects: require('./projects'),
+	rooms: require('./rooms'),
 	collaborator: require('./collaborator'),
 }
 
diff --git a/server/lib/api/projects.js b/server/lib/api/projects.js
index da41b48..61a6e10 100644
--- a/server/lib/api/projects.js
+++ b/server/lib/api/projects.js
@@ -21,10 +21,10 @@ var projects = {
 			}
 			else {
 				var name = util.sanitize(req.params.slug)
-				if (name == "new") {
-					name = ""
-				}
-				res.json({ _id: "new", name: name, isNew: true })
+        Project.count({}, function(err, count){
+          name = "Project #" + (count || 0)
+          res.json({ _id: "new", name: name, isNew: true })
+        })
 			}
 		})
 	},
diff --git a/server/lib/api/rooms.js b/server/lib/api/rooms.js
new file mode 100644
index 0000000..c044309
--- /dev/null
+++ b/server/lib/api/rooms.js
@@ -0,0 +1,67 @@
+var vec = require("../../../public/assets/javascripts/rectangles/models/vec2.js")
+var Rect = require("../../../public/assets/javascripts/rectangles/models/rect.js")
+var Room = require("../../../public/assets/javascripts/rectangles/models/room.js")
+var Rooms = require("../../../public/assets/javascripts/rectangles/engine/rooms/_rooms.js")
+var Clipper = require("../../../public/assets/javascripts/rectangles/engine/rooms/clipper.js")
+var Builder = require("../../../public/assets/javascripts/rectangles/engine/rooms/builder.js")
+var Grouper = require("../../../public/assets/javascripts/rectangles/engine/rooms/grouper.js")
+var Walls = require("../../../public/assets/javascripts/rectangles/engine/rooms/_walls.js")
+
+/* jshint node: true */
+
+var _ = require('lodash'),
+	util = require('../util'),
+	upload = require('../upload'),
+	config = require('../../../config.json'),
+	Project = require('../schemas/Project');
+
+var rooms = module.exports = {
+  show: function(req, res){
+		Project.findOne({ slug: req.params.slug }, function(err, doc){
+			if (! doc) { res.json({ status: 404 }); return }
+			doc = doc.toObject()
+
+      doc.rooms.forEach(function(data){
+				var rect = new Rect(data.rect.x[0], data.rect.y[0], data.rect.x[1], data.rect.y[1])
+				var room = new Room({
+					id: data.id,
+					rect: rect,
+					height: data.height
+				})
+				Rooms.add(room)
+			})
+			Rooms.clipper.solve_rects()
+      Rooms.builder.build()
+
+			var walls = [], mx_walls = [], mx_floor = [], mx_ceiling = []
+			var collections = Rooms.grouper.collect()
+			Rooms.grouper.cull(collections)
+			Rooms.grouper.group(walls, collections, FRONT)
+			Rooms.grouper.group(walls, collections, BACK)
+			Rooms.grouper.group(walls, collections, LEFT)
+			Rooms.grouper.group(walls, collections, RIGHT)
+			walls.forEach(function(wall){
+			  wall.mx.forEach(function(mx){
+			    var data = mx.report()
+			    data.id = wall.id
+          mx_walls.push(data)
+			  })
+			})
+
+      doc.mx_walls = mx_walls
+      doc.mx_floor = mx_floor
+      doc.mx_ceiling = mx_ceiling
+      
+      Rooms.forEach(function(room){
+        room.mx_floor.forEach(function(mx){
+          mx_floor.push( mx.report() )
+        })
+        room.mx_ceiling.forEach(function(mx){
+          mx_ceiling.push( mx.report() )
+        })
+      })
+
+      res.json(doc)
+		})
+	}
+}
diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js
index 70ca414..ffacee2 100644
--- a/server/lib/views/staff.js
+++ b/server/lib/views/staff.js
@@ -356,7 +356,14 @@ var staff = module.exports = {
       
       staff.users.bless
     );
-
+    
+    if (app.get('env') === 'development') {
+      app.get('/staff/authorize',
+        middleware.ensureAuthenticated,
+        staff.users.blessSelf
+      );
+    }
+    
     //
     // projects
 
@@ -463,6 +470,12 @@ var staff = module.exports = {
         res.render('staff/users/show_404')
       }
     },
+    blessSelf: function(req, res){
+      req.user.isStaff = true
+      req.user.save(function(err, user){
+        res.json({ state: user.isStaff })
+      })
+    },
     bless: function(req, res){
       res.locals.profile.isStaff = req.body.state == "true"
       res.locals.profile.save(function(err, user){
diff --git a/test/mocks/mx.js b/test/mocks/mx.js
index 889f4bc..69c4b3a 100644
--- a/test/mocks/mx.js
+++ b/test/mocks/mx.js
@@ -1,22 +1,33 @@
 // Non-DOM-dependent stub MX library
 // Used for testing code that builds MX elements, without a DOM dependency
 
+var _ = require("lodash");
+
 var MX = module.exports = {}
 
 MX.Object3D = function (klass) {
   this.klass = klass
 	this.width = this.height = this.scaleX = this.scaleY = this.scaleZ = 1
+	this.rotationX = this.rotationY = this.rotationZ = 0
 	this.z = this.y = this.x = 0
 	this.side = 0
 	this.type = "Face"
 	this.el = { style: {} }
 	this.rect = null
 }
+MX.Object3D.prototype.report = function(){
+  var data = _.pick(this, ['x','y','z','width','height','rotationX','rotationY'])
+  return data
+}
 
 MX.Scene = {
   els: [],
   add: function (el) {
     MX.Scene.els.push(el)
+  },
+  remove: function (el) {
+    var index = MX.Scene.els.indexOf(el)
+    MX.Scene.els.splice(index, 1)
   }
 }
 
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs
index a67df34..8b133a5 100644
--- a/views/controls/editor/light-control.ejs
+++ b/views/controls/editor/light-control.ejs
@@ -1,16 +1,26 @@
 <div class="vvbox lightcontrol">
-
+  <div id="color-picker">
+  </div>
+  
 	<div class="slider">
+		<h4>Brightness Control</h4>
 		<input type="range" min="0" max="110" value="0" id="brightness-control" />
-		<h4>Brightness</h4>
 	</div>
 
   <div class="color-swatches">
+	<span>
     <div class="swatch" id="wall-color" data-mode="wall"></div><label>wall</label>
+	</span>
+	<span class="active">
     <div class="swatch" id="floor-color" data-mode="floor"></div><label>floor</label>
+	</span>
+	<span>
     <div class="swatch" id="ceiling-color" data-mode="ceiling"></div><label>ceiling</label>
-    <br>
+	</span>
+	<span>
     <div class="swatch" id="outline-color" data-mode="outline"></div><label>outlines</label>
+	</span>
+	<span>
   </div>
 
 <!--
diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs
index 456699c..d73a3ef 100644
--- a/views/controls/editor/media-drawer.ejs
+++ b/views/controls/editor/media-drawer.ejs
@@ -16,8 +16,8 @@
 
 <div class="mediaDrawer fixed animate mediaViewer">
 	<span class="close">X</span>
-	<h2><a href="#" class="yourMedia active">Your Media</a> – <a href="#" class="foundToggle">Found Media</a></h2><br>
-	<h3 class="editBtn" id="deleteMedia">delete media</h3>
+	<h2><a href="#" class="userToggle active">Your Media</a> – <a href="#" class="foundToggle">Found Media</a></h2><br>
+	<h3 class="editBtn warn" id="deleteMedia">delete media?</h3>
 	<div class="myMedia">
 	</div>
 	
diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs
index 7f8f299..000e8db 100644
--- a/views/controls/editor/media-editor.ejs
+++ b/views/controls/editor/media-editor.ejs
@@ -50,7 +50,7 @@
 		</select>
 	</div>
 
-	<div class="setting subButtons">
-		<a href="#" data-role="destroy-media">Delete</a>
+	<div class="setting">
+		<a href="#" class="warn btn" data-role="destroy-media">delete this media</a>
 	</div>
 </div>
diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs
index e4ec7ee..ed587fa 100644
--- a/views/controls/editor/settings.ejs
+++ b/views/controls/editor/settings.ejs
@@ -27,11 +27,11 @@
 		<div class="radio-group">
 			<input id="privacy_private" class="radio-group__option" type="radio" name="privacy" value="public" checked>
 			<label class="radio-group__label" for="privacy_private">
-				Everyone
+				Public
 			</label>
 			<input id="privacy_public" class="radio-group__option" type="radio" name="privacy" value="private">
 			<label class="radio-group__label" for="privacy_public">
-				Just for me
+				Private
 			</label>
 		</div>
 	</div>
@@ -39,8 +39,8 @@
 		<button data-role="save-project">Save</button>
 	</div>
 	<div class="setting subButtons">
-		<a href="#" data-role="clear-project">Clear</a>
-		<a href="#" data-role="clone-project">Clone</a>
-		<a href="#" data-role="destroy-project">Delete</a>
+		<a href="#" data-role="clear-project" class="btn">Clear</a>
+		<a href="#" data-role="clone-project" class="btn">Clone</a>
+		<a href="#" data-role="destroy-project" class="btn warn">Delete Room</a>
 	</div>
 </div>
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs
index e073df4..4abf780 100644
--- a/views/controls/editor/toolbar.ejs
+++ b/views/controls/editor/toolbar.ejs
@@ -17,7 +17,7 @@
 		class="icon-ios7-keypad-outline"></span>
 	<span
 		data-role='toggle-light-control'
-		data-info="light control"
+		data-info="edit room colors"
 		class="icon-ios7-sunny-outline"></span>
 	<span
 		data-role='edit-wall-text'
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs
index 02ab16d..208dfff 100644
--- a/views/controls/editor/wallpaper.ejs
+++ b/views/controls/editor/wallpaper.ejs
@@ -1,8 +1,13 @@
 <div class="vvbox wallpaper">
+	
+	<!-- IF NO WALL PAPER -->
+	<span class="txt">Add custom wallpaper to walls. Begin by uploading a pattern. Or try this one -> </span>
+	
   <div class="swatches"></div>
   
   <div class="wallpaperUpload">
     <form>
+
       <span class="icon-ios7-upload-outline upload-icon"></span>
       <label>Upload wallpaper</label>
       <input type="file" accept="image/*" class="file" multiple>
diff --git a/views/controls/reader/about-room.ejs b/views/controls/reader/about-room.ejs
index 2aa244b..e13f363 100644
--- a/views/controls/reader/about-room.ejs
+++ b/views/controls/reader/about-room.ejs
@@ -1,15 +1,17 @@
 <div class="aboutRoom vvbox">
 	<h1>
-		[[- name ]],<br>
+		[[- name ]],
 		<a href="[[- authorlink ]]">[[- author ]]</a>
 	</h1>
+	[[ if (description) { ]]
+	<span class="txt">[[- description ]]</span>
+	[[ } ]]
 	<h2>
 	  Last modified [[- date ]]
 	  [[ if (canEdit) { ]]
-	    &middot; <a href="[[- editlink ]]" class="editlink">Edit</a>
+	    <a href="[[- editlink ]]" class="btn warn marg">Edit Room</a>
 	  [[ } ]]
 	</h2>
-	<span>[[- description ]]</span>
 </div>
 
 <div class="share">
diff --git a/views/home.ejs b/views/home.ejs
index 8b83a8f..e49dc4a 100755
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -13,20 +13,21 @@
 	<div class="rapper page">
 	[[ include partials/header ]]
 
-	<table class="demo">
-		<tr>
-			<td class="video" style="background-image:url(https://s3.amazonaws.com/luckyplop/6450f5b88c5c043a4551eff8902b1728f813bd66.jpg)">
-				<span class="icon-ios7-play-outline"></span><br>
-				<span class="videoTitle">Welcome to VVALLS</span>
-			</td>
-		</tr>
-	</table>
+	<div class="hero" style="background-image:url(https://s3.amazonaws.com/luckyplop/6450f5b88c5c043a4551eff8902b1728f813bd66.jpg)">
+			<div class="holder">
+				<span class="circle">
+				<span class="videoTitle">Create 3D Rooms</span><br>
+				<span class="icon-ios7-play"></span><br>
+				<span class="videoTitle">Watch video.</span>
+				</span>
+			</div>
+	</div>
 	
 	<h1>Room Showcase</h1>
 	
 	[[ include projects/list-projects ]]
 	
-	<a href="#loadmore" class="viewMore">View More</a>
+	<a href="#loadmore" class="viewMore btn">View More</a>
 
 	[[ include partials/confirm-modal ]]	
 	[[ include projects/layouts-modal ]]	
diff --git a/views/partials/edit-profile.ejs b/views/partials/edit-profile.ejs
index 96e9da4..a39f856 100644
--- a/views/partials/edit-profile.ejs
+++ b/views/partials/edit-profile.ejs
@@ -61,8 +61,9 @@
 				</li>		
 
 				<li class="section_break">
-					<h3>Change Password</h3>
+					<h3 class="link">Change Password</h3>
 				</li>
+				<div class="hidden">
 				<li>
 					<label class="description" for="profile_old_password">Old Password:</label>
 					<div>
@@ -81,7 +82,7 @@
 						<input id="profile_new_password2" class="element text medium" type="password" maxlength="255"> 
 					</div> 
 				</li>
-
+				</div>
 				<li class="buttons">
 					<input id="saveForm" class="button_text" type="submit" value="Submit" />
 				</li>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 6697aff..a48c5e1 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -14,7 +14,7 @@
 	<a href="/project" data-role="show-projects-modal" class="topLink">Projects</a>
 
 	[[ if (profile && String(user._id) == String(profile._id)) { ]]
-	<a href="/profile" data-role="edit-profile-modal" class="topLink editProfile">Edit Profile <span class="icon-ios7-gear-outline"></span></a>
+	<a href="/profile" data-role="edit-profile-modal" class="topLink editProfile">Settings</a>
 	[[ } else if (! profile) { ]]
 	<a href="/profile" class="topLink">Profile</a>
 	[[ } ]]
diff --git a/views/partials/sign-in.ejs b/views/partials/sign-in.ejs
index 8268b2a..98f0acc 100644
--- a/views/partials/sign-in.ejs
+++ b/views/partials/sign-in.ejs
@@ -6,7 +6,7 @@
 		<form id="signIn" method="post">
 			<input type="hidden" name="_csrf" value="[[- token ]]">
 			<a href="/auth/facebook" class="facebook"><b class="icon-social-facebook"></b><span>Sign in with Facebook</span></a>
-			<b class="signin-tagline">– or the ol' fashion way –</b>
+			<b class="signin-tagline">– or with your email –</b>
 			<li>
 				<label class="description" for="usernameInput">Username:</label>
 				<div>
@@ -39,7 +39,7 @@
 		<form id="signUp" method="post">
 			<input type="hidden" name="_csrf" value="[[- token ]]">
 			<a href="/auth/facebook" class="facebook"><b class="icon-social-facebook"></b><span>Sign up with Facebook</span></a>
-			<b class="signin-tagline">– or the ol' fashion way –</b>
+			<b class="signin-tagline">– or with your email –</b>
 			<li>
 				<label class="description" for="usernameInput">Username:</label>
 				<div>
diff --git a/views/profile.ejs b/views/profile.ejs
index 8dd3c6d..ada3d52 100644
--- a/views/profile.ejs
+++ b/views/profile.ejs
@@ -45,7 +45,7 @@
 	
 	[[ include projects/list-projects ]]
 
-	<a href="#" data-role="new-project-modal" class="viewMore">create project</a>
+	<a href="#" data-role="new-project-modal" class="viewMore btn">create project</a>
 	
 	[[ include partials/edit-profile ]]
 	[[ include projects/layouts-modal ]]	
diff --git a/views/projects/layouts-modal.ejs b/views/projects/layouts-modal.ejs
index 97f1e61..34dc9af 100644
--- a/views/projects/layouts-modal.ejs
+++ b/views/projects/layouts-modal.ejs
@@ -33,14 +33,11 @@
 	<span class="close">X</span>
 	<div class="box">
 		
+    <h1>Choose Room Template</h1>
 		<div class="templates">
-			<h1>Choose Room Template</h1>
 		</div>
 		<div class="no-templates">
 			There are no room layouts available. Please <a href="/layout/new">create a new one.</a>
 		</div>
-		<form>
-			<input class="button_text" type="submit" value="Create Project">
-		</form>
 	</div>
 </div>
diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs
index c41ae07..537d409 100644
--- a/views/projects/list-projects.ejs
+++ b/views/projects/list-projects.ejs
@@ -1,31 +1,23 @@
 [[ if (projects.length) { ]]
 		
-	<table class="projectList">
-		<tr>
+	<div class="projectList">
 
 		[[ projects.forEach(function(project, i) { ]]
-			[[ if (i % 4 == 1) { ]]
-			</tr><tr>
-			[[ } ]]
-			
-			[[ if (i == 0) { ]]
-			<td class="border room1" colspan=3">
-			[[ } else { ]]
-			<td class="border room1">
-			[[ } ]]
+
+			<span class="room">
 				<iframe src="/project/[[- project.slug ]]/view?noui=1&mute=1" class="embed"></iframe>
 				[[ if (String(user._id) == String(project.user_id)) { ]]
 				<a href="/project/[[- project.slug ]]/edit"><div class="editBtn">edit</div></a>
 				[[ } ]]
+				<div class="holder">
 				<a href="/project/[[- project.slug ]]" class="roomName">
 					[[- project.name ]]<br>
 					[[- project.date ]]
 				</a>
-			</td>
+				</div>
+			</span>
 
 		[[ }) ]]
-
-		</tr>
-	</table>
+	</div>
 
 [[ } ]]
diff --git a/views/staff/projects/show.ejs b/views/staff/projects/show.ejs
index bd23784..687f0c2 100644
--- a/views/staff/projects/show.ejs
+++ b/views/staff/projects/show.ejs
@@ -19,6 +19,7 @@
       <td class="editLinks">
         <a href="/project/[[- project.slug ]]">[view]</a>
         <a href="/project/[[- project.slug ]]/edit">[edit]</a>
+        <a href="/api/rooms/[[- project.slug ]]">[api]</a>
       </td>
       <td>
         [[- project.date ]]