/**
 * @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');
		let loop = selector.getAttribute('data-loop');
		loop = loop == true || loop === 'true' || loop === null;
		if (! effect) {
			console.log('PBCK Animated Text : no effect found');
			console.log(selector);
			return;
		}
		let funcName = 'PBCK_animatedtext_effect_' + effect;
		window[funcName](selector, loop, lines);
	});
}

function PBCK_animatedtext_splitTextInLetters(selector) {
	// Wrap every letter in a span
	let html = selector.innerHTML
	html = html.split('<br>');
	for (var h=0; h<html.length; h++) {
		html[h] = html[h].replace(/\S/g, "<span class='pbck-letter'>$&</span>");
	}
	html = html.join('<br>');
	selector.innerHTML = html;

//	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, loop, lines) {
	PBCK_animatedtext_splitTextInLetters(selector);
	if (lines) {
		PBCK_animatedtext_AddLine(selector, 1);
		PBCK_animatedtext_AddLine(selector, 2);
	}
	const animation = anime.timeline({loop: loop});
	animation.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)
	})
	animation.add({
		targets: '.pbck-line',
		scaleX: [0,1],
		opacity: [0.5,1],
		easing: "easeOutExpo",
		duration: 700,
		offset: '-=875',
		delay: (el, i, l) => 80 * (l - i)
	})
	if (loop) {
		animation.add({
			targets: selector,
			opacity: 0,
			duration: 1000,
			easing: "easeOutExpo",
			delay: 1000
		});
	}
}

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

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

function PBCK_animatedtext_effect_4(selector, loop) {
	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 animation = anime.timeline({loop: loop});
	selector.querySelectorAll('.pbck-word').forEach(function(word) {
		animation
		  .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
		  // });
	});
	if (loop) {
		animation.add({
			targets: selector,
			scale: ml4.scaleOut,
			easing: "easeInExpo",
			opacity: 0,
			duration: 500,
			delay: 500
		  })
	}
}


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


function PBCK_animatedtext_effect_6(selector, loop) {
	PBCK_animatedtext_splitTextInLetters(selector);
	const animation = anime.timeline({loop: loop});
	animation.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
	})
	if (loop) {
		animation.add({
			targets: selector,
			opacity: 0,
			duration: 1000,
			easing: "easeOutExpo",
			delay: 1000
		});
	}
}


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

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

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


function PBCK_animatedtext_effect_10(selector, loop) {
	PBCK_animatedtext_splitTextInLetters(selector);
	const animation = anime.timeline({loop: loop});
	animation.add({
		targets: selector.querySelectorAll('.pbck-letter'),
		translateX: [40,0],
		translateZ: 0,
		opacity: [0,1],
		easing: "easeOutExpo",
		duration: 1200,
		delay: (el, i) => 500 + 30 * i
	})
	if (loop) {
		animation.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, loop) {
	PBCK_animatedtext_splitTextInLetters(selector);
	const animation = anime.timeline({loop: loop});
	animation.add({
		targets: selector.querySelectorAll('.pbck-letter'),
		translateY: [100,0],
		translateZ: 0,
		opacity: [0,1],
		easing: "easeOutExpo",
		duration: 1400,
		delay: (el, i) => 300 + 30 * i
	})
	if (loop) {
		animation.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, loop) {
	PBCK_animatedtext_splitTextInLetters(selector);
	const animation = anime.timeline({loop: loop});
	animation.add({
		targets: selector.querySelectorAll('.pbck-line'),
		scaleX: [0,1],
		opacity: [0.5,1],
		easing: "easeInOutExpo",
		duration: 900
	})
	animation.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
	})
	if (loop) {
		animation.add({
			targets: selector,
			opacity: 0,
			duration: 1000,
			easing: "easeOutExpo",
			delay: 1000
		});
	}
}

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

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