var scene, cam, controls

var environment = (function(){

  var environment = {}
  var grids

  environment.init = function(){
    environment.ready()
  }

  environment.ready = function(){
    scene = new MX.Scene().addTo('#scene')
    cam = scene.camera

    controls = new MX.FollowingOrbitCamera({
      center: { x: -100, y: 0, z: 0 },
      radius: 700,
      radiusRange: [ 10, 2000 ],
      rotationXRange: [ 0.428 * Math.PI, 0.455 * Math.PI ],
      rotationYRange: [ 0.083 * Math.PI, 0.100 * Math.PI ],
      rotationX: Math.PI * 0.45,
      rotationY: Math.PI * 0.125,
      wheelEase: 20,
      ease: 10
    })
    controls.init()
    controls.wheel.lock()
    
    var grid_opts = {
      width: 500,
      height: 500,
      side: 23,
      strokeWidth: 2,
      bg: "#000000",
      stroke: "#0088ff",
      duration: 1000,
      delay: [ 0, 500 ],
    }
    
    grids = [
      new Grid ( defaults({ halign: "right", valign: "bottom" }, grid_opts) ),
      new Grid ( defaults({ halign: "right", valign: "bottom" }, grid_opts) ),
      new Grid ( defaults({ halign: "right", valign: "top" }, grid_opts) ),
    ]

    var m = new MX.Object3D( grids[0].snap.node )
    m.z = 250
    m.y = 250
    m.width = m.height = 500
    m.rotationY = -Math.PI/2
    scene.add(m)

    var m = new MX.Object3D( grids[1].snap.node )
    m.x = 250
    m.y = 250
    m.width = m.height = 500
    m.rotationY = Math.PI
    scene.add(m)

    var m = new MX.Object3D( grids[2].snap.node )
    m.x = 250
    m.z = 250
    m.width = m.height = 500
    m.rotationX = Math.PI/2
    scene.add(m)

//     var dog = new Image ()
//     dog.classList.add("dog")
//     dog.src = "img/lab_sitting.png"
//     var m = new MX.Object3D( dog )
//     m.x = 250
//     m.y = 39
//     m.z = 250
//     m.rotationY = Math.PI/2
//     m.scale = 0.2
//     scene.add(m)
    
    var logo = Snap(480 * 2, 74 * 2)
    logo.attr({ 'viewBox': '0 0 480 74.1' })
    logo.node.classList.add("logo")
    
    var m = new MX.Object3D( logo.node )
    m.x = 220
    m.y = 148
    m.z = 5
    m.scale = 0.6 / 2
    m.rotationY = Math.PI
    scene.add(m)
    
    var tagline = new MX.Object3D ()
    tagline.el.innerHTML = document.querySelector("#body").innerHTML
    tagline.el.classList.add("text")
    tagline.width = 730
    // tagline.height = 50
    tagline.x = 5
    tagline.y = 80
    tagline.z = 180
    tagline.scale = 0.4
    tagline.rotationY = Math.PI/2
    scene.add(tagline)

    var logos = new MX.Object3D ()
    logos.el.innerHTML = document.querySelector("#logos").innerHTML
    logos.el.classList.add("text")
    logos.width = 530
    // tagline.height = 50
    logos.x = 120
    logos.y = 80
    logos.z = 5
    logos.scale = 0.4
    logos.rotationY = Math.PI
    scene.add(logos)

    grids[0].animate({ h: "right", v: "down" })
    grids[1].animate({ h: "right", v: "down" })
    grids[2].animate({ h: "left", v: "down" })
    
//     dog.addEventListener("click", environment.space)
    m.el.addEventListener("click", environment.space)
  }
  environment.space = function(){
    document.body.classList.toggle('space')
    if (document.body.classList.contains("space")) {
      grids.forEach(function(g){
        g.bg.animate({ opacity: 0 }, 200)
        g.vertical.forEach(function(p){ p.attr({ strokeWidth: 2/devicePixelRatio }) })
        g.horizontal.forEach(function(p){ p.attr({ strokeWidth: 2/devicePixelRatio }) })
      })
    }
    else {
      grids.forEach(function(g){
        g.bg.animate({ opacity: 1 }, 200)
        g.vertical.forEach(function(p){ p.attr({ strokeWidth: 2 }) })
        g.horizontal.forEach(function(p){ p.attr({ strokeWidth: 2 }) })
      })
    }
  }
  
  environment.resize = function(){
    scene.width = window.innerWidth
    scene.height = window.innerHeight
    scene.perspective = Math.min(window.innerWidth, scene.height)
    scene.update()
  }

  environment.update = function(t){
    scene.update()
    controls.update()
  }

  return environment

})()