/**
 * @name		Page Builder CK
 * @package		com_pagebuilderck
 * @copyright	Copyright (C) 2022. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 * @author		Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
 */

if( document.readyState !== "loading" ) {
	PBCK_animatedtext_run();
} else {
	document.addEventListener("DOMContentLoaded", function () {
//jQuery(document).ready(function(){
	PBCK_animatedtext_run();
	});
}

function PBCK_animatedtext_run() {
	let selectors = document.querySelectorAll('.pagebuilderck:not(.workspaceck) .cktype[data-type="animatedtext"] .titleck-effect');
	PBCK_animatedtext_start(selectors);
}

function PBCK_animatedtext_start(selectors, lines) {
	if (! lines) lines = false;
	selectors.forEach(function(selector) {
		let effect = selector.getAttribute('data-effect');
		if (! effect) {
			console.log('PBCK Animated Text : no effect found');
			console.log(selector);
			return;
		}
		let funcName = 'PBCK_animatedtext_effect_' + effect;
		window[funcName](selector, lines);
	});
}

function PBCK_animatedtext_splitTextInLetters(selector) {
	// Wrap every letter in a span
	selector.innerHTML = selector.textContent.replace(/\S/g, "<span class='pbck-letter'>$&</span>");
	// selector.innerHTML.trim();
}

function PBCK_animatedtext_splitTextInWords(selector) {
	// Wrap every wodd in a span
	selector.innerHTML = selector.textContent.replace(/\S+\s*/g, "<span class='pbck-word'>$&</span> ");
	selector.innerHTML.trim();
}

function PBCK_animatedtext_AddLine(selector, number) {
	let line = document.createElement("span")
	line.classList.add('pbck-line');
	if (number === 1) {
		line.classList.add('pbck-line1');
		selector.prepend(line);
	} else {
		line.classList.add('pbck-line2');
		selector.append(line);
	}
}

function PBCK_animatedtext_effect_1(selector, lines) {
	PBCK_animatedtext_splitTextInLetters(selector);
	if (lines) {
		PBCK_animatedtext_AddLine(selector, 1);
		PBCK_animatedtext_AddLine(selector, 2);
	}
	anime.timeline({loop: true})
	.add({
		targets: selector.querySelectorAll('.pbck-letter'),
		scale: [0.3,1],
		opacity: [0,1],
		translateZ: 0,
		easing: "easeOutExpo",
		duration: 600,
		delay: (el, i) => 70 * (i+1)
	}).add({
		targets: '.pbck-line',
		scaleX: [0,1],
		opacity: [0.5,1],
		easing: "easeOutExpo",
		duration: 700,
		offset: '-=875',
		delay: (el, i, l) => 80 * (l - i)
	}).add({
		targets: selector,
		opacity: 0,
		duration: 1000,
		easing: "easeOutExpo",
		delay: 1000
	});
}

function PBCK_animatedtext_effect_2(selector) {
	PBCK_animatedtext_splitTextInLetters(selector);
	anime.timeline({loop: true})
  .add({
    targets: selector.querySelectorAll('.pbck-letter'),
    scale: [4,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 950,
    delay: (el, i) => 70*i
  }).add({
    targets: selector,
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });
}

function PBCK_animatedtext_effect_3(selector) {
	PBCK_animatedtext_splitTextInLetters(selector);
	anime.timeline({loop: true})
	  .add({
		targets: selector.querySelectorAll('.pbck-letter'),
		opacity: [0,1],
		easing: "easeInOutQuad",
		duration: 2250,
		delay: (el, i) => 150 * (i+1)
	  }).add({
		targets: selector,
		opacity: 0,
		duration: 1000,
		easing: "easeOutExpo",
		delay: 1000
	  });
}

function PBCK_animatedtext_effect_4(selector) {
	PBCK_animatedtext_splitTextInWords(selector);
	var ml4 = {};
	ml4.opacityIn = [0,1];
	ml4.scaleIn = [0.2, 1];
	ml4.scaleOut = 3;
	ml4.durationIn = 800;
	ml4.durationOut = 600;
	ml4.delay = 500;

	var myTimeline = anime.timeline({loop: true});
	selector.querySelectorAll('.pbck-word').forEach(function(word) {
		myTimeline
		  .add({
			targets: word,
			opacity: ml4.opacityIn,
			scale: ml4.scaleIn,
			duration: ml4.durationIn
		  })
		  // .add({
			// targets: word,
			// opacity: 0,
			// scale: ml4.scaleOut,
			// duration: ml4.durationOut,
			// easing: "easeInExpo",
			// delay: ml4.delay
		  // });
	});
	myTimeline.add({
		targets: selector,
		scale: ml4.scaleOut,
		easing: "easeInExpo",
		opacity: 0,
		duration: 500,
		delay: 500
	  })
}


function PBCK_animatedtext_effect_5(selector) {
	PBCK_animatedtext_splitTextInLetters(selector);
	anime.timeline({loop: true})
	  .add({
		targets: selector.querySelectorAll('.pbck-letter'),
		translateY: ["1.1em", 0],
		translateZ: 0,
		duration: 750,
		delay: (el, i) => 50 * i
	  }).add({
		targets: selector,
		opacity: 0,
		duration: 1000,
		easing: "easeOutExpo",
		delay: 1000
	  });
}


function PBCK_animatedtext_effect_6(selector) {
	PBCK_animatedtext_splitTextInLetters(selector);
	anime.timeline({loop: true})
	  .add({
		targets: selector.querySelectorAll('.pbck-letter'),
		translateY: ["1.1em", 0],
		translateX: ["0.55em", 0],
		translateZ: 0,
		rotateZ: [180, 0],
		duration: 750,
		easing: "easeOutExpo",
		delay: (el, i) => 50 * i
	  }).add({
		targets: selector,
		opacity: 0,
		duration: 1000,
		easing: "easeOutExpo",
		delay: 1000
	  });
}


function PBCK_animatedtext_effect_7(selector) {
	PBCK_animatedtext_splitTextInLetters(selector);
	anime.timeline({loop: true})
	  .add({
		targets: selector.querySelectorAll('.pbck-letter'),
		scale: [0, 1],
		duration: 1500,
		elasticity: 600,
		delay: (el, i) => 45 * (i+1)
	  }).add({
		targets: selector,
		opacity: 0,
		duration: 1000,
		easing: "easeOutExpo",
		delay: 1000
	  });
}

function PBCK_animatedtext_effect_8(selector) {
	PBCK_animatedtext_splitTextInLetters(selector);
	anime.timeline({loop: true})
	  .add({
		targets: selector.querySelectorAll('.pbck-letter'),
		rotateY: [-90, 0],
		duration: 1300,
		delay: (el, i) => 45 * i
	  }).add({
		targets: selector,
		opacity: 0,
		duration: 1000,
		easing: "easeOutExpo",
		delay: 1000
	  });
}

function PBCK_animatedtext_effect_9(selector) {
	// console.log(selector);
	// console.log(selector.getBoundingClientRect());
	// console.log(selector.clientWidth);
	// console.log(selector.offsetWidth);
	// console.log(selector.getBoundingClientRect().width);
	
	// PBCK_animatedtext_splitTextInLetters(selector);
	selector.innerHTML = selector.textContent.replace(/([^\x00-\x80]|\w)/g, "<span class='pbck-letter'>$&</span>");
	PBCK_animatedtext_AddLine(selector, 1)
	anime.timeline({loop: true})
	  .add({
		targets: selector.querySelectorAll('.pbck-line'),
		scaleY: [0,1],
		opacity: [0,1],
		easing: "easeOutExpo",
		duration: 700
	  })
	  .add({
		targets: selector.querySelectorAll('.pbck-line'),
		translateX: [0, selector.getBoundingClientRect().width + 10],
		easing: "easeOutExpo",
		// opacity: [1,1],
		duration: 700,
		delay: 100
	  })
	  .add({
		targets: selector.querySelectorAll('.pbck-letter'),
		opacity: [0,1],
		easing: "easeOutExpo",
		duration: 600,
		offset: '-=775',
		delay: (el, i) => 34 * (i+1)
	  })
	  .add({
		targets: selector,
		opacity: 0,
		duration: 1000,
		easing: "easeOutExpo",
		delay: 1000
	  });
	  // anime.timeline({loop: true})
	  // .add({
		// targets: selector.querySelectorAll('.pbck-line'),
		// scaleY: [0,1],
		// opacity: [0,1],
		// easing: "easeOutExpo",
		// duration: 700
	  // }).add({
		// targets: selector.querySelectorAll('.pbck-line'),
		// translateX: [0, selector.getBoundingClientRect().width + 10],
		// easing: "easeOutExpo",
		// opacity: [1,1],
		// duration: 700,
		// delay: 100
	  // });
}


function PBCK_animatedtext_effect_10(selector) {
	PBCK_animatedtext_splitTextInLetters(selector);
	anime.timeline({loop: true})
	  .add({
		targets: selector.querySelectorAll('.pbck-letter'),
		translateX: [40,0],
		translateZ: 0,
		opacity: [0,1],
		easing: "easeOutExpo",
		duration: 1200,
		delay: (el, i) => 500 + 30 * i
	  }).add({
		targets: selector.querySelectorAll('.pbck-letter'),
		translateX: [0,-30],
		opacity: [1,0],
		easing: "easeInExpo",
		duration: 1100,
		delay: (el, i) => 100 + 30 * i
	  });
}

function PBCK_animatedtext_effect_11(selector) {
	PBCK_animatedtext_splitTextInLetters(selector);
	anime.timeline({loop: true})
	  .add({
		targets: selector.querySelectorAll('.pbck-letter'),
		translateY: [100,0],
		translateZ: 0,
		opacity: [0,1],
		easing: "easeOutExpo",
		duration: 1400,
		delay: (el, i) => 300 + 30 * i
	  }).add({
		targets: selector.querySelectorAll('.pbck-letter'),
		translateY: [0,-100],
		opacity: [1,0],
		easing: "easeInExpo",
		duration: 1200,
		delay: (el, i) => 100 + 30 * i
	  });
}

function PBCK_animatedtext_effect_12(selector) {
	PBCK_animatedtext_splitTextInLetters(selector);
	anime.timeline({loop: true})
	  .add({
		targets: selector.querySelectorAll('.pbck-line'),
		scaleX: [0,1],
		opacity: [0.5,1],
		easing: "easeInOutExpo",
		duration: 900
	  }).add({
		targets: selector.querySelectorAll('.pbck-letter'),
		opacity: [0,1],
		translateX: [40,0],
		translateZ: 0,
		scaleX: [0.3, 1],
		easing: "easeOutExpo",
		duration: 800,
		offset: '-=600',
		delay: (el, i) => 150 + 25 * i
	  }).add({
		targets: selector,
		opacity: 0,
		duration: 1000,
		easing: "easeOutExpo",
		delay: 1000
	  });
}

function PBCK_animatedtext_effect_13(selector) {
	PBCK_animatedtext_splitTextInWords(selector);
	anime.timeline({loop: true})
	  .add({
		targets: selector.querySelectorAll('.pbck-word'),
		scale: [14,1],
		opacity: [0,1],
		easing: "easeOutCirc",
		duration: 800,
		delay: (el, i) => 800 * i
	  }).add({
		targets: selector,
		opacity: 0,
		duration: 1000,
		easing: "easeOutExpo",
		delay: 1000
	  });
}

function PBCK_animatedtext_effect_14(selector) {
	PBCK_animatedtext_splitTextInLetters(selector);
	anime.timeline({loop: true})
	  .add({
		targets: selector.querySelectorAll('.pbck-letter'),
		translateY: [-100,0],
		easing: "easeOutExpo",
		duration: 1400,
		delay: (el, i) => 30 * i
	  }).add({
		targets: selector,
		opacity: 0,
		duration: 1000,
		easing: "easeOutExpo",
		delay: 1000
	  });
}