merge

46 files changed, 345 insertions, 197 deletions

diff --git a/public/assets/img/offbeatrepeat.jpg b/public/assets/img/offbeatrepeat.jpg
new file mode 100644
index 0000000..4fa90c7
--- /dev/null
+++ b/public/assets/img/offbeatrepeat.jpg
diff --git a/public/assets/img/plainpattern.png b/public/assets/img/plainpattern.png
new file mode 100644
index 0000000..1c4f12c
--- /dev/null
+++ b/public/assets/img/plainpattern.png
diff --git a/public/assets/img/plainpattern2.png b/public/assets/img/plainpattern2.png
new file mode 100644
index 0000000..10d57a5
--- /dev/null
+++ b/public/assets/img/plainpattern2.png
diff --git a/public/assets/img/plainpattern3.png b/public/assets/img/plainpattern3.png
new file mode 100644
index 0000000..3048665
--- /dev/null
+++ b/public/assets/img/plainpattern3.png
diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 065c93b..0ce03db 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -113,7 +113,7 @@ MX.Movements = function (cam) {
 						  app.controller.mediaViewer.hide()
 						}
 						else {
-              map && map.toggle && map.toggle()
+              app.controller.toolbar.toggleMap()
 						}
 						break
 				}
diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js
index 4b14a21..ecde3ca 100644
--- a/public/assets/javascripts/rectangles/_env.js
+++ b/public/assets/javascripts/rectangles/_env.js
@@ -17,14 +17,15 @@ environment.init = function(){
 		scene.camera.radius = 20
 	}
 	
-	app.movements.gravity(true)
-	
 	Rooms.init()
+	Walls.init()
 	Scenery.init()
 	
 	scene.update()
 	environment.update()
 	
+	app.movements.gravity(true)
+
 	var minimap_el = document.querySelector("#minimap .el")
 	if (minimap_el) {
 		window.minimap = new Map ({
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
index 02218ed..3c3347b 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
@@ -213,7 +213,7 @@ Map.UI.Editor = function(map){
           undo: wheelState,
           redo: intersects[0].copy()
         })
-        Rooms.clipper.update()
+        Rooms.rebuild()
         wheelState = null
 			}, 500)
 		}
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
index d7280b9..fabbdb9 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
@@ -7,7 +7,6 @@ Map.UI.Minimap = function(map){
 
 	base.creating = base.dragging = base.resizing = false
 
-/*
 	base.mouse = new mouse({
 		el: map.el,
 		down: down,
@@ -16,7 +15,6 @@ Map.UI.Minimap = function(map){
 		up: up,
 		rightclick: rightclick,
 	})
-*/
 
 	base.wheel = new wheel({
 		el: map.el,
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
index 3603f0c..b901a25 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
@@ -59,18 +59,19 @@
 				height: 500
 			})
 			base.add(room)
+			Rooms.rebuild()
 			return room
 		}
 	
 		base.remove = function(room){
 			delete base.list[room.id]
-			Rooms.clipper.update()
+      Rooms.rebuild()
 		}
 	
 		base.removeAll = function(){
 			base.list = {}
 			base.regions = []
-			Rooms.clipper.update()
+      Rooms.rebuild()
 		}
 	
 		base.count = function(){
@@ -88,6 +89,16 @@
 		base.values = function(){
 			return _.values(base.list)
 		}
+		
+		base.rebuild = function(walls_data){
+      walls_data = walls_data || Walls.serialize()
+      Rooms.clipper.update()
+      Rooms.builder.rebuild()
+      Rooms.grouper.build()
+      Walls.paint()
+      Walls.deserialize(walls_data)
+      app.tube("rooms-built")
+		}
 	
 		base.serialize = function(){
 			var rooms = base.map(function(room){
@@ -96,7 +107,7 @@
 			return rooms
 		}
 	
-		base.deserialize = function(rooms_data){
+		base.deserialize = function(rooms_data, walls_data){
 			rooms_data.forEach(function(data){
 			  if (! data || ! data.rect) return
 				var rect = new Rect(data.rect.x[0], data.rect.y[0], data.rect.x[1], data.rect.y[1])
@@ -107,7 +118,7 @@
 				})
 				base.add(room)
 			})
-			Rooms.clipper.update()
+      Rooms.rebuild(walls_data)
 		}
 		
 		base.report = function(){
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
index 7ff472d..0da3b9a 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -38,6 +38,15 @@
 		base.floors = []
 		base.lookup = {}
 		base.colors = {}
+		
+		base.init = function(){
+      base.colors = {
+        wall: app.defaults.colors.wall.slice(),
+        outline: app.defaults.colors.outline.slice(),
+        floor: app.defaults.colors.floor.slice(),
+        ceiling: app.defaults.colors.ceiling.slice(),
+      }
+    }
 
 		base.first = function(){
 		  for (var i in base.list) {
@@ -90,7 +99,7 @@
 		base.values = function(){
 			return _.values(base.lookup)
 		}
-		
+
 		base.serialize = function(){
 		  var data = []
 			base.forEach(function(wall){
@@ -104,7 +113,6 @@
 			  if (! wall_data) { return }
 			  var wall = base.lookup[ wall_data.id ]
 			  if (! wall) {
-			    console.log(wall_data);
 			    return
 			  }
 			  wall.deserialize( wall_data )
@@ -118,6 +126,7 @@
       var ceilingColor = rgb_string(Walls.colors.ceiling)
       Walls.list.forEach(function(wall){
         wall.outline(wallColor, outlineColor)
+        // TODO: SET WALLPAPER HERE
       })
       Rooms.forEach(function(room){
         room.setFloorColor(floorColor)
diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js
index 6a89158..4619eb1 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/builder.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js
@@ -32,19 +32,16 @@
 		var els = []
 
 		base.init = function(){
-			base.bind()
+			// base.bind()
 		}
 
 		base.bind = function(){
-			app.on("clip", base.rebuild.bind(base))
 		}
 
 		base.rebuild = function(){
 			if (window.scene) {
 				base.clear()
 				base.build()
-				Rooms.grouper.build()
-				app.tube("rooms-built")
 			}
 		}
 
diff --git a/public/assets/javascripts/rectangles/engine/rooms/clipper.js b/public/assets/javascripts/rectangles/engine/rooms/clipper.js
index 0382758..df83cc8 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/clipper.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/clipper.js
@@ -38,7 +38,6 @@
 
 		base.update = function(){
 			base.solve_rects()
-			app.tube("clip")
 		}
 	
 		var regions
diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js
index 57a0886..bee8c49 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/undo.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js
@@ -69,11 +69,11 @@
       type: "create-room",
       undo: function(room){
         Rooms.remove(room)
-        Rooms.clipper.update()
+        Rooms.rebuild()
       },
       redo: function(room){
         Rooms.add(new Room(room))
-        Rooms.clipper.update()
+        Rooms.rebuild()
         app.tube("builder-pick-room", room)
       },
     },
@@ -83,14 +83,14 @@
         var room = Rooms.list[state.id]
         room.rect.assign( state.rect )
         room.height = state.height
-        Rooms.clipper.update()
+        Rooms.rebuild()
         app.tube("builder-pick-room", room)
       },
       redo: function(state){
         var room = Rooms.list[state.id]
         room.rect.assign( state.rect )
         room.height = state.height
-        Rooms.clipper.update()
+        Rooms.rebuild()
         app.tube("builder-pick-room", room)
       },
     },
@@ -98,12 +98,12 @@
       type: "destroy-room",
       undo: function(room){
         Rooms.add(new Room(room))
-        Rooms.clipper.update()
+        Rooms.rebuild()
         app.tube("builder-pick-room", room)
       },
       redo: function(room){
         Rooms.remove(room)
-        Rooms.clipper.update()
+        Rooms.rebuild()
       },
     },
     
diff --git a/public/assets/javascripts/rectangles/models/surface.js b/public/assets/javascripts/rectangles/models/surface.js
index c85682a..3a6c449 100644
--- a/public/assets/javascripts/rectangles/models/surface.js
+++ b/public/assets/javascripts/rectangles/models/surface.js
@@ -108,7 +108,7 @@
 		this.clamp_delta( this.bounds, dimension, position, delta )
 
 		var new_delta = delta.clone()
-		if (this.clamp_delta(old_bounds, dimension, position, new_delta).eq(delta)) {
+		if (old_bounds && this.clamp_delta(old_bounds, dimension, position, new_delta).eq(delta)) {
 			return old_bounds
 		}
 
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index fcb2f5e..7ff9015 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -114,6 +114,8 @@
 
             // TODO: watch individual scenery object here
             Minotaur.watch( app.router.editorView.settings )
+
+						app.controller.pickWall(base, pos)
           }
 					else {
 						app.controller.pickWall(base, pos)
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js
index e6b7e97..0bf2338 100644
--- a/public/assets/javascripts/ui/builder/BuilderInfo.js
+++ b/public/assets/javascripts/ui/builder/BuilderInfo.js
@@ -3,6 +3,7 @@ var BuilderInfo = View.extend({
 	el: "#builderInfo",
 
 	events: {
+	  "mousedown": "stopPropagation",
 		"keydown": 'stopPropagation',
 		"change [name=x]": 'changeX',
 		"change [name=y]": 'changeY',
@@ -66,27 +67,27 @@ var BuilderInfo = View.extend({
 	changeWidth: function(e){
 		e.stopPropagation()
 		this.room.rect.x.setLength( this.$width.unitVal() )
-		Rooms.clipper.update()
+    Rooms.rebuild()
 	},
 	changeDepth: function(e){
 		e.stopPropagation()
 		this.room.rect.y.setLength( this.$depth.unitVal() )
-		Rooms.clipper.update()
+    Rooms.rebuild()
 	},
 	changeHeight: function(e){
 		e.stopPropagation()
 		this.room.height = this.$height.unitVal()
-		Rooms.clipper.update()
+    Rooms.rebuild()
 	},
 	changeX: function(e){
 		e.stopPropagation()
 		this.room.rect.x.setPosition( this.$x.unitVal() )
-		Rooms.clipper.update()
+    Rooms.rebuild()
 	},
 	changeY: function(e){
 		e.stopPropagation()
 		this.room.rect.y.setPosition( this.$y.unitVal() )
-		Rooms.clipper.update()
+    Rooms.rebuild()
 	},
 	changeUnits: function(){
 		app.units = this.$units.val()
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
index 7ae6294..fe67e9b 100644
--- a/public/assets/javascripts/ui/builder/BuilderSettings.js
+++ b/public/assets/javascripts/ui/builder/BuilderSettings.js
@@ -7,6 +7,7 @@ var BuilderSettings = FormView.extend({
 	destroyAction: "/api/layout/destroy",
 
 	events: {
+	  "mousedown": "stopPropagation",
 		"keydown": 'stopPropagation',
 		"keydown [name=name]": 'enterSubmit',
 		"click [data-role='save-layout']": 'clickSave',
diff --git a/public/assets/javascripts/ui/builder/BuilderToolbar.js b/public/assets/javascripts/ui/builder/BuilderToolbar.js
index 2eb7590..6c218be 100644
--- a/public/assets/javascripts/ui/builder/BuilderToolbar.js
+++ b/public/assets/javascripts/ui/builder/BuilderToolbar.js
@@ -3,6 +3,7 @@ var BuilderToolbar = View.extend({
 	el: "#builderToolbar",
 
 	events: {
+	  "mousedown": "stopPropagation",
 		"click [data-role='toggle-map-view']": 'toggleMap',
 		"click [data-role='toggle-layout-settings']": 'toggleSettings',
 		"click [data-role='undo']": 'undo',
diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js
index 81dce52..a89111f 100644
--- a/public/assets/javascripts/ui/builder/BuilderView.js
+++ b/public/assets/javascripts/ui/builder/BuilderView.js
@@ -12,11 +12,6 @@ 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/Collaborators.js b/public/assets/javascripts/ui/editor/Collaborators.js
index 452ad15..b57510d 100644
--- a/public/assets/javascripts/ui/editor/Collaborators.js
+++ b/public/assets/javascripts/ui/editor/Collaborators.js
@@ -9,6 +9,7 @@ var Collaborators = ModalFormView.extend({
 	destroyAction: function(){ return "/api/collaborator/" + this.parent.data.slug + "/destroy" },
 	
 	events: {
+	  "mousedown": "stopPropagation",
 	  "keydown [name=email]": "enterSubmit",
 	  "click [data-role=destroy-collaborator]": "destroy",
 	},
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index 0c08369..89040e1 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -7,6 +7,7 @@ var EditorSettings = FormView.extend({
 	destroyAction: "/api/project/destroy",
   
 	events: {
+	  "mousedown": "stopPropagation",
 		"keydown": 'stopPropagation',
 		"keydown [name=name]": 'enterSubmit',
 		"click [data-role='show-collaborators']": 'showCollaborators',
@@ -31,8 +32,7 @@ var EditorSettings = FormView.extend({
 		this.action = data.isNew ? this.createAction : this.updateAction
     this.parent.data = data
     
-		data.rooms && Rooms.deserialize(data.rooms)
-		data.walls && Walls.deserialize(data.walls)
+		data.rooms && Rooms.deserialize(data.rooms, data.walls)
 		data.startPosition && scene.camera.move(data.startPosition)
 
     if (data.colors && data.colors.wall) {
@@ -65,10 +65,6 @@ var EditorSettings = FormView.extend({
 			
 			data.media && Scenery.deserialize(data.media)
 		}
-
-    app.on("rooms-built", function(){
-		  Walls.paint()
-		})
 	},
 	
 	showCollaborators: function(e){
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 49decc2..8a707ec 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -7,8 +7,8 @@ var EditorToolbar = View.extend({
 		"click [data-role='toggle-map-view']": 'toggleMap',
 		"click [data-role='toggle-project-settings']": 'toggleSettings',
 		"click [data-role='open-media-viewer']": 'openMediaViewer',
-// 		"click [data-role='resize-media']": 'resizeMedia',
-		"click [data-role='destroy-media']": 'destroyMedia',
+    "click [data-role='toggle-presets']": 'togglePresets',
+// 		"click [data-role='destroy-media']": 'destroyMedia',
 		"click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper',
 		"click [data-role='toggle-light-control']": 'toggleLightControl',
 		"click [data-role='toggle-text-editor']": 'toggleTextEditor',
@@ -19,13 +19,18 @@ var EditorToolbar = View.extend({
 	},
 
 	toggleMap: function(){
-		map.toggle()
-		// $("#minimap").toggleClass("hide");
+		var state = ! $("[data-role='toggle-map-view']").hasClass("inuse")
+		this.resetControls()
+    $("[data-role='toggle-map-view']").toggleClass("inuse", state)
+		map.toggle(state)
+		$("#minimap").toggleClass("hide", state)
+		this.parent.info.toggle(state)
 	},
 	
 	toggleSettings: function(){
 // 	  this.resetMode()
     this.parent.textEditor.hide()
+		this.parent.presets.hide()
 		this.parent.lightControl.hide()
 		this.parent.wallpaperPicker.hide()
 		this.parent.mediaEditor.hide()
@@ -52,6 +57,7 @@ var EditorToolbar = View.extend({
 	  $(".inuse").removeClass("inuse")
     this.parent.textEditor.hide()
 		this.parent.wallpaperPicker.hide()
+		this.parent.presets.hide()
 		this.parent.lightControl.hide()
 		this.parent.settings.hide()
 	},
@@ -62,28 +68,6 @@ var EditorToolbar = View.extend({
     editor.permissions.add("resize")
     editor.permissions.remove("destroy")
 	},
-
-// 	resizeMedia: function(e, state){
-// 		this.resetControls()
-// 		if (! state && typeof e == "boolean") {
-// 			state = e
-// 			editor.permissions.assign("resize", state)
-// 		}
-// 		else {
-// 			state = editor.permissions.toggle("resize")
-// 		}
-// 		! state && editor.permissions.assign("move", true)
-// 		$(".inuse").removeClass("inuse")
-// 		$("[data-role='resize-media']").toggleClass("inuse", state)
-// 		if (state) {
-// 			if (this.parent.mediaEditor.scenery) {
-//         Scenery.resize.show( this.parent.mediaEditor.scenery )
-//       }
-// 		}
-// 		else {
-// 			Scenery.resize.hide()
-// 		}
-// 	},
 	
 	destroyMedia: function(e, state){
 		this.resetControls()
@@ -113,6 +97,7 @@ var EditorToolbar = View.extend({
 		this.parent.lightControl.hide()
     this.parent.textEditor.hide()
 		this.parent.settings.hide()
+		this.parent.presets.hide()
 		this.parent.wallpaperPicker.toggle(state)
 	},
 	
@@ -124,6 +109,7 @@ var EditorToolbar = View.extend({
 		this.parent.wallpaperPicker.hide()
     this.parent.textEditor.hide()
 		this.parent.settings.hide()
+		this.parent.presets.hide()
 		this.parent.lightControl.toggle(state)
 	},
 	
@@ -135,9 +121,21 @@ var EditorToolbar = View.extend({
 		this.parent.wallpaperPicker.hide()
 		this.parent.lightControl.hide()
 		this.parent.settings.hide()
+		this.parent.presets.hide()
 		this.parent.textEditor.toggle(state)
   },
 
+	togglePresets: function(){
+		var state = ! $("[data-role='toggle-presets']").hasClass("inuse")
+		this.resetMode()
+		$("[data-role='toggle-presets']").toggleClass("inuse", state)
+		this.parent.mediaEditor.hide()
+		this.parent.wallpaperPicker.hide()
+    this.parent.textEditor.hide()
+		this.parent.settings.hide()
+		this.parent.lightControl.hide()
+		this.parent.presets.toggle(state)
+	},
 })
 
 var editor = new function(){
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index f60b149..6aff601 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -11,6 +11,7 @@ var EditorView = View.extend({
 	initialize: function(){
 		this.toolbar = new EditorToolbar ({ parent: this })
 		this.settings = new EditorSettings ({ parent: this })
+		this.info = new BuilderInfo ({ parent: this })
 		this.mediaViewer = new MediaViewer ({ parent: this })
 		this.mediaUpload = new MediaUpload ({ parent: this })
 		this.mediaEditor = new MediaEditor ({ parent: this })
@@ -18,6 +19,7 @@ var EditorView = View.extend({
 		this.lightControl = new LightControl ({ parent: this })
 		this.textEditor = new TextEditor ({ parent: this })
 		this.collaborators = new Collaborators ({ parent: this })
+		this.presets = new Presets ({ parent: this })
 	},
 
 	load: function(name){
@@ -26,6 +28,11 @@ var EditorView = View.extend({
 	},
 	
 	loadLayout: function(layout){
+	  if (layout == "empty") {
+	    this.readyLayout({})
+	    this.toolbar.toggleMap()
+      return
+	  }
 		layout = sanitize(layout)
 		$.get(this.layoutAction + layout, this.readyLayout.bind(this))
 	},
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 51e6be7..3eb2861 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -10,7 +10,6 @@ var LightControl = View.extend({
     "input #brightness-control": "updateBrightness",
     "input #outline-hue": "updateShadow",
     "input #wall-hue": "updateShadow",
-    "click .presets span": "selectPreset",
   },
   
   initialize: function(){
@@ -115,39 +114,6 @@ var LightControl = View.extend({
     this.setMode(mode)
   },
   
-  presets: {
-    wireframe: {
-      wall: [255,255,255],
-      outline: [0,0,0],
-      floor: [246,246,246],
-      ceiling: [255,255,255],
-    },
-    shaded: {
-      wall: [205,205,204],
-      outline: [0,0,0],
-      floor: [109,116,106],
-      ceiling: [159,163,157],
-    },
-    pfunk: {
-      wall: [255,63,78],
-      outline: [255,246,0],
-      floor: [255,255,0],
-      ceiling: [225,118,252],
-    },
-    inverse: {
-      wall: [0,0,0],
-      outline: [0,230,255],
-      floor: [0,0,0],
-      ceiling: [0,0,0],
-    },
-  },
-  selectPreset: function(e){
-    var preset = $(e.currentTarget).data('preset')
-    if (! this.presets[preset]) return
-    this.load(this.presets[preset])
-    $(e.currentTarget).addClass('active')
-  },
-  
   beginBrightness: function(){
     this.begin()
     $(window).one("mouseup", this.finalize.bind(this))
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index 3f425c3..fddfefc 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -6,6 +6,7 @@ var MediaUpload = UploadView.extend({
 	uploadAction: "/api/media/upload",
 	
 	events: {
+    'mousedown': "stopPropagation",
 		"keydown .url": "enterSubmit",
 	},
 	
@@ -56,6 +57,7 @@ var MediaUpload = UploadView.extend({
 		console.log(media)
 		this.parent.mediaViewer.add(media, this.parent.mediaViewer.$myMedia)
     this.parent.mediaViewer.$deleteMedia.show()
+    this.parent.mediaViewer.$noMedia.hide()
 	},
 	
 	beforeUpload: function(){
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 1414e16..c18fb49 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -6,6 +6,7 @@ var MediaViewer = ModalView.extend({
 	loaded: false,
 	
 	events: {
+	  'mousedown': "stopPropagation",
 		'click .foundToggle': "foundToggle",
 		'click .userToggle': "userToggle",
 		'click #deleteMedia': "deleteArmed",
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
new file mode 100644
index 0000000..a7e92b6
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -0,0 +1,59 @@
+var Presets = View.extend({
+	el: "#presets",
+	
+	events: {
+    "click .presets span": "selectPreset",
+	},
+
+  presets: {
+    wireframe: {
+      wall: [255,255,255],
+      outline: [0,0,0],
+      floor: [246,246,246],
+      ceiling: [255,255,255],
+    },
+    shaded: {
+      wall: [205,205,204],
+      outline: [0,0,0],
+      floor: [109,116,106],
+      ceiling: [159,163,157],
+    },
+    pfunk: {
+      wall: [255,63,78],
+      outline: [255,246,0],
+      floor: [255,255,0],
+      ceiling: [225,118,252],
+    },
+    inverse: {
+      wall: [0,0,0],
+      outline: [255,255,255],
+      floor: [0,0,0],
+      ceiling: [0,0,0],
+    },
+  },
+  
+  initialize: function(opt){
+    this.parent = opt.parent
+  },
+
+  toggle: function(state){
+    this.$el.toggleClass("active", state);
+  },
+  
+  show: function(){
+    this.toggle(true)
+  },
+  
+  hide: function(){
+    this.toggle(false)
+  },
+
+  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')
+  },
+  
+})
\ 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 0aa5aad..c8879b3 100644
--- a/public/assets/javascripts/ui/editor/TextEditor.js
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -92,6 +92,7 @@ var TextEditor = FormView.extend({
 			this.unbind()
 		}
 
+    this.parent.settings.hide()
 		Scenery.resize.show(scenery)
 		Scenery.hovering = true
 		
diff --git a/public/assets/javascripts/ui/lib/Router.js b/public/assets/javascripts/ui/lib/Router.js
index 0b6385c..28905b2 100644
--- a/public/assets/javascripts/ui/lib/Router.js
+++ b/public/assets/javascripts/ui/lib/Router.js
@@ -16,6 +16,7 @@ var Router = View.extend({
 		
 		if (pathname in routes) {	
 			this[this.routes[pathname]](null)
+			return
 		}
 		
 		if (path[path.length-1] == null) {
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index 99db2a3..5974fc3 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -112,6 +112,7 @@ var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
 	action: "/api/layout",
 
 	events: {
+		"click [data-role='create-new-layout']": 'createNewLayout',
 		"click .templates span": 'choose',
 		"submit form": 'choose',
 	},
@@ -128,6 +129,10 @@ var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
  		var layout = $(e.currentTarget).data("slug")
 		if (! layout || ! layout.length) return
 		window.location.pathname = "/project/new/" + layout
-	}
+	},
+
+	createNewLayout: function(){
+	  window.location.pathname = "/project/new/empty"
+	},
 	
 })
diff --git a/public/assets/javascripts/ui/site/ProjectList.js b/public/assets/javascripts/ui/site/ProjectList.js
index ebb0a96..27c8aca 100644
--- a/public/assets/javascripts/ui/site/ProjectList.js
+++ b/public/assets/javascripts/ui/site/ProjectList.js
@@ -1,14 +1,17 @@
 var projectListTimeout = null
+window.fuck = 'suck'
 var ProjectList = View.extend({
 
 	el: ".projectList",
 
 	events: {
+	  "click .viewMore": 'viewMore',
 		"mouseenter .room": 'enter',
 		"mouseleave .room": 'leave',
 	},
 	
 	initialize: function(){
+	  this.$viewMore = this.$(".viewMore")
 	  this.$(".images").each(function(){
 	    $divs = $(this).children("div")
 	    $divs.hide()
@@ -41,7 +44,30 @@ var ProjectList = View.extend({
     $divs.eq(index).hide()
     $divs.eq(nextIndex).show()
     $images.data("index", nextIndex)
-	}
+	},
+	
+	viewMore: function(e){
+	  e.preventDefault()
+	  var criteria = {}
+	  criteria.offset = this.$(".projectItem").length
+	  if (window.location.pathname == "/" || window.location.pathname.match("/home")) {
+	    criteria.home = 1
+	  }
+	  else {
+	    criteria.user_id = this.$(".projectItem").first().data("userid")
+	  }
+    
+	  $.get("/api/project/paginate", criteria, function(data){
+	    var offset = this.$viewMore.offset()
+	    var $data = $(data)
+      var $els = $data.find(".projectItem")
+      $els.insertBefore( this.$viewMore )
+      if (! $data.find(".viewMore").length) {
+        this.$viewMore.hide()
+      }
+      $("body,html").animate({ scrollTop: offset.top - 80 }, 300)
+	  }.bind(this))
+	},
 	
 /*
 	spinOn: function(e){
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index fc7512a..509deb5 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -331,14 +331,14 @@ iframe.embed {
 }
 
 
-.projectList a {
-	padding: 4%;
+.projectList .projectItem {
+	margin: 4%;
 	display: inline-block;
 }
 .projectList .room {
 	width: 22vw;
 	height: 17vw;
-	margin: 1vw 1vw 0 1vw;
+	margin: 1vw 1vw 10px 1vw;
 	display: table;
 	position: relative;
 	z-index: 1;
@@ -406,11 +406,12 @@ iframe.embed {
 }
 
 .page .viewMore {
-  text-decoration: none;
-  font-size: 22px;
-  display: block;
+	clear: both;
+	float: none;
+	text-decoration: none;
+	font-size: 22px;
+	display: block;
 	border-top: 1px solid black;
-	border-bottom: 1px solid black;
 }
 
 
@@ -422,15 +423,16 @@ iframe.embed {
 }
 
 .page .projectList label {
-	font-weight: 600;
-	font-size: 12px;
+	font-weight: 500;
+	font-size: 11px;
 	color: black;
 	text-decoration: none;
 	display: inline-block;
 	cursor: pointer;
-	border: 1px solid black;
+	border: 1px solid #000;
 	line-height: 18px;
-	padding:0 5px;
+	padding: 5px;
+	letter-spacing: 0.3px;
 }
 
 .page .room .holder a:hover {
@@ -526,6 +528,7 @@ iframe.embed {
 	background: #f9f9f9;
 	float: left;
 	clear: both;
+	border-top:1px solid black;
 }
 
 .footer a, .footer span{
@@ -1212,7 +1215,7 @@ border-left: 1px solid black;
 	content: ' ' !important;
 	background-image: url("/assets/img/loader.gif");
 	background-repeat: no-repeat;
-	width: 40px;
+	width: 21px;
 	height: 40px;
 }
 
@@ -1252,7 +1255,9 @@ border-left: 1px solid black;
 .myMedia.inactive {
   opacity:0;
 }
-
+.noMedia {
+  margin: 40px;
+}
 .foundMedia {
   position:absolute;
   top:0;
@@ -1425,7 +1430,7 @@ border-left: 1px solid black;
 
 /* WALLPAPER PICKER */
 
-.wallpaper {
+.wallpaper, #presets {
   right: 80px;
   margin-top: 77px;
   width: 172px;
@@ -1435,7 +1440,7 @@ border-left: 1px solid black;
   transform: translateX(400px);
 	padding: 5px 5px 9px 5px;
 }
-.wallpaper.active {
+.wallpaper.active, #presets.active {
   display:inline-block;
   -webkit-transform: translateX(0px);
   transform: translateX(0px);
@@ -1500,7 +1505,7 @@ border-left: 1px solid black;
 .wallpaper .wallpaperRemove {
   cursor: pointer;
   border-top: 1px solid black;
-  padding: 4px 0 0 0;
+  padding: 0;
 }
 .wallpaper .wallpaperRemove img {
   width: 18px;
@@ -1624,10 +1629,10 @@ input[type="range"]::-webkit-slider-thumb {
 .color-swatches {
   margin-top: 10px;
 }
+
 .presets {
 	margin-top: 10px;
 }
-
 .presets span {
 	font-size:12px;
 	font-weight:500;
@@ -2425,6 +2430,12 @@ a[data-role="forgot-password"] {
 	width: 55px;
 	line-height: 55px;
 	}
+	.facebook b {
+	font-size: 40px;
+	}
+	.facebook span {
+	line-height: 20px;
+	}
 	form {
 	max-width: 90%;
 	
@@ -2504,4 +2515,12 @@ margin: 9px;
 #keyhint {
 	display:none;
 }
+.projectList .projectItem {
+	width:100%;
+	margin: 20px 0;
+}
+.projectList .room {
+width: 100%;
+height: 260px;
+}
 }
\ No newline at end of file
diff --git a/public/assets/stylesheets/staff.css b/public/assets/stylesheets/staff.css
index 720eb0a..de31571 100644
--- a/public/assets/stylesheets/staff.css
+++ b/public/assets/stylesheets/staff.css
@@ -28,7 +28,7 @@ nav {
   text-align: left;
 }
 nav a {
-  margin-left: 20px;
+  margin-left: 10px;
 }
 hr {
   border: 1px solid #bbb;
diff --git a/server/index.js b/server/index.js
index c2df4ca..5eb275d 100644
--- a/server/index.js
+++ b/server/index.js
@@ -133,6 +133,7 @@ site.route = function () {
 	app.delete('/api/layout/destroy', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.layouts.destroy)
 
 	app.get('/api/project', middleware.ensureAuthenticated, api.projects.index)
+	app.get('/api/project/paginate', views.projectsPaginate)
 	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)
diff --git a/server/lib/api/projects.js b/server/lib/api/projects.js
index c04f4f6..47e0458 100644
--- a/server/lib/api/projects.js
+++ b/server/lib/api/projects.js
@@ -67,6 +67,8 @@ var projects = {
 			return docs.create(req, res)
 		}
 
+    var data = util.cleanQuery(req.body)
+
     if (req.files.thumbnail) {
       upload.put("projects", req.files.thumbnail, {
         unacceptable: function(err){
@@ -86,8 +88,6 @@ var projects = {
 			Project.findOne({ _id: _id }, function(err, doc){
 				if (err || ! doc) { return res.json({ error: err }) }
 
-        var data = util.cleanQuery(req.body)
-
         // data.user_id = req.user._id
         data.name = util.sanitize(data.name)
         if (data.name != doc.name) {
diff --git a/server/lib/views/index.js b/server/lib/views/index.js
index 5b1a72e..eacff1f 100644
--- a/server/lib/views/index.js
+++ b/server/lib/views/index.js
@@ -78,27 +78,16 @@ var views = module.exports = {
 	},
 
 	home: function (req, res) {
-		if (req.user) {
-			Project.find({ featured: true })
-				.sort('-created_at')
-				.limit(6)
-				.exec(function(err, projects){
-					projects = projects.map(function(project){
-						project = project.toObject()
-						project.date = moment(project.updated_at).format("M/DD/YYYY")
-						if (! project.colors || project.colors.wall && project.colors.wall[0] == project.colors.wall[1] && project.colors.wall[1] == project.colors.wall[2] && project.colors.wall[2] > 238) {
-							project.color = [238,238,238]
-						} else {
-							project.color = project.colors.wall
-						}
-						return project
-					})
-					res.render('home', { projects: projects || [] })
-				})
-		}
-		else {
-			res.send("<html></html>")
+	  // while in development, blank homepage if not logged in
+		if (! req.user) {
+		  res.send("<html></html>")
+		  return
 		}
+    views_middleware.fetchProjects({ featured: true }, null, null, function(err, projects){
+      res.render('home', {
+        projects: projects || []
+      })
+    })
 	},
 
 	docs: function (req, res){
@@ -131,45 +120,93 @@ var views = module.exports = {
 
 	profile: function (req, res) {
 		var username = req.params.username || (req.user && req.user.username)
+		var user, isOwnProfile = false
 		if (username) {
-			User.findOne({ username: username }, function (err, user) {
-				user ? next(user) : done(err, {}, [])
+			User.findOne({ username: username }, function (err, profileUser) {
+				if (profileUser) {
+				  user = profileUser
+				  isOwnProfile = (String(user._id) == (req.user && String(req.user._id)))
+				  next()
+				}
+				else {
+				  done(err, [])
+				}
 			})
 		}
 		else {
 			done()
 		}
 
-		function next(user){
+		function next(){
 			var criteria = { user_id: user._id }
-			if ( ! (req.user && req.user._id && req.user._id == user._id) ) {
+			if ( ! isOwnProfile ) {
 				criteria.privacy = false
 			}
-			Project.find(criteria)
-				.sort('-created_at')
-				.exec(function(err, projects){
-					projects = projects.map(function(project){
-						project = project.toObject()
-						project.date = moment(project.updated_at).format("M/DD/YYYY")
-						if (! project.colors || project.colors.wall && project.colors.wall[0] == project.colors.wall[1] && project.colors.wall[1] == project.colors.wall[2] && project.colors.wall[2] > 238) {
-							project.color = [238,238,238]
-						} else {
-							project.color = project.colors.wall
-						}
-						return project
-					})
-					done(err, user, projects)
-				})
+			views_middleware.fetchProjects(criteria, null, null, done)
 		}
 
-		function done(err, user, projects){
+		function done(err, projects){
 			if (! user) { return res.redirect('/') }
 			res.render('profile', {
-			  isOwnProfile: String(user._id) == (req.user && String(req.user._id)),
+			  isOwnProfile: isOwnProfile,
 				profile: user,
 				projects: projects || [],
 			})
 		}
-	}
+	},
+	
+	projectsPaginate: function(req, res) {
+    var criteria = {}
+    var offset = Number(req.query.offset || 0)
+    var user_id, isOwnProfile
+
+	  if (req.query.home) {
+	    criteria.featured = true
+	    criteria.privacy = false
+	  }
+	  else if (req.query.user_id) {
+      user_id = req.query.user_id
+      isOwnProfile = (String(user_id) == (req.user && String(req.user._id)))
+
+      criteria.user_id = user_id
+      if ( ! isOwnProfile ) {
+        criteria.privacy = false
+      }
+    }
+    else {
+      res.end("")
+      return
+    }
+
+    views_middleware.fetchProjects(criteria, null, offset, function(err, projects){
+			res.render('projects/list-projects', {
+				projects: projects || []
+			})
+    })
+	},
+
+}
 
-}
\ No newline at end of file
+var views_middleware = {
+  fetchProjects: function (criteria, limit, offset, next) {
+    limit = limit || 7
+    offset = offset || 0
+    Project.find(criteria)
+      .sort('-created_at')
+      .skip(offset)
+      .limit(limit)
+      .exec(function(err, projects){
+        projects = projects.map(function(project){
+          project = project.toObject()
+          project.date = moment(project.updated_at).format("M/D/YYYY")
+          if (! project.colors || project.colors.wall && project.colors.wall[0] == project.colors.wall[1] && project.colors.wall[1] == project.colors.wall[2] && project.colors.wall[2] > 238) {
+            project.color = [238,238,238]
+          } else {
+            project.color = project.colors.wall
+          }
+          return project
+        })
+        next(err, projects)
+      })
+  }
+}
diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs
index d92d34c..7ef0b6a 100644
--- a/views/controls/builder/info.ejs
+++ b/views/controls/builder/info.ejs
@@ -1,4 +1,4 @@
-<div class="vvbox active settings info active" id="builderInfo">
+<div class="vvbox settings info" id="builderInfo">
 	<div class="setting number">
 		<label for="room-width">width</label>
 		<input type="text" class="units" name="width" id="room-width">
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs
index 8f42d8d..8b20464 100644
--- a/views/controls/editor/light-control.ejs
+++ b/views/controls/editor/light-control.ejs
@@ -21,20 +21,4 @@
       <div class="swatch" id="outline-color" data-mode="outline"></div><label>outlines</label>
     </span>
   </div>
-
-  <h4>Preset Styles</h4>
-  <div class="presets">
-    <span data-preset="wireframe">
-      Wireframe
-    </span>
-    <span data-preset="shaded">
-      Shaded
-    </span>
-    <span data-preset="inverse">
-      Inverse
-    </span>
-    <span data-preset="pfunk">
-      P.Funk
-    </span>
-  </div>
 </div>
diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs
new file mode 100644
index 0000000..a41c527
--- /dev/null
+++ b/views/controls/editor/presets.ejs
@@ -0,0 +1,17 @@
+<div class="vvbox" id="presets">
+  <h4>Preset Styles</h4>
+  <div class="presets">
+    <span data-preset="wireframe">
+      Wireframe
+    </span>
+    <span data-preset="shaded">
+      Shaded
+    </span>
+    <span data-preset="inverse">
+      Inverse
+    </span>
+    <span data-preset="pfunk">
+      P.Funk
+    </span>
+  </div>
+</div>
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs
index c914970..47d7c3c 100644
--- a/views/controls/editor/toolbar.ejs
+++ b/views/controls/editor/toolbar.ejs
@@ -4,6 +4,10 @@
 		data-role='open-media-viewer'
 		data-info="add media"
 		class="ion-ios7-photos-outline"></span>
+  <span
+    data-role='toggle-presets'
+    data-info="preset styles"
+    class="ion-ios7-briefcase-outline"></span>
 <!-- 
 	<span
 		data-role='resize-media'
@@ -22,10 +26,14 @@
 		data-role='toggle-light-control'
 		data-info="edit room colors"
 		class="ion-ios7-sunny-outline"></span>
+  <span
+    data-role='toggle-text-editor'
+    data-info="add text to wall"
+    class="ion-ios7-compose-outline"></span>
 	<span
-		data-role='toggle-text-editor'
-		data-info="add text to wall"
-		class="ion-ios7-compose-outline"></span>
+		data-role='toggle-map-view'
+		data-info="toggle map view"
+		class="ion-ios7-world-outline"></span>
 	<span
 		data-role='toggle-project-settings'
 		data-info="room settings"
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs
index d54b9c1..ac025b5 100644
--- a/views/controls/editor/wallpaper.ejs
+++ b/views/controls/editor/wallpaper.ejs
@@ -4,10 +4,10 @@
 	<span class="txt" style="margin-bottom:7px">Add custom wallpaper to walls. Begin by uploading a pattern. Or try one of these -> </span>
 	
   <span class="swatches">
-  	  <span class="swatch"></span>
-			<span class="swatch"></span>
-			<span class="swatch"></span>
-			<span class="swatch"></span>
+  	  <span class="swatch" style="background-image:url(/assets/img/offbeatrepeat.jpg)"></span>
+			<span class="swatch" style="background-image:url(/assets/img/plainpattern3.png)"></span>
+			<span class="swatch" style="background-image:url(/assets/img/plainpattern.png)"></span>
+			<span class="swatch" style="background-image:url(/assets/img/plainpattern2.png)"></span>
   </span>
   
   <div class="wallpaperUpload toolButton">
diff --git a/views/editor.ejs b/views/editor.ejs
index 24f617c..c0562e9 100755
--- a/views/editor.ejs
+++ b/views/editor.ejs
@@ -13,6 +13,7 @@
 
 		<div id="editorView">
 			[[ include controls/editor/toolbar ]]
+			[[ include controls/builder/info ]]
 			[[ include controls/editor/media-drawer ]]
 			[[ include controls/editor/media-editor ]]
 			[[ include controls/editor/wallpaper ]]
@@ -20,6 +21,7 @@
 			[[ include controls/editor/text-editor ]]
 			[[ include controls/editor/collaborators ]]
 			[[ include controls/editor/settings ]]
+			[[ include controls/editor/presets ]]
 		</div>
 
 		<div id="minimap" class="vvbox" data-intro="Mini-map shows your position and orientation in a room. Navigate with WASD keys or drag here." data-position="top">
diff --git a/views/home.ejs b/views/home.ejs
index 16b00e7..8910070 100755
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -65,8 +65,6 @@
 
 	[[ include projects/list-projects ]]
 
-	<a href="#loadmore" class="viewMore btn">View More</a>
-
 	[[ include partials/confirm-modal ]]	
 	[[ include projects/layouts-modal ]]	
 	[[ include partials/sign-in ]]
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 21bed03..07ee7a5 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -107,6 +107,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaEditor.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaUpload.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaViewer.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/editor/Presets.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/TextEditor.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/WallpaperPicker.js"></script>
 
diff --git a/views/profile.ejs b/views/profile.ejs
index 2909fb8..1be0702 100644
--- a/views/profile.ejs
+++ b/views/profile.ejs
@@ -49,8 +49,6 @@
 		<h1>[[- profile.username ]] has [[- projects.length ]] project[[- projects.length != 1 ? "s" : "" ]]</h1>
 	
     [[ include projects/list-projects ]]
-
-    <a href="#" class="viewMore btn">view more</a>
   [[ } else { ]]
 	
     <h1>Welcome to VVALLS</h1>
diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs
index 9dbd7d2..5ecaec1 100644
--- a/views/projects/list-projects.ejs
+++ b/views/projects/list-projects.ejs
@@ -1,13 +1,13 @@
 [[ if (projects.length) { ]]
-		
+	
 	<div class="projectList">
 
 		[[ projects.forEach(function(project, i) { ]]
-
+		  [[ if (i > 5) { return } ]]
       [[ if (String(user._id) == String(project.user_id)) { ]]
-      <a href="/project/[[- project.slug ]]/edit" class="projectItem">
+      <a href="/project/[[- project.slug ]]/edit" class="projectItem" data-userid="[[- project.user_id ]]">
       [[ } else { ]]
-      <a href="/project/[[- project.slug ]]" class="projectItem">
+      <a href="/project/[[- project.slug ]]" class="projectItem" data-userid="[[- project.user_id ]]">
       [[ } ]]
 
 			<span class="room" style="background-color: rgb([[- project.color ]]);">
@@ -30,6 +30,11 @@
 
       </a>
 		[[ }) ]]
+
+    [[ if (projects.length > 6) { ]]
+      <a href="#" class="viewMore btn">view more</a>
+    [[ } ]]
+
 	</div>
 
 [[ } ]]