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 == "Box" || 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.opt.width/2 * obj_scale)
				var hh = ~~(obj.opt.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 == "Video" || 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;
	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) {
		// 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()
	$("#minimap .el").append(canvas)

	return this;
}