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

16 files changed, 231 insertions, 375 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js
index d1e292d..15bf050 100644
--- a/public/assets/javascripts/mx/primitives/mx.image.js
+++ b/public/assets/javascripts/mx/primitives/mx.image.js
@@ -10,6 +10,7 @@ MX.Image = MX.Object3D.extend({
 		layer.y = ops.y || 0
 		layer.z = ops.z || 0
 		layer.backface = ops.backface || false
+		layer.media = ops.media
 		
 		if (layer.backface) {
 			layer.el.classList.add("backface-visible")
diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js
index 00c2c44..1b95989 100644
--- a/public/assets/javascripts/rectangles/_env.js
+++ b/public/assets/javascripts/rectangles/_env.js
@@ -16,25 +16,9 @@ environment.init = function(){
 		
 		scene.camera.radius = 20
 	}
-		
-// 	map.center.a = scene.camera.x
-// 	map.center.b = scene.camera.z
-
+	
 	map.center.a = 0
 	map.center.b = 0
-
-// 	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/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
index 9e9e2bf..9096de0 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
@@ -3,7 +3,8 @@ var Scenery = new function(){
 	
 	var base = this;
 
-	base.images = []
+	base.media = []
+	base.nextMedia = null
 	
 	base.mouse = new mouse ({ use_offset: false })
 	
@@ -40,6 +41,30 @@ var Scenery = new function(){
 			})
 		})
 	}
+
+	base.add = function(wall, media){
+		var scene_media
+		switch (media.type) {
+			case 'image':
+				scene_media = new Scenery.image (wall, media)
+				break
+			
+			case 'youtube':
+			case 'vimeo':
+				scene_media = new Scenery.video (wall, media)
+				break
+		}
+		base.media.push(scene_media)
+		scene_media.init()
+	}
+	base.addNextToWall = function(wall){
+		base.add(wall, base.nextMedia)
+		base.nextMedia = null
+	}
 	
+	base.remove = function(id){
+		base.images.splcie(id)
+	}
+
 	return base
 }
diff --git a/public/assets/javascripts/rectangles/engine/scenery/image/_image.js b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js
index dadb2d2..bcb7c23 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/image/_image.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js
@@ -1,12 +1,13 @@
-Scenery.image = function (wall, img) {
+Scenery.image = function (wall, media) {
 
 	var base = this
-	
+
 	base.wall = wall
-	base.img = img
-	base.dimensions = new vec2(img.width, img.height)
+	base.media = media
+	base.scale = media.scale = 300 / max(300, media.width)
+	base.dimensions = new vec2(media.width, media.height)
 	base.center = wall.center()
-	base.bounds = wall.bounds_for(img)
+	base.bounds = wall.bounds_for(media)
 
 	// should be proportional to distance from wall
 	var cursor_amp = 1.5
@@ -18,11 +19,11 @@ Scenery.image = function (wall, img) {
 	
 	base.build = function(){
 		base.mx_img = new MX.Image({
-			src: img.src,
+			src: media.url,
 			x: base.center.a,
-			y: Rooms.list[wall.room].height/2 - img.height/2 - 20,
+			y: Rooms.list[wall.room].height/2 - (base.scale * media.height)/2 - 20,
 			z: base.center.b,
-			scale: 300/img.naturalWidth,
+			scale: base.scale,
 			rotationY: wall_rotation[ wall.side ],
 			backface: false,
 		})
@@ -32,16 +33,12 @@ Scenery.image = function (wall, img) {
 	
 	base.bind = function(){
 		base.move.bind()
-// 		base.resize.bind()
 		$(base.mx_img.el).bind({
 			mouseenter: function(e){
-// 				console.log('entered an image')
-				// show the resize points for this image
 				Scenery.resize.show(base)
 				Scenery.image.hovering = true
 			},
 			mouseleave: function(e){
-// 				console.log('left an image')
 				Scenery.resize.defer_hide(base)
 				Scenery.image.hovering = false
 			}
diff --git a/public/assets/javascripts/rectangles/engine/scenery/image/move.js b/public/assets/javascripts/rectangles/engine/scenery/types/move.js
index e79ede9..2921c0a 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/image/move.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/move.js
@@ -33,7 +33,7 @@ Scenery.image.move = function(base){
 	
 	function drag (e, cursor){
 		if (! dragging) return
-		
+
 		base.mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp )
 		switch (base.wall.side) {
 			case FRONT:
@@ -57,9 +57,9 @@ Scenery.image.move = function(base){
 	function switch_wall (e, new_wall, cursor){
 		if (! dragging) return
 		if (new_wall.uid == base.wall.uid) return
-		if (! new_wall.fits(base.img)) return
+		if (! new_wall.fits(base.media)) return
 
-		base.bounds = bounds = new_wall.bounds_for(base.img)
+		base.bounds = bounds = new_wall.bounds_for(base.media)
 		base.center = new_wall.center()
 
 		x = base.center.a
diff --git a/public/assets/javascripts/rectangles/engine/scenery/image/resize.js b/public/assets/javascripts/rectangles/engine/scenery/types/resize.js
index a0a98c5..a0a98c5 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/image/resize.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/resize.js
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 4270551..e327070 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -42,20 +42,26 @@ window.Wall = (function(){
 			mousedown: function(){
 				base.randomize_colors()
 				console.log(sidesToString(base.side))
+				if (Scenery.nextMedia) {
+					Scenery.addNextToWall(base)
+				}
 			}
 		})
 	}
 	
 	Wall.prototype.bounds_for = function(img) {
 		var coord = this.side & FRONT_BACK ? this.rect.x : this.rect.y
-		return new Rect( new vec2( coord.a + img.width/2, coord.b - img.width/2 ),
-		                 new vec2( img.height/2, Rooms.list[this.room].height - img.height/2 ) )
+		var halfWidth = img.width/2 * img.scale
+		var halfHeight = img.height/2 * img.scale
+
+		return new Rect( new vec2( coord.a + halfWidth, coord.b - halfWidth ),
+		                 new vec2( halfHeight, Rooms.list[this.room].height - halfHeight ) )
 	}
 	Wall.prototype.fits = function(img){
-		if (this.side & FRONT_BACK && this.rect.x.length() < img.width) {
+		if (this.side & FRONT_BACK && this.rect.x.length() < img.width * img.scale) {
 			return false
 		}
-		if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width) {
+		if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width * img.scale) {
 			return false
 		}
 		return true
diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js
index 3aa7cfc..2ec35e6 100644
--- a/public/assets/javascripts/rectangles/util/mouse.js
+++ b/public/assets/javascripts/rectangles/util/mouse.js
@@ -111,7 +111,7 @@ function mouse (opt) {
 	}
 	base.mousemove = function(e){
 		e.stopPropagation()
-		
+
 		if (opt.use_offset && ! offset) return
 		
 		var pos = positionFromMouse(e)
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 4b30228..76218fe 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -19,6 +19,7 @@ var EditorToolbar = View.extend({
 
 	toggleMap: function(){
 		map.toggle()
+		// $("#minimap").toggleClass("hide");
 	},
 	
 	toggleSettings: function(){
@@ -49,3 +50,5 @@ var EditorToolbar = View.extend({
 	},
 
 })
+
+// $(".icon-close").removeClass("icon-close")
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index a66f2e8..30287a5 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -67,23 +67,47 @@ var MediaUpload = View.extend({
 			if ( ! f.type.match('image.*')) {
 				continue;
 			}
+			
+			this.getImageDimensions(f)
+		}
+	},
+	
+	getImageDimensions: function(f){
+		var base = this
+		
+		this.$upload.addClass('uploading')
 
-			this.$upload.addClass('uploading')
-
-			var fd = new FormData();
-			fd.append( 'image', f )
-			fd.append( '_csrf', this.$csrf.val() )
+		var reader = new FileReader();
 
-			var request = $.ajax({
-				url: this.uploadAction,
-				type: "post",
-				data: fd,
-				dataType: "json",
-				processData: false,
-				contentType: false,
-			})
-			request.done($.proxy(this.add, this))
+		reader.onload = function(e) {
+			var image = new Image()
+			image.onload = function(){
+				var width = image.naturalWidth,
+					height = image.naturalHeight
+				base.upload(f, width, height)
+			}
+			image.src = e.target.result
 		}
+		
+		reader.readAsDataURL(f);
+	},
+	
+	upload: function(f, width, height){
+		var fd = new FormData()
+		fd.append('image', f)
+		fd.append('width', width)
+		fd.append('height', height)
+		fd.append('_csrf', this.$csrf.val())
+
+		var request = $.ajax({
+			url: this.uploadAction,
+			type: "post",
+			data: fd,
+			dataType: "json",
+			processData: false,
+			contentType: false,
+		})
+		request.done($.proxy(this.add, this))
 	},
 	
 	add: function(media){
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index a75f8dc..a1198f3 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -7,21 +7,21 @@ var MediaViewer = ModalView.extend({
 		'click .foundToggle': "foundToggle",
 		'click .yourMedia': "userToggle",
 		'click #deleteMedia': "deleteArmed",
-		'mousedown .mediaContainer': "pick",
+		'click .mediaContainer': "pick",
 	},
-
+	
 	foundToggle: function(){
-    $(".foundMedia").addClass("active");
-    $(".myMedia").addClass("inactive");
-    $('a').removeClass("active");
-    $('.foundToggle').addClass("active");
+    this.$(".foundMedia").addClass("active");
+    this.$(".myMedia").addClass("inactive");
+    this.$("a").removeClass("active");
+    this.$(".foundToggle").addClass("active");
 	},
 	
 	userToggle: function(){
     this.$(".foundMedia").removeClass("active");
     this.$(".myMedia").removeClass("inactive");
-    this.$('a').removeClass("active");
-    this.$('.yourMedia').addClass("active");
+    this.$("a").removeClass("active");
+    this.$(".yourMedia").addClass("active");
 	},
 
 	show: function(){
@@ -35,6 +35,7 @@ var MediaViewer = ModalView.extend({
 	
 	hide: function(){
 		this.__super__.hide.call(this)
+		this.deleteArmed(null, false)
 		this.parent.mediaUpload.hide()
 	},
 
@@ -77,56 +78,55 @@ var MediaViewer = ModalView.extend({
 		this.deleteIsArmed = state
 		$("body").toggleClass("deleteArmed", state)
 	},
+
+	destroy: function(_id, cb){
+		$.ajax({
+			type: "delete",
+			url: this.destroyAction,
+			data: { _id: _id, _csrf: $("[name=_csrf]").val() }
+		}).complete(cb || function(){})
+	},
 	
-	pick: function(e){
+	pick: function(e) {
+		e.stopPropagation()
+
 		var target = e.currentTarget
 		var $target = $(target)
 		var media = $target.data('media')
+		var image = $target.find('img')
 
 		if (this.deleteIsArmed) {
 			this.destroy(media._id)
 			$target.remove()
+			return
 		}
-		else {
-			// pick this image ...
-		}
-	},
 
-	destroy: function(_id, cb){
-		$.ajax({
-			type: "delete",
-			url: this.destroyAction,
-			data: { _id: _id, _csrf: $("[name=_csrf]").val() }
-		}).complete(cb || function(){})
+		this.hide()
+		
+		var $ants = $('.ants');
+		var $floatingImg = $('.floatingImg');
+		
+		Scenery.nextMedia = media
+		$floatingImg.attr('src', image.attr('src'));
+
+		var height = $floatingImg.height()
+		var width = $floatingImg.width()
+
+		function _followCursor(e) {
+			$floatingImg.parent().css({
+				top: (e.pageY - (height / 2)) + 'px',
+				left: (e.pageX - (width / 2)) + 'px'
+			});
+		}
+		$(window).on('mousemove', _followCursor);
+		$(window).one('click', function () {
+			var $floatingImg = $('.floatingImg')
+			$floatingImg.attr('src', '');
+			$(window).off('mousemove', _followCursor);
+			$floatingImg.parent().removeClass('edit');
+		});
+		$ants.addClass('edit');
+		_followCursor(e);
 	},
 
 })
-
-//   function placeMedia(evt, img) {
-//   	// JULES DO YO THANG
-//   	alert('Place media at (' + evt.pageX + ', ' + evt.pageY + ')');
-//   }
-// 
-// 	$('.mediaContainer img').mousedown(function(e){
-// 		e.preventDefault()
-// 		e.stopPropagation()
-// 	})
-//   $('.mediaContainer img').click(function (e) {
-// 		e.stopPropagation()
-//   	$(".mediaDrawer, .fileUpload, .addMedia").removeClass("active icon-close");
-//   	$floatingImg.attr('src', $(this).attr('src'));
-//   	function _followCursor(e) {
-//   		$floatingImg.parent().css({
-//   			top: (e.pageY - ($floatingImg.height() / 2)) + 'px',
-//   			left: (e.pageX - ($floatingImg.width() / 2)) + 'px'
-//   		});
-//   	}
-//   	$(window).on('mousemove', _followCursor);
-//   	$(window, this).one('click', function () {
-//   		$floatingImg.attr('src', '');
-//   		$(window).off('mousemove', _followCursor);
-//   		$floatingImg.parent().removeClass('edit');
-//   	});
-//   	$floatingImg.parent().addClass('edit');
-//   	_followCursor(e);
-//   });
diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js
index 46fe09c..705ff04 100644
--- a/public/assets/javascripts/ui/lib/Parser.js
+++ b/public/assets/javascripts/ui/lib/Parser.js
@@ -4,7 +4,15 @@ var Parser = {
 		regex: /\.(jpeg|jpg|gif|png|svg)(\?.*)?$/i,
 		async: false,
 		fetch: function(url, done) {
-			done("", "")
+			var img = new Image ()
+			img.onload = function(){
+				done("", "", img.naturalWidth, img.naturalHeight, "")
+				img = null
+			}
+			img.src = url
+			if (img.complete) {
+				img.onload()
+			}
 		},
 		tag: function (media) {
 			return '<img src="' + media.url + '" onerror="imgError(this);">';
@@ -16,7 +24,20 @@ var Parser = {
 		fetch: function(url, done) {
 			var id = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0];
 			var thumb = "http://i.ytimg.com/vi/" + id + "/hqdefault.jpg"
-			done(id, thumb);
+			$.ajax({
+				type: 'GET',
+				url: 'https://www.googleapis.com/youtube/v3/videos',
+				dataType: "jsonp",
+				data: {
+					id: id,
+					key: "AIzaSyDYPKGD0-_VRBWpUYRmX8Qg6BtWmcPU_cM",
+					part: "id,contentDetails,snippet,status",
+				},
+				success: function(result){
+					var res = res.items[0]
+					done(id, thumb, 640, 360, res.snippet.title);
+				}
+			})
 		},
 		tag: function (media) {
 			return '<img class="video" type="youtube" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">&#9654;</span>';
@@ -31,8 +52,9 @@ var Parser = {
 				type: 'GET',
 				url: 'http://vimeo.com/api/v2/video/' + id + '.json',
 				success: function(result){
-					if (result.length == 0) { return done(id, "") }
-					done(id, result[0].thumbnail_large)
+					if (result.length == 0) { return done(id, "", 640, 360) }
+					var res = result[0]
+					done(id, res.thumbnail_large, res.width, res.height, res.title)
 				}
 			})
 		},
@@ -79,11 +101,14 @@ var Parser = {
 	parse: function (url, cb) {
 		var matched = Parser.integrations.some(function(integration){
 			if (integration.regex.test(url)) {
-				integration.fetch(url, function(token, thumbnail){
+				integration.fetch(url, function(token, thumbnail, width, height, title){
 					cb({
 						token: token,
 						thumbnail: thumbnail,
 						type: integration.type,
+						title: title,
+						width: width,
+						height: height,
 						url: url,
 					})
 				})
diff --git a/public/assets/javascripts/ui/z_misc.js b/public/assets/javascripts/ui/z_misc.js
deleted file mode 100644
index 7f58f32..0000000
--- a/public/assets/javascripts/ui/z_misc.js
+++ /dev/null
@@ -1,138 +0,0 @@
-
-function bind () {
-
-	$.fn.clickToToggle = function(fn){
-		$(this).click(function(e){
-			e.stopPropagation()
-			var isActive = ! $(this).hasClass("icon-close")
-			disable_mode()
-			fn(isActive)
-			$(this).toggleClass("icon-close", isActive);
-		})
-	}
-
-
-  $(".room1 .editBtn").click(function () {
-  	var room = $(this).parent();
-  	room.addClass('editing');
-  	$(this).siblings('.formHolder').find('[type="submit"]').one('click', function (evt) {
-  		evt.preventDefault();
-  		evt.stopPropagation();
-  		room.removeClass('editing');
-  	});
-  });
-
-  // Place media logic
-  var $floatingImg = $('.floatingImg');
-
-  $(".icon-map").click(function(){
-    $("#minimap").toggleClass("hide");
-    $(this).toggleClass('hidden');
-  });
-
-
-  $("#startpoint").click(function(){
-    $(this).toggleClass("active");
-    $("#startText").toggleClass("hide");
-    $("#moveText").toggleClass("show");
-  });
-
-
-  $(document).on("click", ".icon-close", disable_mode)
-
-  function disable_mode(){
-  	$(".icon-close").removeClass("icon-close")
-    $('.mediaDrawer,.fileUpload,.image,.lightcontrol,.settings,.wallpaper').removeClass("active");
-    $(".image").removeClass("editText")
-    $("body").removeClass("deleteArmed")
-  }
-	
-	//
-	// EDIT IMAGE HOVER MENU
-	
-	var hideEditImageMenuTimeout
-	environment.image.el.addEventListener('mouseover', function(e){
-		environment.image.el.classList.add('hover')
-		var offset = $(".image").offset()
-		offset.left = max(0, offset.left + 30)
-		offset.top = max(0, offset.top + 50)
-		$(".edit-image.menu").show().offset( offset )
-		clearTimeout(hideEditImageMenuTimeout)
-	})
-	environment.image.el.addEventListener('mouseout', function(e){
-		environment.image.el.classList.remove('hover')
-		hideEditImageMenuTimeout = setTimeout(function(){
-			$(".edit-image.menu").hide()
-		}, 50)
-	})
-	$(".edit-image.menu").on({
-		mouseover: function(){
-			clearTimeout(hideEditImageMenuTimeout)
-		},
-		mouseout: function(){
-			hideEditImageMenuTimeout = setTimeout(function(){
-				$(".edit-image.menu").hide()
-			}, 50)
-		},
-		mousedown: function(e){
-			e.stopPropagation()
-		},
-		mouseup: function(e){
-			e.stopPropagation()
-		}
-	})
-
-
-	//
-	// EDIT VIDEO HOVER MENU
-	
-	var hideEditVideoMenuTimeout
-	environment.video.el.addEventListener('mouseover', function(e){
-		environment.video.el.classList.add('hover')
-		var offset = $(".video").offset()
-		offset.left = max(0, offset.left + 30)
-		offset.top = max(0, offset.top + 50)
-		$(".edit-video.menu").show().offset( offset )
-		clearTimeout(hideEditImageMenuTimeout)
-	})
-	environment.video.el.addEventListener('mouseout', function(e){
-		environment.video.el.classList.remove('hover')
-		hideEditVideoMenuTimeout = setTimeout(function(){
-			$(".edit-video.menu").hide()
-		}, 50)
-	})
-	$(".edit-video.menu").on({
-		mouseover: function(){
-			clearTimeout(hideEditVideoMenuTimeout)
-		},
-		mouseout: function(){
-			hideEditVideoMenuTimeout = setTimeout(function(){
-				$(".edit-video.menu").hide()
-			}, 50)
-		},
-		mousedown: function(e){
-			e.stopPropagation()
-		},
-		mouseup: function(e){
-			e.stopPropagation()
-		}
-	})
-	$(".icon-ios7-reload,.ios7-arrow-forward").click(function(){
-		$(this).toggleClass('toggled')
-	})
-	
-	//
-	// ALL DONE
-
-	$('body').removeClass('loading');
-}
-
-
-$(function(){
-  
-  function randomizeList(listObj) {
-      $(listObj).each(function() {
-          $(this).addClass(classes[Math.Random()*classes.size]);
-      });
-  }
-})
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 29eb3c8..2d7f901 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -20,7 +20,6 @@ body.noOverflow{
 
 body.loading * {
 	-webkit-transition: all 0 ease 0 !important;
-	-moz-transition: all 0 ease 0 !important;
 	transition: all 0 ease 0 !important;
 }
 
@@ -51,7 +50,8 @@ a{
 
 .floatingImg {
   width: 100%;
-  cursor: -webkit-grabbing; cursor: -moz-grabbing;
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
 }
 
 .floatimgImg.edit {
@@ -59,14 +59,16 @@ a{
 }
 
 .ants {
-width:320px;
-height:auto;
-padding:15px;
-background:white;
-position:absolute;
-margin:0 auto;
-overflow:hidden;
-display: none;
+	width:320px;
+	height: auto;
+	padding:15px;
+	background:white;
+	position:absolute;
+	margin:0 auto;
+	overflow:hidden;
+	display: none;
+	z-index: 10;
+	pointer-events: none;
 }
 
 .ants.edit {
@@ -81,16 +83,12 @@ display: none;
   top:0px;
   left:0px;
   background:#fff;
-  -webkit-animation:borderanimation 10s infinite;
-  -moz-animation:borderanimation 10s infinite;
-  -ms-animation:borderanimation 10s infinite;
-  -o-animation:borderanimation 10s infinite;
-  animation:borderanimation 10s infinite;
+  -webkit-animation:borderanimation 10s infinite linear;
+  animation:borderanimation 10s infinite linear;
   z-index:99;
 }
 
-.ants:after
-{
+.ants:after {
   content:"";
   width:100%;
   border-bottom:1px dashed #000;
@@ -98,15 +96,11 @@ display: none;
   bottom:0px;
   left:0px;
   background:#fff;
-  -webkit-animation:borderanimation 10s infinite;
-  -moz-animation:borderanimation 10s infinite;
-  -ms-animation:borderanimation 10s infinite;
-  -o-animation:borderanimation 10s infinite;
-  animation:borderanimation 10s infinite;
+  -webkit-animation:borderanimation 10s infinite linear;
+  animation:borderanimation 10s infinite linear;
 }
 
-.leftborder
-{ 
+.leftborder {
   height:auto;
   width:100%;
   position:absolute;
@@ -115,8 +109,7 @@ display: none;
   background:#fff;
 }
 
-.leftborder:before
-{
+.leftborder:before {
   content:"";
   height:250px; 
   border-left:1px dashed #000;
@@ -124,15 +117,11 @@ display: none;
   top:0px;
   left:1px;
   background:#fff;
-  -webkit-animation:borderanimationleftright 10s infinite;
-  -moz-animation:borderanimationleftright 10s infinite;
-  -ms-animation:borderanimationleftright 10s infinite;
-  -o-animation:borderanimationleftright 10s infinite;
-  animation:borderanimationleftright 10s infinite;
+  -webkit-animation:borderanimationleftright 10s infinite linear;
+  animation:borderanimationleftright 10s infinite linear;
 }
 
-.leftborder:after
-{
+.leftborder:after {
   content:"";  
   height:250px;
   border-left:1px dashed #000;
@@ -140,21 +129,18 @@ display: none;
   top:0px;
   left:100%;
   background:#fff;
-  -webkit-animation:borderanimationleftright 10s infinite;
-  -moz-animation:borderanimationleftright 10s infinite;
-  -ms-animation:borderanimationleftright 10s infinite;
-  -o-animation:borderanimationleftright 10s infinite;
-  animation:borderanimationleftright 10s infinite; 
+  -webkit-animation:borderanimationleftright 10s infinite linear;
+  animation:borderanimationleftright 10s infinite linear; 
 }
 
-h5{
+h5 {
   font-weight: 300;
   font-style: italic;
   margin: 20px 0 0px 0;
   font-size: 14px;
 }
 
-.page{
+.page {
   text-align:center;
 }
 
@@ -258,7 +244,7 @@ h5{
   height: 100%;
   background: rgba(255,255,255,0.9);
   -webkit-transform:translateY(-100%);
-  -moz-transform:translateY(-100%);
+  transform:translateY(-100%);
 }
 
 .room1 form {
@@ -272,8 +258,8 @@ h5{
 }
 
 .room1.editing .formHolder {
-  -webkit-transform:translateY(0);
-  -moz-transform:translateY(0);
+	-webkit-transform:translateY(0);
+	transform:translateY(0);
 }
 
 .page .questions {
@@ -511,18 +497,19 @@ h5{
   position:fixed;
   top:0;
   left:0;
-  cursor: -webkit-grab; cursor: -moz-grab;
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
   z-index: 1;
   position: fixed;
   top: 50%;
   left: 50%;
   -webkit-transform: translate3d(-50%, -50%, 0);
-  -moz-transform: translate3d(-50%, -50%, 0);
   transform: translate3d(-50%, -50%, 0);
   cursor:pointer;
 }
 .mx-scene:active{
-  cursor: -webkit-grabbing; cursor: -moz-grabbing;
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
 }
 .mx-object3d.image, .mx-object3d canvas,
 .mx-object3d.backface-hidden {
@@ -696,43 +683,35 @@ h5{
   overflow-y:scroll;
 }
 
-.fixed::-webkit-scrollbar
-{
+.fixed::-webkit-scrollbar {
   width: 3px;  
 }
 
-.fixed::-webkit-scrollbar-track
-{
+.fixed::-webkit-scrollbar-track {
   background:white;
 }
 
-.fixed::-webkit-scrollbar-thumb
-{
+.fixed::-webkit-scrollbar-thumb {
   background: black;
 }
 
-.fixed::-moz-scrollbar
-{
+.fixed::-moz-scrollbar {
   width: 3px;  
 }
 
-.fixed::-moz-scrollbar-track
-{
+.fixed::-moz-scrollbar-track {
   background:white;
 }
 
-.fixed::-moz-scrollbar-thumb
-{
+.fixed::-moz-scrollbar-thumb{
   background: black;
 }
 .animate {
   -webkit-transition:all 0.2s ease-in-out;
-  -moz-transition:all 0.2s ease-in-out;
   transform:translateY(-100%);
 }
 .mediaDrawer {
   -webkit-transform:translateY(-100%);
-  -moz-transform:translateY(-100%);
   transform:translateY(-100%);
   background:rgba(255,255,255,0.9);
   text-align:center;
@@ -740,7 +719,6 @@ h5{
 }
 .mediaDrawer.active {
   -webkit-transform:translateY(0%);
-  -moz-transform:translateY(0%);
   transform:translateY(0%);
 }
 .mediaDrawer.signin, .mediaDrawer.signup,
@@ -814,8 +792,6 @@ h5{
   z-index: 4;
   -webkit-transform: translateY(-1000%);
   -webkit-transition: -webkit-transform 0.6s ease-in-out;
-  -moz-transform: translateY(-1000%);
-  -moz-transition: -webkit-transform 0.6s ease-in-out;
   transform: translateY(-1000%);
   transition: -webkit-transform 0.6s ease-in-out;
   border: 1px solid;
@@ -824,7 +800,6 @@ h5{
 
 .fileUpload.active {
   -webkit-transform:translateY(0%);
-  -moz-transform:translateY(0%);
   transform:translateY(0%);
 }
 
@@ -871,7 +846,6 @@ h5{
 }
 .myMedia {
   -webkit-transition: opacity 0.3s ease-in-out;
-  -moz-transition: opacity 0.3s ease-in-out;
   transition: opacity 0.3s ease-in-out;
 }
 .myMedia.inactive {
@@ -884,17 +858,14 @@ h5{
   left:0;
   -webkit-transform: translateX(100%);
   -webkit-transition: -webkit-transform 0.3s ease-in-out;
-  -moz-transform: translateX(100%);
-  -moz-transition: -webkit-transform 0.3s ease-in-out;
   transform: translateX(100%);
-  transition: -webkit-transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
   padding-top:40px;
 }
 
 .foundMedia.active {
-  -webkit-transform:translateX(0%);
-  -moz-transform:translateX(0%);
-  transform:translateX(0%);
+  -webkit-transform: translateX(0%);
+  transform: translateX(0%);
 }
 
 .mediaDrawer h2{
@@ -1007,12 +978,10 @@ h5{
 	cursor:pointer;
 	background:black;
 	-webkit-transform: translateY(0px);
-  -moz-transform: translateY(0px);
   transform: translateY(0px);
 }
 #minimap.hide{
   -webkit-transform: translateY(155px);
-  -moz-transform: translateY(155px);
   transform: translateY(155px);
 }
 #minimap.hide canvas{
@@ -1023,7 +992,6 @@ h5{
 	width:130px;
 	opacity:1;
 	-webkit-transition:opacity 0.3s ease-in-out;
-	-moz-transition:opacity 0.3s ease-in-out;
 	transition:opacity 0.3s ease-in-out;
 }
 
@@ -1034,15 +1002,12 @@ h5{
   z-index: 1;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   -webkit-transform: translateX(400px);
-  -moz-transition: -webkit-transform 0.1s ease-in-out;
-  -moz-transform: translateX(400px);
   transition: -webkit-transform 0.1s ease-in-out;
   transform: translateX(400px);
 }
 .wallpaper.active {
   display:inline-block;
   -webkit-transform: translateX(0px);
-  -moz-transform: translateX(0px);
   transform: translateX(0px);
 }
 .wallpaper.active span {
@@ -1084,7 +1049,6 @@ h5{
 .wallpaper.active span:hover {
   cursor: pointer;
   -webkit-transform: translateX(3px) translateY(-3px);
-  -moz-transform: translateX(3px) translateY(-3px);
   transform: translateX(3px) translateY(-3px);
 }
 
@@ -1094,15 +1058,12 @@ h5{
   padding: 20px;
   -webkit-transform: translateX(400px);
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
-  -moz-transform: translateX(400px);
-  -moz-transition: -webkit-transform 0.2s ease-in-out;
   transform: translateX(400px);
   transition: -webkit-transform 0.2s ease-in-out;
 }
 
 .lightcontrol.active {
   -webkit-transform: translateX(0px);
-  -moz-transform: translateX(0px);
   transform: translateX(0px);
 }
 
@@ -1137,15 +1098,12 @@ input[type="range"]::-webkit-slider-thumb {
   font-size: 12px;
   -webkit-transform: translateY(400px);
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
-  -moz-transform: translateY(400px);
-  -moz-transition: -webkit-transform 0.2s ease-in-out;
   transform: translateY(400px);
   transition: -webkit-transform 0.2s ease-in-out;
 }
 
 .settings.active {
   -webkit-transform: translateY(0px);
-  -moz-transform: translateY(0px);
   transform: translateY(0px);
 }
 
@@ -1156,21 +1114,19 @@ input[type="range"]::-webkit-slider-thumb {
 #startpoint:hover {
   text-decoration: underline;
 }
-@-webkit-keyframes fade
-{
-  50%{
+@-webkit-keyframes fade {
+  50% {
     opacity:0.6;
   }
 }
-@-moz-keyframes fade
-{
+@keyframes fade {
   50%{
     opacity:0.6;
   }
 }
 #startpoint.active #moveText{
   -webkit-animation:fade 0.5s infinite;
-  -moz-animation:fade 0.5s infinite;
+  animation:fade 0.5s infinite;
 }
 #moveText{
   display:none;
@@ -1282,8 +1238,6 @@ button:hover {
   /*border-radius: 5px 0 0 5px;*/
   -webkit-transform: translate3d(-103%,0,0);
   -webkit-transition: all 250ms;
-  -moz-transform: translate3d(-103%,0,0);
-  -moz-transition: all 250ms;
   transform: translate3d(-103%,0,0);
   transition: all 250ms;
   background:;
@@ -1291,7 +1245,6 @@ button:hover {
 
 .radio-group__label + input:checked + .radio-group__label:before {
   -webkit-transform: translate3d(-6px,0,0);
-  -moz-transform: translate3d(-6px,0,0);
   transform: translate3d(-6px,0,0);
 }
   
@@ -1529,42 +1482,6 @@ form li textarea {
   100%{height:500px;top:2px;}
 }
 
-@-moz-keyframes borderanimation
-{
-  0%{width:600px;}
-  100%{width:750px;left:2px;}
-}
-
-@-moz-keyframes borderanimationleftright
-{
-  0%{height:250px;}
-  100%{height:500px;top:2px;}
-}
-
-@-ms-keyframes borderanimation
-{
-  0%{width:500px;}
-  100%{width:750px;left:2px;}
-}
-
-@-ms-keyframes borderanimationleftright
-{
-  0%{height:250px;}
-  100%{height:500px;top:2px;}
-}
-
-@-o-keyframes borderanimation
-{
-  0%{width:500px;}
-  100%{width:750px;left:2px;}
-}
-
-@-o-keyframes borderanimationleftright
-{
-  0%{height:250px;}
-  100%{height:500px;top:2px;}
-}
-
 @keyframes borderanimation
 {
   0%{width:500px;}
diff --git a/server/lib/schemas/Media.js b/server/lib/schemas/Media.js
index 127b222..b415bae 100644
--- a/server/lib/schemas/Media.js
+++ b/server/lib/schemas/Media.js
@@ -21,6 +21,18 @@ var MediaSchema = new mongoose.Schema({
 		type: String,
 		default: ""
 	},
+	width: {
+		type: Number,
+		default: 0
+	},
+	height: {
+		type: Number,
+		default: 0
+	},
+	title: {
+		type: String,
+		default: ""
+	},
 	user_id: { type: mongoose.Schema.ObjectId, index: true },
 	created_at: { type: Date },
 });
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 5cd158c..1beed5d 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -30,9 +30,9 @@
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/mover.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/_scenery.js"></script>
-<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/image/_image.js"></script>
-<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/image/move.js"></script>
-<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/image/resize.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/_image.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/move.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/resize.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui.js"></script>