// https://daneden.github.io/animate.css/
// each button changes the enter/leave animations for the elements on demand
// this is just to provide dynamic transitions, project may not require this functionality
const animateContainer = document.querySelector('#animate');
document.querySelector('#animate_fade').addEventListener('click', function () {
  animateContainer.dataset.leaveClass = 'fadeOut';
  animateContainer.dataset.enterClass = 'fadeIn';
  
  transition('#animate');
});
document.querySelector('#animate_fade_slide').addEventListener('click', function () {
  animateContainer.dataset.leaveClass = 'fadeOutRight';
  animateContainer.dataset.enterClass = 'fadeInLeft';
  
  transition('#animate');
});
document.querySelector('#animate_bounce').addEventListener('click', function () {
  animateContainer.dataset.leaveClass = 'bounceOutUp';
  animateContainer.dataset.enterClass = 'bounceInDown';
  
  transition('#animate');
});

// http://animista.net/
// each button changes the enter/leave animations for the elements on demand
// this is just to provide dynamic transitions, project may not require this functionality
const animistaContainer = document.querySelector('#animista');
document.querySelector('#animista_scale').addEventListener('click', function () {
  animistaContainer.dataset.leaveClass = 'scale-out-center';
  animistaContainer.dataset.enterClass = 'scale-in-center';
  
	transition('#animista');
});
document.querySelector('#animista_slit').addEventListener('click', function () {
  animistaContainer.dataset.leaveClass = 'slit-out-vertical';
  animistaContainer.dataset.enterClass = 'slit-in-vertical';
  
	transition('#animista');
});
document.querySelector('#animista_flicker').addEventListener('click', function () {
  animistaContainer.dataset.leaveClass = 'flicker-out-1';
  animistaContainer.dataset.enterClass = 'flicker-in-1';
  
	transition('#animista');
});

var transition = function (target) {
	const container = document.querySelector(target);
	const elementA = container.querySelector(':first-child');
  const elementB = container.querySelector(':last-child');
  const leaveClass = container.dataset.leaveClass;
  const enterClass = container.dataset.enterClass;
	const libraryClass = container.dataset.libraryClass;
  const hiddenClass = 'hidden'; // assummption on actual hidden class name
  const leaving = elementA.classList.contains('hidden') ? elementB : elementA;
  const entering = elementA.classList.contains('hidden') ? elementA : elementB;
  
  // function called at animationend
  let leaveEnd = () => {
  	// leaving element has finished transition, so it gets hidden
  	leaving.classList.add(hiddenClass);
    // if there's a libray class we remove it with the leaving class
    // otherwise, just the leaving class is removed
    // this is cleanup in case transition is reversed
    libraryClass ?
	    leaving.classList.remove(libraryClass, leaveClass) :
      leaving.classList.remove(leaveClass);
      
    // remove listeners for animation/transition events on leaving element
    // this is cleanup so we don't get zombie events in case transition is reversed
    leaving.removeEventListener('animationend', leaveEnd);
    leaving.removeEventListener('transitionend', leaveEnd);
    
    // create listeners for animation/transition events on entering element
    // entering element is entering, so we need to know when it's done
    entering.addEventListener('animationend', enterEnd);
    entering.addEventListener('transitionend', enterEnd);
    
    // remove hidden class on entering element so it can be seen
    entering.classList.remove(hiddenClass);
    
    // add in necessary classes for entering element to actually enter
    // if there's a library class add that as well
    libraryClass ?
	    entering.classList.add(libraryClass, enterClass) :
      entering.classList.add(enterClass);
  };
  
  let enterEnd = () => {
  	// if there's a libray class we remove it with the entering class
    // otherwise, just the entering class is removed
    // this is cleanup in case transition is reversed
  	libraryClass ?
	  	entering.classList.remove(libraryClass, enterClass) :
      entering.classList.remove(enterClass);
      
    // remove listeners for animation/transition events on entering element
    // this is cleanup so we don't get zombie events in case transition is reversed
    entering.removeEventListener('animationend', enterEnd);
    entering.removeEventListener('transitionend', enterEnd);
  };
  
  // the leaving element is first, kicks off the entire process
  // these listeners wait for animation/transition end events to call leaveEnd function
  leaving.addEventListener('animationend', leaveEnd);
  leaving.addEventListener('transitionend', leaveEnd);
  
  // add in necessary classes for leaving element to actually leave
  // if there's a library class add that as well
  libraryClass ?
	  leaving.classList.add(libraryClass, leaveClass) :
    leaving.classList.add(leaveClass);
};