merge

31 files changed, 359 insertions, 77 deletions

diff --git a/package.json b/package.json
index b4ac400..adefb82 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,8 @@
     "multer": "~0.1.0",
     "body-parser": "1.3.0",
     "marked": "~0.3.2",
-    "emailjs": "~0.3.6"
+    "emailjs": "~0.3.6",
+    "intro.js": "^0.9.0"
   },
   "devDependencies": {
     "grunt": "~0.4.1",
diff --git a/public/assets/img/keys.png b/public/assets/img/keys.png
new file mode 100644
index 0000000..edb1d5e
--- /dev/null
+++ b/public/assets/img/keys.png
diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js
index a6b6088..98e1820 100644
--- a/public/assets/javascripts/app.js
+++ b/public/assets/javascripts/app.js
@@ -17,6 +17,11 @@ else {
 
 new WOW().init();
 
+
+$('#help-button').click( function(){
+   $('body').chardinJs('start')
+});
+
 var scene, cam, map;
 
 var app = new function(){}
diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index c02c285..4627cd3 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -29,6 +29,8 @@ MX.Movements = function (cam) {
 	
 	var pos = { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0 }
 
+  $(document).one("keydown", function(){ $("#keyhint").fadeOut(250) })
+
 	return {
 
 		init: function () {
diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
index d34e299..69e9ba7 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
@@ -48,7 +48,7 @@ var Scenery = new function(){
 	base.find = function(id){
 		return base.list[id] || null
 	}
-		
+	
 	base.remove = function(id){
 		var scene_media = base.list[id]
 		delete base.list[id]
diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js
index 55d6ef1..7d148cf 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/move.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/move.js
@@ -101,7 +101,7 @@ Scenery.move = function(base){
 
     // TODO: watch individual scenery object here
     Minotaur.watch( app.router.editorView.settings )
-
+  
     oldState = null
 	}
 	
diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js
index 2ba84a1..893237c 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/resize.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js
@@ -57,35 +57,32 @@ Scenery.resize = new function(){
 	
 	// move all the dots to the object's current position
 	base.move_dots = function(){
-		x = obj.mx.x + sin(rotationY) * dot_distance_from_picture
-		y = obj.mx.y
-		z = obj.mx.z - cos(rotationY) * dot_distance_from_picture
+		var x = obj.mx.x + sin(rotationY) * dot_distance_from_picture
+		var y = obj.mx.y
+		var z = obj.mx.z - cos(rotationY) * dot_distance_from_picture
 
 		dots.forEach(function(dot){
-			base.move_dot(dot)
+			base.move_dot(dot, { x: x, y: y, z: z })
 		})
 	}
 		
 	// move a dot .. to the initial position of the image
-	base.move_dot = function(dot){
-		dot.x = x
-		dot.y = y
-		dot.z = z
-		
+	base.move_dot = function(dot, pos){
 		if (dot.side & TOP) {
-			dot.y += obj.mx.height * obj.mx.scale / 2
+			pos.y += obj.dimensions.b / 2
 		}
 		if (dot.side & BOTTOM) {
-			dot.y -= obj.mx.height * obj.mx.scale / 2
+			pos.y -= obj.dimensions.b / 2
 		}
 		if (dot.side & LEFT) {
-			dot.x -= cos(rotationY) * (obj.mx.width * obj.mx.scale) / 2
-			dot.z -= sin(rotationY) * (obj.mx.width * obj.mx.scale) / 2
+			pos.x -= cos(rotationY) * (obj.dimensions.a) / 2
+			pos.z -= sin(rotationY) * (obj.dimensions.a) / 2
 		}
 		if (dot.side & RIGHT) {
-			dot.x += cos(rotationY) * (obj.mx.width * obj.mx.scale) / 2
-			dot.z += sin(rotationY) * (obj.mx.width * obj.mx.scale) / 2
+			pos.x += cos(rotationY) * (obj.dimensions.a) / 2
+			pos.z += sin(rotationY) * (obj.dimensions.a) / 2
 		}
+		dot.move(pos)
 	}
 
 	// pick a new object to focus on and show the dots
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
index 5eed53e..4e5e2c5 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
@@ -33,11 +33,33 @@ Scenery.types.base = Fiber.extend(function(base){
 			var center = this.bounds.center()
 			center.a -= this.dimensions.a / 2
 			center.b -= this.dimensions.b / 2
-			var mx_position = this.wall.positionToMx( center, this.dimensions )
-			this.mx.move(mx_position)
 			this.position.assign(center)
 		},
 		
+		translateTo: function (position){
+      var flipX = this.wall.side & (FRONT | RIGHT)
+      var delta = position.clone().subVec(this.position)
+      delta.a -= this.dimensions.a/2
+      delta.b -= this.dimensions.b/2
+      
+      if (flipX) { delta.a *= -1 }
+
+      var new_bounds = this.wall.surface.translate( this.bounds, this.dimensions, this.position, delta )
+
+      this.position.b += delta.b
+
+      switch (this.wall.side) {
+        case FRONT:
+        case BACK:
+          this.position.a += delta.a * cos(wall_rotation[this.wall.side])
+          break
+        case LEFT:
+        case RIGHT:
+          this.position.a += delta.a * sin(wall_rotation[this.wall.side])
+          break
+      }
+		},
+		
 		bind: function(){
 			this.move.bind()
 			$(this.mx.el).bind({
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js
index d2fa3ab..aa43341 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js
@@ -22,7 +22,14 @@ Scenery.types.image = Scenery.types.base.extend(function(base){
       }
       else {
       	this.set_wall(opt)
-        this.bounds && this.recenter()
+      	if (this.bounds) {
+          this.recenter()
+          if (opt.position) {
+            this.translateTo(opt.position)
+          }
+          var mx_position = this.wall.positionToMx( this.position, this.dimensions )
+          this.mx.move(mx_position)
+        }
       }
 		},
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index 76f32ac..2ef6ec3 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -21,7 +21,14 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
       }
       else {
       	this.set_wall(opt)
-        this.bounds && this.recenter()
+        if (this.bounds) {
+          this.recenter()
+          if (opt.position) {
+            this.translateTo(opt.position)
+          }
+          var mx_position = this.wall.positionToMx( this.position, this.dimensions )
+          this.mx.move(mx_position)
+        }
       }
     },
 
diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js
index 0040435..49613c3 100644
--- a/public/assets/javascripts/rectangles/models/vec2.js
+++ b/public/assets/javascripts/rectangles/models/vec2.js
@@ -37,6 +37,9 @@
 	vec2.prototype.midpoint = function(){
 		return lerp(0.5, this.a, this.b)
 	}
+	vec2.prototype.lerp = function(n){
+	  return lerp(n, this.a, this.b)
+	}
 	vec2.prototype.eq = function(v){
 		return this.a == v.a && this.b == v.b
 	}
@@ -60,9 +63,23 @@
 		this.b /= n
 		return this
 	}
+	vec2.prototype.addVec = function(v){
+	  this.a += v.a
+	  this.b += v.b
+	  return this
+	}
+  vec2.prototype.subVec = function(v){
+	  this.a -= v.a
+	  this.b -= v.b
+	  return this
+	}
 	vec2.prototype.zero = function(){
 		this.a = this.b = 0
 	}
+	vec2.prototype.round = function(){
+	  this.a = Math.round(this.a)
+	  this.b = Math.round(this.b)
+	}
 	vec2.prototype.setPosition = function(n){
 		var len = this.length()
 		this.a = n
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 1b37aa0..fdc8d8c 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -50,13 +50,36 @@
 						index: index,
 					})
 				},
+/*
 				mousemove: function(e){
+          var offset = offsetFromPoint(e, mx.el)
+          if (offset) {
+            var pos = base.mxOffsetToPosition( offset, index )
+            
+            var mx_pos = base.positionToMx(pos, new vec2(5,5))
+            var mx_dot = new MX.Object3D
+            mx_dot.move(mx_pos)
+            mx_dot.width = 5
+            mx_dot.height = 5
+            mx_dot.rotationY = wall_rotation[base.side]
+            mx_dot.el.style.backgroundColor = "red"
+            scene.add(mx_dot)
+          }
 				},
+*/
 				mousedown: function(e){
-					if (Scenery.nextMedia) {
+					if (Scenery.nextText) {
+					}
+					else if (Scenery.nextMedia) {
+            var offset = offsetFromPoint(e, mx.el)
+            if (! offset) { return }
+
+            var pos = base.mxOffsetToPosition( offset, index )
+
             var scenery = Scenery.addNextToWall({
             	wall: base,
-            	index: index
+            	index: index,
+            	position: pos,
             })
             
             // scenery was not placed
@@ -176,7 +199,16 @@
 	  }
 	  return position
 	}
-	
+  Wall.prototype.mxOffsetToPosition = function( offset, index ) {
+    var face = this.surface.faces[index]
+    var shouldFlip = this.side & (RIGHT | FRONT)
+    var position = new vec2(0,0)
+    position.a = face.x.lerp(shouldFlip ? 1-offset.left : offset.left)
+    position.b = face.y.lerp(1-offset.top)
+    position.round()
+    return position
+  }
+
 	Wall.prototype.color = function(color){
 		this.$walls.css("background-color", color)
 	}
diff --git a/public/assets/javascripts/rectangles/util/coords.js b/public/assets/javascripts/rectangles/util/coords.js
new file mode 100644
index 0000000..74b7fda
--- /dev/null
+++ b/public/assets/javascripts/rectangles/util/coords.js
@@ -0,0 +1,33 @@
+function offsetFromPoint(event, element) {
+  function a(width) {
+    var l = 0, r = 200;
+    while (r - l > 0.0001) {
+      var mid = (r + l) / 2;
+      var a = document.createElement('div');
+      a.style.cssText = 'position: absolute;left:0;top:0;background: red;z-index: 1000;';
+      a.style[width ? 'width' : 'height'] = mid.toFixed(3) + '%';
+      a.style[width ? 'height' : 'width'] = '100%';
+      element.appendChild(a);
+      var x = document.elementFromPoint(event.clientX, event.clientY);
+      element.removeChild(a);
+      if (x === a) {
+        r = mid;
+      } else {
+        if (r === 200) {
+          return null;
+        }
+        l = mid;
+      }
+    }
+    return mid;
+  }
+  var l = a(1), 
+      t = a(0);
+  return l && t ? {
+    left: l / 100,
+    top: t / 100,
+    toString: function () {
+      return 'left: ' + l + '%, top: ' + t + '%';
+    }
+  } : null;
+}
diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js
index 4d9a795..d165ccc 100644
--- a/public/assets/javascripts/rectangles/util/minotaur.js
+++ b/public/assets/javascripts/rectangles/util/minotaur.js
@@ -4,7 +4,7 @@
     var base = this
     base.$el = $("#minotaur")
     base.timeout = null
-    base.delay = 5000
+    base.delay = 2500
     base.objects = {}
     
     base.init = function () {
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index eb0d044..fd251b7 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -93,7 +93,7 @@ var EditorSettings = FormView.extend({
 	},
 	
 	clear: function(){
-		Rooms.removeAll()
+		Scenery.removeAll()
 	},
 	
 	destroy: function(){
diff --git a/public/assets/javascripts/ui/site/EditProfileModal.js b/public/assets/javascripts/ui/site/EditProfileModal.js
index b023923..d0e5d05 100644
--- a/public/assets/javascripts/ui/site/EditProfileModal.js
+++ b/public/assets/javascripts/ui/site/EditProfileModal.js
@@ -3,11 +3,14 @@ var EditProfileModal = ModalFormView.extend({
 	el: ".mediaDrawer.editProfile",
 	action: "/api/profile",
 	method: "put",
+	
+	events: {
+	  "click [data-role='changePasswordToggle']": 'togglePasswordFields'
+	},
 
 	load: function(){
 		this.reset()
 		$.get("/api/profile", function(data){
-			console.log(data)
 			
 			for (var i in data) {
 				this.$("[name='" + i + "']").val(data[i])
@@ -25,6 +28,10 @@ var EditProfileModal = ModalFormView.extend({
 			this.show()
 		}.bind(this))
 	},
+	
+	togglePasswordFields: function(){
+    this.$("[data-role='changePasswordFields']").toggleClass("hidden")
+	},
 
 	validate: function(){
 		var errors = []
diff --git a/public/assets/javascripts/vendor/chardinjs.min.js b/public/assets/javascripts/vendor/chardinjs.min.js
new file mode 100755
index 0000000..56cd7b7
--- /dev/null
+++ b/public/assets/javascripts/vendor/chardinjs.min.js
@@ -0,0 +1,2 @@
+// Generated by CoffeeScript 1.6.2
+(function(){var e=[].slice;(function(t,n){var r;return r=function(){function e(e){var r=this;this.$el=t(e),t(n).resize(function(){return r.refresh()})}return e.prototype.start=function(){var e,t,n,r;if(this._overlay_visible())return!1;this._add_overlay_layer(),r=this.$el.find("*[data-intro]:visible");for(t=0,n=r.length;t<n;t++)e=r[t],this._show_element(e);return this.$el.trigger("chardinJs:start")},e.prototype.toggle=function(){return this._overlay_visible()?this.stop():this.start()},e.prototype.refresh=function(){var e,t,n,r,i;if(this._overlay_visible()){r=this.$el.find("*[data-intro]:visible"),i=[];for(t=0,n=r.length;t<n;t++)e=r[t],i.push(this._position_helper_layer(e));return i}return this},e.prototype.stop=function(){return this.$el.find(".chardinjs-overlay").fadeOut(function(){return t(this).remove()}),this.$el.find(".chardinjs-helper-layer").remove(),this.$el.find(".chardinjs-show-element").removeClass("chardinjs-show-element"),this.$el.find(".chardinjs-relative-position").removeClass("chardinjs-relative-position"),n.removeEventListener?n.removeEventListener("keydown",this._onKeyDown,!0):document.detachEvent&&document.detachEvent("onkeydown",this._onKeyDown),this.$el.trigger("chardinJs:stop")},e.prototype._overlay_visible=function(){return this.$el.find(".chardinjs-overlay").length!==0},e.prototype._add_overlay_layer=function(){var e,t,n,r=this;return this._overlay_visible()?!1:(t=document.createElement("div"),n="",t.className="chardinjs-overlay",this.$el.prop("tagName")==="BODY"?(n+="top: 0;bottom: 0; left: 0;right: 0;position: fixed;",t.setAttribute("style",n)):(e=this._get_offset(this.$el.get()[0]),e&&(n+="width: "+e.width+"px; height:"+e.height+"px; top:"+e.top+"px;left: "+e.left+"px;",t.setAttribute("style",n))),this.$el.get()[0].appendChild(t),t.onclick=function(){return r.stop()},setTimeout(function(){return n+="opacity: .8;opacity: .8;-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';filter: alpha(opacity=80);",t.setAttribute("style",n)},10))},e.prototype._get_position=function(e){return e.getAttribute("data-position")||"bottom"},e.prototype._place_tooltip=function(e){var n,r,i,s,o,u,a;u=t(e).data("tooltip_layer"),a=this._get_offset(u),u.style.top=null,u.style.right=null,u.style.bottom=null,u.style.left=null;switch(this._get_position(e)){case"top":case"bottom":i=this._get_offset(e),o=i.width,r=t(u).width(),u.style.left=""+(o/2-a.width/2)+"px";break;case"left":case"right":i=this._get_offset(e),s=i.height,n=t(u).height(),u.style.top=""+(s/2-a.height/2)+"px"}switch(this._get_position(e)){case"left":return u.style.left="-"+(a.width-34)+"px";case"right":return u.style.right="-"+(a.width-34)+"px";case"bottom":return u.style.bottom="-"+a.height+"px";case"top":return u.style.top="-"+a.height+"px"}},e.prototype._position_helper_layer=function(e){var n,r;return r=t(e).data("helper_layer"),n=this._get_offset(e),r.setAttribute("style","width: "+n.width+"px; height:"+n.height+"px; top:"+n.top+"px; left: "+n.left+"px;")},e.prototype._show_element=function(e){var n,r,i,s;r=this._get_offset(e),i=document.createElement("div"),s=document.createElement("div"),t(e).data("helper_layer",i).data("tooltip_layer",s),e.id&&i.setAttribute("data-id",e.id),i.className="chardinjs-helper-layer chardinjs-"+this._get_position(e),this._position_helper_layer(e),this.$el.get()[0].appendChild(i),s.className="chardinjs-tooltip chardinjs-"+this._get_position(e),s.innerHTML="<div class='chardinjs-tooltiptext'>"+e.getAttribute("data-intro")+"</div>",i.appendChild(s),this._place_tooltip(e),e.className+=" chardinjs-show-element",n="",e.currentStyle?n=e.currentStyle.position:document.defaultView&&document.defaultView.getComputedStyle&&(n=document.defaultView.getComputedStyle(e,null).getPropertyValue("position")),n=n.toLowerCase();if(n!=="absolute"&&n!=="relative")return e.className+=" chardinjs-relative-position"},e.prototype._get_offset=function(e){var t,n,r;t={width:e.offsetWidth,height:e.offsetHeight},n=0,r=0;while(e&&!isNaN(e.offsetLeft)&&!isNaN(e.offsetTop))n+=e.offsetLeft,r+=e.offsetTop,e=e.offsetParent;return t.top=r,t.left=n,t},e}(),t.fn.extend({chardinJs:function(){var n,i,s,o;return o=arguments[0],i=2<=arguments.length?e.call(arguments,1):[],n=t(this[0]),s=n.data("chardinJs"),s||n.data("chardinJs",s=new r(this,o)),typeof o=="string"&&s[o].apply(s,i),s}})})(window.jQuery,window)}).call(this);
\ No newline at end of file
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index fbe9140..4637643 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -69,6 +69,10 @@ a{
 }
 #help-button {
   display: none;
+	border-right:0px!important;
+}
+.editProfile, .profileLink {
+	border-right:0px!important;
 }
 .editing #help-button {
   display: inline;
@@ -318,15 +322,6 @@ iframe.embed {
 	width: 100%;
 	height: 50vh;
 }
-.projectList .room:hover .holder{
-	background: rgba(255,255,255,0);
-}
-.projectList .holder{
-	background: rgba(255,255,255,0.7);
-	-webkit-transition:2s background;
-	-moz-transition:2s background;
-	transition:2s background;
-}
 
 .room .images {
   position: absolute;
@@ -365,7 +360,7 @@ iframe.embed {
 	vertical-align: middle;
 }
 
-.page .roomName {
+.page .room .holder a {
   font-weight: 300;
   font-size: 20px;
   letter-spacing: 1px;
@@ -379,7 +374,7 @@ iframe.embed {
   display: inline-block;
 }
 
-.page .roomName:hover {
+.page .room .holder a:hover {
   background:black;
   color:white;
 }
@@ -460,6 +455,10 @@ iframe.embed {
   font-size: 13px;
 }
 
+.footer a:hover{
+  text-decoration:underline;
+}
+
 
 /* PROFILE PAGE */
 .profilePic {
@@ -491,7 +490,7 @@ iframe.embed {
 	border-right:1px solid;
 }
 
-.topLinks a:last-child {
+.page .topLinks a:last-child {
 	border-right:0px solid;
 }
 .topLinks a:hover {
@@ -696,7 +695,12 @@ iframe.embed {
 .mx-object3d video {
 	pointer-events: none;
 }
-
+#keyhint {
+	position: fixed;
+	bottom:0;
+	right:0;
+	z-index: 2;
+}
 #hud {
 	position: fixed;
 	top:0;left:0;
@@ -762,8 +766,8 @@ iframe.embed {
 
 #minotaur {
 	position: absolute;
-	top: 0;
-	right: 230px;
+	top: 0px;
+	left: 150px;
 	opacity: 0;
 }
 #minotaur .label:after {
@@ -774,11 +778,11 @@ iframe.embed {
 #minotaur.saving {
 	padding: 20px 8px;
 	color: white;
-	background: black;
+	background: red;
 	font-weight: 300;
-	float: right;
 	text-decoration: none;
 	z-index: 33;
+  opacity: 1;
 }
 #minotaur.saving .label:after {
   content: 'SAVING';
@@ -1272,7 +1276,7 @@ iframe.embed {
 .wallpaper {
   right: 80px;
   margin-top: 77px;
-  width: 162px;
+  width: 172px;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   -webkit-transform: translateX(400px);
   transition: transform 0.1s ease-in-out;
@@ -1863,6 +1867,7 @@ form h3 {
 }
 #form_container {
   clear:both;
+	padding-bottom: 50px;
 }
 .errors {
 	display: none;
@@ -1913,6 +1918,8 @@ form li textarea {
 	-webkit-transition:0.2s all;
 	-moz-transition:0.2s all;
 	transition:0.2s all;
+  -webkit-transform: translate3d(0,-999px,0);
+          transform: translate3d(0,-999px,0);
 }
 
 .desktop .hero .circle:hover {
@@ -1920,7 +1927,11 @@ form li textarea {
 	color:white;
 	cursor:pointer;
 }
-
+.chardinjs-tooltiptext {
+	font-weight: 300;
+	line-height: 20px;
+	font-size: 16px;
+}
 
 .box {
   display: table-cell;
@@ -1949,8 +1960,10 @@ form li textarea {
 	border: 1px solid black;
 	box-shadow: -3px 4px black;
 	line-height: 75px;
+
 }
 
+
 .desktop .close:hover {
   background:black;
 	color:white;
@@ -2092,14 +2105,22 @@ a[data-role="forgot-password"] {
 
 /* COLLABORATORS */
 
-.collaborators > div {
-  width: 600px;
+.collaborators .rap {
+	display: table;
+	width: 100%;
+	height: 100%;
+}
+
+.collaborators .rap .holder .inner {
+  width: 480px;
   margin: 0 auto;
   text-align: left;
   background: white;
   padding: 10px;
   margin: 20px auto;
+position: relative;
 }
+
 .collaborators button {
   width: auto;
   position: relative;
@@ -2126,14 +2147,15 @@ a[data-role="forgot-password"] {
   border-color: black;
 }
 .collaborators p {
-  margin: 20px 0;
+	margin: 10px 0 20px;
+	font-weight: 300;
 }
 .collaborators form input[type=text] {
   font-size: 16px;
   width: 300px;
 }
 .collaborators h2 {
-  margin: 20px auto 10px;
+  margin: 20px auto 0;
 }
 #collaborator-list {
   margin-top: 20px;
@@ -2208,7 +2230,28 @@ a[data-role="forgot-password"] {
 	text-decoration: none;
 	font-size: 14px;
 	}
-
+	
+	.topLinks a[data-role="new-project-modal"], .topLinks a[data-role="show-layouts-modal"] {
+		display:none;
+	}
+	.close {
+	font-size: 40px;
+	right: 10px;
+	top: 10px;
+	width: 55px;
+	line-height: 55px;
+	}
+	form {
+	max-width: 90%;
+	
+	}
+	
+	form li {
+		font-size: 16px;
+	}
+	form input[type="text"], form input[type="password"] {
+	font-size: 15px;
+	}
 	.page h1 {
 	font-size: 26px;
 	padding: 10px 0 15px 0;
@@ -2236,11 +2279,19 @@ a[data-role="forgot-password"] {
 	}
 	.projectList.about {
 	text-align: center;
-	padding: 0;
+	padding: 20px 0;
 	}
 	.projectList.about .item .rap {
 	padding: 0;
 	}
+	.projectList.about .item span h3 {
+	font-weight: 500;
+	font-size: 18px;
+	margin-bottom: 6px;
+	}
+	.projectList.about .item:nth-child(2) span:nth-child(2) {
+		padding: 10px 0;
+	}
 	.projectList.about .item span:nth-child(1) {
 	width: 100%;
 	border-radius: 0;
@@ -2255,8 +2306,8 @@ a[data-role="forgot-password"] {
 	}
 	.page .viewMore.btn {
 	text-decoration: none;
-	font-size: 20px;
-	padding: 20px 0;
+	font-size: 18px;
+	padding: 18px 0;
 }
 .footer a, .footer span {
 margin: 9px;
diff --git a/public/assets/stylesheets/chardinjs.css b/public/assets/stylesheets/chardinjs.css
new file mode 100755
index 0000000..15334cf
--- /dev/null
+++ b/public/assets/stylesheets/chardinjs.css
@@ -0,0 +1,83 @@
+.chardinjs-overlay {
+  position: absolute;
+  z-index: 999999;
+  background-color: #000;
+  opacity: 0;
+  -webkit-transition: all 0.3s ease-out;
+  -moz-transition: all 0.3s ease-out;
+  -ms-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out; }
+
+.chardinjs-helper-layer {
+  position: absolute;
+  z-index: 9999998;
+  color: white;
+  -webkit-transition: all 0.3s ease-out;
+  -moz-transition: all 0.3s ease-out;
+  -ms-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out; }
+  .chardinjs-helper-layer.chardinjs-left {
+    border-left: solid white 1px;
+    margin-left: -10px; }
+  .chardinjs-helper-layer.chardinjs-right {
+    border-right: solid white 1px;
+    padding-right: 10px; }
+  .chardinjs-helper-layer.chardinjs-bottom {
+    border-bottom: solid white 1px;
+    padding-bottom: 10px; }
+  .chardinjs-helper-layer.chardinjs-top {
+    border-top: solid white 1px;
+    padding-top: 10px; }
+
+.chardinjs-tooltip {
+  position: absolute;
+  -webkit-transition: opacity 0.1s ease-out;
+  -moz-transition: opacity 0.1s ease-out;
+  -ms-transition: opacity 0.1s ease-out;
+  -o-transition: opacity 0.1s ease-out;
+  transition: opacity 0.1s ease-out;
+  max-width: 200px; }
+  .chardinjs-tooltip.chardinjs-left {
+    margin-left: -135px;
+    padding-right: 10px; }
+  .chardinjs-tooltip.chardinjs-right {
+    margin-right: -135px;
+    padding-left: 10px; }
+  .chardinjs-tooltip.chardinjs-bottom {
+    margin-bottom: -50px;
+    padding-top: 10px; }
+  .chardinjs-tooltip.chardinjs-top {
+    margin-top: -50px;
+    padding-bottom: 10px; }
+  .chardinjs-tooltip.chardinjs-right:before, .chardinjs-tooltip.chardinjs-left:after, .chardinjs-tooltip.chardinjs-bottom:before, .chardinjs-tooltip.chardinjs-top:after {
+    content: ".";
+    display: inline-block;
+    background-color: white;
+    height: 1px;
+    overflow: hidden;
+    position: absolute; }
+  .chardinjs-tooltip.chardinjs-right:before, .chardinjs-tooltip.chardinjs-left:after {
+    width: 100px;
+    top: 50%; }
+  .chardinjs-tooltip.chardinjs-bottom:before, .chardinjs-tooltip.chardinjs-top:after {
+    width: 1px;
+    height: 50px;
+    left: 50%; }
+  .chardinjs-tooltip.chardinjs-bottom:before {
+    top: -50px; }
+  .chardinjs-tooltip.chardinjs-top:after {
+    bottom: -50px; }
+  .chardinjs-tooltip.chardinjs-right:before {
+    left: -100px; }
+  .chardinjs-tooltip.chardinjs-left:after {
+    right: -100px; }
+
+.chardinjs-show-element {
+  z-index: 9999999;
+  opacity: 0.8; }
+/*
+.chardinjs-relative-position {
+  position: relative; }
+*/
\ No newline at end of file
diff --git a/server/lib/api/profile.js b/server/lib/api/profile.js
index fdd1bde..996505f 100644
--- a/server/lib/api/profile.js
+++ b/server/lib/api/profile.js
@@ -10,6 +10,8 @@ var _ = require('lodash'),
 var profile = {
 	show: function(req, res){
 		User.findOne({ _id: req.user._id }, function(err, user){
+		  user = user.toObject()
+		  delete user.password
 			res.json(err || user)
 		})
 	},
diff --git a/views/controls/editor/collaborators.ejs b/views/controls/editor/collaborators.ejs
index 69e5b64..b658bf6 100644
--- a/views/controls/editor/collaborators.ejs
+++ b/views/controls/editor/collaborators.ejs
@@ -1,7 +1,9 @@
 <div class="collaborators fixed mediaDrawer animate">
 	<span class="close">X</span>
-	
-  <div>
+
+  <div class="rap">
+		<div class="holder">
+			<div class="inner vvbox">
     <h2>Collaborators</h2>
 
     <p>
@@ -21,9 +23,9 @@
 
     <ul id="collaborator-list">
     </ul>
-
   </div>
-
+  </div>
+</div>
 </div>
 
 <script type="text/html" id="collaborator-template">
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs
index 92807e1..586194b 100644
--- a/views/controls/editor/toolbar.ejs
+++ b/views/controls/editor/toolbar.ejs
@@ -1,4 +1,5 @@
-<div class="edit menu vvbox" id="editorToolbar">
+
+<div class="edit menu vvbox" id="editorToolbar" data-intro="This is the main toolbar. Add and select media, Apply wallpaper, change room name etc." data-position="left">
 	<span
 		data-role='open-media-viewer'
 		data-info="add media"
diff --git a/views/editor.ejs b/views/editor.ejs
index e029225..24f617c 100755
--- a/views/editor.ejs
+++ b/views/editor.ejs
@@ -22,7 +22,7 @@
 			[[ include controls/editor/settings ]]
 		</div>
 
-		<div id="minimap" class="vvbox">
+		<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">
 			<span class="el"></span>
 		</div>
 
@@ -30,6 +30,8 @@
 			<div id="map" style="display: block">
 			</div>
 		</div>
+		
+		<img src="/assets/img/keys.png" id="keyhint">
 
 	</div>
 
diff --git a/views/home.ejs b/views/home.ejs
index 76b6cea..a6f5a88 100755
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -62,9 +62,10 @@
 	</div>
 	
 	<h1>Room Showcase</h1>
-	
-
-	
+	<img src="https://s3.amazonaws.com/uploads.hipchat.com/14935/55226/twq38ErgSnriaOq/vvalls-thumbnail-options2.gif" style="border-top:1px solid;width:100%">
+	<!--
+	[[ include projects/list-projects ]]
+	-->
 	<a href="#loadmore" class="viewMore btn">View More</a>
 
 	[[ include partials/confirm-modal ]]	
diff --git a/views/partials/confirm-modal.ejs b/views/partials/confirm-modal.ejs
index 60fbd31..5b2ff46 100644
--- a/views/partials/confirm-modal.ejs
+++ b/views/partials/confirm-modal.ejs
@@ -1,5 +1,4 @@
 <div class="mediaDrawer fixed animate alert">
-	<span class="close">X</span>
 	<div class="box">
 		<form>
 			<span class="message"></span>
diff --git a/views/partials/edit-profile.ejs b/views/partials/edit-profile.ejs
index a39f856..5775ca5 100644
--- a/views/partials/edit-profile.ejs
+++ b/views/partials/edit-profile.ejs
@@ -59,11 +59,10 @@
 					<br>
 					<br><img id="load_avatar">
 				</li>		
-
 				<li class="section_break">
-					<h3 class="link">Change Password</h3>
+					<h3 class="link" data-role="changePasswordToggle">Change Password</h3>
 				</li>
-				<div class="hidden">
+				<div class="hidden" data-role="changePasswordFields">
 				<li>
 					<label class="description" for="profile_old_password">Old Password:</label>
 					<div>
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
index 3f816f0..3ee4afc 100644
--- a/views/partials/footer.ejs
+++ b/views/partials/footer.ejs
@@ -12,7 +12,7 @@
 	
 	<span>
 		you are signed in as &rarr;
-		<a href="/profile/[[- user.username ]]">[[- user.displayName ]]</a>
+		<a href="/profile/[[- user.username ]]"><b>[[- user.displayName ]]</b></a>
 		[[ if (user.isStaff) { ]]
 		<a href="/staff">Staff Area</a>
 		[[ } ]]
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 065385d..1b7b498 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -65,7 +65,7 @@
 	[[ if (profile && String(user._id) == String(profile._id)) { ]]
 	<a href="/profile" data-role="edit-profile-modal" class="topLink editProfile">Settings</a>
 	[[ } else if (! profile) { ]]
-	<a href="/profile" class="topLink">Profile</a>
+	<a href="/profile" class="topLink profileLink">Profile</a>
 	[[ } ]]
 	
 	[[ if (opt.editing) { ]]
diff --git a/views/partials/meta.ejs b/views/partials/meta.ejs
index 4e94a5e..6ff45cb 100644
--- a/views/partials/meta.ejs
+++ b/views/partials/meta.ejs
@@ -33,6 +33,7 @@
 	<link href='/assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'>
 	<link href='/assets/stylesheets/app.css' rel='stylesheet' type='text/css'>
 	<link href='/assets/stylesheets/animate.css' rel='stylesheet' type='text/css'>
+	<link href='/assets/stylesheets/chardinjs.css' rel='stylesheet' type='text/css'>
 	<!--[if lt IE 9]>
 	<style>
 
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 1ce180a..4af9938 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -7,6 +7,7 @@
 <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/wow.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/chardinjs.min.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/sha1.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/dataUriToBlob.js"></script>
 <script type="text/javascript" src="/assets/javascripts/util.js"></script>
@@ -21,8 +22,10 @@
 <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.vimeo.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/rectangles/_env.js"></script>
+
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/constants.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/colors.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/util/coords.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/debug.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/permissions.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/measurement.js"></script>
@@ -33,6 +36,7 @@
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/keys.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/undostack.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/minotaur.js"></script>
+
 <script type="text/javascript" src="/assets/javascripts/rectangles/models/vec2.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/models/vec3.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/models/mat4.js"></script>
diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs
index a9f9523..a12f237 100644
--- a/views/projects/list-projects.ejs
+++ b/views/projects/list-projects.ejs
@@ -6,6 +6,7 @@
 
 			<span class="room">
         <span class="images">
+          <img src="[[- project.photo ]]">
           [[ mediaCount = 0 ]]
           [[ project.media.some(function(media){ ]]
             [[ if (media.media.type != "image") { return false } ]]
@@ -13,14 +14,18 @@
             <img src="[[- media.media.url ]]">
           [[ }) ]]
 			  </span>
-				[[ if (String(user._id) == String(project.user_id)) { ]]
-				<a href="/project/[[- project.slug ]]/edit"><div class="editBtn">edit</div></a>
-				[[ } ]]
+
 				<div class="holder">
-				<a href="/project/[[- project.slug ]]" class="roomName">
-					[[- project.name ]]<br>
-					[[- project.date ]]
-				</a>
+			 	 [[ if (String(user._id) == String(project.user_id)) { ]]
+         <a href="/project/[[- project.slug ]]/edit">
+					 [[- project.name ]]<br>
+				 	 [[- project.date ]]
+				 </a>
+				 [[ } else  { ]]
+					<a href="/project/[[- project.slug ]]" class="roomName">
+						[[- project.name ]]<br>
+						[[- project.date ]]
+					[[ } ]]
 				</div>
 			</span>