Map.Draw = function(map, opt){

	opt = defaults(opt, { minimap: false })

	var draw = this
	
	var ctx = draw.ctx = map.canvas.getContext("2d")

	draw.animate = function(){
		ctx.save()
		draw.clear()
		draw.fill("rgba(255,255,255,0.98)")

		if (opt.ortho) {
		}
		else if (opt.minimap) {
			ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
			ctx.scale( map.zoom, map.zoom )
      if (map.opt.pivot) { ctx.rotate(scene.camera.rotationY + PI) }
			ctx.translate( opt.center.x, - opt.center.z )
			ctx.scale( -1, 1 )

			draw.coords()
			draw.regions(Rooms.regions, [ "#fff" ], "#000")
			draw.camera(scene.camera)
		}
		else {
			ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
			ctx.scale( map.zoom, map.zoom )
			ctx.translate( map.center.a,  map.center.b )
			ctx.scale( -1, 1 )

			draw.regions(Rooms.regions, [ "#f8f8f8" ], "#000")
			draw.mouse(map.ui.mouse.cursor)
			draw.mouse_dimensions(map.ui.mouse.cursor)
			draw.coords()
			scene && draw.camera(scene.camera)
		}

		ctx.restore()
	}
	draw.translate = function(){
		ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
		ctx.scale( map.zoom, map.zoom )
		ctx.translate( map.center.a, map.center.b )
		ctx.scale( -1, 1 )
	}

  // changes the ctx temporarily
	draw.render = function(){
		var thumbnail_width = 1000
		var thumbnail_height = 750
		
		var extent = Rooms.extent()
		var center = extent.center()
		var extent_width = extent.width()
		var extent_height = extent.height() 
		var zoom
		if (extent_width > extent_height) {
      zoom = thumbnail_width / extent.width() * 0.9
		}
		else {
      zoom = thumbnail_height / extent.height() * 0.9
		}

		var canvas = document.createElement("canvas")
		canvas.width = thumbnail_width
		canvas.height = thumbnail_height
		ctx = canvas.getContext('2d')
		
		draw.clear()

		ctx.translate( thumbnail_width * 1/2, thumbnail_height * 1/2)
		ctx.scale( zoom, zoom )
		ctx.translate( center.a, -center.b )
		ctx.scale( -1, 1 )

		draw.regions(Rooms.regions, ["#fff"], null)
		
		ctx.restore()
		
		// invert opacity
		var pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height)
		var pixels = pixelData.data
		for (var i = 0, k, _len = pixels.length; i < _len; i++) {
		  k = i*4
		  if (pixels[k+3] == 0) {
		    pixels[k] = pixels[k+1] = pixels[k+2] = pixels[k+3] = 255
		  }
		  else {
		    pixels[k] = pixels[k+1] = pixels[k+2] = 255
		    pixels[k+3] = 0
		  }
		}
		ctx.putImageData(pixelData, 0, 0)

		// reset the ctx
		ctx = draw.ctx

		return canvas
	}

	draw.clear = function(){
		ctx.clearRect(0, 0, map.dimensions.a, map.dimensions.b)
	}

	draw.fill = function(fillStyle){
		ctx.fillStyle = fillStyle
		ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b)
	}

	draw.regions = function(regions, colors, stroke){
	  if (stroke) {
			ctx.strokeStyle = "#000"
			ctx.lineWidth = (1 / map.zoom)
		}
		for (var i = 0; i < regions.length; i++) {
			if (regions[i].dupe) continue
			ctx.fillStyle = colors[i % colors.length]
			fill_region(regions[i])
      if (stroke) {
        stroke_sides(regions[i])
      }
		}
	}

	draw.mouse = function(mouse){
		var radius = 3 / map.zoom
	
		ctx.fillStyle = "rgba(255,0,0,0.4)";
		ctx.beginPath();
		ctx.arc(mouse.x.b, mouse.y.b, radius, 0, 2*Math.PI, false);
		ctx.fill();
	}
	draw.mouse_dimensions = function(mouse){
		if (mouse.width() != 0 && mouse.height() != 0) {
			if (map.ui.dragging) {
				stroke_rect(mouse)
			}
			else {
				ctx.fillStyle = "rgba(255,255,0,0.5)"
				fill_region( mouse.clone().translate() )
			}
		}
	}
	
	draw.camera = function(cam){
 		ctx.lineWidth = 0.5

		ctx.save()

		ctx.translate(cam.x, cam.z)
		ctx.rotate(cam.rotationY)

		var radius = 3 / map.zoom

		ctx.fillStyle = '#888';
		
		ctx.beginPath();
		ctx.moveTo(0,0)
		ctx.lineTo(-radius,-radius/2)
		ctx.lineTo(0,radius*3)
		ctx.lineTo(radius,-radius/2)
		ctx.moveTo(0,0)
		ctx.fill()
		
		ctx.restore()
	}

	draw.coords = function(){
		/*
		ctx.fillStyle = "#888";
		dot_at(0,0)
		ctx.fillStyle = "#bbb";
		dot_at(100,0)
		dot_at(0,100)
		ctx.fillStyle = "#ddd";
		dot_at(200,0)
		dot_at(0,200)
		ctx.fillStyle = "#eee";
		dot_at(300,0)
		dot_at(0,300)
		*/
		
		ctx.strokeStyle = "rgba(0,0,0,0.1)"
		ctx.lineWidth = 1/map.zoom
		
		var sides = map.sides()
		var quant = sides.clone().quantize(MAP_GRID_SIZE)
		for (var x = quant.x.a - MAP_GRID_SIZE; x <= quant.x.b; x += MAP_GRID_SIZE) {
		  if (Math.round(x) % 360 == 0) {
        ctx.strokeStyle = "rgba(0,0,0,0.3)"
        ctx.lineWidth = 1/map.zoom
		  }
		  else {
        ctx.strokeStyle = "rgba(0,0,0,0.05)"
        ctx.lineWidth = 1/map.zoom
		  }
      line(x, sides.y.a, x, sides.y.b)
		}
		for (var y = quant.y.a - MAP_GRID_SIZE; y <= quant.y.b; y += MAP_GRID_SIZE) {
		  if (Math.round(y) % 360 == 0) {
        ctx.strokeStyle = "rgba(0,0,0,0.3)"
        ctx.lineWidth = 1/map.zoom
		  }
		  else {
        ctx.strokeStyle = "rgba(0,0,0,0.05)"
        ctx.lineWidth = 1/map.zoom
		  }
			line(sides.x.a, y, sides.x.b, y)
		}
	}

	//

	var line = draw.line = function (x,y,a,b,translation){
		if (translation) {
			x += translation.a
			a += translation.a
			y += translation.b
			b += translation.b
		}
		ctx.beginPath()
		ctx.moveTo(x,y)
		ctx.lineTo(a,b)
		ctx.stroke()
	}

	function fill_region(r){
		ctx.fillRect(r.x.a + r.translation.a,
								 r.y.a + r.translation.b,
								 r.x.length(),
								 r.y.length())
	}

	function stroke_sides (r){
		if (r.sides & FRONT) line(r.x.a, r.y.a, r.x.b, r.y.a)
		if (r.sides &  BACK) line(r.x.a, r.y.b, r.x.b, r.y.b)
		if (r.sides &  LEFT) line(r.x.a, r.y.a, r.x.a, r.y.b)
		if (r.sides & RIGHT) line(r.x.b, r.y.a, r.x.b, r.y.b)
	}

	function stroke_rect (r){
		line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation)
	}

	draw.dot_at = function dot_at (x, z, radius){
		ctx.save()
		ctx.translate(x,z)

		radius = (radius || 2) / map.zoom

		ctx.beginPath();
		ctx.arc(0, 0, radius, 0, 2*Math.PI, false);
		ctx.fill();

		ctx.restore()
	}

	draw.x_at = function x_at (x, z, length){
		ctx.save()
		ctx.translate(x,z)

		var len = (length/2 || 4) / map.zoom

    ctx.lineCap = "square"
    ctx.lineWidth = 2/map.zoom
    ctx.beginPath()
		ctx.moveTo( -len, -len);
		ctx.lineTo(  len,  len);
		ctx.moveTo( -len,  len);
		ctx.lineTo(  len, -len);
		ctx.stroke();

		ctx.restore()
	}

}