jQuery(document).ready(function($){
    //========start rating============
    $('.rating ul li').on('click', function() {

        var li = $(this),
            ul = li.parent(),
            rating = ul.parent(),
            last = $('li.current');
            console.log('last', last); 
        if(!rating.hasClass('animate-left') && !rating.hasClass('animate-right')) {

            //last.removeClass('current');
            $("li.current").removeClass('current');
            console.log('item_index', li.index() , last.index(), li.position().left )
            ul.children('li').each(function() {
               var current = $(this);
                current.toggleClass('active', li.index() > current.index());
            });

            rating.addClass(li.index() > last.index() ? 'animate-right' : 'animate-left');
            rating.css({
                '--x': li.position().left + 'px'
            });
            li.addClass('move-to');
            last.addClass('move-from');

            setTimeout(() => {
                li.addClass('current');
                li.removeClass('move-to');
                last.removeClass('move-from');
                rating.removeClass('animate-left animate-right');
            }, 800);

        }

    }); 

    //=======end rating==========
     
     
     //=========like button===========
let confettiAmount = 60,
confettiColors = [
'#7d32f5',
'#f6e434',
'#63fdf1',
'#e672da',
'#295dfe',
'#6e57ff'],

random = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) + min);
},
createConfetti = to => {
  let elem = document.createElement('i'),
  set = Math.random() < 0.5 ? -1 : 1;
  elem.style.setProperty('--x', random(-260, 260) + 'px');
  elem.style.setProperty('--y', random(-160, 160) + 'px');
  elem.style.setProperty('--r', random(0, 360) + 'deg');
  elem.style.setProperty('--s', random(.6, 1));
  elem.style.setProperty('--b', confettiColors[random(0, 5)]);
  to.appendChild(elem);
};

document.querySelectorAll('.paw-button').forEach(elem => {
  elem.addEventListener('click', e => {
    let number = elem.children[1].textContent;
    if (!elem.classList.contains('animation')) {
      elem.classList.add('animation');
      for (let i = 0; i < confettiAmount; i++) {if (window.CP.shouldStopExecution(0)) break;
        createConfetti(elem);
      }window.CP.exitedLoop(0);
      setTimeout(() => {
        elem.classList.add('confetti');
        setTimeout(() => {
          elem.classList.add('liked');
          elem.children[1].textContent = parseInt(number) + 1;
        }, 400);
        setTimeout(() => {
          elem.querySelectorAll('i').forEach(i => i.remove());
        }, 600);
      }, 260);
    } else {
      elem.classList.remove('animation', 'liked', 'confetti');
      elem.children[1].textContent = parseInt(number) - 1;
    }
    e.preventDefault();
  });
});
//# sourceURL=pen.js
  //============like button ===========


    if($("#s_n_l_btn").length>0){
        document.querySelectorAll('.s_n_l_button').forEach(button => {
            button.addEventListener('click', e => {
                button.classList.add('processing');
                e.preventDefault();
            });
        });

        document.querySelector('.s_n_l_restart').addEventListener('click', e => {
            document.querySelectorAll('.s_n_l_button').forEach(button => {
                button.classList.remove('processing');
            });
            e.preventDefault();
        });
    }

    //=============
      function animateCube(selector){
          console.log('animate'); 
          $("."+selector+">span").addClass("logo")
          $("."+selector).addClass("logo-background"); 
          
          setTimeout(function(){
               //The following 2 lines are commented to de-activate the coloring mode
               
//               $(".side>span").removeClass("logo").addClass("color");
//               $(".side").removeClass("logo-background");
               
               setTimeout(function(){
                    $("."+selector).addClass("logo-background"); 
                    $("."+selector+">span").removeClass("color").addClass("logo");
                    
               },multicolor_time*1000);
               
          }, logo_time*1000);
          
     }
     function animateCube_(selector){
          console.log('animate'); 
          $("."+selector+">span").addClass("logo")
          $("."+selector).addClass("logo-background"); 
          
          setTimeout(function(){
               //The following 2 lines are commented to de-activate the coloring mode
               
//               $(".side>span").removeClass("logo").addClass("color");
//               $(".side").removeClass("logo-background");
               
               setTimeout(function(){
                    $("."+selector).addClass("logo-background"); 
                    $("."+selector+">span").removeClass("color").addClass("logo");
                    
               },multicolor_time*1000);
               
          }, logo_time*1000);
          
     }
     //===Function to animate the cube starts here===
     
     //variables for time,value is in seconds, for example if we desire the logo time to be 45 we put 45, same as multi color.
     //put the value to -1 to disable the functionality
     if($(".cub1-wrap").length){
          var multicolor_time = (typeof _multicolor_time != 'undefined') ? _multicolor_time : -1;
          var logo_time       = (typeof _logo_time != 'undefined') ? _logo_time : 5;
          console.log('multicolor_time',  multicolor_time, logo_time); 
          //Function body
         

          animateCube('cub1-side');
          setInterval(animateCube('cub1-side'),(multicolor_time + logo_time)*1000);
     }

     if($(".skeleton-wrap").length){
          var multicolor_time = (typeof _skeleton_multicolor_time != 'undefined') ? _skeleton_multicolor_time : -1;
          var logo_time       = (typeof _skeleton_logo_time != 'undefined') ? _skeleton_logo_time : 5;
          console.log('multicolor_time',  multicolor_time, logo_time); 
          //Function body
         

          animateCube_('skeleton-side');
          setInterval(animateCube_('skeleton-side'),(multicolor_time + logo_time)*1000);
     }


     //===Cube animation ends here===
     
     
});

if(typeof Vue != "undefined"){

Vue.component('ti-button-splatter', {
  props: ['text'],
  data: function() {
    return {
      splatters: []
    }
  },
  template: `
<button
  class="btn-splatter"
  v-on:click="makeSplatter(event)"
>
  {{text}}
  <div
    v-for="splatter, i in splatters"
    v-bind:class="splatter.type"
    v-bind:style="splatter.style"
    v-bind:ref="createRef(i)"
  ></div>
</button>
`,
  methods: {
    createRef: function(i) {
      return 'splatter-' + i;
    },
    getSizeEm: function(s) {
      if (s === 0) {
        return (1 / 2) + 'em';
      } else if (s === 1) {
        return (1.5 / 2) + 'em';
      } else if (s === 2) {
        return (1.8 / 2) + 'em';
      } else {
        return 0;
      }
    },
    createToXPos: function(tb, w, h, s) {
      let positionStyle  = {style: {}};
      let randomPosition = (Math.floor(Math.random() * w));
      let fixedPosition  = ((tb === 0) ? h : 0);

      positionStyle.style.top  = 'calc(' + fixedPosition + 'px - ' + s + ')';
      positionStyle.style.left = 'calc(' + randomPosition + 'px - ' + s + ')';

      return positionStyle;
    },
    createToYPos: function(lr, w, h, s) {
      let positionStyle  = {style: {}};
      let randomPosition = (Math.floor(Math.random() * h));
      let fixedPosition  = ((lr === 0) ? w : 0);

      positionStyle.style.left = 'calc(' + fixedPosition + 'px - ' + s + ')';
      positionStyle.style.top  = 'calc(' + randomPosition + 'px - ' + s + ')';

      return positionStyle;
    },
    createsplatter: function(el, count, types, w, h) {
      for (let i = 0; i < count; i++) {
        let type = Math.floor(Math.random() * 3);
        let xOrY = Math.round(Math.random());
        let tblr = Math.round(Math.random());
        let splt = null;
        let sz   = Math.random() + 0.5;

        if (xOrY === 0) {
          splt = this.createToXPos(tblr, w, h, this.getSizeEm(type));
        } else {
          splt = this.createToYPos(tblr, w, h, this.getSizeEm(type));
        }

        splt.type  = types[type];
        splt.scale = sz;

        splt.style.display = 'none';
        splt.style.transform = 'scale(' + sz + ')';

        if (splt !== null) {
          this.splatters.push(splt);
        }
      }
    },
    explodeSplatter: function() {
      for (var i = 0; i < this.splatters.length; i++) {
        if (this.splatters[i].animationEnd === true) {
          continue;
        }

        if (typeof this.splatters[i].moving === 'undefined') {
          let el = this.$refs['splatter-' + i];
          let an = Math.floor(Math.random() * 359) + 1;

          this.splatters[i].style.display = 'block';

          this.splatters[i].moving = true;

          let psY = (Math.sin(an) * 3) + 'em';
          let psX = (Math.cos(an) * 3) + 'em';
          let scl = this.splatters[i].scale;

          TweenLite.to(el, 0.8, {
            transform:
              'translate(' + psX + ', ' + psY + ') rotate(720deg) scale(0)'
          }).eventCallback('onComplete', () => {
            el.dataset.animationEnd = true;
          });
        }
      }
    },
    makeSplatter: function(e) {
      let el    = e.target;
      let count = Math.floor(Math.random() * 4) + 5;
      let types = ['splatter-round', 'splatter-ring', 'splatter-star'];
      let w     = el.clientWidth;
      let h     = el.clientHeight;

      this.createsplatter(el, count, types, w, h);
    }
  },
  watch: {
    splatters: function(newData, oldData) {
      setTimeout(() => {
        this.explodeSplatter();
      }, 1);
    }
  }
});

// -----

  var app = new Vue({
    el: '.nice_submit_button'
  });  
}


/**********To do list**************/
if(jQuery(".tdl-form__input").length>0){
// IEFE
(() => { 
  // state variables
  let toDoListArray = [];
  // ui variables
  const form = document.querySelector(".tdl-form"); 
  const input = form.querySelector(".tdl-form__input");
  const ul = document.querySelector(".tdl-toDoList"); 

  // event listeners
  form.addEventListener('submit', e => {
    // prevent default behaviour - Page reload
    e.preventDefault();
    // give item a unique ID
    let itemId = String(Date.now());
    // get/assign input value
    let toDoItem = input.value;
    //pass ID and item into functions
    addItemToDOM(itemId , toDoItem);
    addItemToArray(itemId, toDoItem);
    // clear the input box. (this is default behaviour but we got rid of that)
    input.value = '';
  });
  
  ul.addEventListener('click', e => {
    let id = e.target.getAttribute('data-id')
    if (!id) return // user clicked in something else      
    //pass id through to functions
    removeItemFromDOM(id);
    removeItemFromArray(id);
  });
  
  // functions 
  function addItemToDOM(itemId, toDoItem) {    
    // create an li
    const li = document.createElement('li')
    li.setAttribute("data-id", itemId);
    // add toDoItem text to li
    li.innerText = toDoItem
    // add li to the DOM
    ul.appendChild(li);
  }
  
  function addItemToArray(itemId, toDoItem) {
    // add item to array as an object with an ID so we can find and delete it later
    toDoListArray.push({ itemId, toDoItem});
    console.log(toDoListArray)
  }
  
  function removeItemFromDOM(id) {
    // get the list item by data ID
    var li = document.querySelector('[data-id="' + id + '"]');
    // remove list item
    ul.removeChild(li);
  }
  
  function removeItemFromArray(id) {
    // create a new toDoListArray with all li's that don't match the ID
    toDoListArray = toDoListArray.filter(item => item.itemId !== id);
    console.log(toDoListArray);
  }
  
})();
}
jQuery(document).ready(function($){
/*
//(function(){
  const _ = (s, o = document) => o.querySelector(s);
const __ = (s, o = document) => o.querySelectorAll(s);

const zodiacs = ['capricorn', 'aquarius', 'pisces', 'aries', 'taurus', 'gemini', 'cancer', 'leo', 'virgo', 'libra', 'scorpio', 'sagittarius'];

function getZodiac(day, month) {
    let zodiac = [''].concat(zodiacs).concat([zodiacs[0]]),
        last = ['', 19, 18, 20, 20, 21, 21, 22, 22, 21, 22, 21, 20, 19];
    return (parseInt(day) > last[parseInt(month)]) ? zodiac[parseInt(month) * 1 + 1] : zodiac[parseInt(month)];
}

function createZodiac(cls, index) {
    let div = document.createElement('div');
    div.style.setProperty('--offset', index * -24 + 'px');
    div.classList.add(cls);
    return div;
}

function createSVG(id) {
    let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
        use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
    use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + id);
    svg.appendChild(use);
    svg.classList.add(id);
    return svg;
}

function prevInput(el) {
    let input = el.previousElementSibling ? el.previousElementSibling.previousElementSibling : null;
    return (input && input.tagName == 'INPUT') ? input : el;
}

function nextInput(el) {
    let input = el.nextElementSibling ? el.nextElementSibling.nextElementSibling : null;
    var fin = (input && input.tagName == 'INPUT') ? input : el;
    console.log(fin);
    return fin; 
}

function pad(n) {
    return (n < 10) ? ('0' + n) : n;
}

function triggerInput(el) {
    let event = document.createEvent('Event');
    event.initEvent('input', true, true);

    el.dispatchEvent(event);
}
var day = document.getElementsByClassName('day'); 

if(day){
  day = day[0];
  console.log('day', day); 
  day.addEventListener('keyup',function(e){
       console.log('keyup', e.keyCode)
        if(e.key > 3 && !day.value.length && e.keyCode != 37 && e.keyCode != 39 && document.activeElement == day) {
            day.value = '0' + e.key;
            triggerInput(day);
            setTimeout(() => nextInput(day).focus(), 50);
        }
    });
}*/

//$('.birthday').(function(){
    /*var field = $('.birthday'); 
    var month = $('.month', field),
        day = $('.day', field),
        year = $('.year', field),
        icon = $('.icon', field),
        normal = $('.normal', icon),
        zodiac = $('.zodiac', icon),
        message = $('<div></div>');

    message.addClass('error-message');

    field.append(message);

    //['cake-light', 'cake'].forEach(name => normal.appendChild(createSVG(name)));
    //$.each(['cake-light', 'cake'], function(){

    //}); 
    var stateList = ['cake-light', 'cake']; 
    for (var i = 0; i < stateList.length; i--) {
      normal.append(createSVG( stateList[i]));
    }
    //zodiacs.forEach((name, index) => zodiac.appendChild(createZodiac(name, index)));
    $.each(zodiacs, function(name, index){
      zodiac.append(createZodiac(name, index));
    }); 
    month.addEventListener('keypress', e => {
       console.log('keypress', e.keyCode)
        if(e.key > 1 && !month.value.length && e.keyCode != 37 && e.keyCode != 39 && document.activeElement == month) {
            month.value = '0' + e.key;
            triggerInput(month);
            setTimeout(() => nextInput(month).focus(), 50);
        }
    });

    day.addEventListener('keypress', e => {
       console.log('keypress', e.keyCode)
        if(e.key > 3 && !day.value.length && e.keyCode != 37 && e.keyCode != 39 && document.activeElement == day) {
            day.value = '0' + e.key;
            triggerInput(day);
            setTimeout(() => nextInput(day).focus(), 50);
        }
    });

    //[month, day, year].forEach(input => {
      $.each([month, day, year], function(e, input){
        input.addEventListener('keypress', e => {
            console.log('keypress', e.keyCode)
            if(e.keyCode < 47 || e.keyCode > 57) {
                e.preventDefault();
            }
        });

        input.addEventListener('keydown', e => {
            if((e.keyCode == 8 && !input.value) || (e.keyCode == 37 && input.selectionStart == 0)) {
                prevInput(input).focus();
            }
            if(((e.keyCode != 9 && e.keyCode != 37 && e.keyCode != 8 && (input.selectionStart == input.getAttribute('maxlength'))) || (e.keyCode == 39 && input.selectionStart == input.value.length))) {
                nextInput(input).focus();
            }
        });

        input.addEventListener('input', e => {

            let date = (month.value.length >= 1 && day.value.length >= 1 && year.value.length == 4) ? new Date(year.value + '-' + month.value + '-' + day.value) : true;

            if($('.show', zodiac)) {
                $('.show', zodiac).removeClass('show');
            }

            if(day.value.length >= 1 && day.value > 0 && day.value < 32 && month.value.length >= 1 && month.value > 0 && month.value < 13) {
               $('.' + getZodiac(day.value, month.value), zodiac).addClass('show');
                normal.addClass('hide');
            } else {
                normal.removeClass('hide');
            }

            field.toggleClass('error', (day.value.length == 2 && (day.value < 1 || day.value > 31)) || (month.value.length == 2 && (month.value < 1 || month.value > 12)) || (date !== true && date > new Date) || (date !== true && date < (new Date).setFullYear((new Date).getFullYear() - 120)));

            if(date !== true && date > new Date) {
                message.textContent = 'Not born yet?';
                setTimeout(() => message.classList.add('show'), 50);
            } else if(date !== true && date < (new Date).setFullYear((new Date).getFullYear() - 120)) {
                message.textContent = '> 120 years is really old!';
                setTimeout(() => message.addClass('show'), 50);
            } else {
                message.removeClass('show');
            }

        });

    });*/

});

//});