//initialization function to be called on <body> load
function init() {
  //set reference for scene using DOM
  let scene = document.querySelector("a-scene");
  console.log("scene = " + scene);
  //hide raycaster initially so it doesn't look odd in desktop or mobile mode
  document.getElementById("controller").setAttribute("raycaster", "showLine: false;");
  //hide cursor and show controller if entering VR mode
  scene.addEventListener('enter-vr', function () {
      console.log("Entering VR Mode!");
      document.querySelector("a-cursor").setAttribute("visible", "false");
      document.getElementById("controller").setAttribute("raycaster", "showLine: true; far: 40; lineColor: blue; lineOpacity: 0.5");
  });
}

//TELEPORT COMPONENT

AFRAME.registerComponent("teleport", {
  schema: {
      type: 'string'
  },
  init: function () {
      //get referene to element with component added to it
      let el = this.el;
      //get reference for camera rig entity
      let rig = document.getElementById("camera-rig");
      //get teleport coordinates from the data (attribute value) of component
      let newPosition = this.data;
      //event handler
      el.addEventListener("click", () => {
          console.log("Teleporting to: " + newPosition)
          //update the position properties of the camera rig (effectively moving the end user)
          rig.setAttribute("position", newPosition);
      });
  }
});