<!--<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">
  <!-- 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">
  <!-- 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>
//    console.log($('.header'));
    AFRAME.registerComponent('vidhandler_lilica', {
      // ...
      init: function() {
        // Set up initial state and variables.
        this.toggle = false;
        this.vid = document.querySelector("#vid_lilica");
        this.vid.pause();
        document.querySelector("#links-sociais").style.display = "none";
        
      },
      tick: function() {

        if (this.el.object3D.visible == true) {
          if (!this.toggle) {
            this.toggle = true;
            this.vid.style.backgroundColor = 'transparent';
            this.vid.play();
            this.vid.onended = function() {
                this.vid.style.display = "none";
                this.toggle = false;
                document.querySelector("#links-sociais").style.display = "";
                
                var r = confirm("Visite nossa Fanpage!");
                if (r == true) {
                  window.location.href = "http://www.clubemarisol.com.br/lilica-inspire-se";
                }
            };
          }
        } else {
          this.toggle = false;
          this.vid.pause();
          document.querySelector("#links-sociais").style.display = "none";
        }
      }
    });
    
    AFRAME.registerComponent('vidhandler_tigor', {
      // ...
      init: function() {
        // Set up initial state and variables.
        this.toggle = false;
        this.vid = document.querySelector("#vid_tigor");
        this.vid.pause();
        document.querySelector("#links-sociais").style.display = "none";
                $("#links-sociais").show();
      },
      tick: function() {

        if (this.el.object3D.visible == true) {
          if (!this.toggle) {
            this.toggle = true;
//            document.querySelector(".a-canvas").style.backgroundColor = 'transparent';
//            $('.btnskips').css('background-color', '#e44085');
//            $('#vid_tigor').css('background-color', '#e44085');
//            $('#vid_tigor_src').css('background-color', '#e44085');
//            $('#vid_tigor').show();
            this.vid.play();
            this.vid.onended = function() {
//                this.vid.style.display = "none";
//                this.toggle = false;
//                JQuery("#links-sociais").show();
                
                var r = confirm("Visite nossa Fanpage!");
                if (r == true) {
                  window.location.href = "https://www.facebook.com/LilicaeTigor";
                }
            };
          }
        } else {
          this.toggle = false;
          this.vid.pause();
//          document.querySelector("#links-sociais").style.display = "none";
        }
      }
    });
    
    
    AFRAME.registerComponent('vidhandler_chroma', {
      // ...
      init: function() {
        // Set up initial state and variables.
        this.toggle = false;
        this.vid = document.querySelector("#vid_chroma");
        this.vid.pause();
        document.querySelector("#links-sociais").style.display = "none";
                $("#links-sociais").show();
      },
      tick: function() {

        if (this.el.object3D.visible == true) {
          if (!this.toggle) {
            this.toggle = true;
//            document.querySelector(".a-canvas").style.backgroundColor = 'transparent';
//            $('.btnskips').css('background-color', '#e44085');
//            $('#vid_tigor').css('background-color', '#e44085');
//            $('#vid_tigor_src').css('background-color', '#e44085');
//            $('#vid_tigor').show();
            this.vid.play();
            this.vid.onended = function() {
                this.vid.style.display = "none";
                this.toggle = false;
                JQuery("#links-sociais").show();
                
                var r = confirm("Visite nossa Fanpage!");
                if (r == true) {
                  window.location.href = "https://www.facebook.com/LilicaeTigor";
                }
            };
          }
        } else {
          this.toggle = false;
          this.vid.pause();
          document.querySelector("#links-sociais").style.display = "none";
        }
      }
    });
    
    function refrespage() {
      location.reload();
    }
  </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/logo_lilica_tigor.png">
          </div> 
        </div>
    </div>
   
    <a-scene>
        
        <a-assets>
            <video preload="auto" id="vid_tigor" onerror="failed(event)" loop="false" webkit-playsinline playsinline controls crossOrigin="anonymous">
                <source id="vid_tigor_src" type="video/mp4"  src="../../data/videos/tigor_verde.mp4">
            </video>
            
            
            <video preload="auto" id="vid_lilica" onerror="failed(event)" loop="false" style="backgroundColor: transparent;" crossorigin webkit-playsinline playsinline controls>
               <source type="video/mp4"  src="../../data/videos/lilica_verde.mp4" style="backgroundColor: transparent;">
            </video>
            
<!--            <video preload="auto" id="vid_chroma" onerror="failed(event)" loop="false" style="backgroundColor: transparent;" autoplay crossorigin webkit-playsinline playsinline controls>
               <source type="video/mp4"  src="../../data/videos/chroma.mp4" style="backgroundColor: transparent;">
            </video>-->
            
<!--            <video preload="auto" id="vid_youtube" onerror="failed(event)" loop="false" style="backgroundColor: transparent;" crossorigin webkit-playsinline playsinline controls>
               <source type="video/mp4"  src="../../data/videos/youtube.mp4" style="backgroundColor: transparent;">
            </video>-->
            
<!--            <a-asset-item id="tree-obj" src="../../data/obj/zapatillas/zapatillas.obj"></a-asset-item>
            <a-asset-item id="tree-mtl" src="../../data/obj/zapatillas/zapatillas.mtl"></a-asset-item>-->
        </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="refrespage()" 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="" id="" style="text-align: center; width: 150px;">
                <a href="https://www.facebook.com/LilicaeTigor" class="btn btnskips">Facebbok</a>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="" id="" style="text-align: center; width: 150px;">
                <a href="https://www.facebook.com/LilicaeTigor" class="btn btnskips">Insta</a>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="" id="" style="text-align: center; width: 150px;">
                <a href="https://www.facebook.com/LilicaeTigor" class="btn btnskips">Youtube</a>
            </div>
        </div>
      </div>
    </div>

<style>
    .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;
    }
    
    #links-sociais {
      position: fixed;
      left: 0;
      top: 200;
      width: 100%;
      color: white;
      display: none;
    }
    
    .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;
    }
    #vid {
        backgroundColor: transparent !important;
    }
    :not(:root):-webkit-full-screen {
    background: red !important;
}
    </style>
</body>

</html>