var wall_height = 180
var shapes = new ShapeList
var last_point = new vec2 (0,0)

var BlueprintEditor = View.extend(AnimatedView.prototype).extend({

  initialize: function(opt){
    this.parent = opt.parent
  
    map = new Map ({
      type: "ortho",
      el: document.querySelector("#orthographic"),
      width: window.innerWidth/2,
      height: window.innerHeight,
      zoom: -2,
      zoom_min: -6.2,
      zoom_max: 1,
    })
    map.ui.add_tool("arrow", new ArrowTool)
    map.ui.add_tool("polyline", new PolylineTool)
    map.ui.add_tool("ortho-polyline", new OrthoPolylineTool)
    map.ui.add_tool("eraser", new EraserTool)
    map.ui.add_tool("position", new PositionTool)
    map.ui.placing = false

/*
    $(window).resize(function(){
      scene.width = window.innerWidth/2
      scene.height = window.innerHeight
      map.canvas.width = map.dimensions.a = window.innerWidth/2
      map.canvas.height = map.dimensions.b = window.innerHeight/2
    })
*/

    var PerspectiveToolbar = new Toolbar (".persp-hud")
    PerspectiveToolbar.add("orbit-mode", function(){
      controls.toggle(true)
      movements.lock()
    })
    PerspectiveToolbar.add("keyboard-mode", function(){
      controls.toggle(false)
      movements.unlock()
      movements.gravity(true)
      cam.rotationX = 0
      cam.rotationY = -cam.rotationY
      cam.x = 0
      cam.y = viewHeight + 100
      cam.z = 0
    })

    var OrthographicToolbar = new Toolbar (".ortho-hud")
    OrthographicToolbar.add("arrow-mode", function(){
      map.ui.set_tool("arrow")
    })
    OrthographicToolbar.add("polyline-mode", function(){
      map.ui.set_tool("polyline")
    })
    OrthographicToolbar.add("ortho-polyline-mode", function(){
      map.ui.set_tool("ortho-polyline")
    })
    OrthographicToolbar.add("eraser-mode", function(){
      map.ui.set_tool("eraser")
    })
    OrthographicToolbar.pick("ortho-polyline-mode")
  },
  
  animate: function(t, dt){
    map.update(t)

    movements.update(dt)
    controls.update()
    scene.update()

    map.draw.ctx.save()
    map.draw.translate()

    floorplan.draw(map.draw.ctx, true)

    map.draw.coords()

    if (shapes.workline) {
      shapes.workline.draw(map.draw.ctx)
      if (map.ui.placing && last_point) {
        shapes.workline.draw_line( map.draw.ctx, last_point )
      }
    }

    shapes.forEach(function(shape){
      shape.draw(map.draw.ctx)
    })

    map.draw.ctx.strokeStyle = "#f00";
    map.draw.x_at(0,0)
    map.draw.mouse(map.ui.mouse.cursor)
    map.draw.camera(scene.camera)

    map.draw.ctx.restore()
  },

})

function build () {
	scene = new MX.Scene().addTo("#perspective")
	scene.camera.radius = 20

  viewHeight = 100

	scene.width = window.innerWidth/2
	scene.height = window.innerHeight
	scene.perspective = window.innerHeight
	
	cam = scene.camera
	movements = new MX.Movements(cam, viewHeight)
	movements.init()
	movements.lock()
	movements.velocity(8)
	app.on("move", function(pos){
	  cam.x = pos.x
	  cam.y = pos.y
	  cam.z = pos.z
	})

  floorplan = new MX.Image({
    src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
    keepImage: true,
    rotationX: -PI/2,
    rotationY: PI,
  })
  scene.add(floorplan)
  
  // recenter perspective view by rightclicking map
  floorplan.el.addEventListener("contextmenu", function(e){
    e.preventDefault()
    var offset = offsetFromPoint(e, this)
    var x = (offset.left - 0.5) * floorplan.width * floorplan.scale
    var z = (offset.top - 0.5) * floorplan.height * floorplan.scale
    controls.opt.center.x = -x
    controls.opt.center.y = 0
    controls.opt.center.z = -z
  }, true)

	scene.update()

	controls = new MX.OrbitCamera({
	  el: scene.el,
	  radius: 3000,
	  radiusRange: [ 10, 10000 ],
	  rotationX: PI/4,
	  rotationY: PI/2,
	})
	controls.init()

	animate(0)
}