removing old mx stuff

18 files changed, 73 insertions, 1521 deletions

diff --git a/public/assets/javascripts/environments/app.js b/public/assets/javascripts/environments/app.js
deleted file mode 100644
index cdc104b..0000000
--- a/public/assets/javascripts/environments/app.js
+++ /dev/null
@@ -1,28 +0,0 @@
-var scrubber, fish, floor
-
-var environment = new function(){}
-environment.init = function(){
-
-	scene.camera.move({
-		"x": 0,
-		"y": 0,
-		"z": 0,
-		"rotationX": 0.085,
-		"rotationY": 0.025
-	})
-	map && map.zoom(3.00) && map.recenter()
-
-	//
-	// intro floor, models, etc
-
-}
-
-
-environment.update = function(t){
-
-	// add continuous animations and stuff here
-
-	map && map.update()
-
-}
-
diff --git a/public/assets/javascripts/environments/tableaux/_empty.js b/public/assets/javascripts/environments/tableaux/_empty.js
deleted file mode 100644
index b69fa78..0000000
--- a/public/assets/javascripts/environments/tableaux/_empty.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
-
-MX.Tableaux.Foo = MX.Tableau.extend({
-
-	init: function (opt) {
-		
-		this.opt = opt = defaults(opt, {
-			width: 100,
-			height: 100,
-			depth: 100,
-			x: 0,
-			y: 0,
-			z: 0,
-			rotationY: 0,
-			rotationX: 0,
-			scale: 1,
-		})
-		
-	},
-	
-	animate: function() {
-	},
-	
-	show: function(){
-	},
-	
-	hide: function(){
-	},
-
-})
-
-*/
diff --git a/public/assets/javascripts/environments/tableaux/columns.js b/public/assets/javascripts/environments/tableaux/columns.js
deleted file mode 100644
index e961315..0000000
--- a/public/assets/javascripts/environments/tableaux/columns.js
+++ /dev/null
@@ -1,36 +0,0 @@
-MX.Tableaux.Columns = MX.Tableau.extend({
-
-	init: function (opt) {
-
-		this.opt = opt = defaults(opt, {
-			width: 10,
-			height: 10,
-			depth: 10,
-			x: 0,
-			y: 0,
-			z: 0,
-			rotationY: 0,
-			rotationX: 0,
-			scale: 1,
-			count: 3,
-			spacingX: 0,
-			spacingZ: 100,
-		})
-		
-		for (var i = 0; i < opt.count; i++) {
-			var scalebox = new MX.ScaleBox({
-				"width": opt.width,
-				"height": opt.height,
-				"depth": opt.depth,
-				"x": opt.x + opt.spacingX * i,
-				"y": opt.y,
-				"z": opt.z + opt.spacingZ * i,
-				"color": opt.color,
-				"sides": "top bottom left right front back"
-			});
-			scene.add(scalebox)
-		}
-
-	}
-	
-})
diff --git a/public/assets/javascripts/environments/tableaux/columns_circle.js b/public/assets/javascripts/environments/tableaux/columns_circle.js
deleted file mode 100644
index 1816e51..0000000
--- a/public/assets/javascripts/environments/tableaux/columns_circle.js
+++ /dev/null
@@ -1,42 +0,0 @@
-MX.Tableaux.ColumnsCircle = MX.Tableau.extend({
-
-	init: function (opt) {
-
-		this.opt = opt = defaults(opt, {
-			width: 10,
-			height: 10,
-			depth: 10,
-			radius: 10,
-			theta: 0,
-			skip: 0,
-			x: 0,
-			y: 0,
-			z: 0,
-			rotationY: 0,
-			rotationX: 0,
-			scale: 1,
-			count: 3,
-		})
-		
-		var scalebox, theta
-		var radius = opt.radius
-
-		for (var i = opt.skip; i < opt.count; i++) {
-			theta = i/opt.count * TWO_PI + opt.theta
-			scalebox = new MX.ScaleBox({
-				"width": opt.width,
-				"height": opt.height,
-				"depth": opt.depth,
-				"x": opt.x + sin(theta) * radius,
-				"y": opt.y,
-				"z": opt.z + cos(theta) * radius,
-				"rotationY": PI - theta,
-				"color": opt.color,
-				"sides": "top bottom left right front back"
-			});
-			scene.add(scalebox)
-		}
-
-	}
-	
-})
diff --git a/public/assets/javascripts/environments/tableaux/columns_split.js b/public/assets/javascripts/environments/tableaux/columns_split.js
deleted file mode 100644
index b9981d6..0000000
--- a/public/assets/javascripts/environments/tableaux/columns_split.js
+++ /dev/null
@@ -1,63 +0,0 @@
-MX.Tableaux.ColumnsSplit = MX.Tableau.extend({
-
-	init: function (opt) {
-
-		this.opt = opt = defaults(opt, {
-			width: 100,
-			height: 100,
-			depth: 100,
-			norm: 0.5,
-			gap: 5,
-			x: 0,
-			y: 0,
-			z: 0,
-			rotationY: 0,
-			scale: 1,
-			count: 1,
-		})
-		
-		opt.colorBottom = opt.colorBottom || opt.color
-		
-		if ( ! (opt.norm instanceof Array) ) {
-			opt.norm = [ opt.norm, opt.norm ]
-		}
-		
-		var norm, spacingX, spacingZ, scalebox
-		
-		for (var i = 0; i < opt.count; i++) {
-
-			norm = lerp( i/(opt.count-1), opt.norm[0], opt.norm[1] )
-
-			spacingX = opt.spacingX * i
-			spacingZ = opt.spacingZ * i
-
-			scalebox = new MX.ScaleBox({
-				"width": opt.width,
-				"height": opt.height * norm,
-				"depth": opt.depth,
-				"x": opt.x + spacingX,
-				"y": opt.y + opt.gap,
-				"z": opt.z + spacingZ,
-				"color": opt.color,
-				"sides": "top bottom left right front back",
-				"rotationY": opt.rotationY,
-			});
-			scene.add(scalebox)
-
-			scalebox = new MX.ScaleBox({
-				"width": opt.width,
-				"height": opt.height * (1 - norm),
-				"depth": opt.depth,
-				"x": opt.x + spacingX,
-				"y": opt.y - opt.height * (1 - norm) - opt.gap,
-				"z": opt.z + spacingZ,
-				"color": opt.colorBottom,
-				"sides": "top bottom left right front back",
-				"rotationY": opt.rotationY,
-			});
-			scene.add(scalebox)
-		}
-
-	}
-	
-})
diff --git a/public/assets/javascripts/map/map.js b/public/assets/javascripts/map/map.js
deleted file mode 100644
index a90963f..0000000
--- a/public/assets/javascripts/map/map.js
+++ /dev/null
@@ -1,337 +0,0 @@
-
-MX.Map = function(){
-	var base = this;
-	
-	var parent = document.querySelector("#map")
-	var canvas = document.createElement("canvas")
-	var ctx = canvas.getContext("2d")
-	var w, h
-	
-	var visible = parent.style.display == "block"
-	if (visible) resize()
-	
-	var center = {x:0,y:0}
-	var gridSpace;
-	var zoom = 3.0
-	
-	var gridStroke = '#ddd'
-	var boxFill = '#fff'
-	var boxStroke = '#000'
-	var playerColor = '#888'
-
-	var xmin, xmax, ymin, ymax, xpos, ypos, scale, side;
-
-	var tube = base.tube = new Tube ()
-
-	this.zoom = function(n){ if (n) zoom = n; return zoom }
-	this.recenter = function(){ center.x = cam.x; center.y = cam.z }
-
-	function resize(){
-		var rect = parent.getBoundingClientRect()
-	  w = canvas.width = ~~rect.width
-	  h = canvas.height = ~~rect.height
-	}
-
-	this.on = function(){
-    base.tube.on.apply(base.tube, arguments)
-  }
-  this.off = function(){
-    base.tube.off.apply(base.tube, arguments)
-  }
-
-	this.update = function(){
-		if (! visible) return;
-		this.draw()
-	}
-
-	this.bounds = function(){
-		gridSpace = pow(10, ~~(zoom-0.25) + 0.25)
-		side = Math.pow(10, zoom+1)
-		scale = w / side
-		xpos = center.x // -cam.x
-		ypos = center.y // cam.z
-		
-		xmin = side/-2 - xpos
-		xmax = side/2 - xpos
-		ymin = side/-2 - ypos
-		ymax = side/2 - ypos
-	}
-	
-	this.draw = function(){
-		ctx.clearRect(0,0,w,h)
-
-		ctx.fillStyle = "#fff"
-		ctx.fillRect(0,0,w,h)
-		this.bounds()
-		this.grid()
-		this.boxes()
-		this.player()
-	}
-	
-	this.grid = function(){
-		ctx.strokeStyle = gridStroke
-		ctx.lineWidth = 1
-		ctx.fillStyle = "transparent"
-		
-		var x0 = norm(0, xmin, xmax)
-		var y0 = norm(0, ymin, ymax)
-		
-		var xg = norm(gridSpace, xmin, xmax)
-		var yg = norm(gridSpace, ymin, ymax)
-		
-		var xgw = (xg-x0)
-		
-		var xmod = mod(x0, xgw)
-		var ymod = mod(y0, xgw)
-		
-		var xend = 1 + xgw
-		var yend = h/w + xgw
-
-		var xline, yline;
-		for (var x = -xmod; x < xend; x += xgw) {
-			xline = x * w
-			line(xline, 0, xline, h)
-		}
-		for (var y = -ymod; y < yend; y += xgw) {
-			yline = y * w
-			line(0, yline, w, yline)
-		}
-		
-		function line(x0,y0,x1,y1) {
-			ctx.beginPath()
-			ctx.moveTo(x0, y0)
-			ctx.lineTo(x1, y1)
-			ctx.stroke()
-		}
-	}
-	this.player = function(){
-		ctx.save()
-
- 		ctx.translate(~~(w/2),~~(h/2));
- 		ctx.lineWidth = 0.5
-		var tx = ((-xpos) * scale),
-				ty = ((-ypos) * scale);
-		ctx.translate(tx, ty)
-
-		var obj_scale = (1) * scale
-
-		var tx = ~~((cam.x) * obj_scale),
-				ty = ~~((cam.z) * obj_scale);
-		ctx.translate(-tx, ty)
-		ctx.rotate(-cam.rotationY)
-
-		var radius = 5
-
-		ctx.fillStyle = playerColor;
-		
-		ctx.beginPath();
-		ctx.arc(0, 0, radius, 0, 2*Math.PI, false);
-		ctx.fill();
-
-		ctx.beginPath();
-		ctx.moveTo(0,0)
-		ctx.lineTo(-radius,0)
-		ctx.lineTo(0,radius*3)
-		ctx.lineTo(radius,0)
-		ctx.moveTo(0,0)
-		ctx.fill()
-		
-		ctx.fillStyle = "transparent"
-		ctx.restore()
-	}
-	
-	this.boxes = function(){
-
-		ctx.save()
- 		ctx.translate(~~(w/2),~~(h/2));
- 		ctx.lineWidth = 0.5
-		var tx = ((-xpos) * scale),
-				ty = ((-ypos) * scale);
-		ctx.translate(tx, ty)
-
-		scene.inner.children.forEach(function(obj){
-			if (obj.type == "BoxDimensions" || obj.type == "ScaleBox") {
-
-				ctx.save()
-				ctx.fillStyle = obj.color
-				ctx.strokeStyle = "#222"
-				
-				var obj_scale = (obj.scale || 1) * scale
-
-				var tx = ~~((obj.x) * scale),
-				    ty = ~~((obj.z) * scale);
-				ctx.translate(-tx, ty)
-				ctx.rotate(-obj.rotationY)
-				
-				var ww = ~~(obj.width/2 * obj_scale)
-				var hh = ~~(obj.depth/2 * obj_scale)
-				ctx.beginPath();
-				ctx.moveTo(ww, hh)
-				
-				ctx.lineTo(ww, -hh)
-				ctx.lineTo(-ww, -hh)
-				ctx.lineTo(-ww, hh)
- 				ctx.closePath()
-				ctx.fill()
-				ctx.stroke()
-				ctx.restore()
-			}
-			if (obj.type == "Image" || obj.type == "Cutout") {
-				ctx.save()
-				ctx.strokeStyle = "#444"
-				
-				var obj_scale = (obj.scale || 1) * scale
-
-				var tx = ~~((obj.x) * scale),
-				    ty = ~~((obj.z) * scale);
-				ctx.translate(-tx, ty)
-				ctx.rotate(-obj.rotationY)
-				
-				var ww = ~~(obj.width/2 * obj_scale)
-				ctx.beginPath();
-				ctx.moveTo(ww, 0)
-				ctx.lineTo(-ww, 0)
- 				ctx.closePath()
-				ctx.stroke()
-				ctx.restore()
-			}
-		})
-		ctx.restore()
-	}
-
-
-	var dragging = false, mx = 0, my = 0, mdx = 0, mdy = 0, cx, cy,
-			creating = false, moving = false;
-	
-	function positionFromMouse(e) {
-		var rect = canvas.getBoundingClientRect()
-		cx = center.x
-		cy = center.y
-		mx = e.pageX - rect.left
-		my = e.pageY - rect.top
-		mdx = (mx - w/2) / scale + cx
-		mdy = (my - h/2) / scale + cy
-	}
-	
-	canvas.addEventListener("mousedown", function(e){
-		e.stopPropagation()
-		dragging = true
-
-		positionFromMouse(e)
-
-		if (e.shiftKey) {
-			creating = true
-		}
-
-		hud.update( mdx, mdy )
-
-		base.tube("mousedown", e, -mdx, mdy)
-	})
-	document.addEventListener("mousemove", function(e){
-		if (dragging) {
-			e.stopPropagation()
-
-			var rect = canvas.getBoundingClientRect()
-			var mnx = e.pageX - rect.left
-			var mny = e.pageY - rect.top
-
-			mdx = (mnx - mx) / scale 
-			mdy = (mny - my) / scale
-			
-			if (creating) {
-				hud.update( mdx, mdy )
-			}
-			else if (moving) {
-				cam.x = cx - mdx
-				cam.z = cy + mdy
-			}
-			else {
-				center.x = cx - mdx
-				center.y = cy - mdy
-				hud.update(center.x, center.y)
-			}
-			
-			base.tube("mousedrag", e, -mdx, mdy)
-		}
-		else {
-			positionFromMouse(e)
-			hud.update( mdx, mdy )
-			base.tube("mousemove", e, -mdx, mdy)
-		}
-	})
-	document.addEventListener("mouseup", function(e){
-		creating = dragging = moving = false;
-		base.tube("mouseup", e)
-	})
-
-	canvas.addEventListener("contextmenu", function(e){
-		e.preventDefault()
-		e.stopPropagation()
-		dragging = true
-
-		positionFromMouse(e)
-		
-		moving = true
-		cx = cam.x = -mdx
-		cy = cam.z = mdy
-
-		hud.update( mdx, mdy )
-
-		base.tube("contextmenu", e)
-	})
-	
-	canvas.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
-  canvas.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);
-	function onDocumentMouseWheel (e) {
-		e.preventDefault()
-		e.stopPropagation()
-		var delta = 0
-		
-		// WebKit
-		if ( event.wheelDeltaY ) {
-			delta = - event.wheelDeltaY * 0.0003;
-		}
-		// Opera / Explorer 9
-		else if ( event.wheelDelta ) {
-			delta = - event.wheelDelta * 0.0003;
-		}
-		// Firefox
-		else if ( event.detail ) {
-			delta = event.detail * 0.01;
-		}
-		
-		if (! e.shiftKey) {
-			zoom += delta
-		}
-		
-		positionFromMouse(e)
-		base.tube("mousewheel", e, mdx, mdy, delta)
-		
-		map.update()
-	}
-		
-	window.addEventListener('resize', resize)
-
-	this.toggle = function(){
-		(visible = ! visible) ? base.show() : base.hide()
-	}
-	this.show = function(){
-		parent.style.display = "block"
-		resize()
-	}
-	this.hide = function(){
-		parent.style.display = "none"
-	}
-
-	var hud = new function(){
-		var el = document.querySelector("#map .hud")
-		this.update = function(){
-			el.innerHTML = Array.prototype.slice.call(arguments,0).map(function(s){ return typeof s == "number" ? Math.round(s) : s }).join(" ")
-		}
-	}
-	hud.update()
-
-	this.update()
-	document.querySelector("#map .el").appendChild(canvas)
-}
-
diff --git a/public/assets/javascripts/map/map_editor.js b/public/assets/javascripts/map/map_editor.js
deleted file mode 100644
index 754172b..0000000
--- a/public/assets/javascripts/map/map_editor.js
+++ /dev/null
@@ -1,102 +0,0 @@
-var editor = new function (){
-
-	var base = this;
-
-	var cube = null
-	var cx, cy
-	
-	base.init = function(){
-		map.on("mousedown", base.mousedown)
-		map.on("mousemove", base.mousemove)
-		map.on("mousedrag", base.mousedrag)
-		map.on("mouseup", base.mouseup)
-		map.on("mousewheel", base.mousewheel)
-		document.getElementById("export").addEventListener("keydown", base.stopPropagation)
-		document.getElementById("export").addEventListener("mousedown", base.stopPropagation)
-		document.getElementById("export").addEventListener("mousemove", base.stopPropagation)
-		document.getElementById("export").addEventListener("mouseup", base.stopPropagation)
-		window.addEventListener('keydown', base.keydown)
-	}
-	
-	base.mousedown = function(e,x,y) {
-		if (! e.shiftKey) return
-		cx = x
-		cy = y
-		cube = new MX.BoxDimensions({
-			x: cx,
-			y: -10,
-			z: cy,
-			width: 1,
-			height: 1,
-			depth: 1,
-			borderWidth: 1,
-			borderColor: "#000",
-			color: "#fff"
-		})
-		cube.persisted = false
-		scene.add( cube );
-	}
-	
-	base.mousemove = function(e,x,y) {
-	}
-	
-	base.mousedrag = function(e,dx,dy) {
-		if (! cube) return
-		cube.x = cx + dx/2
-		cube.z = cy + dy/2
-		cube.setWidth( abs(dx) )
-		cube.setDepth( abs(dy) )
-		cube.setHeight( max( cube.width, cube.depth ) )
-		cube.update()
-	}
-	
-	base.mouseup = function(e){
-		cube = null
-	}
-	
-	base.mousewheel = function(e,x,z,delta){
-		if (! e.shiftKey) return;
-
-		scene.inner.children.some(function(s){
-			if (s.contains(-x, null, z)) {
-				s.y += delta * 1000
-				s.persisted = false
-				console.log(s.id)
-				return true
-			}
-			return false
-		})
-
-	}
-	
-	base.stopPropagation = function(e){ e.stopPropagation() }
-	
-	base.exportObjects = function(){
-		var s = scene.inner.children
-							.filter(function(s){ return ! s.persisted })
-							.map(function(s){ return s.toString() })
-							.join("\n\n")
-		document.getElementById("export").value = s
-	}
-	
-	base.exportCamera = function(){
-		var s = scene.camera.toString()
-		document.getElementById("export").value = s
-		console.log(s)
-	}
-
-	base.keydown = function(e){
-		switch (e.keyCode) {
-
-			case 67: // c
-				base.exportCamera()
-				break;
-
-			case 86: // v
-				base.exportObjects()
-				break;
-
-		}
-	}
-
-}
diff --git a/public/assets/javascripts/mx/mx.minimap.js b/public/assets/javascripts/mx/mx.minimap.js
deleted file mode 100644
index 252305c..0000000
--- a/public/assets/javascripts/mx/mx.minimap.js
+++ /dev/null
@@ -1,211 +0,0 @@
-MX.Minimap = function () {
-	var canvas = document.createElement("canvas")
-	var ctx = canvas.getContext("2d")
-	var w = canvas.width = 200
-	var h = canvas.height = 200
-		
-	var gridSpace;
-	var zoom = 2.7
-	
-	var gridStroke = '#ddd'
-	var boxFill = '#fff'
-	var boxStroke = '#000'
-	var playerColor = '#888'
-
-	var xmin, xmax, ymin, ymax, xpos, ypos, scale, side;
-
-	this.update = function(){
-		this.draw()
-	}
-
-	this.bounds = function(){
-		gridSpace = Math.pow(10, ~~(zoom-0.5)+0.5)
-		side = Math.pow(10, zoom+1)
-		scale = w / side
-		xpos = -cam.x
-		ypos = cam.z
-		
-		xmin = side/-2 - xpos
-		xmax = side/2 - xpos
-		ymin = side/-2 - ypos
-		ymax = side/2 - ypos
-	}
-	
-	this.draw = function(){
-		ctx.clearRect(0,0,w,h)
-
-		ctx.fillStyle = "#fff"
-		ctx.fillRect(0,0,w,h)
-		this.bounds()
-		this.grid()
-		this.boxes()
-		this.player()
-	}
-	
-	this.grid = function(){
-		ctx.strokeStyle = gridStroke
-		ctx.lineWidth = 1
-		ctx.fillStyle = "transparent"
-		
-		var xmod = xmin-(xmin % gridSpace)
-		var ymod = ymin-(ymin % gridSpace)
-		
- 		for (var x = xmin; x < xmax+gridSpace; x += gridSpace) {
- 			var xline = (x-xmod) * scale
-			line(xline, 0, xline, h)
-		}
- 		for (var y = ymin; y < ymax+gridSpace; y += gridSpace) {
- 			var yline = (y-ymod) * scale
-			line(0, yline, w, yline)
-		}
-		
-		function line(x0,y0,x1,y1) {
-			ctx.beginPath()
-			ctx.moveTo(x0, y0)
-			ctx.lineTo(x1, y1)
-			ctx.stroke()
-		}
-	}
-	this.player = function(){
-		ctx.save()
-		
- 		ctx.translate(~~(w/2),~~(h/2));
-		ctx.rotate(-cam.rotationY)
-
-		var radius = 5
-
-		ctx.fillStyle = playerColor;
-		
-		ctx.beginPath();
-		ctx.arc(0, 0, radius, 0, 2*Math.PI, false);
-		ctx.fill();
-
-		ctx.beginPath();
-		ctx.moveTo(0,0)
-		ctx.lineTo(-radius,0)
-		ctx.lineTo(0,radius*3)
-		ctx.lineTo(radius,0)
-		ctx.moveTo(0,0)
-		ctx.fill()
-		
-		ctx.fillStyle = "transparent"
-		ctx.restore()
-	}
-	
-	this.boxes = function(){
-
-		ctx.save()
- 		ctx.translate(~~(w/2),~~(h/2));
- 		ctx.lineWidth = 0.5
-		var tx = ((-xpos) * scale),
-				ty = ((-ypos) * scale);
-		ctx.translate(tx, ty)
-
-		scene.inner.children.forEach(function(obj){
-			if (obj.type == "BoxDimensions") {
-
-				ctx.save()
-				ctx.fillStyle = obj.color
-				ctx.strokeStyle = obj.borderColor
-				
-				var obj_scale = (obj.scale || 1) * scale
-
-				var tx = ~~((obj.x) * obj_scale),
-				    ty = ~~((obj.z) * obj_scale);
-				ctx.translate(-tx, ty)
-				ctx.rotate(-obj.rotationY)
-				
-				var ww = ~~(obj.width/2 * obj_scale)
-				var hh = ~~(obj.depth/2 * obj_scale)
-				ctx.beginPath();
-				ctx.moveTo(ww, hh)
-				
-				ctx.lineTo(ww, -hh)
-				ctx.lineTo(-ww, -hh)
-				ctx.lineTo(-ww, hh)
- 				ctx.closePath()
-				ctx.fill()
-				ctx.stroke()
-				ctx.restore()
-			}
-			if (obj.type == "Image") {
-
-				ctx.save()
-				ctx.strokeStyle = "#444"
-				
-				var obj_scale = (obj.scale || 1) * scale
-
-				var tx = ~~((obj.x) * obj_scale),
-				    ty = ~~((obj.z) * obj_scale);
-				ctx.translate(-tx, ty)
-				ctx.rotate(-obj.rotationY)
-				
-				var ww = ~~(obj.width/2 * obj_scale)
-				ctx.beginPath();
-				ctx.moveTo(ww, 0)
-				ctx.lineTo(-ww, 0)
- 				ctx.closePath()
-				ctx.stroke()
-				ctx.restore()
-			}
-		})
-		ctx.restore()
-	}
-	
-	var dragging = false, mx = 0, my = 0, mdx = 0, mdy = 0, cx, cy;
-	canvas.addEventListener("mousedown", function(e){
-		e.stopPropagation()
-		var rect = canvas.getBoundingClientRect()
-		dragging = true;
-		mx = e.pageX - rect.left
-		my = e.pageY - rect.top
-		mdx = (mx - w/2) / scale
-		mdy = (my - h/2) / scale
-		cx = cam.x // -= mdx
-		cy = cam.z // += mdy
-
-		minimap.update()
-	})
-	document.addEventListener("mousemove", function(e){
-		if (dragging) {
-			e.stopPropagation()
-			var rect = canvas.getBoundingClientRect()
-			var mnx = e.pageX - rect.left
-			var mny = e.pageY - rect.top
-			mdx = (mnx - mx) / scale
-			mdy = (mny - my) / scale
-			
-			cam.x = cx + mdx
-			cam.z = cy - mdy
-			minimap.update()
-		}
-	})
-	document.addEventListener("mouseup", function(e){
-		dragging = false;
-	})
-
-	canvas.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
-  canvas.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);
-	function onDocumentMouseWheel (e) {
-		e.preventDefault()
-		e.stopPropagation()
-		// WebKit
-		if ( event.wheelDeltaY ) {
-			zoom -= event.wheelDeltaY * 0.0003;
-		}
-		// Opera / Explorer 9
-		else if ( event.wheelDelta ) {
-			zoom -= event.wheelDelta * 0.0003;
-		}
-		// Firefox
-		else if ( event.detail ) {
-			zoom += event.detail * 0.01;
-		}
-		minimap.update()
-	}
-
-	this.draw()
-	document.querySelector("#minimap .el").appendChild(canvas)
-
-	return this;
-}
\ No newline at end of file
diff --git a/public/assets/javascripts/mx/primitives/mx.box.js b/public/assets/javascripts/mx/primitives/mx.box.js
deleted file mode 100644
index dfe3f5e..0000000
--- a/public/assets/javascripts/mx/primitives/mx.box.js
+++ /dev/null
@@ -1,62 +0,0 @@
-MX.Box = MX.Object3D.extend({
-
-    // this will be called within the contructor
-    init: function (size, color, borderColor) {
-
-				this.type = "Box"
-		
-        size = size || 100
-        color = color || 'rgba(0, 255, 122, .1)'
-        borderColor = borderColor || '#0f3'
-
-        // an Object3D's associated DOM node is the "el" property
-        this.el.classList.add('box')
-
-        var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
-
-        var top = this.top = new MX.Object3D('.face')
-        top.rotationX = angle
-        top.y = size / 2
-
-        var bottom = this.bottom = new MX.Object3D('.face')
-        bottom.rotationX = -angle
-        bottom.y = -size / 2
-
-        var left = this.left = new MX.Object3D('.face')
-        left.rotationY = -angle
-        left.x = -size / 2
-
-        var right = this.right = new MX.Object3D('.face')
-        right.rotationY = angle
-        right.x = size / 2
-
-        var front = this.front = new MX.Object3D('.face')
-        front.z = -size / 2
-
-        var back = this.back = new MX.Object3D('.face')
-        back.rotationY = angle * 2
-        back.z = size / 2
-
-        // adding children, must also be instances of Object3D
-        this.add(top, bottom, left, right, front, back)
-
-        this.children.forEach(function (face) {
-            face.width = size - 2
-            face.height = size - 2
-            face.el.style.backgroundColor = color
-            face.el.style.border = '1px solid ' + borderColor
-        })
-
-        // this applies the updated CSS style
-        // required for any change to take effect
-        // when a parent object's update() is called
-        // all its children will be updated as well
-        this.update()
-
-        // if this object's children won't move by themselves
-        this.updateChildren = false
-    }
-
-    // other properties will be mixed into the prototype of the new constructor
-
-})
\ No newline at end of file
diff --git a/public/assets/javascripts/mx/primitives/mx.boxDimensions.js b/public/assets/javascripts/mx/primitives/mx.boxDimensions.js
deleted file mode 100644
index 1d457ae..0000000
--- a/public/assets/javascripts/mx/primitives/mx.boxDimensions.js
+++ /dev/null
@@ -1,154 +0,0 @@
-MX.BoxDimensions = MX.Object3D.extend({
-
-	// this will be called within the contructor
-	init: function (opt) {
-
-		var base = this
-
-		this.type = "BoxDimensions"
-		
-		var id = this.id = opt.id || _.uniqueId()
-		this.x = opt.x || 0
-		this.y = opt.y || 0
-		this.z = opt.z || 0
-		// this.scale = opt.scale || 1
-		var scale = opt.scale || 1
-		this.rotationX = opt.rotationX || 0
-		this.rotationY = opt.rotationY || 0
-		this.rotationZ = opt.rotationZ || 0
-		var width = this.width = opt.width || 100
-		var height = this.height = opt.height || 100
-		var depth = this.depth = opt.depth || 100
-		var color = this.color = opt.color || 'rgba(0, 255, 122, .1)'
-		var backgroundImage = this.backgroundImage = opt.backgroundImage;
-		var borderColor = this.borderColor = opt.borderColor || '#0f3'
-		var borderWidth = this.borderWidth = typeof opt.borderWidth !== 'undefined' ? opt.borderWidth : 3;
-		var borderRadius = this.borderRadius = typeof opt.borderRadius !== 'undefined' ? opt.borderRadius : undefined;
-		var sides = this.sides = opt.sides || "top bottom left right front back"
-		var className = this.className = opt.className || null
-
-		// an Object3D's associated DOM node is the "el" property
-		this.el.classList.add('box')
-
-		var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
-
-		this.top = this.bottom = this.left = this.right = this.front = this.back = null
-		if (-1 != sides.indexOf("top")) {
-			var top = this.top = new MX.Object3D('.face.top')
-			top.rotationX = angle
-			top.width = width
-			top.height = depth
-			top.y = height * scale
-			top.scale = scale
-			this.add(top)
-		}
-		if (-1 != sides.indexOf("bottom")) {
-			var bottom = this.bottom = new MX.Object3D('.face.bottom')
-			bottom.rotationX = -angle
-			bottom.width = width
-			bottom.height = depth
-			bottom.y = 0
-			bottom.scale = scale
-			this.add(bottom)
-		}
-		if (-1 != sides.indexOf("left")) {
-			var left = this.left = new MX.Object3D('.face.left')
-			left.rotationY = -angle
-			left.width = depth
-			left.height = height
-			left.x = -width/2 * scale
-			left.y = height/2 * scale
-			left.scale = scale
-			this.add(left)
-		}
-		if (-1 != sides.indexOf("right")) {
-			var right = this.right = new MX.Object3D('.face.right')
-			right.rotationY = angle
-			right.width = depth
-			right.height = height
-			right.x = width/2 * scale
-			right.y = height/2 * scale
-			right.scale = scale
-			this.add(right)
-		}
-		if (-1 != sides.indexOf("front")) {
-			var front = this.front = new MX.Object3D('.face.front')
-			front.width = width
-			front.height = height
-			front.z = -depth/2 * scale
-			front.y = height/2 * scale
-			front.scale = scale
-			this.add(front)
-		}
-		if (-1 != sides.indexOf("back")) {
-			var back = this.back = new MX.Object3D('.face.back')
-			back.width = width
-			back.height = height
-			back.rotationY = angle * 2
-			back.z = depth/2 * scale
-			back.y = height/2 * scale
-			back.scale = scale
-			this.add(back)
-		}
-
-		this.children.forEach(function (face) {
-			if (borderRadius) {
-				face.el.style.borderRadius = borderRadius + "px"
-			}
-			if (className) {
-				face.el.classList.add(className)
-			}
-			else {
-				if (backgroundImage) {
-					face.el.style.backgroundImage = "url(" + backgroundImage + ")"
-				}
-				else if (color) {
-					face.el.style.backgroundColor = color
-				}
-				if (borderWidth) {
-					face.el.style.border = borderWidth + 'px solid ' + borderColor
-				}
-			}
-		})
-
-		// bottom.el.style.border = "0"
-
-		// this applies the updated CSS style
-		// required for any change to take effect
-		// when a parent object's update() is called
-		// all its children will be updated as well
-		this.update()
-
-		// if this object's children won't move by themselves
-		this.updateChildren = true
-
-		this.setWidth = function(w){
-			base.width = top.width = bottom.width = front.width = back.width = w
-			left.x = -w/2
-			right.x = w/2
-			base.dirty = true
-		}
-		this.setHeight = function(h){
-			base.height = left.height = right.height = front.height = back.height = h
-			bottom.y = 0
-			left.y = right.y = front.y = back.y = h/2
-			top.y = h
-			base.dirty = true
-		}
-		this.setDepth = function(d){
-			base.depth = top.height = bottom.height = left.width = right.width = d
-			front.z = -d/2
-			back.z = d/2
-			base.dirty = true
-		}
-
-	},
-
-	toString: function(){
-		var params = "id width height depth x y z rotationX rotationY scale color borderColor borderWidth backgroundImage borderRadius sides".split(" ")
-		return this.__toString(params)
-	},
-
-	// other properties will be mixed into the prototype of the new constructor
-
-})
\ No newline at end of file
diff --git a/public/assets/javascripts/mx/primitives/mx.coords.js b/public/assets/javascripts/mx/primitives/mx.coords.js
deleted file mode 100644
index 80b148c..0000000
--- a/public/assets/javascripts/mx/primitives/mx.coords.js
+++ /dev/null
@@ -1,61 +0,0 @@
-MX.Coords = (function () {
-
-    var colors = {
-        x: '#f33',
-        y: '#3f3',
-        z: '#66f'
-    }
-
-    var Axis = MX.Object3D.extend({
-        init: function (axis, size) {
-
-            var label = document.createElement('span')
-            label.textContent = axis.toUpperCase()
-            label.style.position = 'absolute'
-            label.style.right = '0px'
-            label.style.bottom = '3px'
-            label.style.fontSize = Math.round(size / 10) + 'px'
-            this.el.appendChild(label)
-
-            var faceA = new MX.Object3D(),
-                faceB = new MX.Object3D()
-            faceA.rotationX = 90
-            this.add(faceA, faceB)
-
-            this.el.style.color =
-            faceA.el.style.backgroundColor = 
-            faceB.el.style.backgroundColor = colors[axis]
-
-            this.width =
-            faceA.width =
-            faceB.width = size
-
-            this.height =
-            faceA.height =
-            faceB.height = Math.round(size / 100)
-
-            var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
-
-            if (axis === 'y') {
-                this.rotationZ = -angle
-            } else if (axis === 'z') {
-                this.rotationY = angle
-            }
-        }
-    })
-
-    var Coords = MX.Object3D.extend({
-        init: function (size) {
-            size = size || 100
-            var x = new Axis('x', size),
-                y = new Axis('y', size),
-                z = new Axis('z', size)
-            this.add(x, y, z)
-            this.update()
-            this.updateChildren = false
-        }
-    })
-
-    return Coords
-
-})()
\ No newline at end of file
diff --git a/public/assets/javascripts/mx/primitives/mx.cutout.js b/public/assets/javascripts/mx/primitives/mx.cutout.js
deleted file mode 100644
index 9d9043f..0000000
--- a/public/assets/javascripts/mx/primitives/mx.cutout.js
+++ /dev/null
@@ -1,66 +0,0 @@
-MX.Cutout = MX.Object3D.extend({
-  init: function (ops) {
-  
-  	this.type = "Cutout"
-
-    var layer = this
-    layer.width = 0
-    layer.height = 0
-
-    if (ops.src) this.loadTexture(ops)
-
-		if (ops.texture) {
-		}
-		else if (ops.classname) {
-			layer.el.classList.add(ops.classname)
-		}
-		else {
-		}
-		layer.el.style.backgroundRepeat = 'no-repeat'
-
-    this.dirty = true
-    this.updateChildren = true
-    this.update()
-  },
-
-  loadTexture: function(ops){
-    var layer = this
-    var image = new Image()
-    var pattern = ops.pattern
-    var texture = ops.texture
-    
-    image.onload = function(){
-			var canvas = document.createElement("canvas")
-			var ctx = canvas.getContext('2d')
-
-			layer.width = canvas.width = image.naturalWidth
-			layer.height = canvas.height = image.naturalHeight
-
-			ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
-			ctx.globalCompositeOperation = "source-in"
-			
-			if (texture) {
-				ctx.fillStyle = ctx.createPattern(texture, 'repeat')
-				ctx.fillRect(0, 0, canvas.width, canvas.height)
-			}
-			if (pattern) {
-				ctx.fillStyle = ctx.createPattern(pattern, 'repeat')
-				ctx.fillRect(0, 0, canvas.width, canvas.height)
-			}
-
-			layer.scale = ops.scale || 1
-			layer.x = ops.x || 0
-			layer.y = (ops.y || 0) + layer.height/2 + 1
-			layer.z = ops.z || 0
-			layer.rotationX = ops.rotationX || 0
-			layer.rotationY = ops.rotationY || 0
-			layer.el.appendChild(canvas)
-
-			layer.el.classList.add('image')
-			ops.className && layer.el.classList.add(ops.className)
-			layer.dirty = true
-			layer.update()
-    }
-    image.src = ops.src;
-  }
-})
diff --git a/public/assets/javascripts/mx/primitives/mx.scaleBox.js b/public/assets/javascripts/mx/primitives/mx.scaleBox.js
deleted file mode 100644
index f635345..0000000
--- a/public/assets/javascripts/mx/primitives/mx.scaleBox.js
+++ /dev/null
@@ -1,140 +0,0 @@
-MX.ScaleBox = MX.Object3D.extend({
-
-	// this will be called within the contructor
-	init: function (opt) {
-
-		var base = this
-
-		this.type = "ScaleBox"
-		
-		var id = this.id = opt.id || _.uniqueId()
-		this.x = opt.x || 0
-		this.y = opt.y || 0
-		this.z = opt.z || 0
-		this.rotationX = opt.rotationX || 0
-		this.rotationY = opt.rotationY || 0
-		this.rotationZ = opt.rotationZ || 0
-		var scale = this.scale = opt.scale || 1
-		var width = this.width = scale * (opt.width || 100)
-		var height = this.height = scale * (opt.height || 100)
-		var depth = this.depth = scale * (opt.depth || 100)
-		var color = this.color = opt.color || 'rgba(0, 255, 122, .1)'
-		var sides = this.sides = opt.sides || "top bottom left right front back"
-
-		// an Object3D's associated DOM node is the "el" property
-		this.el.classList.add('box')
-
-		var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
-
-		var top = this.top = new MX.Object3D('.face.top')
-		top.rotationX = angle
-		top.width = 1
-		top.height = 1
-		top.scaleX = width
-		top.scaleY = 1
-		top.scaleZ = depth
-		top.y = height
-
-		var bottom = this.bottom = new MX.Object3D('.face.bottom')
-		bottom.rotationX = -angle
-		bottom.width = 1
-		bottom.height = 1
-		bottom.scaleX = width
-		bottom.scaleY = 1
-		bottom.scaleZ = depth
-		bottom.y = 0
-
-		var left = this.left = new MX.Object3D('.face.left')
-		left.rotationY = -angle
-		left.width = 1
-		left.height = 1
-		left.scaleX = 1
-		left.scaleY = height
-		left.scaleZ = depth
-		left.x = -width/2
-		left.y = height/2
-
-		var right = this.right = new MX.Object3D('.face.right')
-		right.rotationY = angle
-		right.width = 1
-		right.height = 1
-		right.scaleX = 1
-		right.scaleY = height
-		right.scaleZ = depth
-		right.x = width/2
-		right.y = height/2
-
-		var front = this.front = new MX.Object3D('.face.front')
-		front.width = 1
-		front.height = 1
-		front.scaleX = width
-		front.scaleY = height
-		front.scaleZ = 1
-		front.z = -depth/2
-		front.y = height/2
-
-		var back = this.back = new MX.Object3D('.face.back')
-		back.width = 1
-		back.height = 1
-		back.scaleX = width
-		back.scaleY = height
-		back.scaleZ = 1
-		back.rotationY = angle * 2
-		back.z = depth/2
-		back.y = height/2
-
-		// adding children, must also be instances of Object3D
-		if (-1 != sides.indexOf("top")) this.add(top)
-		if (-1 != sides.indexOf("bottom")) this.add(bottom)
-		if (-1 != sides.indexOf("left")) this.add(left)
-		if (-1 != sides.indexOf("right")) this.add(right)
-		if (-1 != sides.indexOf("front")) this.add(front)
-		if (-1 != sides.indexOf("back")) this.add(back)
-
-		this.children.forEach(function (face) {
-			face.el.style.backgroundColor = color
-		})
-
-		// this applies the updated CSS style
-		// required for any change to take effect
-		// when a parent object's update() is called
-		// all its children will be updated as well
-		this.update()
-
-		// if this object's children won't move by themselves
-		this.updateChildren = true
-
-		this.setWidth = function(w){
-			base.width = top.width = bottom.width = front.width = back.width = w
-			left.x = -w/2
-			right.x = w/2
-			base.dirty = true
-		}
-		this.setHeight = function(h){
-			base.height = left.height = right.height = front.height = back.height = h
-			bottom.y = 0
-			left.y = right.y = front.y = back.y = h/2
-			top.y = h
-			base.dirty = true
-		}
-		this.setDepth = function(d){
-			base.depth = top.height = bottom.height = left.width = right.width = d
-			front.z = -d/2
-			back.z = d/2
-			base.dirty = true
-		}
-
-	},
-
-	toString: function(){
-		var params = "id width height depth x y z rotationX rotationY color sides".split(" ")
-		return this.__toString(params)
-	},
-	
-	clone: function(){
-		return new MX[this.type] (this)
-	}
-
-	// other properties will be mixed into the prototype of the new constructor
-
-})
diff --git a/public/assets/javascripts/mx/primitives/mx.tableau.js b/public/assets/javascripts/mx/primitives/mx.tableau.js
deleted file mode 100644
index 514e206..0000000
--- a/public/assets/javascripts/mx/primitives/mx.tableau.js
+++ /dev/null
@@ -1,48 +0,0 @@
-
-
-var Tableau = function(){
-	this.extend = extend.bind(Tableau)
-
-	function extend (props) {
-		var Super = this
-		var ExtendedTableau = function () {
-			Super.call(this)
-			props.init && props.init.apply(this, arguments)
-		}
-		ExtendedTableau.prototype = Object.create(Tableau.prototype)
-		for (var prop in props) {
-			if (props.hasOwnProperty(prop) && prop !== 'init') {
-				ExtendedTableau.prototype[prop] = props[prop]
-			}
-		}
-		ExtendedTableau.extend = extend.bind(ExtendedTableau)
-		return ExtendedTableau
-	}
-}
-
-Tableau.prototype.init = function(opt){}
-Tableau.prototype.animate = function(t){}
-Tableau.prototype.show = function(){}
-Tableau.prototype.hide = function(){}
-
-MX.Tableau = new Tableau()
-MX.Tableaux = {}
-
-/*
-
-MX.Tableaux.Foo = MX.Tableau.extend({
-	// this will be called within the contructor
-	init: function (opt) {
-	},
-	
-	show: function(){
-	},
-	
-	hide: function(){
-	},
-	
-	animate: function() {
-	}
-})
-
-*/
diff --git a/public/assets/javascripts/mx/primitives/mx.texturedBox.js b/public/assets/javascripts/mx/primitives/mx.texturedBox.js
deleted file mode 100644
index daec2d8..0000000
--- a/public/assets/javascripts/mx/primitives/mx.texturedBox.js
+++ /dev/null
@@ -1,121 +0,0 @@
-// Creates a box using a given texture image.
-// Uses a texture image like this:
-//
-//             ---------- ----------
-//            |          |          |
-//            |   top    |  bottom  |
-//            |          |          |
-//  ---------- ---------- ---------- ----------
-// |          |          |          |          |
-// |   left   |  front   |  right   |   back   |
-// |          |          |          |          |
-//  ---------- ---------- ---------- ----------
-//
-// See `examples/images/skins/` for some minecraft skin examples.
-
-// Options:
-//
-//   - {number} `width`
-//   - {number} `height`
-//   - {number} `depth`
-//   - {string} `texture` path to texture image
-//   - {string} `classname` class to be added to dom element
-
-MX.TexturedBox = MX.Object3D.extend({
-
-    init: function (ops) {
-
-				this.type = "TexturedBox"
-
-        if (!ops.width || !ops.height || !ops.depth || (!ops.texture && !ops.classname)) {
-            console.warn('TextureBox: missing arguments')
-            return
-        }
-
-        // faces
-        var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2),
-            offsetX = ops.offset ? (ops.offset.x || 0) : 0,
-            offsetY = ops.offset ? (ops.offset.y || 0) : 0,
-            overlap = ops.overlap ? ops.overlap : 0
-        var multiTexture = typeof ops.texture == "object";
-
-        var top = this.top = new MX.Object3D()
-        top.width = ops.width
-        top.height = ops.depth
-        top.rotationX = angle
-        top.y = ops.height / 2 - overlap
-        if (!multiTexture)
-        top.el.style.backgroundPosition =
-            (-(offsetX + ops.depth) + 'px ') +
-            (-offsetY + 'px')
-
-        var bottom = this.bottom = new MX.Object3D()
-        bottom.width = ops.width
-        bottom.height = ops.depth
-        bottom.rotationX = -angle
-        bottom.y = -ops.height / 2 + overlap
-        if (!multiTexture)
-        bottom.el.style.backgroundPosition =
-            (-(offsetX + ops.depth + ops.width) + 'px ') +
-            (-offsetY + 'px')
-
-        var left = this.left = new MX.Object3D()
-        left.width = ops.depth
-        left.height = ops.height
-        left.rotationY = -angle
-        left.x = -ops.width / 2 + overlap
-        if (!multiTexture)
-        left.el.style.backgroundPosition =
-            (-offsetX + 'px ') +
-            (-(offsetY + ops.depth) + 'px')
-
-        var right = this.right = new MX.Object3D()
-        right.width = ops.depth
-        right.height = ops.height
-        right.rotationY = angle
-        right.x = ops.width / 2 - overlap
-        if (!multiTexture)
-        right.el.style.backgroundPosition =
-            (-(offsetX + ops.depth + ops.width) + 'px ') +
-            (-(offsetY + ops.depth) + 'px')
-
-        var front = this.front = new MX.Object3D()
-        front.width = ops.width
-        front.height = ops.height
-        front.z = -ops.depth / 2 + overlap
-        if (!multiTexture)
-        front.el.style.backgroundPosition =
-            (-(offsetX + ops.depth) + 'px ') +
-            (-(offsetY + ops.depth) + 'px')
-
-        var back = this.back = new MX.Object3D()
-        back.width = ops.width
-        back.height = ops.height
-        back.rotationY = angle * 2
-        back.z = ops.depth / 2 - overlap
-        if (!multiTexture)
-        back.el.style.backgroundPosition =
-            (-(offsetX + ops.depth * 2 + ops.width) + 'px ') +
-            (-(offsetY + ops.depth) + 'px')
-
-        this.add(top, bottom, left, right, front, back)
-
-        this.children.forEach(function (c,i) {
-            if (multiTexture) {
-                c.el.style.backgroundImage = 'url(' + ops.texture[i] + ')'
-            }
-            else if (ops.texture) {
-                c.el.style.backgroundImage = 'url(' + ops.texture + ')'
-            }
-            if (ops.classname) {
-                c.el.classList.add(ops.classname)
-            }
-            c.el.style.backgroundRepeat = 'no-repeat'
-        })
-
-        this.update()
-        this.updateChildren = false
-
-    }
-
-})
diff --git a/public/assets/javascripts/mx/primitives/mx.embed.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
index f15ec98..b65f35a 100644
--- a/public/assets/javascripts/mx/primitives/mx.embed.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -1,8 +1,8 @@
-MX.Embed = MX.Object3D.extend({
+MX.Vimeo = MX.Object3D.extend({
 
   init: function (ops) {
   
-  	this.type = "Embed"
+  	this.type = "Vimeo"
 
     var layer = this
 		layer.media = ops.media
@@ -11,6 +11,9 @@ MX.Embed = MX.Object3D.extend({
 		layer.x = ops.x || 0
 		layer.y = ops.y || 0
 		layer.z = ops.z || 0
+		layer.rotationX = layer.ops.rotationX || 0
+		layer.rotationY = layer.ops.rotationY || 0
+		layer.rotationZ = layer.ops.rotationZ || 0
 		layer.scale = ops.scale || 1
 		layer.backface = ops.backface || false
 		
@@ -31,21 +34,6 @@ MX.Embed = MX.Object3D.extend({
 
   loadEmbed: function(ops){
     var layer = this
-  	layer.ops = defaults(ops, layer.ops)
-
-// 		layer.scale = layer.ops.scale || 1
-// 		layer.width = layer.ops.width || image.naturalWidth
-// 		layer.height = layer.ops.height || image.naturalHeight
-// 		layer.x = layer.ops.x || 0
-// 		layer.y = layer.ops.y || 0
-// 		layer.z = layer.ops.z || 0
-// 		layer.rotationX = layer.ops.rotationX || 0
-// 		layer.rotationY = layer.ops.rotationY || 0
-// 		layer.rotationZ = layer.ops.rotationZ || 0
-// 		layer.el.style.backgroundImage = "url(" + image.src + ")"
-// 		layer.el.classList.add('image')
-// 		layer.dirty = true
-// 		layer.update()
   },
   
   move: function(ops){
@@ -64,3 +52,7 @@ MX.Embed = MX.Object3D.extend({
 	},
 
 })
+
+window.onYouTubePlayerAPIReady = function(){
+	console.log("youtube ready")
+}
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
new file mode 100644
index 0000000..068ef9f
--- /dev/null
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -0,0 +1,58 @@
+MX.Youtube = MX.Object3D.extend({
+
+  init: function (ops) {
+  
+  	this.type = "Youtube"
+
+    var layer = this
+		layer.media = ops.media
+		layer.width = ops.media.width
+		layer.height = ops.media.height
+		layer.x = ops.x || 0
+		layer.y = ops.y || 0
+		layer.z = ops.z || 0
+		layer.rotationX = layer.ops.rotationX || 0
+		layer.rotationY = layer.ops.rotationY || 0
+		layer.rotationZ = layer.ops.rotationZ || 0
+		layer.scale = ops.scale || 1
+		layer.backface = ops.backface || false
+		
+		if (layer.backface) {
+			layer.el.classList.add("backface-visible")
+		}
+
+    if (ops.src) {
+    	this.loadEmbed(ops)
+    }
+		
+		if (ops.className) {
+			layer.el.classList.add(ops.className)
+		}
+		layer.el.style.backgroundRepeat = 'no-repeat'
+
+  },
+
+  loadEmbed: function(ops){
+    var layer = this
+  },
+  
+  move: function(ops){
+  	var layer = this
+  	layer.ops = defaults(ops, layer.ops)
+  	for (var i in ops) {
+  		layer[i] = ops[i]
+  	}
+		layer.dirty = true
+		layer.update()
+  },
+
+	toString: function(){
+		var params = "id src width height depth x y z rotationX rotationY rotationZ scale".split(" ")
+		return this.__toString(params)
+	},
+
+})
+
+window.onYouTubePlayerAPIReady = function(){
+	console.log("youtube ready")
+}
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 6a50c04..6799aa7 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -49,7 +49,8 @@
 <script type="text/javascript" src="/assets/javascripts/mx/extensions/mx.movements.js"></script>
 <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.image.js"></script>
 <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.video.js"></script>
-<script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.embed.js"></script>
+<script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.youtube.js"></script>
+<script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.vimeo.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/lib/View.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/lib/Router.js"></script>
@@ -84,3 +85,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/_router.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/app.js"></script>
+
+<!-- external dependencies -->
+<script src="http://www.youtube.com/player_api"></script>
+<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
\ No newline at end of file