Merge branch 'master' of github.com:okfocus/vvalls

42 files changed, 439 insertions, 206 deletions

diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js
index d123db3..a319835 100644
--- a/public/assets/javascripts/app.js
+++ b/public/assets/javascripts/app.js
@@ -25,7 +25,7 @@ app.mode = { editor: false, builder: false }
 
 app.init = function () {
 	app.tube = new Tube ()
-	app.router = new Router ()
+	app.router = new SiteRouter ()
 }
 
 app.launch = function () {
diff --git a/public/assets/javascripts/mx/mx.js b/public/assets/javascripts/mx/mx.js
index df9abe7..496aec0 100644
--- a/public/assets/javascripts/mx/mx.js
+++ b/public/assets/javascripts/mx/mx.js
@@ -472,7 +472,7 @@ var MX = MX || (function (undefined) {
 				},
 
 				__toString: function(params, func){
-					this.id = this.id || guid()
+					this.id = this.id || _.uniqueId()
 					var list = [],
 						obj = {},
 						type = this.type || "Object3d",
diff --git a/public/assets/javascripts/mx/primitives/mx.boxDimensions.js b/public/assets/javascripts/mx/primitives/mx.boxDimensions.js
index f3edb13..1d457ae 100644
--- a/public/assets/javascripts/mx/primitives/mx.boxDimensions.js
+++ b/public/assets/javascripts/mx/primitives/mx.boxDimensions.js
@@ -7,7 +7,7 @@ MX.BoxDimensions = MX.Object3D.extend({
 
 		this.type = "BoxDimensions"
 		
-		var id = this.id = opt.id || guid()
+		var id = this.id = opt.id || _.uniqueId()
 		this.x = opt.x || 0
 		this.y = opt.y || 0
 		this.z = opt.z || 0
diff --git a/public/assets/javascripts/mx/primitives/mx.scaleBox.js b/public/assets/javascripts/mx/primitives/mx.scaleBox.js
index 77f45e9..f635345 100644
--- a/public/assets/javascripts/mx/primitives/mx.scaleBox.js
+++ b/public/assets/javascripts/mx/primitives/mx.scaleBox.js
@@ -7,7 +7,7 @@ MX.ScaleBox = MX.Object3D.extend({
 
 		this.type = "ScaleBox"
 		
-		var id = this.id = opt.id || guid()
+		var id = this.id = opt.id || _.uniqueId()
 		this.x = opt.x || 0
 		this.y = opt.y || 0
 		this.z = opt.z || 0
diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js
index 09d1532..46b43a9 100644
--- a/public/assets/javascripts/rectangles/_env.js
+++ b/public/assets/javascripts/rectangles/_env.js
@@ -1,6 +1,8 @@
-
 var environment = new function(){}
 environment.init = function(){
+
+	map = new Map ()
+
 	if (window.scene) {
 		scene.camera.move({
 			"x": 0,
@@ -20,18 +22,18 @@ environment.init = function(){
 	map.center.a = 0
 	map.center.b = 0
 
-	Rooms.list.push( new Room ({
-		rect: new Rect(-500,-500, 500,500),
-		height: 500,
-	}))
-	Rooms.list.push( new Room ({
-		rect: new Rect(600,0, 1100,500),
-		height: 500,
-	}))
-	Rooms.list.push( new Room ({
-		rect: new Rect(450,150, 650,350),
-		height: 300,
-	}))
+// 	Rooms.add( new Room ({
+// 		rect: new Rect(-500,-500, 500,500),
+// 		height: 500,
+// 	}))
+// 	Rooms.add( new Room ({
+// 		rect: new Rect(600,0, 1100,500),
+// 		height: 500,
+// 	}))
+// 	Rooms.add( new Room ({
+// 		rect: new Rect(450,150, 650,350),
+// 		height: 300,
+// 	}))
 	
 	app.movements.gravity(true)
 	
diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index b62a813..855ca5d 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -3,7 +3,7 @@
 
 window.ctx = window.w = window.h = null;
 
-var map = new function(){
+var Map = function(){
 	var base = this
 	base.el = document.querySelector("#map")
 	
@@ -31,6 +31,9 @@ var map = new function(){
 	var w = window.w = canvas.width = base.dimensions.a
 	var h = window.h = canvas.height = base.dimensions.b
 	document.querySelector("#map").appendChild(canvas)
+	
+	base.draw = new MapDraw (base)
+	base.ui = new MapUI (base)
 
 	base.update = function(){
 		base.draw.animate()
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index ec60d31..75e8ad1 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -1,33 +1,33 @@
 
-map.draw = new function(){
+var MapDraw = function(map){
 
-	var base = this
+	var draw = this
 
-	base.animate = function(){
+	draw.animate = function(){
 		ctx.save()
-		map.draw.clear_canvas()
-		map.draw.ruler()
+		draw.clear_canvas()
+		draw.ruler()
 
 		ctx.translate( map.bounds.a * 1/2, map.bounds.b * 1/2)
 		ctx.scale( map.zoom, map.zoom )
 		ctx.translate( map.center.a,  map.center.b)
 		ctx.scale( -1, 1 )
 
-		map.draw.regions(Rooms.regions)
-		map.draw.mouse(map.ui.mouse.cursor)
-		map.draw.coords()
-		scene && map.draw.camera(scene.camera)
+		draw.regions(Rooms.regions)
+		draw.mouse(map.ui.mouse.cursor)
+		draw.coords()
+		scene && draw.camera(scene.camera)
 
 		ctx.restore()
 	}
 
-	base.clear_canvas = function(){
+	draw.clear_canvas = function(){
 		ctx.fillStyle = "rgba(255,255,255,0.9)"
 		ctx.clearRect(0,0,w,h)
 		ctx.fillRect(0,0,w,h)
 	}
 
-	base.ruler = function (){
+	draw.ruler = function (){
 		ctx.strokeStyle = "rgba(80,80,80,0.5)"
 		ctx.lineWidth = 1
 		var len = 5
@@ -37,16 +37,18 @@ map.draw = new function(){
 		}
 	}
 
-	base.regions = function(regions){
+	draw.regions = function(regions){
 		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])
 		}
 	}
 
-	base.mouse = function(mouse){
+	draw.mouse = function(mouse){
 		var radius = 3 / map.zoom
 	
 		ctx.fillStyle = "rgba(255,0,0,0.4)";
@@ -65,7 +67,7 @@ map.draw = new function(){
 		}
 	}
 	
-	base.camera = function(cam){
+	draw.camera = function(cam){
  		ctx.lineWidth = 0.5
 
 		ctx.save()
@@ -88,7 +90,7 @@ map.draw = new function(){
 		ctx.restore()
 	}
 
-	base.coords = function(){
+	draw.coords = function(){
 		ctx.fillStyle = "#888";
 		dot_at(0,0)
 		ctx.fillStyle = "#bbb";
diff --git a/public/assets/javascripts/rectangles/engine/map/ui.js b/public/assets/javascripts/rectangles/engine/map/ui.js
index 6e9a5ab..63e8e18 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui.js
@@ -1,5 +1,5 @@
 
-map.ui = new function(){
+var MapUI = function(map){
 
 	var base = this
 
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
index 411a093..a51edb9 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
@@ -2,7 +2,7 @@ var Rooms = new function(){
 	
 	var base = this
 	
-	base.list = []
+	base.list = {}
 	base.regions = []
 
 	base.init = function(){
@@ -12,30 +12,83 @@ var Rooms = new function(){
 	}
 	
 	base.filter = function(f){
-		return base.list.filter(f)
+		return _.values(base.list).filter(f)
+	}
+	
+	base.add = function(room){
+		base.list[room.id] = room
 	}
 	
 	base.add_with_rect = function(rect){
 		var room = new Room({
-			id: base.list.length,
 			rect: rect,
-			height: quantize(randrange(300,800), 50),
+			height: 500 // quantize(randrange(300,800), 50),
 		})
-		base.list.push(room)
+		base.add(room)
+	}
+	
+	base.remove = function(room){
+		delete base.list[room.id]
+	}
+	
+	base.count = function(){
+		return this.values().length
 	}
 	
 	base.forEach = function(f){
-		return base.list.forEach(f)
+		return base.values().forEach(f)
+	}
+	base.map = function(f){
+		return base.values().map(f)
+	}
+	
+	base.values = function(){
+		return _.values(base.list)
 	}
+	
+	base.serialize = function(){
+		var rooms = base.map(function(room){
+			return room.serialize()
+		})
+		var rooms_data = { rooms: rooms }
+		return rooms_data
+	}
+	
+	base.deserialize = function(rooms_data){
+		rooms_data.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
+			})
+			base.add(room)
+		})
+	}
+
+	base.uid = (function(){
+		var id = 0
+		return function(s){
+			s = s || ""
+			var ss
+			while (1) {
+				ss = s + (id++)
+				if (! (ss in base.list)) {
+					return ss
+				}
+			}
+		}
+	})()
+
 
 	base.sorted_by_position = function(){
-		return sort_rooms_by_position( base.list )
+		return sort_rooms_by_position( base.values() )
 	}
 	base.sorted_by_height = function(){
-		return sort_rooms_by_height( base.list )
+		return sort_rooms_by_height( base.values() )
 	}
 	base.sorted_by_area = function(){
-		return sort_rooms_by_area( base.list )
+		return sort_rooms_by_area( base.values() )
 	}
 
 }
diff --git a/public/assets/javascripts/rectangles/engine/rooms/clipper.js b/public/assets/javascripts/rectangles/engine/rooms/clipper.js
index 8989ba8..0854013 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/clipper.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/clipper.js
@@ -20,7 +20,7 @@ Rooms.clipper = new function(){
 	
 	// Given a set of overlapping rooms, clip any intersections, then cull any duplicate polygons
 	base.solve_rects = function(){
-		if (Rooms.list.length == 0) return
+		if (Rooms.count() == 0) return
 		
 		base.reset_rects()
 		base.clip_rects()
@@ -31,9 +31,9 @@ Rooms.clipper = new function(){
 	
 	// Reset the clipping/culling states of each of the rooms
 	base.reset_rects = function(){
-		for (var i = 0; i < Rooms.list.length; i++) {
-			Rooms.list[i].reset()
-		}
+		Rooms.forEach(function(room){
+			room.reset()
+		})
 	}
 
 	// Compare each room to the rooms it overlaps, and subdivide
diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js
index 7a2ac6f..cb14e66 100644
--- a/public/assets/javascripts/rectangles/models/rect.js
+++ b/public/assets/javascripts/rectangles/models/rect.js
@@ -94,6 +94,9 @@ window.Rect = (function(){
 		var s = "[" + this.x.toString() + " " + this.y.toString() + "] " + sides
 		return s
 	}
+	Rect.prototype.serialize = function(){
+		return { x: this.x.serialize(), y: this.y.serialize() }
+	}
 	Rect.prototype.quantize = function(n){
 		this.x.quantize(n)
 		this.y.quantize(n)
diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js
index 731411c..d0478b3 100644
--- a/public/assets/javascripts/rectangles/models/room.js
+++ b/public/assets/javascripts/rectangles/models/room.js
@@ -1,7 +1,7 @@
 window.Room = (function(){
 
 	var Room = function(opt){
-		this.id = opt.id || Rooms.list.length
+		this.id = opt.id || Rooms.uid("room_")
 		this.rect = opt.rect
 		this.regions = []
 		this.walls = []
@@ -15,7 +15,15 @@ window.Room = (function(){
 	Room.prototype.toString = function(){
 		return this.rect.toString()
 	}
-
+	
+	Room.prototype.serialize = function(){
+		return {
+			id: this.id,
+			rect: this.rect.serialize(),
+			height: ~~this.height,
+		}
+	}
+	
 	Room.prototype.reset = function(){
 		var copy = this.rect.clone()
 		copy.id = this.id
diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js
index 9b0447c..e56a010 100644
--- a/public/assets/javascripts/rectangles/models/vec2.js
+++ b/public/assets/javascripts/rectangles/models/vec2.js
@@ -91,6 +91,9 @@ vec2.prototype.intersection = function(v){
 vec2.prototype.toString = function(){
 	return "[" + ~~this.a + " " + ~~this.b + "]"
 }
+vec2.prototype.serialize = function(){
+	return [ ~~this.a, ~~this.b ]
+}
 vec2.prototype.quantize = function(n){
 	n = n || 10
 	this.a = quantize(this.a, n)
diff --git a/public/assets/javascripts/rectangles/util/colors.js b/public/assets/javascripts/rectangles/util/colors.js
index d970b0b..58553b1 100644
--- a/public/assets/javascripts/rectangles/util/colors.js
+++ b/public/assets/javascripts/rectangles/util/colors.js
@@ -44,7 +44,7 @@
 	var select = document.querySelector("#palette")
 	select && select.addEventListener("change", function(){
 		colors = color_palettes[select.value]
-		Rooms.list.forEach(function(room){
+		Rooms.forEach(function(room){
 			room.walls.forEach(function(wall){
 				wall.randomize_colors()
 			})
diff --git a/public/assets/javascripts/rectangles/util/sort.js b/public/assets/javascripts/rectangles/util/sort.js
index 0985b75..a0665ae 100644
--- a/public/assets/javascripts/rectangles/util/sort.js
+++ b/public/assets/javascripts/rectangles/util/sort.js
@@ -64,7 +64,7 @@ function sort_rooms_by_position(list){
 function sort_rooms_by_area(list){
 	return list.map(room_area_tuple)
 	           .sort(compare_car)
-				     .map(cdr)
+	           .map(cdr)
 }
 
 function sort_rects_by_position(list){
diff --git a/public/assets/javascripts/ui/BuilderView.js b/public/assets/javascripts/ui/BuilderView.js
deleted file mode 100644
index c91d9ee..0000000
--- a/public/assets/javascripts/ui/BuilderView.js
+++ /dev/null
@@ -1,23 +0,0 @@
-
-var BuilderView = View.extend({
-	el: "#builderView",
-
-	events: {
-		"click [data-role='toggle-map-view']": 'toggleMap',
-		"click [data-role='toggle-layout-settings']": 'toggleSettings',
-	},
-
-	load: function(){
-		$("#map").show()
-	},
-	
-	toggleMap: function(){
-		map.toggle()
-	},
-	
-	toggleSettings: function(){
-		this.$(".settings").toggleClass("active")
-	},
-
-})
-
diff --git a/public/assets/javascripts/ui/Router.js b/public/assets/javascripts/ui/SiteRouter.js
index 5b75162..c02b19c 100644
--- a/public/assets/javascripts/ui/Router.js
+++ b/public/assets/javascripts/ui/SiteRouter.js
@@ -1,5 +1,5 @@
 
-var Router = View.extend({
+var SiteRouter = Router.extend({
 	el: "body",
 	
 	events: {
@@ -26,8 +26,6 @@ var Router = View.extend({
 	},
 
 	initialize: function(){
-		this.builderView = new BuilderView()
-		this.editorView = new EditorView()
 		this.signUpModal = new SignUpModal()
 		this.signInModal = new SignInModal()
 		this.newProjectModal = new NewProjectModal()
@@ -37,40 +35,24 @@ var Router = View.extend({
 		this.confirmModal = new ConfirmModal()
 		this.alertModal = new AlertModal()
 		
-		this.originalPath = window.location.pathname
+		this.route()
 		
-		var path = window.location.pathname.split("/")
-		// console.log(path)
-		for (var route in this.routes) {
-			var routePath = route.split("/")
-			if (routePath[1] == path[1]) {
-				if (routePath[2] && routePath[2].indexOf(":") !== -1 && path[2] && (path[3] === routePath[3]) ) {
-					this[this.routes[route]](null, path[2])
-					break;
-				}
-				else if (routePath[2] == path[2]) {
-					this[this.routes[route]](null)
-					break;
-				}
-				else if (! routePath[2] && (! path[2].length || ! path[2])) {
-					this[this.routes[route]](null)
-					break;
-				}
-			}
-		}
-
 		$("body").removeClass("loading")
 	},
 	
 	launchBuilder: function(){
 		app.mode.builder = true
 		app.launch()
+
+		this.builderView = new BuilderView()
 		this.builderView.load()
 	},
 
 	launchEditor: function(){
 		app.mode.editor = true
 		app.launch()
+
+		this.editorView = new EditorView()
 		this.editorView.load()
 	},
 	
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
new file mode 100644
index 0000000..004c1c4
--- /dev/null
+++ b/public/assets/javascripts/ui/builder/BuilderSettings.js
@@ -0,0 +1,20 @@
+
+var BuilderSettings = View.extend({
+	el: "#builderSettings",
+
+	events: {
+	},
+	
+	initialize: function(){
+	},
+
+	toggle: function(){
+		this.$el.toggleClass("active")
+	},
+	
+	save: function(){
+		var data = Rooms.serialize()
+		console.log(data)
+	}
+
+})
diff --git a/public/assets/javascripts/ui/builder/BuilderToolbar.js b/public/assets/javascripts/ui/builder/BuilderToolbar.js
new file mode 100644
index 0000000..42d4306
--- /dev/null
+++ b/public/assets/javascripts/ui/builder/BuilderToolbar.js
@@ -0,0 +1,42 @@
+
+var BuilderToolbar = View.extend({
+	el: "#builderToolbar",
+
+	events: {
+		"click [data-role='toggle-map-view']": 'toggleMap',
+		"click [data-role='toggle-layout-settings']": 'toggleSettings',
+		"click [data-role='undo']": 'undo',
+		"click [data-role='draw']": 'draw',
+		"click [data-role='resize']": 'resize',
+		"click [data-role='move']": 'move',
+		"click [data-role='delete']": 'delete',
+	},
+	
+	initialize: function(opt){
+		this.parent = opt.parent
+	},
+
+	toggleMap: function(){
+		map.toggle()
+	},
+	
+	toggleSettings: function(){
+		this.parent.settings.toggle()
+	},
+	
+	undo: function(){
+	},
+	
+	draw: function(){
+	},
+	
+	resize: function(){
+	},
+	
+	move: function(){
+	},
+	
+	delete: function(){
+	},
+
+})
diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js
new file mode 100644
index 0000000..d0659bb
--- /dev/null
+++ b/public/assets/javascripts/ui/builder/BuilderView.js
@@ -0,0 +1,17 @@
+
+var BuilderView = View.extend({
+	el: "#builderView",
+
+	events: {
+	},
+	
+	initialize: function(){
+		this.toolbar = new BuilderToolbar ({ parent: this })
+		this.settings = new BuilderSettings ({ parent: this })
+	},
+
+	load: function(){
+		$("#map").show()
+	},
+
+})
diff --git a/public/assets/javascripts/ui/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 91329de..91329de 100644
--- a/public/assets/javascripts/ui/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
diff --git a/public/assets/javascripts/ui/AlertModal.js b/public/assets/javascripts/ui/lib/AlertModal.js
index c5693ad..c5693ad 100644
--- a/public/assets/javascripts/ui/AlertModal.js
+++ b/public/assets/javascripts/ui/lib/AlertModal.js
diff --git a/public/assets/javascripts/ui/ConfirmModal.js b/public/assets/javascripts/ui/lib/ConfirmModal.js
index 868ce8e..868ce8e 100644
--- a/public/assets/javascripts/ui/ConfirmModal.js
+++ b/public/assets/javascripts/ui/lib/ConfirmModal.js
diff --git a/public/assets/javascripts/vendor/ModalFormView.js b/public/assets/javascripts/ui/lib/ModalFormView.js
index d084031..d084031 100644
--- a/public/assets/javascripts/vendor/ModalFormView.js
+++ b/public/assets/javascripts/ui/lib/ModalFormView.js
diff --git a/public/assets/javascripts/vendor/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js
index b90b3c4..b90b3c4 100644
--- a/public/assets/javascripts/vendor/ModalView.js
+++ b/public/assets/javascripts/ui/lib/ModalView.js
diff --git a/public/assets/javascripts/ui/lib/Router.js b/public/assets/javascripts/ui/lib/Router.js
new file mode 100644
index 0000000..d06c07a
--- /dev/null
+++ b/public/assets/javascripts/ui/lib/Router.js
@@ -0,0 +1,28 @@
+var Router = View.extend({
+
+	route: function(){
+
+		this.originalPath = window.location.pathname
+		
+		var path = window.location.pathname.split("/")
+		// console.log(path)
+		for (var route in this.routes) {
+			var routePath = route.split("/")
+			if (routePath[1] == path[1]) {
+				if (routePath[2] && routePath[2].indexOf(":") !== -1 && path[2] && (path[3] === routePath[3]) ) {
+					this[this.routes[route]](null, path[2])
+					break;
+				}
+				else if (routePath[2] == path[2]) {
+					this[this.routes[route]](null)
+					break;
+				}
+				else if (! routePath[2] && (! path[2].length || ! path[2])) {
+					this[this.routes[route]](null)
+					break;
+				}
+			}
+		}
+	}
+
+})
diff --git a/public/assets/javascripts/vendor/view.js b/public/assets/javascripts/ui/lib/view.js
index 823a75b..823a75b 100644
--- a/public/assets/javascripts/vendor/view.js
+++ b/public/assets/javascripts/ui/lib/view.js
diff --git a/public/assets/javascripts/ui/DocumentModal.js b/public/assets/javascripts/ui/site/DocumentModal.js
index 6f16169..6f16169 100644
--- a/public/assets/javascripts/ui/DocumentModal.js
+++ b/public/assets/javascripts/ui/site/DocumentModal.js
diff --git a/public/assets/javascripts/ui/EditProfileModal.js b/public/assets/javascripts/ui/site/EditProfileModal.js
index 6b89ad8..6b89ad8 100644
--- a/public/assets/javascripts/ui/EditProfileModal.js
+++ b/public/assets/javascripts/ui/site/EditProfileModal.js
diff --git a/public/assets/javascripts/ui/EditProjectModal.js b/public/assets/javascripts/ui/site/EditProjectModal.js
index 356d8b7..356d8b7 100644
--- a/public/assets/javascripts/ui/EditProjectModal.js
+++ b/public/assets/javascripts/ui/site/EditProjectModal.js
diff --git a/public/assets/javascripts/ui/NewProjectModal.js b/public/assets/javascripts/ui/site/NewProjectModal.js
index cf2044f..cf2044f 100644
--- a/public/assets/javascripts/ui/NewProjectModal.js
+++ b/public/assets/javascripts/ui/site/NewProjectModal.js
diff --git a/public/assets/javascripts/ui/SignInModal.js b/public/assets/javascripts/ui/site/SignInModal.js
index 4c91b54..4c91b54 100644
--- a/public/assets/javascripts/ui/SignInModal.js
+++ b/public/assets/javascripts/ui/site/SignInModal.js
diff --git a/public/assets/javascripts/ui/SignUpModal.js b/public/assets/javascripts/ui/site/SignUpModal.js
index 5c651ee..5c651ee 100644
--- a/public/assets/javascripts/ui/SignUpModal.js
+++ b/public/assets/javascripts/ui/site/SignUpModal.js
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index e5666ca..55e8d37 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -372,6 +372,8 @@ h5{
 }
 .topLinks {
   float: right;
+	z-index: 3;
+	position: relative;
   font-size: 18px;
   padding: 8px;
   margin: 14px;
@@ -384,7 +386,7 @@ h5{
   color: black;
   font-weight: 300;
   text-decoration: none;
-  border-bottom:1px solid white;
+  border-bottom:1px solid transparent;
 }
 .topLinks a:hover {
   border-bottom:1px solid lightgreen;
@@ -533,7 +535,7 @@ h5{
   backface-visibility:         visible;
 }
 #hud {
-	position: absolute;
+	position: fixed;
 	top:0;left:0;
 	z-index: 2;
 }
@@ -647,14 +649,14 @@ h5{
   cursor:pointer;
 }
 
-.menu span.icon-close{
+.menu span.inuse {
   color:white;
   background:black;
   cursor:pointer;
 }
 
-.icon-close:before {
-content: "\e736"!important;
+.menu span.inuse:before {
+	content: "\e736" !important;
 }
 
 .menu span:hover:after{
@@ -671,7 +673,7 @@ content: "\e736"!important;
   font-size: 13px;
 }
 
-.menu span.icon-close:hover:after{
+.menu span.inuse:hover:after{
   content:"";
   opacity:0;
 }
diff --git a/server/index.js b/server/index.js
index 84d9818..9fe8edf 100644
--- a/server/index.js
+++ b/server/index.js
@@ -18,89 +18,109 @@ var http = require('http'),
 	path = require('path'),
 	mongoose = require('mongoose');
 
-// var io = websocket.listen(config.socketPort)
-
-var app = express();
+var app = express()
+var server
 var DATABASE_URI = process.env.MONGOLAB_URI || ('mongodb://' + config.hostName + '/vvalls')
 
-mongoose.connect(DATABASE_URI);
-var SessionStore = new MongoStore({ mongoose_connection: mongoose.connection })
+//
+
+var site = {}
+
+site.init = function(){
+	mongoose.connect(DATABASE_URI, {}, site.ready);
+}
+
+site.ready = function(){
+	auth.init()
+	site.setup()
+	site.route()
+}
+
+site.setup = function(){
+	var SessionStore = new MongoStore({ mongoose_connection: mongoose.connection })
+
+	app.set('port', config.port);
+	app.set('views', path.join(__dirname, '../views'));
+	app.set('view engine', 'ejs');
+	app.use(express.static(path.join(__dirname, '../public')));
+	app.use(express.logger('dev'));
+	app.use(express.json());
+	app.use(express.urlencoded());
+	app.use(express.cookieParser());
+	app.use(express.session({
+			key: 'vvalls.sid',
+			secret: 'flibbertigibbet',
+			cookie: { domain: '.' + config.hostName, maxAge: 43200000 },
+			store: SessionStore
+	}));
+	app.use(bodyParser());
+	app.use(multer());
+	app.use(express.query());
+	app.use(express.csrf());
+	app.use(express.methodOverride());
+	app.use(passport.initialize());
+	app.use(passport.session());
+	// app.use('/api', middleware.ensureAuthenticated, mers({conn: mongoose.connection}).rest());
+	app.use(app.router);
+	app.get('env') === 'development' && app.use(express.errorHandler());
+
+	// Essential middleware
+	// app.all('*', middleware.enableCORS);
+	app.all('*', middleware.ensureLocals);
 
-// Configure things
-app.set('port', config.port);
-app.set('views', path.join(__dirname, '../views'));
-app.set('view engine', 'ejs');
-app.use(express.static(path.join(__dirname, '../public')));
-app.use(express.logger('dev'));
-app.use(express.json());
-app.use(express.urlencoded());
-app.use(express.cookieParser());
-app.use(express.session({
-    key: 'vvalls.sid',
-    secret: 'flibbertigibbet',
-    cookie: { domain: '.' + config.hostName, maxAge: 43200000 },
-    store: SessionStore
-}));
-app.use(bodyParser());
-app.use(multer());
-app.use(express.query());
-app.use(express.csrf());
-app.use(express.methodOverride());
-app.use(passport.initialize());
-app.use(passport.session());
-// app.use('/api', middleware.ensureAuthenticated, mers({conn: mongoose.connection}).rest());
-app.use(app.router);
-app.get('env') === 'development' && app.use(express.errorHandler());
+	server = http.createServer(app)
+	server.listen(app.get('port'), function () {
+		console.log('Express server listening on port ' + app.get('port'));
+	});
 
+	// var io = websocket.listen(server)
+	// auth.initSockets(io, SessionStore)
+}
 
-// Configure user authentication
-auth.init()
+site.route = function () {
+	app.get('/', views.home);
+	app.get('/about', views.docs);
+	app.get('/about/:name/edit', views.docs);
+	app.get('/about/:name', views.docs);
+	app.get('/login', views.modal);
+	app.get('/signup', views.modal);
+	app.post('/auth/signin', auth.loggedInLocal);
+	app.post('/auth/signup', auth.signup);
+	app.get('/logout', auth.logout);
+	app.get('/auth/twitter', auth.login('twitter'));
+	app.get('/auth/twitter/callback', auth.loggedIn('twitter'));
+	app.get('/auth/facebook', auth.login('facebook'));
+	app.get('/auth/facebook/callback', auth.loggedIn('facebook'));
+	app.get('/profile', views.profile)
+	app.get('/profile/edit', views.profile)
+	app.get('/profile/:name', views.profile)
 
-// Essential middleware
-// app.all('*', middleware.enableCORS);
+	app.get('/api/profile', middleware.ensureAuthenticated, api.profile.show)
+	app.put('/api/profile', middleware.ensureAuthenticated, api.profile.update)
 
-app.all('*', middleware.ensureLocals);
+	app.get('/project/new', middleware.ensureAuthenticated, views.modal);
 
-// Initialize views
-app.get('/', views.home);
-app.get('/about', views.docs);
-app.get('/about/:name/edit', views.docs);
-app.get('/about/:name', views.docs);
-app.get('/login', views.modal);
-app.get('/signup', views.modal);
-app.post('/auth/signin', auth.loggedInLocal);
-app.post('/auth/signup', auth.signup);
-app.get('/logout', auth.logout);
-app.get('/auth/twitter', auth.login('twitter'));
-app.get('/auth/twitter/callback', auth.loggedIn('twitter'));
-app.get('/auth/facebook', auth.login('facebook'));
-app.get('/auth/facebook/callback', auth.loggedIn('facebook'));
-app.get('/profile', views.profile)
-app.get('/profile/edit', views.profile)
-app.get('/profile/:name', views.profile)
+	app.get('/staff', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.staff.index);
+	app.get('/staff/bless', middleware.ensureAuthenticated, views.staff.bless);
 
-app.get('/api/profile', middleware.ensureAuthenticated, api.profile.show)
-app.put('/api/profile', middleware.ensureAuthenticated, api.profile.update)
+	app.get('/api/docs', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.docs.show)
+	app.post('/api/docs/new', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.docs.create)
+	app.post('/api/docs/edit', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.docs.update)
+	app.delete('/api/docs/destroy', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.docs.destroy)
 
-app.get('/project/new', middleware.ensureAuthenticated, views.modal);
+	app.use('/builder', middleware.ensureAuthenticated)
+	app.get('/builder', views.builder)
+	app.get('/builder/:name', views.builder)
 
-app.get('/staff', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.staff.index);
-app.get('/staff/bless', middleware.ensureAuthenticated, views.staff.bless);
+	app.get('/api/layout', middleware.ensureAuthenticated, api.layout.index)
+	app.get('/api/layout/show', middleware.ensureAuthenticated, api.layout.show)
+	app.post('/api/layout/new', middleware.ensureAuthenticated, api.layout.create)
+	app.post('/api/layout/edit', middleware.ensureAuthenticated, api.layout.update)
+	app.delete('/api/layout/destroy', middleware.ensureAuthenticated, api.layout.destroy)
 
-app.get('/api/docs', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.docs.show)
-app.post('/api/docs/new', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.docs.create)
-app.post('/api/docs/edit', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.docs.update)
-app.delete('/api/docs/destroy', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.docs.destroy)
 
-app.use('/builder', middleware.ensureAuthenticated)
-app.get('/builder', views.builder)
-app.get('/builder/:name', views.builder)
+}
 
-/*
-auth.initSockets(io)
-*/
 
-http.createServer(app).listen(app.get('port'), function () {
-	console.log('Express server listening on port ' + app.get('port'));
-});
+site.init()
 
diff --git a/server/lib/api.js b/server/lib/api.js
index b89b6ae..2d35f50 100644
--- a/server/lib/api.js
+++ b/server/lib/api.js
@@ -9,7 +9,8 @@ var passport = require('passport'),
 	upload = require('./upload'),
 	config = require('../../config.json'),
 	User = require('./schemas/User'),
-	Documentation = require('./schemas/Documentation');
+	Documentation = require('./schemas/Documentation'),
+	Layout = require('./schemas/Layout');
 
 var api = {
 
@@ -122,6 +123,68 @@ var api = {
 				res.json({ status: "OK" })
 			})
 		}
+	},
+	
+	layout: {
+		index: function(req, res){
+			Layout.find({}, function(err, docs){
+				res.json(docs)
+			})
+		},
+
+		show: function(req, res){
+			Layout.findOne({ name: req.query.name }, function(err, doc){
+				if (doc) {
+					res.json(doc)
+				}
+				else {
+					var name = util.sanitize(req.query.name)
+					if (name == "new") {
+						name = ""
+					}
+					res.json({ name: name, isNew: true })
+				}
+			})
+		},
+
+		create: function(req, res){
+			var data = util.cleanQuery(req.body)
+			data.name = util.sanitize(data.new_name)
+			data.displayName = util.sanitize(data.displayName)
+			delete data.new_name
+			new Layout(data).save(function(err, doc){
+				if (err || ! doc) { return res.json({ error: err }) }
+				res.json(doc)
+			})
+		},
+
+		update: function(req, res){
+			var data = util.cleanQuery(req.body)
+			if (data.name == "new") {
+				return api.docs.create(req, res)
+			}
+			Layout.findOne({ name: data.name }, function(err, doc){
+				if (err || ! doc) { return res.json({ error: err }) }
+				data.name = data.new_name
+				delete data.new_name
+				_.extend(doc, data)
+				doc.save(function(err, doc){
+					if (err || ! doc) { return res.json({ error: err }) }
+					res.json(doc)
+				})
+			})
+		},
+
+		destroy: function(req, res){
+			var name = util.sanitize(req.body.name)
+			if (! name || ! name.length) {
+				res.json({ error: 404 })
+				return
+			}
+			Layout.remove({ name: name }, function(err){
+				res.json({ status: "OK" })
+			})
+		},
 	}
 
 }
diff --git a/server/lib/auth.js b/server/lib/auth.js
index b710a22..018c9ad 100644
--- a/server/lib/auth.js
+++ b/server/lib/auth.js
@@ -5,6 +5,7 @@ var passport = require('passport'),
 	TwitterStrategy = require('passport-twitter').Strategy,
 	LocalStrategy = require('passport-local').Strategy,
 	passportSocketIo = require("passport.socketio"),
+	cookieParser = require('express').cookieParser,
 	crypto = require('crypto'),
 	_ = require('lodash'),
 	util = require('./util'),
@@ -33,9 +34,9 @@ var auth = {
 		}, auth.insertFacebookUser));
 	},
 	
-	initSockets: function (io, cookieParser, SessionStore) {
+	initSockets: function (io, express, SessionStore) {
 		io.set('authorization', passportSocketIo.authorize({
-			cookieParser: express.cookieParser,
+			cookieParser: cookieParser,
 			passport:     passport,
 			key:          'vvalls.sid',        // the name of the cookie where express/connect stores its session_id
 			secret:       'flibbertigibbet',   // the session_secret to parse the cookie
diff --git a/server/lib/schemas/Documentation.js b/server/lib/schemas/Documentation.js
index 0381e0b..482f609 100644
--- a/server/lib/schemas/Documentation.js
+++ b/server/lib/schemas/Documentation.js
@@ -1,6 +1,5 @@
 /* jshint node: true */
 
-
 var mongoose = require('mongoose'),
 	uniqueValidator = require('mongoose-unique-validator'),
 	_ = require('lodash'),
diff --git a/server/lib/schemas/Layout.js b/server/lib/schemas/Layout.js
index 48cd85e..f818ed2 100644
--- a/server/lib/schemas/Layout.js
+++ b/server/lib/schemas/Layout.js
@@ -27,7 +27,7 @@ var LayoutSchema = new mongoose.Schema({
 		type: String,
 		default: ""
 	},
-	rooms: [Schema.Types.Mixed],
+	rooms: [mongoose.Schema.Types.Mixed],
 	user_id: { type: mongoose.Schema.ObjectId, index: true },
 	created_at: { type: Date },
 	updated_at: { type: Date },
diff --git a/views/controls/builder/settings.ejs b/views/controls/builder/settings.ejs
index f92d1c7..c91f7b5 100644
--- a/views/controls/builder/settings.ejs
+++ b/views/controls/builder/settings.ejs
@@ -1,4 +1,4 @@
-<div class="vvbox settings">
+<div class="vvbox settings" id="builderSettings">
 
 	<div class="setting">
 		<a href="#" id="startpoint">
@@ -19,11 +19,11 @@
 	</div>
 	<div class="setting">
 	<div class="radio-group">
-		<input id="opt_1" class="radio-group__option" type="radio" name="opt" checked="checked">
+		<input id="opt_1" class="radio-group__option" type="radio" name="opt" value="public" checked="checked">
 		<label class="radio-group__label" for="opt_1">
 			Everyone
 		</label>
-		<input id="opt_2" class="radio-group__option" type="radio" name="opt">
+		<input id="opt_2" class="radio-group__option" type="radio" name="opt" value="private">
 		<label class="radio-group__label" for="opt_2">
 			Just for me
 		</label>
@@ -37,4 +37,4 @@
 		<a href="#">Clear</a>
 		<a href="#" id="deleteRoom">Delete</a>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/views/controls/builder/toolbar.ejs b/views/controls/builder/toolbar.ejs
index 1d57322..cb6dd60 100644
--- a/views/controls/builder/toolbar.ejs
+++ b/views/controls/builder/toolbar.ejs
@@ -1,27 +1,29 @@
-<div class="edit menu vvbox">
+<div class="edit menu vvbox" id="builderToolbar">
 	<span
 		data-info="add media"
 		class="icon-ios7-photos-outline"></span>
 	<span
-		data-role='undo'
-		data-info="undo"
-		class="icon-reply"></span>
-	<span
 		data-role='create-mode'
 		data-info="draw"
 		class="icon-plus"></span>
 	<span
-		data-role='resize-mode'
-		data-info="resize"
-		class="icon-arrow-resize"></span>
-	<span
 		data-role='move-mode'
 		data-info="move"
 		class="icon-arrow-move"></span>
 	<span
+		data-role='resize-mode'
+		data-info="resize"
+		class="icon-arrow-resize"></span>
+	<span
 		data-role='delete-mode'
 		data-info="delete"
 		class="icon-close"></span>
+<!--
+	<span
+		data-role='undo'
+		data-info="undo"
+		class="icon-reply"></span>
+-->
 	<span
 		data-role='toggle-layout-settings'
 		data-info="layout settings"
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index c80c174..e9ec5a5 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -4,7 +4,6 @@
 <script type="text/javascript" src="/assets/javascripts/vendor/tube.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/loader.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/polyfill.js"></script>
-<script type="text/javascript" src="/assets/javascripts/vendor/view.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/sha1.js"></script>
 <script type="text/javascript" src="/assets/javascripts/util.js"></script>
 
@@ -43,19 +42,26 @@
 <script type="text/javascript" src="/assets/javascripts/mx/extensions/mx.movements.js"></script>
 <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.image.js"></script>
 
-<script type="text/javascript" src="/assets/javascripts/vendor/ModalView.js"></script>
-<script type="text/javascript" src="/assets/javascripts/vendor/ModalFormView.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/lib/View.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/lib/Router.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/lib/ModalView.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/lib/ModalFormView.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/lib/AlertModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/lib/ConfirmModal.js"></script>
 
-<script type="text/javascript" src="/assets/javascripts/ui/Router.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/SignInModal.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/SignUpModal.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/NewProjectModal.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/EditProjectModal.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/EditProfileModal.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/DocumentModal.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/AlertModal.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/ConfirmModal.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/BuilderView.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/EditorView.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/site/SignInModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/site/SignUpModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/site/NewProjectModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/site/EditProjectModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/site/EditProfileModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/site/DocumentModal.js"></script>
+
+<script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderSettings.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderToolbar.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderView.js"></script>
+
+<script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script>
+
+<script type="text/javascript" src="/assets/javascripts/ui/SiteRouter.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/app.js"></script>