store image width/height

15 files changed, 217 insertions, 357 deletions

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..96eea19 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,31 @@ 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_img.init()
+	}
+	base.addNextToWall = function(wall){
+		base.add(wall, base.nextMedia)
+		console.log("add next to wall")
+		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..ba8ba03 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/image/_image.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js
@@ -1,4 +1,4 @@
-Scenery.image = function (wall, img) {
+Scenery.image = function (wall, media) {
 
 	var base = this
 	
diff --git a/public/assets/javascripts/rectangles/engine/scenery/image/move.js b/public/assets/javascripts/rectangles/engine/scenery/types/move.js
index e79ede9..188a3f4 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/image/move.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/move.js
@@ -8,6 +8,7 @@ Scenery.image.move = function(base){
 	this.bind = function(){
 		Scenery.mouse.bind_el(base.mx_img.el)
 		Scenery.mouse.on("down", down)
+		Scenery.mouse.on("move", move)
 		Scenery.mouse.on("enter", switch_wall)
 		Scenery.mouse.on("drag", drag)
 		Scenery.mouse.on("up", up)
@@ -16,6 +17,7 @@ Scenery.image.move = function(base){
 	this.unbind = function(){
 		Scenery.mouse.bind_el(base.mx_img.el)
 		Scenery.mouse.off("down", down)
+		Scenery.mouse.off("move", move)
 		Scenery.mouse.off("enter", switch_wall)
 		Scenery.mouse.off("drag", drag)
 		Scenery.mouse.off("up", up)
@@ -31,6 +33,10 @@ Scenery.image.move = function(base){
 		document.body.classList.add("dragging")
 	}
 	
+	function move (e, cursor){
+		console.log("hey")
+	}
+	
 	function drag (e, cursor){
 		if (! dragging) return
 		
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..6c20444 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -42,6 +42,9 @@ window.Wall = (function(){
 			mousedown: function(){
 				base.randomize_colors()
 				console.log(sidesToString(base.side))
+				if (Scenery.nextMedia) {
+					Scenery.addNextToWall(base)
+				}
 			}
 		})
 	}
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..3ade132 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 e48c5b6..84deb7d 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..f39239e 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,19 @@ 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',
+				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 +51,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 +100,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..e14b570 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,15 @@ 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;
 }
 
 .ants.edit {
@@ -81,16 +82,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 +95,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 +108,7 @@ display: none;
   background:#fff;
 }
 
-.leftborder:before
-{
+.leftborder:before {
   content:"";
   height:250px; 
   border-left:1px dashed #000;
@@ -124,15 +116,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 +128,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 +243,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 +257,8 @@ h5{
 }
 
 .room1.editing .formHolder {
-  -webkit-transform:translateY(0);
-  -moz-transform:translateY(0);
+	-webkit-transform:translateY(0);
+	transform:translateY(0);
 }
 
 .page .questions {
@@ -511,18 +496,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 +682,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 +718,6 @@ h5{
 }
 .mediaDrawer.active {
   -webkit-transform:translateY(0%);
-  -moz-transform:translateY(0%);
   transform:translateY(0%);
 }
 .mediaDrawer.signin, .mediaDrawer.signup,
@@ -814,8 +791,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 +799,6 @@ h5{
 
 .fileUpload.active {
   -webkit-transform:translateY(0%);
-  -moz-transform:translateY(0%);
   transform:translateY(0%);
 }
 
@@ -871,7 +845,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 +857,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 +977,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 +991,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 +1001,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 +1048,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 +1057,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 +1097,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 +1113,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 +1237,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 +1244,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 +1481,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>