<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Day57-vlvibesSwitch</title>
  <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
  <script src="https://rawgit.com/ngokevin/aframe-text-component/master/dist/aframe-text-component.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
  <a-scene>
       <!-- camera -->
    <a-entity id="camera" rotation="0 0 0" position="0 0 0">
      <a-camera>
        <a-entity cursor="maxDistance:10000" position="0 0 -1" color="pink" geometry="primitive:ring; color:pink; radiusInner:.005; radiusOuter:.01"></a-entity>
      </a-camera>
    </a-entity>
      <!--divs and baloon-->
    <a-entity id="titleName"></a-entity>
    <a-entity id="sphereA">
      <a-sphere id="sphere1" visable="true" material="src:url(http://www.headsub.com/attachment/uq23A3T8/Templates/Textures/Football.png)" radius="1"></a-sphere>
      <a-animation attribute="position" from="0 -20 -2" to="0 0 -2"></a-animation>
    </a-entity>
    <!-- light -->
    <a-entity><a-entity id="light" light="color:#F5F5F5; intensity:2" position="-1 3 2"></a-entity></a-entity>
    <!-- sounds -->
    <a-entity id="vibes" geometry="primitive: plane" material="color: pink" position="-10 0 0" sound="src: vibes.mp3; autoplay: false"></a-entity>

    <a-entity id="mainMenu" position="-4.5 3.5 -8"><a-plane material="src:url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT5l4ULXmIyLZDMgJ2-iUnWSINwaxERpLFlqwBtnEFekiYlwnyn)"></a-plane></a-entity>

    <a-sky color="#333"></a-sky>
  </a-scene>

  <script>
  $(document).ready(function(){
  document.querySelector('#sphere1').addEventListener('click', function () {
      // text add
      $("a-scene").append('<a-entity><a-entity material="color:#F16785" scale="5 5 5" text="text:Lay  ut"></a-entity><a-animation begin="500" attribute="position" from="20 0 -10" to=".15 0 -10"></a-animation></a-entity>');
      $("a-scene").append('<a-entity><a-entity material="color:#F16785" scale="5 5 5" text="text:Virtual"></a-entity><a-animation begin="500" attribute="position" from="-20 0 -10" to="-10.5 0 -10"></a-animation></a-entity>');
      // welcome slide in and slide out
      $("a-scene").append('<a-entity><a-entity material="color:#F16785" scale="1 1 1" text="text:Welcome to"></a-entity><a-animation begin="1100" attribute="position" from="-20 3 -10" to="-4 3 -10"></a-animation><a-animation begin="2000" attribute="position" from="-4 3 -10" to="-40 3 -10"></a-animation><a-animation begin="6050" attribute="position" from="-43 3 -10" to="-8 3 -10 -10"></a-animation></a-entity>');

      // animated spotlight
      $("a-scene").append('<a-entity><a-entity id="spotLight" light="color:#F5F5F5; type:spot; intensity:1.8; angle:10"></a-entity><a-animation id="durAnimation" attribute="position" dur="5000" from="-25 -2 2" to="25 -1 4" repeat="indefinite"></a-animation></a-entity>');

      // remove original sphere
      $(this).hide(1,function(){$(this).remove();});

      // create new sphere
      $("a-scene").append('<a-entity id="sphereB" camera"><a-sphere position="0 0 -2" id="sphere1" material="src:url(http://www.headsub.com/attachment/uq23A3T8/Templates/Textures/Football.png)" radius="1"></a-sphere><a-animation attribute="position" from=0 0 -4" to="0 4 -8"></a-animation><a-animation begin="1410" attribute="rotation" dur="5000" fill="forwards" to="0 0 -360"></a-animation><a-animation attribute="position" begin="1710" from="0 4 -8" to="2 5 -8"></a-animation><a-animation attribute="position" begin="2500" from="2 5 -8" to="3.5 3.2 -8"></a-animation><a-animation attribute="position" begin="3400" from="3.5 3.2 -8" to="6.58 3.2 -8"></a-animation><a-animation attribute="position" begin="4500" from="6.58 3.2 -8" to="6.58 .9 -8"></a-animation></a-entity>');
      // sphere slammer
      $("a-scene").append('<a-entity id="sphereRod"><a-cylinder></a-cylinder height="5"><a-animation begin="3800" attribute="position" from="6.58 20 -10" to="6.58 3.5 -10"></a-animation><a-animation begin="4500" attribute="position" from="6.58 3.5 -10" to="6.58 20 -10"></a-animation></a-entity>')
      // welcome slammer
      $("a-scene").append('<a-entity id="welcomeRod"><a-cylinder></a-cylinder height="5" rotation="0 0 180"><a-animation begin="6000" attribute="position" from="-41 3 -10" to="-10 3 -10 -10"></a-animation><a-animation begin="7500" attribute="position" from="-10 3 -10" to="-100 3 -10"></a-animation></a-entity>')
    });

  document.querySelector('#mainMenu').addEventListener('toggle', function(){
    $('a-scene').append('<a-entity id="lightSwitch"><a-plane material="src:url(https://d13yacurqjgara.cloudfront.net/users/63537/screenshots/1069396/toggle.gif)" position="-5.5 -3.5 -8"></a-plane></a-entity>')
    $('a-scene').append('<a-entity id="sphereMenu"><a-plane material="src:url(https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/switch.png)" position="-5.5 3.5 -8"></a-plane></a-entity>')
    $('a-scene').append('<a-entity id="fogSwitch"><a-plane material="src:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQaw2r7ErK7CnwqssEY1ulDL6s0gZe7raDCUaovxK4WMSkDrwubiF2M7w)" position="-5.5 -7 -8"></a-plane></a-entity>')
    $('a-scene').append('<a-entity id=spotLightSpeed><a-plane material="src:url(https://cdn0.iconfinder.com/data/icons/astronomy-1/500/speed-512.png)" position="-5.5 -9.5 -8"></a-plane></a-entity>');
    $('a-scene').append('<a-entity id="cameraSwitch"><a-plane material="src:url()" position="-5.5 -12 -8"></a-plane></a-entity>');
    $('a-scene')append('<a-entity id="vibesSwitch"><a-plane material="src:url()" position="-5.5 -14.5 -8"></a-plane></a-entity>')

  })
  document.querySelector('#sphereMenu').addEventListener('click', function () {
    $('a-scene').append('<a-entity id="MENU"><a-plane height="2" width="10" position="2 5 -7"></a-plane></a-entity>')
    $('a-scene').append('<a-plane id="futbol" height="1.5" width="1.5" position="-1.5 5 -6.8" material="src:url(http://www.headsub.com/attachment/uq23A3T8/Templates/Textures/Football.png)"></a-plane>')
    $('a-scene').append('<a-entity id="bask"><a-plane id="basketball" height="1.5" width="1.5" position=".5 5 -6.8" material="src:url(http://www.robinwood.com/Catalog/FreeStuff/Textures/TextureDownloads/Balls/BasketballColor.jpg)"></a-plane></a-entity>');
  });
  document.querySelector('#bask').addEventListener('toggle', function () {
    $('#sphere1').attr('material', 'src:url(http://www.robinwood.com/Catalog/FreeStuff/Textures/TextureDownloads/Balls/BasketballColor.jpg)');
  });
  document.querySelector('#lightSwitch').addEventListener('click', function () {
    $('#light').attr('light','color:#555555; intensity:5');
  });
  document.querySelector('#fogSwitch').addEventListener('click', function () {
    $('#light').attr('light','color:#555555; intensity:5');
  });
  document.querySelector('#spotLightSpeed').addEventListener('click', function () {
    $('#durAnimation').attr('dur','3000');
  });
  document.querySelector('#cameraSwitch').addEventListener('click', function () {
    $('#camera').attr('position','5 0 0');
    $('#camera').attr('rotation','20 0 0');
  });
  document.querySelector('#vibesSwitch').addEventListener('click', function(){
    $('#vibes').attr('autoplay', 'true');
  })
  });
  </script>
</body>
</html>
