const ease = [0.42, 0, 0.58, 1];
const customTimingFunction = [0.48, 0.01, 0.25, 1];
const scene1 = new Scene({
	"#sun" : {
		0 : {"border-width" : "100px", "transform" : "scale(0, 0)"},
		1 : {"border-width" : "0px", "transform" : "scale(1, 1)"}
	},
	"#sun2" : {
		0 : {"transform" : "scale(0, 0)", "border-width" : "100px"},
		0.9 : {"transform": "scale(0.9, 0.9)", "border-width": "0px"}
	}
}, {
	easing : customTimingFunction,
	selector: true,
	playSpeed: 1,
});


for (let i = 1; i <= 8; ++i) {
	scene1.newItem(`.sun_afterimage:nth-child(${i})`, {
		easing : customTimingFunction,
		selector: true
	}).set({
		0 : {transform : {rotate: i * 45 + "deg", translate : "40px, 0px", scale : "0,1"}, width: "120px"},
		1.8 : {transform : {translate : "140px, 0px", scale : "1,1"}, width: "0px"},
	});
}


//	stroke-dasharray: 283 1000;
//	stroke-dashoffset: -283;
const scene2 = new Scene();
const scene2_radius = [25 * 2 * Math.PI, 35 * 2 * Math.PI, 45 * 2 * Math.PI];
const scene2_delay = 0.4;

for (let i = 0; i < scene2_radius.length; ++i) {
	const radius = scene2_radius[i];

	scene2.newItem("#rotate_circle" + (i + 1), {selector: true, easing: ease, delay: scene2_delay}).set({
		0: "stroke-dasharray: 0 1000; stroke-dashoffset: 1;",
		1: `stroke-dasharray: ${radius} 1000; stroke-dashoffset: 1;"`,
		2: `stroke-dashoffset: ${-radius}`,
	});
}
scene2.newItem("#stick", {easing: ease, selector: true}).set({
	0 : "transform: rotate(-90deg) scale(1, 0)",
	[scene2_delay / 2] : "transform: rotate(-90deg) scale(1,1)", // t = delay / 2
	[scene2_delay] : "transform: rotate(-90deg) scale(1,1)", // t = delay
	[1 + scene2_delay] : "transform: rotate(270deg) scale(1,1)", // t = 1 + delay
	[2 + scene2_delay] : "transform: rotate(630deg), scale(1,1)", // t = 2 + delay
	[2 + scene2_delay + scene2_delay / 2] : "transform: scale(1,0)", // t = 2 + delay + delay / 2
});






const scene3 = new Scene();
const circles = document.querySelectorAll("#circles1 .circle");

const circlesPosition = [
	{x:0, y:0, r: 100, delay: 0, duration: 1.2},
	{x:-30, y:-50, r: 40, delay: 0.3, duration: 0.9},
	{x:40, y:50, r: 50, delay: 0.5, duration: 0.9},
	{x:-40, y:60, r: 60, delay: 0.6, duration: 0.9},
	{x:70, y:-40, r: 50, delay: 0.8, duration: 1}
];


for (let i = 0; i < circles.length; ++i) {
	const cp = circlesPosition[i];
	const r = cp.r + "px";
	const w =  (cp.r * 2) + "px";
	const {delay, duration, x, y} = cp;
	
	scene3.newItem("#circles1 .circle:nth-child(" + (i+1) + ")", {
		easing : customTimingFunction,
		selector: true,
	}).set({
		0: {"margin-left": "-"+r, "border-width" : r, "margin-top" : "-"+r, width: w, height: w, transform : {translate : x +"px,"+y+"px", scale : "0,0" }},
		[delay + 0.001]: {transform: "scale(0,0)", "border-width": r},
		[duration + delay]: {transform:"scale(1,1)", "border-width" : "0px"},
	}).setCSS(0, ["border-color"]);
}






const scene4 = new Scene();
const scene4_slice_circle = scene4.newItem("#slice_circle", {selector: true, easing: customTimingFunction});
const scene4_duration = 0.3;

scene4_slice_circle.set({
	0 : {transform : "scale(0,0)"},
	0.3 : {transform : "scale(1,1)"}, 
});

for(let i = 0; i <= 5; ++i) {
	const clipArea = i * 30 ;
	const sign = i % 2 == 0 ? 1 : -1;

	scene4_slice_circle.set(0.3 + i * scene4_duration, {
		clip: "rect("+clipArea+"px, 150px, 150px, 0px)",
		transform : "rotate(" + sign*10+"deg)"
	});
}





const scene5 = new Scene();
const css = document.querySelectorAll("#circle_squares .circle_square");
const deg = 360 / css.length;
for (let i = 0; i < css.length; ++i) {
	scene5.newItem(".circle_square:nth-child(" + (i + 1) +")", {selector: true}).load({
		0 : {transform: {rotate:(i * deg +"deg"), translate:"100px, 0px", scale: "0,0"}},
		[0 + i * 0.1 + 0.01] : {transform: {scale:"0, 0"}},
		[0.2 + i * 0.1] : {transform: {scale:"1.3, 1.3"}},
		[0.3 + i * 0.1] : {transform: {scale:"1, 1"}},
		[0.6 + i * 0.1] : {"border-radius": "50%", opacity: 1},
		[1 + i * 0.1] : {"border-radius": "0%", opacity: 0}
	});
}





const scene6 = new Scene({
	"#bomb" : {
		0 : {transform : "rotate(20deg) scale(0,0)"},
		0.3 : {transform: "scale(1.3, 1.3)"},
		0.5 : {transform: "scale(1,1)"},
	},
	"#bomb .tail path" : {
		0: {"stroke-dashoffset" : 0},
		2: {"stroke-dashoffset" : 100},
	},
	"#bomb .body": {
		2 : {transform : "scale(1,1)"},
		3 : {transform : "scale(20,20)"},

	}
}, {
	easing: ease,
	selector: true,
});


scene1.on("animate", function (e) {
	var time = e.time;
	if (scene6.getDelay() < time) {
		text.innerHTML = "6";
	} else if (scene5.getDelay() < time) {
		text.innerHTML = "5";
	} else if (scene4.getDelay() < time) {
		text.innerHTML = "4";
	} else if (scene3.getDelay() < time) {
		text.innerHTML = "3";
	} else if (scene2.getDelay() < time) {
		text.innerHTML = "2";
	} else {
		text.innerHTML = "1";
	}
});

// scene1.setIterationCount("infinite");

scene1.append(scene2);
scene1.append(scene3);
scene1.append(scene4);
scene1.append(scene5);
scene1.append(scene6);
scene1.setTime(0).play();