7 files changed, 50 insertions, 38 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..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)