// Scroll -> https://github.com/KoryNunn/scroll-into-view
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
  var COMPLETE="complete",CANCELED="canceled";function raf(e){if("requestAnimationFrame"in window)return window.requestAnimationFrame(e);setTimeout(e,16)}function setElementScroll(e,t,n){e.self===e?e.scrollTo(t,n):(e.scrollLeft=t,e.scrollTop=n)}function getTargetScrollLocation(e,t){var n,l,i,o,r,a,s,f=e.align,c=e.target.getBoundingClientRect(),d=f&&null!=f.left?f.left:.5,u=f&&null!=f.top?f.top:.5,g=f&&null!=f.leftOffset?f.leftOffset:0,m=f&&null!=f.topOffset?f.topOffset:0,h=d,p=u;if(e.isWindow(t))a=Math.min(c.width,t.innerWidth),s=Math.min(c.height,t.innerHeight),l=c.left+t.pageXOffset-t.innerWidth*h+a*h,i=c.top+t.pageYOffset-t.innerHeight*p+s*p,i-=m,o=(l-=g)-t.pageXOffset,r=i-t.pageYOffset;else{a=c.width,s=c.height,n=t.getBoundingClientRect();var E=c.left-(n.left-t.scrollLeft),S=c.top-(n.top-t.scrollTop);l=E+a*h-t.clientWidth*h,i=S+s*p-t.clientHeight*p,l-=g,i-=m,l=Math.max(Math.min(l,t.scrollWidth-t.clientWidth),0),i=Math.max(Math.min(i,t.scrollHeight-t.clientHeight),0),o=l-t.scrollLeft,r=i-t.scrollTop}return{x:l,y:i,differenceX:o,differenceY:r}}function animate(e){var t=e._scrollSettings;if(t){var n=t.maxSynchronousAlignments,l=getTargetScrollLocation(t,e),i=Date.now()-t.startTime,o=Math.min(1/t.time*i,1);if(t.endIterations>=n)return setElementScroll(e,l.x,l.y),e._scrollSettings=null,t.end(COMPLETE);var r=1-t.ease(o);if(setElementScroll(e,l.x-l.differenceX*r,l.y-l.differenceY*r),i>=t.time)return t.endIterations++,animate(e);raf(animate.bind(null,e))}}function defaultIsWindow(e){return e.self===e}function transitionScrollTo(e,t,n,l){var i,o=!t._scrollSettings,r=t._scrollSettings,a=Date.now(),s={passive:!0};function f(e){t._scrollSettings=null,t.parentElement&&t.parentElement._scrollSettings&&t.parentElement._scrollSettings.end(e),n.debug&&console.log("Scrolling ended with type",e,"for",t),l(e),i&&(t.removeEventListener("touchstart",i,s),t.removeEventListener("wheel",i,s))}r&&r.end(CANCELED);var c=n.maxSynchronousAlignments;return null==c&&(c=3),t._scrollSettings={startTime:a,endIterations:0,target:e,time:n.time,ease:n.ease,align:n.align,isWindow:n.isWindow||defaultIsWindow,maxSynchronousAlignments:c,end:f},"cancellable"in n&&!n.cancellable||(i=f.bind(null,CANCELED),t.addEventListener("touchstart",i,s),t.addEventListener("wheel",i,s)),o&&animate(t),i}function defaultIsScrollable(e){return"pageXOffset"in e||(e.scrollHeight!==e.clientHeight||e.scrollWidth!==e.clientWidth)&&"hidden"!==getComputedStyle(e).overflow}function defaultValidTarget(){return!0}function findParentElement(e){if(e.assignedSlot)return findParentElement(e.assignedSlot);if(e.parentElement)return"BODY"===e.parentElement.tagName?e.parentElement.ownerDocument.defaultView||e.parentElement.ownerDocument.ownerWindow:e.parentElement;if(e.getRootNode){var t=e.getRootNode();if(11===t.nodeType)return t.host}}module.exports=function(e,t,n){if(e){"function"==typeof t&&(n=t,t=null),t||(t={}),t.time=isNaN(t.time)?1e3:t.time,t.ease=t.ease||function(e){return 1-Math.pow(1-e,e/2)};var l,i=findParentElement(e),o=1,r=t.validTarget||defaultValidTarget,a=t.isScrollable;for(t.debug&&(console.log("About to scroll to",e),i||console.error("Target did not have a parent, is it mounted in the DOM?"));i;)if(t.debug&&console.log("Scrolling parent node",i),r(i,o)&&(a?a(i,defaultIsScrollable):defaultIsScrollable(i))&&(o++,l=transitionScrollTo(e,i,t,s)),!(i=findParentElement(i))){s(COMPLETE);break}return l}function s(e){--o||n&&n(e)}};
  },{}],2:[function(require,module,exports){
  window.scrollIntoView=require("./scrollIntoView");
  },{"./scrollIntoView":1}]},{},[2]);

window.addEventListener("load", function() {

    let tknaF_preloader = document.getElementById('tknaF_preloader');
    let tablero = document.getElementById('tablero');

    let text_spread = document.getElementById('text_spread');
    let deck = document.getElementById('d0');

    let btnResult = document.getElementById('btnResult');
    let readTarot = document.getElementById('readTarot');

    let backface = document.getElementsByClassName('backface');
    let backfaceArr = Array.from(backface);
    let marcador = document.getElementsByClassName('marcador');
    let card = document.getElementsByClassName('card');

    let numero_spread = tknaF_preloader.getAttribute('data-n');
    let numCartas = 0;
    let count = 0

  

    let opT = document.getElementsByClassName('opT');

    let IdsPost = [];


    // Click en botón empezar
    readTarot.addEventListener('click', function(){
        deck.style.display="block"
        btnResult.style.display="none"

        setTimeout(() => {
          text_spread.style.visibility="hidden";
          anime({
              targets: '#'+text_spread.getAttribute('id'),
              height:  '0px',
              easing: 'easeInOutQuad'
          });

          // desplazar la baraja al tablero
          scrollIntoView(tknaF_preloader, {
            time: 500,
            align:{top: 0,topOffset: 30}
          });

        }, 300);

    });




     //////////////// Bucle Cartas
     /////////////////////////////////////
    backfaceArr.forEach(function(back){
      let backface_ID = backface[numCartas].getAttribute('id');
      let img_ID = card[numCartas].getAttribute('id');
      let marcador_ID = marcador[numCartas];

          back.addEventListener('click', ClickCard);
            function ClickCard(e){
              e.preventDefault();
              let durat_img = 10000;
              count += 1;

              //  Click menor que total
              if (count <= numero_spread) {

                  marcador_ID.innerHTML=count;
                  marcador_ID.style.display='flex';
                  let numCSTotal = document.getElementById('numCSTotal');
                  if(numCSTotal !== null){numCSTotal.innerHTML= count;};
                  anime({
                    targets: '#'+backface_ID,
                    delay: 600,
                    update: function() {
                       document.getElementById(backface_ID).classList.add("rotate");
                      document.getElementById(backface_ID).style.boxShadow="none";
                      document.getElementById(img_ID).classList.add("flash");
                      document.getElementById(backface_ID).style.background='initial';
                    }
                  });

                  

                  // arrays para pasar por Ajax al archivo php
                  IdsPost.push(back.getAttribute('data-id'));


                  
                  switch (count) {
                    case 1:
                         // Carta 1
                         let img1_src = document.getElementById(img_ID).getAttribute('src');
                         const img1 = document.createElement('img');
                         img1.id="m1_img";
                         img1.className="cardClik";
                         img1.setAttribute('src', img1_src)
                         document.getElementById('pic1').appendChild(img1);
   
                           anime({
                             targets: '#m1_img',
                             delay: 500,
                             opacity: '1',
                             duration: durat_img,
                           });
   
                      break;
                    case 2:
                         // Carta 2
                         let img2_src = document.getElementById(img_ID).getAttribute('src');
                         const img2 = document.createElement('img');
                         img2.id="m2_img";
                         img2.className="cardClik";
                         img2.setAttribute('src', img2_src)
                         document.getElementById('pic2').appendChild(img2);
   
                         anime({
                           targets: '#m2_img',
                           delay: 500,
                           opacity: '1',
                           duration: durat_img
                         });
   
                      break;
                    case 3:
                         // Carta 3
                         let img3_src = document.getElementById(img_ID).getAttribute('src');
                         const img3 = document.createElement('img');
                         img3.id="m3_img";
                         img3.className="cardClik";
                         img3.setAttribute('src', img3_src)
                         document.getElementById('pic3').appendChild(img3);
   
                         anime({
                           targets: '#m3_img',
                           delay: 500,
                           opacity: '1',
                           duration: durat_img
                         });
   
                  }


              

                  // Añadir y quitar clases
                  back.removeEventListener("click", ClickCard);
                  back.classList.add("c_block");
                  back.classList.remove("c_select");
                  
                  // Mostrar carta en el spread
                  anime({
                      targets: "#m"+count+"_img",
                      delay: 500,
                      opacity: 1,
                      duration: 10000,
                    });


              }// Fin menor que total

              //  Click Penúltima carta
              if (count == numero_spread -1) {
                let TitleCustom = document.getElementById('TitleCustom');
                if(TitleCustom !== null){TitleCustom.style.display='none'}
                document.getElementById('TitleSelect2').style.display='inline-block';
              }

              //  Click Última carta
              if (count == numero_spread) {
                document.getElementById('TitleSelect2').innerHTML='&nbsp;';

                setTimeout(() => {
                  bloq_deck.style.display='none';
                  document.getElementById('card_select').style.display='none';
                  document.getElementById('TitleSelect2').style.display='none';

      
                  btnResult.style.display='none';

                  scrollIntoView(tknaF_preloader, {
                    time: 500,
                    align:{top: 0,topOffset: 30}
                  });

                  
                  opT[0].style.opacity= 0.2;
                  opT[1].style.opacity= 0.2;
                  tablero.style.opacity= 0.2;
                  text_spread.style.display='none';
                  document.getElementById('loader-wrapper').style.display='block';


                    setTimeout(() => {

                    opT[0].style.opacity= 1;
                    opT[1].style.opacity= 1;
                    tablero.style.opacity= 1;
                    text_spread.style.display='none';
                    document.getElementById('loader-wrapper').style.display='none';
                    document.getElementById('results').style.display='block';


                  jQuery(document).ready(function ($) {
                    jQuery.ajax({
                        type: "post",
                        url: ajax_tarot.url,
                        data: "action=" + ajax_tarot.action + "&nonce=" + ajax_tarot.nonce + "&cards="+ IdsPost,
                        success: function(result){
                            $('#results').html(result);
                        }
                    });
                  });


                  }, 3300);


                }, 3300);


              }



            }// Fin ClickCard
        numCartas ++;

    });// Fin Bucle Cartas



////////// FIN Window
});