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

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

  regions: [],

  initialize: function(opt){
    this.parent = opt.parent

    $(window).resize(this.resize.bind(this))

    scene = new MX.Scene().addTo("#perspective")
    scene.camera.radius = 20
    cam = scene.camera

    scene.width = window.innerWidth/2
    scene.height = window.innerHeight
    scene.perspective = window.innerHeight
  
    movements = new MX.Movements(cam, viewHeight)
    movements.init()
    movements.lock()

    app.on("move", function(pos){
      cam.x = pos.x
      cam.y = pos.y
      cam.z = pos.z
    })

    var floorplan = this.floorplan = new MX.Image({
      backface: true,
    })
    scene.add(this.floorplan)
  
    // recenter perspective view by rightclicking map
    this.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()
  },
  
  resize: function(){
    if (this.parent.orbiting) {
      scene.width = window.innerWidth/2
      scene.height = window.innerHeight
      this.parent.map.resize( window.innerWidth/2, window.innerHeight )
      this.parent.map.canvas.style.display = "block"
    }
    else {
      scene.width = window.innerWidth
      scene.height = window.innerHeight
      this.parent.map.canvas.style.display = "none"
    }
  },
  
  loadFloorplan: function(media){
    // console.log(media)
    this.floorplan.load({
      media: media,
      keepImage: true,
      rotationX: -PI/2,
      rotationY: PI,
      scale: media.scale,
    })
    this.startAnimating()
    this.regions = RegionList.build()
  },
  
  animate: function(t, dt){
    map.update(t)

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

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

    this.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)
    
//    var colors = ["rgba(0,0,0,0.1)"]
//     var colors = ["rgba(255,255,255,1)"]
// 
//    map.draw.regions(this.regions, colors, "#000")

//     this.regions.forEach(function(room,i){
//       map.draw.ctx.fillStyle = colors[i % colors.length]
//       map.draw.ctx.fillRect( room.x.a, room.y.a, room.width(), room.height() )
//     })

    map.draw.ctx.restore()
  },

})