<a-scene>
  <a-assets>
<img id="baze" crossorigin="anonymous" src="http://cache.celtra.com/api/blobs/cb4ac970d9e27ec2ff9382562feb74fe7b17dd362c2571a6d634aadeb0ac3c78/baze.png">
<img id="bazedescr" crossorigin="anonymous" src="http://cache.celtra.com/api/blobs/fec55d8fe9bae9935df1dc4dc2e8b9829dba9687982f69dd7e3b02509f556647/bazedescr.png">   
    <img id="jyn" crossorigin="anonymous" src="http://cache.celtra.com/api/blobs/049d2d45b2c694165afa7663e1d38e9c9c51dde9c88876db6fdb7885a4da746a/jyn.png">
<img id="jyndescr" crossorigin="anonymous" src="http://cache.celtra.com/api/blobs/9963df9aac1d5457eeb69563d48ecaee9eb99cde87ec0fce76da1e93b7961439/jyndescr.png">
    <img id="k250" crossorigin="anonymous" src="http://cache.celtra.com/api/blobs/79973a66d8ee36d8be8027222d5ba2b00b90a67e154791b6a8b1b13881d0ce71/k250.png">
<img id="k250descr" crossorigin="anonymous" src="http://cache.celtra.com/api/blobs/959a044d3cdf560fae083c43245f44bc95e209feabaf26fa249b189f66a52744/k250descr.png">
 <img id="hotspot" crossorigin="anonymous" src="http://cache.celtra.com/api/blobs/d2f74d9a86a0f95779c64a3b122b11a9c772b5aee4a7c5f4a28e92949297cc78/hotspot.png">   
    
    <img id="sky" src="https://dl.dropboxusercontent.com/u/45973806/_Project/RD026_Aframe/stars.jpg">
</a-assets>
   <a-sky src="#sky"></a-sky>
  <a-entity camera look-controls position='0 1 2'>
  <a-entity raycaster="objects: .collidable"
            cursor="fuse: true; fuseTimeout: 500"
            position="0 0 -1"
            geometry="primitive: ring; radiusOuter: 0.07; radiusInner: 0.05; segmentsTheta: 32;"
            material="color: gold; shader: flat">
       <a-animation begin="cursor-hovering" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="1.1 1.1 1.1" dur="150"></a-animation>
       <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" fill="forwards" from="1.1 1.1 1.1" to="0.1 0.1 0.1" dur="500"></a-animation>
    <a-animation begin="click" easing="ease-in" attribute="scale" fill="forwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
  </a-entity>
</a-entity>
  
  <a-curvedimage id='bazeimg' src='#baze' radius='11' theta-length='70' height='14' rotation='0 60 0' scale='1 1 1' position='2 1 0'>
  <a-animation attribute='opacity' from='0' to='1' delay='1000' dur='1000' fill='both' easing='ease-out'></a-animation>
  </a-curvedimage>
  
  <a-image id='bazedes' src='#bazedescr' width='3.1' height='2.7' opacity='0' rotation='0 -60 0' position='3 2.7 -0.8' scale='0.6 0.6 0.6'></a-image>
  
  <a-image class="collidable" id='bazehotspot' baze-descr src='#hotspot' width='0.4' height='0.4' opacity='1' rotation='0 115 0' position='3 1.91 0.14' scale='1 1 1'>
          <a-animation attribute='scale' from='0 0 0' to='0.6 0.6 0.6' delay='1500' dur='200' fill='both' easing='ease-out'></a-animation>
          </a-image>
  
<a-curvedimage id='jynimg' src='#jyn' radius='11' theta-length='40' height='14' rotation='0 170 0' scale='1 1 1' position='2 1 0'>
  <a-animation attribute='opacity' from='0' to='1' delay='1000' dur='1000' fill='both' easing='ease-out'></a-animation>
  </a-curvedimage>
  
  <a-image id='jyndes' src='#jyndescr' width='2.9' height='3.7' opacity='0' rotation='0 0 0' position='-0.1 1.05 -1' scale='0.6 0.6 0.6'></a-image>
  
  <a-image class="collidable" id='jynhotspot' jyn-descr src='#hotspot' width='0.4' height='0.4' opacity='1' rotation='0 0 0' position='0.65 1.75 -0.99' scale='1 1 1'>
          <a-animation attribute='scale' from='0 0 0' to='0.6 0.6 0.6' delay='1500' dur='200' fill='both' easing='ease-out'></a-animation>
          </a-image>
  
  <a-curvedimage id='k250img' src='#k250' radius='11' theta-length='45' height='14' rotation='0 240 0' scale='1 1 1' position='-1.8 1 0' >
  <a-animation attribute='opacity' from='0' to='1' delay='1000' dur='1000' fill='both' easing='ease-out'></a-animation>
  </a-curvedimage>
  
  <a-image id='k250des' src='#k250descr' width='2.5' height='3' opacity='0' rotation='0 75 0' position='-4 0.7 1.07' scale='0.9 0.9 0.9'></a-image>
  
  <a-image class="collidable" id='k250hotspot' k250-descr src='#hotspot' width='0.4' height='0.4' opacity='1' rotation='0 90 0' position='-4 1.7 2' scale='10 10 10'>
    <a-animation attribute='scale' from='0 0 0' to='0.7 0.7 0.7' delay='100' dur='200' fill='both' easing='ease-out'></a-animation>
          
          </a-image>
  
</a-scene>

AFRAME.registerComponent('baze-descr', {
  init: function () {
    var opendescr = false;
    this.el.addEventListener('click', function () {
      console.log("open: " + opendescr)
      if(opendescr === false){
        console.log('Clicked baze description open!');
        document.getElementById("bazedes").setAttribute('opacity', '1');
        document.getElementById("bazehotspot").setAttribute('opacity', '0')
        opendescr = true;
      }
      else if (opendescr === true){
        console.log('Clicked baze description close!');
        document.getElementById("bazedes").setAttribute('opacity', '0')
        document.getElementById("bazehotspot").setAttribute('opacity', '1')
        opendescr = false;
      }
    });
  }
});

AFRAME.registerComponent('jyn-descr', {
  init: function () {
    var opendescr = false;
    this.el.addEventListener('click', function () {
      console.log("open: " + opendescr)
      if(opendescr === false){
        console.log('Clicked jyn description open!');
        document.getElementById("jyndes").setAttribute('opacity', '1');
        document.getElementById("jynhotspot").setAttribute('opacity', '0')
        opendescr = true;
      }
      else if (opendescr === true){
        console.log('Clicked jyn description close!');
        document.getElementById("jyndes").setAttribute('opacity', '0')
        document.getElementById("jynhotspot").setAttribute('opacity', '1')
        opendescr = false;
      }
    });
  }
});

AFRAME.registerComponent('k250-descr', {
  init: function () {
    var opendescr = false;
    this.el.addEventListener('click', function () {
      console.log("open: " + opendescr)
      if(opendescr === false){
        console.log('Clicked k250 description open!');
        document.getElementById("k250des").setAttribute('opacity', '1');
        document.getElementById("k250hotspot").setAttribute('opacity', '0')
        opendescr = true;
      }
      else if (opendescr === true){
        console.log('Clicked k250 description close!');
        document.getElementById("k250des").setAttribute('opacity', '0')
        document.getElementById("k250hotspot").setAttribute('opacity', '1')
        opendescr = false;
      }
    });
  }
});

//setTimeout(function(){ 
  //var vrglasses = document.getElementsByClassName('a-enter-vr-button')[0];
  //var vrglasses = document.getElementsByClassName('a-enter-vr-button')[0].addEventListener("click", function(){
    //console.log('plingggg');
  //})
//}, 500);

document.querySelector('a-scene').addEventListener('enter-vr', function () {
  //document.getElementById('celtra-object-461').style.display = 'none';
  //document.getElementById('celtra-object-574').style.display = 'none';
  console.log('open')
});
document.querySelector('a-scene').addEventListener('exit-vr', function () {
  //document.getElementById('celtra-object-461').style.display = 'block';
  //document.getElementById('celtra-object-574').style.display = 'block';
  console.log('close')
});