//First the variables our app is going to use need to be declared

//References to DOM elements
var scorm = pipwerks.SCORM;
var $window = $(window);
var $document = $(document);
//Only links that starts with #
var $navButtons = $("nav a").filter("[href^=#]");
var $navGoPrev = $(".go-prev");
var $navGoNext = $(".go-next");
var $slidesContainer = $(".slides-container");
var $slides = $(".slide");
var $currentSlide = $slides.first();

var Score = 0;

//Animating flag - is our app animating
var isAnimating = false;

//The height of the window
var pageHeight = $window.innerHeight();

//Key codes for up and down arrows on keyboard. We'll be using this to navigate change slides using the keyboard
var keyCodes = {
	UP: 38,
	DOWN: 40
}

//Going to the first slide
// goToSlide($currentSlide);


/*
*   Adding event listeners
* */

$window.on("resize", onResize).resize();
// $window.on("mousewheel DOMMouseScroll", onMouseWheel);
// $document.on("keydown", onKeyDown);
$navButtons.on("click", onNavButtonClick);
$navGoPrev.on("click", goToPrevSlide);
$navGoNext.on("click", goToNextSlide);

/*
*   Internal functions
* */


/*
*   When a button is clicked - first get the button href, and then slide to the container, if there's such a container
* */
function onNavButtonClick(event) {
	//The clicked button
	var $button = $(this);

	//The slide the button points to
	var $slide = $($button.attr("href"));

	//If the slide exists, we go to it
	if ($slide.length) {
		goToSlide($slide);
		currentSlideNum = parseInt(this.innerHTML);
		event.preventDefault();
	}
}

/*
*   Getting the pressed key. Only if it's up or down arrow, we go to prev or next slide and prevent default behaviour
*   This way, if there's text input, the user is still able to fill it
* */
function onKeyDown(event) {

	var PRESSED_KEY = event.keyCode;

	if (PRESSED_KEY == keyCodes.UP) {
		goToPrevSlide();
		event.preventDefault();
	}
	else if (PRESSED_KEY == keyCodes.DOWN) {
		goToNextSlide();
		event.preventDefault();
	}

}

/*
*   When user scrolls with the mouse, we have to change slides
* */
function onMouseWheel(event) {
	//Normalize event wheel delta
	var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;

	//If the user scrolled up, it goes to previous slide, otherwise - to next slide
	if (delta < -1) {
		goToNextSlide();
	}
	else if (delta > 1) {
		goToPrevSlide();
	}

	event.preventDefault();
}

/*
*   If there's a previous slide, slide to it
* */
function goToPrevSlide() {
	if ($currentSlide.prev().length) {
		goToSlidePrev($currentSlide.prev());
		visitedQuestionArray[currentSlideNum - 1] = 1;
		listButtonColorUpdate();
		currentSlideNum--;
	}
}

/*
*   If there's a next slide, slide to it
* */
function goToNextSlide() {
	if ($currentSlide.next().length) {
		goToSlideNext($currentSlide.next());
		visitedQuestionArray[currentSlideNum - 1] = 1;
		listButtonColorUpdate();
		currentSlideNum++;
	}
}

/*
*   Actual transition between slides
* */
function goToSlide($slide) {
	//If the slides are not changing and there's such a slide
	if (!isAnimating && $slide.length) {
		//setting animating flag to true
		isAnimating = true;
		$currentSlide = $slide;

		//Sliding to current slide
		// TweenLite.to($slidesContainer, 1, { scrollTo: { y: pageHeight * $currentSlide.index() }, ease: Power4.easeInOut, onComplete: onSlideChangeEnd, onCompleteScope: this });

		// ###########################################################################################
		// TweenLite.to($slidesContainer, 0.2, { 
		// 	scrollTo: { y: pageHeight * $currentSlide.index() }, 
		// 	scale: 0.95,  // Slight zoom out effect
		// 	opacity: 0.7, // Fade effect
		// 	// ease: Expo.easeInOut,  // Smooth transition
		// 	// ease: Circ.easeInOut,
		// 	// ease: Back.easeInOut,
		// 	ease: Bounce.easeOut,
		// 	onComplete: function() {
		// 		TweenLite.to($slidesContainer, 0.5, { 
		// 			scale: 1,  // Restore size
		// 			opacity: 1,  // Restore opacity
		// 			// ease: Power2.easeOut, 
		// 			// ease: Bounce.easeOut,
		// 			ease: Elastic.easeOut,
		// 			onComplete: onSlideChangeEnd
		// 		});
		// 	}
		// });
		// ###########################################################################################


		TweenLite.to($slidesContainer, 0, {
			rotationY: 90,  // Rotate slide out
			transformPerspective: 1000,
			transformOrigin: "50% 50%",
			opacity: 0.7,
			ease: Power2.easeInOut,
			onComplete: function () {
				TweenLite.to($slidesContainer, 0, {
					scrollTo: { y: pageHeight * $currentSlide.index() },
					scale: 0.95,
					opacity: 0.7,
					ease: Power2.easeInOut,
				});
				// Move to next slide
				$slidesContainer.css("scrollTop", pageHeight * $currentSlide.index());
				TweenLite.fromTo($slidesContainer, 0.8,
					// { rotationY: -90, opacity: 0.7 },
					// { rotationY: 0, opacity: 1, ease: Power2.easeInOut, onComplete: onSlideChangeEnd }
					{ rotationY: -90, x: -500, opacity: 0.7 },
					{ rotationY: 0, x: 0, opacity: 1, ease: Power2.easeInOut, onComplete: onSlideChangeEnd }
				);
			}
		});


		// ###########################################################################################
		// TweenLite.to($slidesContainer, 0, {
		// 	scrollTo: { y: pageHeight * $currentSlide.index() },
		// 	scale: 0.95,  // Slight zoom out effect
		// 	opacity: 0, // Fade effect
		// 	// ease: Expo.easeInOut,  // Smooth transition
		// 	// ease: Circ.easeInOut,
		// 	// ease: Back.easeInOut,
		// 	ease: Bounce.easeOut,
		// 	onComplete: function () {
		// 		TweenLite.set($slidesContainer, { rotationY: 90 });
		// 		// Flip back in
		// 		TweenLite.to($slidesContainer, 1.5, {
		// 			rotationY: 0, // Restore rotation
		// 			opacity: 1,   // Bring back visibility
		// 			// ease: Elastic.easeOut,
		// 			ease: Bounce.easeOut,
		// 			onComplete: onSlideChangeEnd
		// 		});
		// 	}
		// });

		// ###########################################################################################
		// TweenLite.to($slidesContainer, 0.2, { 
		// 	scrollTo: { y: pageHeight * $currentSlide.index() }, 
		// 	scale: 0.95,  // Slight zoom out effect
		// 	opacity: 0.7, // Fade effect
		// 	rotation: -5, // Slight tilt
		// 	filter: "blur(5px)", // Apply blur effect
		// 	boxShadow: "10px 10px 30px rgba(0,0,0,0.3)", // Add shadow
		// 	// backgroundColor: "#f5f5f5", // Lighten background
		// 	ease: Bounce.easeOut,
		// 	onComplete: function() {
		// 		TweenLite.to($slidesContainer, 0.5, { 
		// 			scale: 1,  // Restore size
		// 			opacity: 1,  // Restore opacity
		// 			rotation: 0, // Reset tilt
		// 			filter: "blur(0px)", // Remove blur
		// 			boxShadow: "0px 0px 0px rgba(0,0,0,0)", // Remove shadow
		// 			// backgroundColor: "#ffffff", // Restore background
		// 			ease: Elastic.easeOut,
		// 			onComplete: onSlideChangeEnd
		// 		});
		// 	}
		// });
		// ###########################################################################################

		// ###########################################################################################
		// TweenLite.to($slidesContainer, 0.2, { 
		// 	scrollTo: { y: pageHeight * $currentSlide.index() }, 
		// 	scale: 0.95,  // Slight zoom out effect
		// 	opacity: 0.7, // Fade effect
		// 	rotation: -5, // Slight tilt
		// 	filter: "blur(5px)", // Apply blur effect
		// 	boxShadow: "10px 10px 30px rgba(0,0,0,0.3)", // Add shadow
		// 	// backgroundColor: "#f5f5f5", // Lighten background
		// 	skewX: "5deg", // Slight skew
		// 	skewY: "5deg", // Slight skew for depth
		// 	letterSpacing: "2px", // Expand text spacing briefly
		// 	onUpdate: function() { 
		// 		$slidesContainer.css("background-position", "center " + (-pageHeight * 0.2) + "px"); // Parallax effect
		// 	},
		// 	ease: Bounce.easeOut,
		// 	onComplete: function() {
		// 		TweenLite.to($slidesContainer, 0.5, { 
		// 			scale: 1.05,  // Slight bounce before settling
		// 			opacity: 1,  // Restore opacity
		// 			rotation: 0, // Reset tilt
		// 			filter: "blur(0px)", // Remove blur
		// 			boxShadow: "0px 0px 0px rgba(0,0,0,0)", // Remove shadow
		// 			// backgroundColor: "#ffffff", // Restore background
		// 			skewX: "0deg", // Reset skew
		// 			skewY: "0deg",
		// 			letterSpacing: "0px", // Reset text spacing
		// 			ease: Elastic.easeOut.config(1, 0.5),
		// 			onComplete: function() {
		// 				TweenLite.to($slidesContainer, 0.3, { scale: 1, ease: Power2.easeOut }); // Smooth final adjustment
		// 				onSlideChangeEnd();
		// 			}
		// 		});
		// 	}
		// });
		// ###########################################################################################

		// ###########################################################################################
		// TweenLite.to($slidesContainer, 0.3, { 
		// 	scrollTo: { y: pageHeight * $currentSlide.index() }, 
		// 	rotationX: -20,  // Flip slightly forward
		// 	x: "10px", // Brief glitch effect
		// 	filter: "saturate(2)", // Boost color vibrance
		// 	transformPerspective: 800, // Add depth
		// 	opacity: 0.5, // Fade effect
		// 	skewX: "-3deg", // Wave distortion effect
		// 	ease: Expo.easeInOut,
		// 	onUpdate: function() { 
		// 		$slidesContainer.css("transform", "rotateY(" + Math.sin(Date.now() * 0.01) * 5 + "deg)"); // Continuous wave motion
		// 	},
		// 	onComplete: function() {
		// 		TweenLite.to($slidesContainer, 0.4, { 
		// 			rotationX: 0,  // Reset flip
		// 			x: "0px", // Reset glitch
		// 			filter: "saturate(1)", // Restore saturation
		// 			transformPerspective: 1000, // Normalize depth
		// 			opacity: 1,  // Restore opacity
		// 			skewX: "0deg", // Reset wave
		// 			scale: 1.1, // Pulse effect
		// 			ease: Back.easeOut,
		// 			onComplete: function() {
		// 				TweenLite.to($slidesContainer, 0.2, { scale: 1, ease: Power2.easeOut }); // Settle to normal
		// 				onSlideChangeEnd();
		// 			}
		// 		});
		// 	}
		// });
		// ###########################################################################################




		//Animating menu items
		TweenLite.to($navButtons.filter(".active"), 0.5, { className: "-=active" });

		TweenLite.to($navButtons.filter("[href=#" + $currentSlide.attr("id") + "]"), 0.5, { className: "+=active" });

		listButtonColorUpdate();
		showStars();
	}
}

function goToSlideNext($slide) {
	//If the slides are not changing and there's such a slide
	if (!isAnimating && $slide.length) {
		//setting animating flag to true
		isAnimating = true;
		$currentSlide = $slide;


		TweenLite.to($slidesContainer, 0, {
			rotationY: 90,  // Rotate slide out
			transformPerspective: 1000,
			transformOrigin: "50% 50%",
			opacity: 0.7,
			ease: Power2.easeInOut,
			onComplete: function () {
				TweenLite.to($slidesContainer, 0, {
					scrollTo: { y: pageHeight * $currentSlide.index() },
					scale: 0.95,
					opacity: 0.7,
					ease: Power2.easeInOut,
				});
				// Move to next slide
				$slidesContainer.css("scrollTop", pageHeight * $currentSlide.index());
				TweenLite.fromTo($slidesContainer, 0.8,
					// { rotationY: -90, opacity: 0.7 },
					// { rotationY: 0, opacity: 1, ease: Power2.easeInOut, onComplete: onSlideChangeEnd }
					{ rotationY: -90, x: -500, opacity: 0.7 },
					{ rotationY: 0, x: 0, opacity: 1, ease: Power2.easeInOut, onComplete: onSlideChangeEnd }
				);
			}
		});


		//Animating menu items
		TweenLite.to($navButtons.filter(".active"), 0.5, { className: "-=active" });

		TweenLite.to($navButtons.filter("[href=#" + $currentSlide.attr("id") + "]"), 0.5, { className: "+=active" });

		listButtonColorUpdate();
		showStars();
	}
}

function goToSlidePrev($slide) {
	//If the slides are not changing and there's such a slide
	if (!isAnimating && $slide.length) {
		//setting animating flag to true
		isAnimating = true;
		$currentSlide = $slide;


		TweenLite.to($slidesContainer, 0, {
			rotationY: 90,  // Rotate slide out
			transformPerspective: 1000,
			transformOrigin: "50% 50%",
			opacity: 0.7,
			ease: Power2.easeInOut,
			onComplete: function () {
				TweenLite.to($slidesContainer, 0, {
					scrollTo: { y: pageHeight * $currentSlide.index() },
					scale: 0.95,
					opacity: 0.7,
					ease: Power2.easeInOut,
				});
				// Move to next slide
				$slidesContainer.css("scrollTop", pageHeight * $currentSlide.index());
				TweenLite.fromTo($slidesContainer, 0.8,
					// { rotationY: -90, opacity: 0.7 },
					// { rotationY: 0, opacity: 1, ease: Power2.easeInOut, onComplete: onSlideChangeEnd }
					{ rotationY: 90, x: -500, opacity: 0.7 },
					{ rotationY: 0, x: 0, opacity: 1, ease: Power2.easeInOut, onComplete: onSlideChangeEnd }
				);
			}
		});


		//Animating menu items
		TweenLite.to($navButtons.filter(".active"), 0.5, { className: "-=active" });

		TweenLite.to($navButtons.filter("[href=#" + $currentSlide.attr("id") + "]"), 0.5, { className: "+=active" });

		listButtonColorUpdate();
		showStars();
	}
}

/*
*   Once the sliding is finished, we need to restore "isAnimating" flag.
*   You can also do other things in this function, such as changing page title
* */
function onSlideChangeEnd() {
	isAnimating = false;
}

/*
*   When user resize it's browser we need to know the new height, so we can properly align the current slide
* */
function onResize(event) {

	//This will give us the new height of the window
	var newPageHeight = $window.innerHeight();

	/*
	*   If the new height is different from the old height ( the browser is resized vertically ), the slides are resized
	* */
	if (pageHeight !== newPageHeight) {
		pageHeight = newPageHeight;

		//This can be done via CSS only, but fails into some old browsers, so I prefer to set height via JS
		TweenLite.set([$slidesContainer, $slides], { height: pageHeight + "px" });

		//The current slide should be always on the top
		TweenLite.set($slidesContainer, { scrollTo: { y: pageHeight * $currentSlide.index() } });
	}

}
function terminateSCORM() {
	var success = scorm.quit();
	if (success) {
		console.log("SCORM session terminated successfully.");
	} else {
		console.error("SCORM termination failed.");
	}
}
function initializeSCORM() {
	var scormInit = scorm.init();

	if (scormInit) {
		console.log("SCORM initialized successfully.");
	} else {
		console.error("SCORM initialization failed.");
	}
}
window.onload = initializeSCORM;
window.onbeforeunload = terminateSCORM;
window.onunload = terminateSCORM;

function showStars() {
    // Create the GIF container
    let gifOverlay = document.createElement("div");
    gifOverlay.style.position = "fixed";
    gifOverlay.style.top = "0";
    gifOverlay.style.left = "0";
    gifOverlay.style.width = "100vw";  // Full screen width
    gifOverlay.style.height = "100vh"; // Full screen height
    gifOverlay.style.backgroundImage = "url('./images/BurstFireworks.gif')"; // Update path
    gifOverlay.style.backgroundSize = "cover"; // Cover entire screen
    gifOverlay.style.backgroundPosition = "center";
    gifOverlay.style.backgroundRepeat = "no-repeat";
    gifOverlay.style.zIndex = "9999"; // Ensure it's on top
    gifOverlay.style.pointerEvents = "none"; // Prevent interaction

    // Add the GIF to the body
    document.body.appendChild(gifOverlay);

    // Remove it after 1 second
    setTimeout(() => {
        gifOverlay.remove();
    }, 500);
}