<!--<meta http-equiv="refresh" content="120">-->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript ,webcam, Video">
  <meta charset="UTF-8">
  <!-- A-FRAME -->
  <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  <script src="../build/aframe-ar.js"></script>
  <script src="../includes/aframe-chromakey-material.min.js"></script>
  
  
  <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
   <!--<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.4/dist/aframe-extras.min.js"></script>--> 
  <script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="../includes/fa/css/font-awesome.min.css">
  
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
  
  
  
  <!-- start the body of your page -->
  <script>
    
    
    AFRAME.registerComponent('vidhandler_tigor', {
        // ...
        init: function() {
          // Set up initial state and variables.
          this.toggle = false;
          this.vid = document.querySelector("#vid_tigor");
          this.vid.pause();
        },
      
        tick: function() {

            if (this.el.object3D.visible == true) {
              if (!this.toggle) {
                  this.toggle = true;
                  this.vid.play();

                  this.initbox = document.querySelector("#links-sociais");
                  this.initbox.style.display = 'none';
                  this.vid.onended = function() {
    //                    var r = confirm("Visite nosso Blog para mais Info!!!");
    //                    if (r == true) {
    //                      window.location.href = "http://www.clubemarisol.com.br/lilica-inspire-se";
    //                    }

    //                    var videos  = document.getElementsByTagName("video");
    //                    videos[videos.length - 1].style.display='none';
                          this.initbox = document.querySelector("#links-sociais");
                          this.initbox.style.display = 'initial';
                  };
              }
            } else {
              this.toggle = false;
              this.vid.pause();
            }
        }
    });
    
    function refrespage() {
      location.reload();
    }
    
    
    
    
    AFRAME.registerComponent('vidhandler_lilica', {
        // ...
        init: function() {
          // Set up initial state and variables.
            this.vid = document.querySelector("#vid_lilica");
            this.toggle = false;
            this.vid.pause();

        },
        tick: function() {

            if (this.el.object3D.visible == true) {
              if (!this.toggle) {
                  this.toggle = true;
                  this.vid.play();

                  this.initbox = document.querySelector("#links-sociais");
                  this.initbox.style.display = 'none';
                  this.vid.onended = function() {
    //                    var r = confirm("Visite nosso Blog para mais Info!!!");
    //                    if (r == true) {
    //                      window.location.href = "http://www.clubemarisol.com.br/lilica-inspire-se";
    //                    }

    //                    var videos  = document.getElementsByTagName("video");
    //                    videos[videos.length - 1].style.display='none';
                          this.initbox = document.querySelector("#links-sociais");
                          this.initbox.style.display = 'initial';
                  };
              }
            } else {
              this.toggle = false;
              this.vid.pause();
            }
        }
    });
        
    function initApp() 
    {
            var videos  = document.getElementsByTagName("video");
            videos[videos.length - 1].style.display='initial';


            this.vid1 = document.querySelector("#vid_lilica");
            this.vid1.play();
            this.vid1.pause();

            this.vid2 = document.querySelector("#vid_tigor");
            this.vid2.play();
            this.vid2.pause();

            this.initbox = document.querySelector("#init-box");
            this.initbox.style.display = 'none';

            this.linkbox = document.querySelector("#links-sociais");
            this.linkbox.style.display = 'none';
    }
  </script>
</head>

<body>
    <div class="header">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <img class="img-responsive" src="../../data/marcas/LILICA_E_TIGOR_FRANQUIA_COLOR.png">
          </div> 
        </div>
    </div>
   
    <a-scene>
        
        <a-assets>
            <video preload="auto" id="vid_tigor" onerror="failed(event)" crossorigin webkit-playsinline playsinline controls>
                <source type="video/mp4"  src="../../data/videos/tigor_verde.mp4">
            </video>
            
            
            <video preload="auto" id="vid_lilica" onerror="failed(event)" crossorigin webkit-playsinline playsinline controls>
               <source type="video/mp4"  src="../../data/videos/lilica_verde.mp4">
            </video>
        </a-assets>
        
        
        <a-marker id="memarker1" type="pattern" url="../../data/marcas/pattern-tigor.patt" vidhandler_tigor>      
            <!--<a-video src="#vid_tigor" position='0 0 0' scale="3 3 3" rotation="-90 0 0" height="1" width="1" transparent="true"></a-video>-->        
            <a-video position='0 0 0' rotation="-90 0 0" scale="4 4 4" height="4" width="4" material="shader: chromakey; src: #vid_tigor; color: 0.1, 0.9, 0.2" webkit-playsinline playsinline></a-video>
        </a-marker>
        
        <a-marker id="memarker2" type="pattern" url="../../data/marcas/pattern-lilica2.patt" vidhandler_lilica>      
            <!--<a-video src="#vid_lilica" position='0 0 0' scale="3 3 3" rotation="-90 0 0" height="1" width="1" transparent="true"></a-video>-->        
            <a-video position='0 0 0' rotation="-90 0 0" scale="4 4 4" height="4" width="4" material="shader: chromakey; src: #vid_lilica; color: 0.1, 0.9, 0.2" webkit-playsinline playsinline></a-video>
        </a-marker>
        
<!--        <a-marker id="memarker3" type="pattern" url="../../data/hiro.patt" vidhandler_obj>      
            <a-video src="#vid_lilica" position='0 0 0' scale="3 3 3" rotation="-90 0 0" height="1" width="1" transparent="true"></a-video>        
            <a-video position='0 0 0' rotation="-90 0 0" scale="4 4 4" height="4" width="4" material="shader: chromakey; src: #vid_lilica; color: 0.1, 0.9, 0.2" webkit-playsinline playsinline></a-video>
            <a-entity obj-model="obj: #tree-obj; mtl: #tree-mtl"></a-entity>
        </a-marker>-->
        
        <a-entity camera></a-entity>
        <!--<a-marker-camera></a-marker-camera>-->
    </a-scene>


<!--    <div class="footer">
      <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 pull-right">
            <div class="onebright" id="btn_refresh">
                <button onclick="initApp()" class="btn btnskips">Refresh</button>
            </div>
        </div>
      </div>
    </div>-->

    <div id="links-sociais">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="link-social" id="">
                <h4>Visite nossas Redes Sociais</h4>
            </div>
        </div>  
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="link-social" id="">
                <a href="https://www.facebook.com/LilicaeTigor" class="btn btnskips"><i class="fa fa-facebook-square" aria-hidden="true"></i> /LilicaeTigor</a>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="link-social" id="">
                <a href="https://www.instagram.com/LilicaeTigor/" class="btn btnskips"><i class="fa fa-instagram" aria-hidden="true"></i> @LilicaeTigor</a>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="link-social" id="">
                <a href="https://www.youtube.com/LilicaeTigor" class="btn btnskips"><i class="fa fa-youtube-play" aria-hidden="true"></i> /LilicaeTigor</a>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="link-social" id="">
                    <button onclick="initApp()" class="btn btnskips" style="background: rgba(236, 134, 0, 0.8);">Recomeçar</button>
                </div>
            </div>
        </div>
      </div>
    </div>

    <div id="init-box">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <p>
            Olá, seja bem-vindo à plataforma de Realidade Aumentada da Lilica & Tigor. Clique no botão abaixo e aponte a câmera do seu celular para as imagens semelhantes à esta:<br>
            </p>
            <img class="img-responsive" src="../../data/marcas/tigor.png" style="width:150px; margin: auto;">
            <div class="link-social" id="btn_init">
                <button onclick="initApp()" class="btn btnskips"><i class="fa fa-play-circle-o" aria-hidden="true"></i> INICIAR</button>
            </div>
        </div>
      </div>
    </div>

<style>
    video{
        display: none;
    }
    .row {
        margin-right: 0px;
        margin-left: 0px;
    }
    .footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      color: white;
    }
    
    .onebleft {
      padding: 5px 5px 5px 5px;
      margin: 5px 15px 5px 5px;
      float: left;
      z-index: 900000000000;
    }
    
    .onebright {
      padding: 5px 5px 5px 5px;
      margin: 5px 15px 5px 5px;
      float: right;
      z-index: 900000000000;
    }
    
    .imgon {
      width: 55px;
      height: 55px;
      background-color: white;
      padding: 3px 2px 2px 2px !important;
    }
    
    .imgss {
      width: 50px !important;
      height: 50px !important;
    }
    
    .imgname {
      font-size: 10px;
    }
    
    .header {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      color: white;
    }
    
    .oneleft {
      padding: 5px 5px 5px 5px;
      margin: 5px 15px 5px 5px;
      float: left;
      z-index: 900000000000;
    }
    
    body {
      margin: 0px;
      overflow: hidden;
    }
    
    .resets {
      background-color: rgba(51, 51, 51, 0.529);
      color: #fff;
      text-align: center;
      border-radius: 2px;
      height: 50px;
      padding: 10px 10px 10px 10px;
      position: fixed;
      top: 10px;
      text-align: center;
      z-index: 9000000000;
      bottom: 10px;
    }
    
    .btnskips {
      background: rgba(0, 0, 0, 0.433);
      color: white !important;
    }
    
    .btnskips:hover {
      background: rgb(197, 197, 197);
    }
    
    #arjsDebugUIContainer {
      display: none;
    }
    
    .a-enter-vr-button {
      display: none !important;
    }
    
    #links-sociais {
        position: fixed;
        left: -15px;
        top: 100;
        width: 100%;
        color: white;
        margin: 15px;
        display: none;
        background: rgba(238, 86, 121, 0.8);
    }
    
    #init-box {
        position: fixed;
        left: -15px;
        top: 100;
        width: 100%;
        color: white;
        margin: 15px;
        text-align: center;
    }
    
    .link-social{
        margin: 15px;
        text-align: center;
    }
    
    .link-social a {
        width: 150px;
    }
    
    body {
        background-color: #f17272;
    }
    
    i {
        font-size: 25px;
    }
    
    p {
        font-size: 15px;
    }
    
    #btn_init button{
        font-size: 25px;
    }
    </style>
</body>

</html>