//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");
  });
}



//Sound 
window.addEventListener("click", function () {
  const music = document.querySelector("#music");
  music.components.sound.playSound();
});


// Change box colour on hover
AFRAME.registerComponent('change-color-on-hover', {
  schema: {
    color: {default: 'red'}
  },

  init: function () {
    console.log("Initializing change-color-on-hover component...");
    var data = this.data;
    var el = this.el;  // <a-box>
    var defaultColor = el.getAttribute('material').color;

    el.addEventListener('mouseenter', function () {
      el.setAttribute('color', data.color);
    });

    el.addEventListener('mouseleave', function () {
      el.setAttribute('color', defaultColor);
    });
  }
});

//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);
      });
  }
});