merge

18 files changed, 353 insertions, 121 deletions

diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index 3e185d2..7eb6e7c 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -10,7 +10,7 @@ Map.Draw = function(map, opt){
 	draw.animate = function(){
 		ctx.save()
 		draw.clear()
-		// draw.ruler()
+		draw.fill("rgba(255,255,255,0.98)")
 
 		if (opt.minimap) {
 			ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
@@ -19,7 +19,7 @@ Map.Draw = function(map, opt){
 			ctx.scale( -1, 1 )
 
 			draw.coords()
-			draw.regions(Rooms.regions, [ "#fff" ])
+			draw.regions(Rooms.regions, [ "#fff" ], "#000")
 			draw.camera(scene.camera)
 		}
 		
@@ -29,7 +29,7 @@ Map.Draw = function(map, opt){
 			ctx.translate( map.center.a,  map.center.b )
 			ctx.scale( -1, 1 )
 
-			draw.regions(Rooms.regions, [ "#f8f8f8" ])
+			draw.regions(Rooms.regions, [ "#f8f8f8" ], "#000")
 			draw.mouse(map.ui.mouse.cursor)
 			draw.coords()
 			scene && draw.camera(scene.camera)
@@ -38,46 +38,81 @@ Map.Draw = function(map, opt){
 		ctx.restore()
 	}
 
+  // changes the ctx temporarily
 	draw.render = function(){
-		ctx.save()
+		var thumbnail_width = 1000
+		var thumbnail_height = 750
+		
+		var extent = Rooms.extent()
+		var center = extent.center()
+		var extent_width = extent.width()
+		var extent_height = extent.height() 
+		var zoom
+		if (extent_width > extent_height) {
+      zoom = thumbnail_width / extent.width() * 0.9
+		}
+		else {
+      zoom = thumbnail_height / extent.height() * 0.9
+		}
+
+		var canvas = document.createElement("canvas")
+		ctx = canvas.getContext('2d')
+		canvas.width = thumbnail_width
+		canvas.height = thumbnail_height
+		
 		draw.clear()
 
-		ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
-		ctx.scale( map.zoom, map.zoom )
-		ctx.translate( map.center.a,  map.center.b )
+		ctx.translate( thumbnail_width * 1/2, thumbnail_height * 1/2)
+		ctx.scale( zoom, zoom )
+		ctx.translate( center.a, -center.b )
 		ctx.scale( -1, 1 )
 
-		draw.regions(Rooms.regions, ["#fff"])
-		draw.mouse(map.ui.mouse.cursor)
-		scene && draw.camera(scene.camera)
-
+		draw.regions(Rooms.regions, ["#fff"], null)
+		
 		ctx.restore()
+		
+		// invert opacity
+		var pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+		var pixels = pixelData.data
+		for (var i = 0, k, _len = pixels.length; i < _len; i++) {
+		  k = i*4
+		  if (pixels[k+3] == 0) {
+		    pixels[k] = pixels[k+1] = pixels[k+2] = pixels[k+3] = 255
+		  }
+		  else {
+		    pixels[k] = pixels[k+1] = pixels[k+2] = 255
+		    pixels[k+3] = 0
+		  }
+		}
+		ctx.putImageData(pixelData, 0, 0)
+
+		// reset the ctx
+		ctx = map.canvas.getContext("2d")
+
+		return canvas
 	}
 
 	draw.clear = function(){
-		ctx.fillStyle = "rgba(255,255,255,0.98)"
 		ctx.clearRect(0, 0, map.dimensions.a, map.dimensions.b)
-		ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b)
 	}
 
-	draw.ruler = function (){
-		ctx.strokeStyle = "rgba(80,80,80,0.5)"
-		ctx.lineWidth = 1
-		var len = 5
-		for (var i = 0.5; i < map.dimensions.a; i += 10) {
-			line(i, 0, i, len)
-			line(0, i, len, i)
-		}
+	draw.fill = function(fillStyle){
+		ctx.fillStyle = fillStyle
+		ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b)
 	}
 
-	draw.regions = function(regions, colors){
+	draw.regions = function(regions, colors, stroke){
+	  if (stroke) {
+			ctx.strokeStyle = "#000"
+			ctx.lineWidth = (1 / map.zoom)
+		}
 		for (var i = 0; i < regions.length; i++) {
 			if (regions[i].dupe) continue
 			ctx.fillStyle = colors[i % colors.length]
-			ctx.strokeStyle = "#000"
-			ctx.lineWidth = (1 / map.zoom)
 			fill_region(regions[i])
-			stroke_sides(regions[i])
+      if (stroke) {
+        stroke_sides(regions[i])
+      }
 		}
 	}
 
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
index f9334e6..02218ed 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
@@ -50,7 +50,7 @@ Map.UI.Editor = function(map){
 			return r.focused = r.rect.contains(cursor.x.a, cursor.y.a)
 		})
 
-		if (intersects.length && base.permissions.destroy) {
+		if (intersects.length && (base.permissions.destroy || e.altKey)) {
 			base.mouse.down = false
 			
 			room = intersects[0]
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
index 6f96275..3603f0c 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
@@ -118,6 +118,14 @@
       return data
 		}
 
+    base.extent = function(){
+      var extent = new Rect ( new vec2(Infinity, -Infinity), new vec2(Infinity, -Infinity) )
+      base.forEach(function(room){
+        extent.expand(room.rect)
+      })
+      return extent
+    }
+
 		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 5ff53fe..7ff472d 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -103,6 +103,10 @@
 			walls_data.forEach(function(wall_data){
 			  if (! wall_data) { return }
 			  var wall = base.lookup[ wall_data.id ]
+			  if (! wall) {
+			    console.log(wall_data);
+			    return
+			  }
 			  wall.deserialize( wall_data )
 			})
     },
@@ -133,7 +137,7 @@
 
         $("#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 5c7b4af..98f80c5 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/mover.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js
@@ -21,13 +21,6 @@ Rooms.mover = new function(){
 	base.update = function(pos){
 		var radius = scene.camera.radius
 		
-		if (base.noclip) {
-			cam.x = pos.x
-			cam.y = pos.y
-			cam.z = pos.z
-			return
-		}
-		
 		cam.y = pos.y
 
 		// if we were in a room already..
@@ -42,14 +35,15 @@ Rooms.mover = new function(){
 			// check if we've breached one of the walls.. clamp position if so
 			var collision = base.room.collidesDisc(pos.x, pos.z, radius)
 
-			if (collision) {
+			if (collision && ! base.noclip) {
 				cam.x = (collision & LEFT_RIGHT) ? base.room.rect.x.clampDisc(pos.x, radius) : pos.x
 				cam.z = (collision & FRONT_BACK) ? base.room.rect.y.clampDisc(pos.z, radius) : pos.z
 				return
 			}
 
 			// in this case, we appear to have left the room..
-			$(".face.active").removeClass("active")
+			// $(".face.active").removeClass("active")
+			$("body").css("background-color", "transparent")
 			base.room = null
 		}
 
@@ -65,6 +59,7 @@ Rooms.mover = new function(){
 		// did we actually enter a room?
 		if (intersects.length) {
 			base.room = intersects[0]
+			$("body").css("background-color", rgb_string( Walls.colors.wall ))
       app.tube("change-room", { room: base.room })
 		}
 
diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js
index a08176a..00f2c55 100644
--- a/public/assets/javascripts/rectangles/models/rect.js
+++ b/public/assets/javascripts/rectangles/models/rect.js
@@ -141,6 +141,29 @@
 	Rect.prototype.width = function(){ return this.x.length() }
 	Rect.prototype.height = function(){ return this.y.length() }
 	Rect.prototype.delta = function(){ return new vec2( this.x.magnitude(), this.y.magnitude() ) }
+	Rect.prototype.expand = function(rect){
+	  this.x.a = Math.min( this.x.a, rect.x.a )
+	  this.x.b = Math.max( this.x.b, rect.x.b )
+	  this.y.a = Math.min( this.y.a, rect.y.a )
+	  this.y.b = Math.max( this.y.b, rect.y.b )
+	  return this
+	}
+	Rect.prototype.square = function(){
+	  var width = this.x.length()
+	  var height = this.y.length()
+	  var diff
+	  if (width < height) {
+	    diff = (height - width) / 2
+	    this.x.a -= diff
+	    this.x.b += diff
+	  }
+	  else {
+	    diff = (width - height) / 2
+	    this.y.a -= diff
+	    this.y.b += diff
+	  }
+	  return this
+	}
 	Rect.prototype.toString = function(){
 		var sides = sidesToString(this.sides)
 		var s = "[" + this.x.toString() + " " + this.y.toString() + "] " + sides
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 8174de7..fcb2f5e 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -13,7 +13,7 @@
 	}
 	
 	var Wall = function(opt){
-		this.id = [ opt.side, opt.edge, opt.vec.a ].join("_")
+		this.id = [ opt.side|0, opt.edge|0, opt.vec.a|0 ].join("_")
 		this.vec = opt.vec
 		this.edge = opt.edge
 		this.side = opt.side
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
index 94eed29..7ae6294 100644
--- a/public/assets/javascripts/ui/builder/BuilderSettings.js
+++ b/public/assets/javascripts/ui/builder/BuilderSettings.js
@@ -107,7 +107,7 @@ var BuilderSettings = FormView.extend({
 	},
 	
 	serialize: function(){
-		map.draw.render()
+		var thumbnail = map.draw.render()
 		var fd = new FormData()
 		fd.append( "_csrf", this.$csrf.val() )
 		fd.append( "_id", this.$id.val() )
@@ -115,7 +115,7 @@ var BuilderSettings = FormView.extend({
 		fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" )
 		fd.append( "rooms", JSON.stringify( Rooms.serialize() ) )
 		fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) )
-		fd.append( "thumbnail", dataUriToBlob(map.canvas.toDataURL()) )
+		fd.append( "thumbnail", dataUriToBlob(thumbnail.toDataURL()) )
 		return fd
 	},
 
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index fd251b7..0c08369 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -146,7 +146,6 @@ var EditorSettings = FormView.extend({
 	},
 	
 	serialize: function(){
-		map.draw.render()
 		var fd = new FormData()
 		fd.append( "_csrf", this.$csrf.val() )
 		fd.append( "_id", this.$id.val() )
@@ -160,7 +159,8 @@ var EditorSettings = FormView.extend({
 		fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) )
 		
 		if (this.thumbnailIsStale()) {
-      fd.append( "thumbnail", dataUriToBlob(map.canvas.toDataURL()) )
+      var thumbnail = map.draw.render()
+      fd.append( "thumbnail", dataUriToBlob(thumbnail.toDataURL()) )
     }
 		return fd
 	},
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index 971fb15..3f425c3 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -42,7 +42,6 @@ var MediaUpload = UploadView.extend({
 			}
 			
 			media._csrf = $("[name=_csrf]").val()
-			console.log(media)
 			
 			var request = $.ajax({
 				type: "post",
@@ -55,7 +54,7 @@ var MediaUpload = UploadView.extend({
 	
 	add: function(media){
 		console.log(media)
-		this.parent.mediaViewer.add(media)
+		this.parent.mediaViewer.add(media, this.parent.mediaViewer.$myMedia)
     this.parent.mediaViewer.$deleteMedia.show()
 	},
 	
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index b51d8f2..1414e16 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -20,6 +20,7 @@ var MediaViewer = ModalView.extend({
 		this.$foundMedia = this.$(".foundMedia")
 		this.$foundToggle = this.$(".foundToggle")
 		this.$deleteMedia = this.$("#deleteMedia")
+		this.$noMedia = this.$(".noMedia")
   },
 
 	foundToggle: function(){
@@ -103,9 +104,11 @@ var MediaViewer = ModalView.extend({
 		  data.forEach(function(media){
 		    this.add(media, this.$myMedia)
 		  }.bind(this))
+		  this.$noMedia.hide()
       this.$deleteMedia.show()
 		}
 		else {
+		  this.$noMedia.show()
 		  this.$deleteMedia.hide()
 		}
 		this.__super__.show.call(this)
@@ -176,6 +179,7 @@ var MediaViewer = ModalView.extend({
 
 			if ($(".myMedia .mediaContainer").length == 0) {
         this.$deleteMedia.hide()
+        this.$noMedia.show()
         this.deleteArmed(false)
 			}
 			return
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index 140076d..6bf2542 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -133,7 +133,7 @@ var WallpaperPicker = UploadView.extend({
 	
 	wall: null,
 	pickWall: function(wall){
-    if (wall.background.src == "none") {
+    if (! wall.background || wall.background.src == "none") {
       return;
     }
     this.wall = wall
@@ -148,16 +148,16 @@ var WallpaperPicker = UploadView.extend({
 	
 	initializePositionCursor: function(){
 	  var base = this
-	  var dx = 0, dy = 0, dragging = false
+	  var dx = 0, dy = 0, dragging = false, delta
 	  var x = 0, y = 0, s = 1
     var mymouse = new mouse({
       el: this.$position[0],
       down: function(e, cursor){
         if (! base.wall) return
+        dragging = true
         s = parseFloat( base.$scale.val() )
         x = base.wall.background.x
         y = base.wall.background.y
-        dragging = true
       },
       drag: function(e, cursor){
         if (! dragging) return
@@ -172,7 +172,6 @@ var WallpaperPicker = UploadView.extend({
         })
       },
       up: function(e, cursor, new_cursor){
-        delta.zero()
         dragging = false
       },
     })
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index 1bfc6cb..99db2a3 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -3,6 +3,7 @@ var LayoutsIndex = View.extend({
 
 	initialize: function(){
 		this.$templates = this.$(".templates")
+		this.$templatesList = this.$(".templates-list")
 		this.$noTemplates = this.$(".no-templates")
 		this.$form = this.$("form")
 	},
@@ -19,15 +20,21 @@ var LayoutsIndex = View.extend({
 			this.$form.hide()
 			this.$noTemplates.show()
 		}
-		this.$templates.empty()
+		this.$templatesList.empty()
 		data.forEach(function(room){
 			var $span = $("<span>")
-			// $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)
+			var $label = $("<label>")
+			$label.html( room.name )
+			
+			var $image = $("<span>")
+			$image.addClass("image").css("background-image", "url(" + room.photo + ")")
+			
+      $span.append( $image )
+      $span.append( $label )
+			
+			this.$templatesList.append($span)
 		}.bind(this))
 		this.show()
 	}
diff --git a/public/assets/javascripts/ui/site/ProjectList.js b/public/assets/javascripts/ui/site/ProjectList.js
index 993d805..ebb0a96 100644
--- a/public/assets/javascripts/ui/site/ProjectList.js
+++ b/public/assets/javascripts/ui/site/ProjectList.js
@@ -1,16 +1,49 @@
-
+var projectListTimeout = null
 var ProjectList = View.extend({
 
 	el: ".projectList",
 
 	events: {
-		"mouseenter .room": 'spinOn',
-		"mouseleave .room": 'spinOff',
+		"mouseenter .room": 'enter',
+		"mouseleave .room": 'leave',
 	},
 	
 	initialize: function(){
+	  this.$(".images").each(function(){
+	    $divs = $(this).children("div")
+	    $divs.hide()
+	    $divs.first().show()
+	    $(this).data("index", 0)
+	  })
+	},
+	
+	timeout: null,
+	enter: function(e){
+    clearTimeout(projectListTimeout)
+    this.advance(e.currentTarget)
 	},
 	
+	leave: function(e){
+    clearTimeout(projectListTimeout)
+    var $divs = $(e.currentTarget).find(".images div")
+    $divs.hide()
+    $divs.eq(0).show()
+	},
+	
+	advance: function(el){
+    projectListTimeout = setTimeout(function(){
+      this.advance(el)
+    }.bind(this), 500)
+	  var $images = $(el).find(".images")
+	  var $divs = $images.children("div")
+	  var index = $images.data("index")
+	  var nextIndex = (index + 1) % $divs.length
+    $divs.eq(index).hide()
+    $divs.eq(nextIndex).show()
+    $images.data("index", nextIndex)
+	}
+	
+/*
 	spinOn: function(e){
 		var iframe = $(e.currentTarget).find("iframe").get('0')
 		if (! iframe) return
@@ -22,5 +55,6 @@ var ProjectList = View.extend({
 		if (! iframe) return
 		iframe.contentWindow.postMessage("spin-off", window.location.origin)
 	}
+*/
 
 })
diff --git a/public/assets/javascripts/ui/site/StaffView.js b/public/assets/javascripts/ui/site/StaffView.js
index fdf39d2..0398f71 100644
--- a/public/assets/javascripts/ui/site/StaffView.js
+++ b/public/assets/javascripts/ui/site/StaffView.js
@@ -3,14 +3,19 @@ var StaffView = View.extend({
   
   events: {
     "click #toggle-staff": "toggleStaff",
+    "click #toggle-featured": "toggleFeatured",
   },
 
 	initialize: function() {
 		this.$toggleStaff = $("#toggle-staff")
+		this.$toggleFeatured = $("#toggle-featured")
 		this.$mediaEmbed = $("#media-embed")
     if (this.$toggleStaff.length && this.$toggleStaff.data().isstaff) {
       this.$toggleStaff.html("Is Staff")
     }
+    if (this.$toggleFeatured.length && this.$toggleFeatured.data().featured) {
+      this.$toggleFeatured.html("Featured Project")
+    }
     if (this.$mediaEmbed.length) {
       var media = this.$mediaEmbed.data()
       this.$mediaEmbed.html( Parser.tag( media ) )
@@ -44,6 +49,24 @@ var StaffView = View.extend({
         }.bind(this)
       })
     }.bind(this))
+  },
+
+  toggleFeatured: function(){
+    var state = ! this.$toggleFeatured.data().featured
+    $.ajax({
+      type: "put",
+      dataType: "json",
+      url: window.location.href + "/feature",
+      data: {
+        state: state,
+        _csrf: $("#_csrf").val(),
+      },
+      success: function(data){
+        this.$toggleFeatured.data("featured", data.state)
+        this.$toggleFeatured.html(data.state ? "Featured Project" : "Feature this project")
+        $("#isFeaturedProject").html(data.state ? "yes" : "no")
+      }.bind(this)
+    })
   },	
 
 })
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 6e23962..a15ea39 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -10,7 +10,7 @@ body,textarea,input {
 	font-family: 'Lato', sans-serif;
 }
 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
-	background:white;
+	background:white!important;
 }
 *, *:before, *:after {
   moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
@@ -246,6 +246,11 @@ h5 {
 	display: inline-block;
 }
 
+.projectList {
+	border-top: 1px solid;
+}
+
+
 .projectList.about {
 	text-align: left;
 	border-top: 1px solid;
@@ -324,30 +329,42 @@ iframe.embed {
 	z-index: -1;
 	pointer-events: none;
 }
-.projectList {
-	display: inline-block;
-	float: left;
-	width: 100%;
-}
 
+
+.projectList a {
+	width: 32vw;
+	float:left;
+	clear: right;
+	padding-bottom: 2vw;
+}
 .projectList .room {
-  width: 50%;
-	height:40vh;
+	width: 30vw;
+	height: 23vw;
+	margin: 1vw 1vw 0 1vw;
 	display:table;
 	position: relative;
-	float:left;
-	border-top:1px solid;
+  z-index: 1;
 }
-
-.projectList .room:nth-child(3n+2) {
-	border-right:1px solid black;
+.projectList .holder {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
 }
 
-.projectList .room:nth-child(3n+1) {
-	width: 100%;
-	height: 50vh;
+.room .mask {
+  position: absolute;
+  top: 0; left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  overflow: hidden;
+	background-color: #ddd;
+  background-size: cover;
+}
+.projectList a:hover .room .mask {
+  background-color: rgba(238,238,238,0.1);
 }
-
 .room .images {
   position: absolute;
   top: 0; left: 0;
@@ -357,16 +374,36 @@ iframe.embed {
   text-align: center;
   overflow: hidden;
 }
-.room .images img {
-  max-height: 100%;
-  max-width: 100%;
+.room .images div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center center;
 }
 
+/*
+.room .images[data-mediacount='1'] img:nth-child(1) { left: 20%; top: 20%; }
+
+.room .images[data-mediacount='2'] img:nth-child(1) { left: 51%; bottom: 0%; width: auto; height: 40%; }
+.room .images[data-mediacount='2'] img:nth-child(2) { right: 51%; bottom: 50%; width: auto; height: 40%; }
+
+.room .images[data-mediacount='3'] img:nth-child(1) { right: 51%; bottom: 41%; }
+.room .images[data-mediacount='3'] img:nth-child(2) { right: 51%; top: 61%; }
+.room .images[data-mediacount='3'] img:nth-child(3) { left: 51%; bottom: 0%; width:auto; height:30%;}
+
+.room .images[data-mediacount='4'] img:nth-child(1) { right: 51%; bottom: 41%; }
+.room .images[data-mediacount='4'] img:nth-child(2) { left: 51%; bottom: 61%; }
+.room .images[data-mediacount='4'] img:nth-child(3) { right: 51%; top: 61%; }
+.room .images[data-mediacount='4'] img:nth-child(4) { left: 51%; top: 41%; }
+*/
+
 .page .btn {
 	clear: both;
 	padding: 30px 0;
 	border: 0;
-
 }
 
 .page .viewMore {
@@ -385,18 +422,16 @@ iframe.embed {
 	vertical-align: middle;
 }
 
-.page .room .holder a {
-  font-weight: 300;
-  font-size: 20px;
-  letter-spacing: 1px;
-  color: black;
-  background: white;
-  border: 1px solid;
-  padding: 5px;
-  box-shadow: -3px 3px black;
-  text-decoration:none;
-  max-width: 180px;
-  display: inline-block;
+.page .projectList label {
+	font-weight: 600;
+	font-size: 12px;
+	color: black;
+	text-decoration: none;
+	display: inline-block;
+	cursor: pointer;
+	border: 1px solid transparent;
+	line-height: 18px;
+	padding:0 5px;
 }
 
 .page .room .holder a:hover {
@@ -404,6 +439,11 @@ iframe.embed {
   color:white;
 }
 
+.projectList a:hover label {
+  background:black;
+	color:white;
+}
+
 
 .page .questions {
   background: #55efcb;
@@ -437,11 +477,14 @@ iframe.embed {
 .page h1 {
 	font-size: 80px;
 	font-weight: 100;
-	padding: 60px 0 25px 0;
+	padding: 20px 0 25px 0;
 	float: left;
 	width: 100%;
 	border-top: 1px solid;
 }
+.page h1:nth-child(2) {
+	margin-top: 40px;
+}
 
 .page p {
 	margin: 20px;
@@ -476,6 +519,8 @@ iframe.embed {
 	width: 100%;
 	padding: 80px 0;
 	background: #f9f9f9;
+	float: left;
+	clear: both;
 }
 
 .footer a, .footer span{
@@ -499,6 +544,10 @@ iframe.embed {
 	display:table;
 }
 
+.noPic {
+	border-right: 1px solid;
+}
+
 .profilePic .ion-ios7-person-outline {
 	font-size: 100px;
 }
@@ -610,47 +659,86 @@ iframe.embed {
 
 .profilepage .bio span:last-of-type:after { display: none; }
 
+.profilepage .about h2 {
+	text-align: center;
+	font-weight: 300;
+	font-size: 32px;
+}
+.profilepage .about h2:nth-child(2){
+	margin:34px 0;
+}
+.about {
+	background-color: #ffffff;background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyODkuNScgaGVpZ2h0PScyODkuNScgdmlld0JveD0nMCAwIDI4OS41IDI4OS41Jz4KCTxkZWZzPgoJCTxwYXR0ZXJuIGlkPSdibHVlc3RyaXBlJyBwYXR0ZXJuVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB4PScwJyB5PScwJyB3aWR0aD0nNTcuOScgaGVpZ2h0PSc1Ny45JyB2aWV3Qm94PScwIDAgMTE1LjggMTE1LjgnID4KCQk8cmVjdCB3aWR0aD0nMTEwJScgaGVpZ2h0PScxMTAlJyBmaWxsPScjZmZmZmZmJy8+CgkJCTxwYXRoIGQ9J00xLDFoMTE1Ljh2MTE1LjhoLTExNS44di0xMTUuOCcgZmlsbC1vcGFjaXR5PScwJyBzdHJva2Utd2lkdGg9JzAuOCcgc3Ryb2tlLWRhc2hhcnJheT0nMCwxLDEnIHN0cm9rZT0nI2NjY2NjYycvPgoJCTwvcGF0dGVybj4gCgkJPGZpbHRlciBpZD0nZnV6eicgeD0nMCcgeT0nMCc+CgkJCTxmZVR1cmJ1bGVuY2UgdHlwZT0ndHVyYnVsZW5jZScgcmVzdWx0PSd0JyBiYXNlRnJlcXVlbmN5PScuMiAuMycgbnVtT2N0YXZlcz0nNScgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPgoJCQk8ZmVDb2xvck1hdHJpeCB0eXBlPSdzYXR1cmF0ZScgaW49J3QnIHZhbHVlcz0nMCcvPgoJCTwvZmlsdGVyPgoJPC9kZWZzPgoJPHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsbD0ndXJsKCNibHVlc3RyaXBlKScvPgo8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjZnV6eiknIG9wYWNpdHk9JzAnLz4KPC9zdmc+Cg==');
+	background-attachment: fixed;
+	
+}
+.profilepage .about h2 .btn {
+	border: 1px solid;
+	font-weight: 500;
+	padding: 10px;
+	font-size: 18px;
+}
+.profilepage .about h2 .btn:hover {
+	background:black;
+	color:white;
+}
 .templates {
 	overflow: auto;
-	max-height: 80%;
+	max-height: 100%;
 	width: 100%;
+	padding: 20px 0 40px 0;
+}
+.templates-list {
+	display: inline-block;
+	width: 100%;
+	margin-bottom: 40px;
+}
+.templates::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+}
+
+.templates::-webkit-scrollbar-thumb {
+background-color: white;
+border-left: 1px solid black;
+}
+
+.templates::-webkit-scrollbar-track {
+	background-color: transparent;
 }
+
 .no-templates {
 	display: none;
 }
 
-.templates span{
+.templates span {
+	display: block;
+	float: left;
+	margin: 1vw 0;
+	padding: 2vw;
+	cursor: pointer;
+}
+.templates span .image {
   background-position: center;
-  background-size: contain;
-  background-repeat: no-repeat;
+  background-size: cover;
   background-color: #fff;
   width: 20vw;
-  height: 20vh;
-  display: inline-block;
-  margin: 4vw;
-  border:1px solid black;
-  position: relative;
+  height: 15vw;
+  display: block;
+  background-color: #ddd;
 }
 
-.templates span:after {
-	content: attr(data-name);
-	position: absolute;
-	top: 100%;
+.templates span label {
 	width: 100%;
 	left: 0;
-	background: #fff;
-	padding: 5px;
-	border-top: 1px solid black;
+  display: block;
 	font-weight: 300;
 }
 
-.templates span:hover {
-  border:1px solid blue;
-  cursor:pointer;
-}
 
-.templates span:hover:after {
-	border-top: 1px solid blue;
+.templates span:hover .image {
+  background-color: #f00;
+  cursor:pointer;
 }
 
 .templates h1 {
@@ -1000,10 +1088,13 @@ iframe.embed {
 .mediaDrawer {
   -webkit-transform:translateY(-100%);
   transform:translateY(-100%);
-  background:rgba(255,255,255,0.9);
+  background:white;
   text-align:center;
   overflow-x: hidden;
 }
+.editing .mediaDrawer {
+	background:rgba(255,255,255,0.95);
+}
 .mediaDrawer.active {
   -webkit-transform:translateY(0%);
   transform:translateY(0%);
@@ -1091,7 +1182,7 @@ iframe.embed {
   left: 50%;
   padding: 26px 20px;
   margin-left: -200px;
-  background: rgba(255,255,255,0.9);
+  background: rgba(255,255,255,0.99);
   z-index: 7;
   -webkit-transform: translateY(-1000%);
   -webkit-transition: -webkit-transform 0.6s ease-in-out;
@@ -1123,7 +1214,7 @@ iframe.embed {
   border: 1px solid #ccc;
   font-size: 15px;
   padding: 5px;
-  width: 220px;
+  width: 290px;
   text-align: center;
   border-radius: 20px;
 }
@@ -1215,8 +1306,6 @@ iframe.embed {
   color:white;
 }
 
-.deleteArmed .mediaContainer {
-}
 
 .deleteArmed .mediaContainer:hover {
   background:#FF3B30;
@@ -1272,12 +1361,11 @@ iframe.embed {
 
 
 .mediaContainer {
-  border: 1px solid white;
   display: inline-block;
   width: 25%;
   margin: 4%;
   vertical-align: top;
-  border:1px solid white;
+  border:1px solid transparent;
   padding:2%;
 }
 .mediaContainer:hover {
@@ -1589,6 +1677,7 @@ input[type="range"]::-webkit-slider-thumb {
 .settings.info {
   right: auto;
   left: 10px;
+  width: 230px;
 }
 
 .vvbox h4 {
@@ -1669,6 +1758,7 @@ input[type="range"]::-webkit-slider-thumb {
   font-size: 12px;
   width: 100%;
   max-height: 200px;
+	max-width: 100%;
 }
 #textEditor.settings textarea {
   max-height: none;
@@ -1895,6 +1985,8 @@ form div.hidden {
 }
 form h3.link {
 	content:"?";
+	margin-top: 0;
+	padding: 0 0 10px 0;
 }
 form h3.link:after {
 	content:"?";
@@ -2256,6 +2348,7 @@ a[data-role="forgot-password"] {
   background-size: cover;
   display: inline-block;
   margin-right: 10px;
+	background-color: #ccc;
 }
 #collaborator-list .username {
   position: relative;
@@ -2362,6 +2455,11 @@ a[data-role="forgot-password"] {
 	width: 50%;
 	height: 180px;
 	}
+	.profilepage .about h2 {
+	text-align: center;
+	font-weight: 500;
+	font-size: 17px;
+	}
 	.projectList.about {
 	text-align: center;
 	padding: 20px 0;
diff --git a/public/assets/stylesheets/staff.css b/public/assets/stylesheets/staff.css
index aa21f9b..c75a9b1 100644
--- a/public/assets/stylesheets/staff.css
+++ b/public/assets/stylesheets/staff.css
@@ -28,15 +28,16 @@ nav {
   text-align: left;
 }
 nav a {
-  padding-left: 20px;
+  margin-left: 20px;
 }
 hr {
   border: 1px solid #bbb;
-  margin: 5px auto 10px;
+  margin: 10px auto 10px;
+  background: transparent;
 }
 .body {
   width: 80%;
-  margin: 0 auto;
+  margin: 40px auto;
 }
 .json {
   display: none;
@@ -63,6 +64,8 @@ hr {
 .staff {
   font-size: 15px;
 }
+.staff .body a {
+}
 .staff .editLinks a {
   color: #00f;
 }
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..19c9da3
--- /dev/null
+++ b/public/favicon.ico