//when page is loaded jquery is called and the function is called
$(document).ready(function () {
	init();
});

let fullpageVar;
//create an array for video URLs
let videoURLs = [];

let currentSlideIndex = 0;

function init() {
	initFullpageJS();

	//!Set images for news section
	//find children of .ps4u__news__wrapper

	$(".ps4u__news__wrapper")
		.children()
		.each(function (index) {
			//get child of this containing .news__image__fake
			let image = $(this).find(".news__image__fake");
			//get src of image
			let url = image.attr("src");
			// console.log(url);

			//get n-th .news__image__holder
			let imageHolder = $(".news__image__holder").eq(index);
			// console.log(imageHolder);
			//set background image of imageHolder
			imageHolder.css("background-image", "url(" + url + ")");

			// console.log("background-image", "url(" + url + ")");
			// console.log(imageHolder);
		});

	//add .active to first .ps4u__newsunit__holder
	$(".ps4u__newsunit__holder").eq(0).addClass("active");

	//get URL for hero section from .herovideolink
	let herovideolink = $(".herovideolink").text();

	//push URL for hero section to videoURLs
	videoURLs.push(herovideolink); //0

	//!Get URL for work section here
	//find all .p__s2__unit__holder
	$(".p__s2__unit__holder").each(function (index) {
		//find .ctalink in .p__s2__unit__holder
		let ctalink = $(this).find(".ctalink");

		//find all .ps2__cta in .p__s2__unit__holder
		let ps2ctas = $(this).find(".ps2__cta");

		//change href of .ps2__cta to .ctalink
		ps2ctas.attr("href", ctalink.text());

		//find .videolink in .p__s2__unit__holder
		let videolink = $(this).find(".videolink");

		//push .videolink to videoURLs
		videoURLs.push(videolink.text());
	});

	//!Get URL for timeline section from .timelineurl inner text
	let timelineurl = $(".timelineurl").text();

	//push URL for timeline section to videoURLs
	videoURLs.push(timelineurl); //5

	//click on .timeline__close__link
	$(".timeline__close__link").click(function () {
		//remove .hide from .p__logo__holder
		$(".p__logo__holder").removeClass("hide");

		//add .hide to .timeline__close__holder
		$(".timeline__close__holder").addClass("hide");

		//start scroll
		startScroll();

		//mute #initVideoID video
		$("#initVideoID").prop("muted", true);

		//pause #initVideoID video
		var vid = document.getElementById("initVideoID");
		vid.pause();

		//set display of .p__s3__wrapper to flex
		$(".p__s3__wrapper").css("display", "flex");

		//after 0.5 seconds
		setTimeout(function () {
			//remove .hide from .p__s3__wrapper
			$(".p__s3__wrapper").removeClass("hide");
		}, 500);
	});
}

function initFullpageJS() {
	fullpageVar = new fullpage("#fullpage", {
		licenseKey: "VKGO7-6RPFJ-6ZRK9-U49J9-MZJBL",
		scrollingSpeed: 700,
		fixedElements:
			".p__logo__holder, .p__back__video__holder, .p__menu__holder, .page__cover",
		//when scroll is finished, the function is called
		afterLoad: function (origin, destination, direction) {
			console.log("afterLoad", origin.index, destination.index, direction);

			//if destination.index is 0-1
			if (destination.index == 0 || destination.index == 1) {
				changeVideoURL(destination.index);
			} else {
				changeVideoURL(-1);
			}
			resetPage(origin.index);
			revealPage(destination.index);

			currentSlideIndex = destination.index;
		},
		//when scroll is started, the function is called
		onLeave: function (origin, destination, direction) {
			console.log("onLeave", origin.index, destination.index, direction);
			//add .zoomout .pbv__embed__holder
			$(".p__back__video__holder").addClass("zoomout");
		},
		//give section names
		anchors: ["home", "work", "30years", "news", "investor-news" ,"awards", "contact"],
		//remove keyboard scrolling
		keyboardScrolling: false,
	});
}

//stop scroll for fullpageVar
function stopScroll() {
	fullpageVar.setAllowScrolling(false);
	fullpageVar.setMouseWheelScrolling(false);
}

//start scroll for fullpageVar
function startScroll() {
	fullpageVar.setAllowScrolling(true);
	fullpageVar.setMouseWheelScrolling(true);
}

//!Section1 Functions
let isHeroVideoPlaying = false;

//click on .p__cta__hero.play to open video
$(".p__cta__hero.play").click(function () {
	isHeroVideoPlaying = true;

	//add .fullscreen-video to .pbv__embed__holder
	$(".pbv__embed__holder").addClass("fullscreen-video");
	//add .no-padding to .p__back__video__holder
	$(".p__back__video__holder").addClass("no-padding");
	//add .opacity-0 to p__s1__gradientback
	$(".p__s1__gradientback").addClass("opacity-0");

	$(".p__logo__holder").addClass("hide");
	$(".p__s1__bottom__parent").addClass("hide");
	$(".ps1__vclose__holder").removeClass("hide");
	$(".ps1__vpause__holder").removeClass("hide");
	$(".ps1__v__progressbar__holder").removeClass("hide");
	stopScroll();

	//change src of video #backvideo
	$("#backvideo").attr("src", videoURLs[0]);
	//play video #backvideo from 0s unmuted
	$("#backvideo").get(0).play();
	//unmute video #backvideo
	$("#backvideo").prop("muted", false);

	//set ps1__v__progress width to video current time through binding of timeupdate event
	$("#backvideo").on("timeupdate", function () {
		let videoDuration = $("#backvideo").get(0).duration;
		let currentTime = $("#backvideo").get(0).currentTime;
		let percentage = (currentTime / videoDuration) * 100;
		if (percentage > 98 || percentage < 2) {
			//remove transition css from .ps1__v__progress
			$(".ps1__v__progress").css("transition", "none");
			$(".ps1__v__progress").css("width", percentage + "%");
		} else {
			//add transition css to .ps1__v__progress
			$(".ps1__v__progress").css("transition", "width 0.5s");
			$(".ps1__v__progress").css("width", percentage + "%");
		}
	});
});

//click on .p__cta__hero.close to close video
$(".p__cta__hero.close").click(function () {
	//get fullpageVar current section index
	let currentSectionIndex = fullpageVar.getActiveSection().index;

	console.log("Current active section index:", currentSlideIndex);

	//default Video URL
	let defaultIndex = 5;

	console.log("currentSectionIndex", currentSectionIndex);

	//if currentSectionIndex is 0
	if (currentSlideIndex == 0) {
		defaultIndex = 0;
	} else {
		defaultIndex = 5;

		//remove .hide from ._30center__text
		$("._30center__text").removeClass("hide");
	}

	isHeroVideoPlaying = false;

	//remove .fullscreen-video from .pbv__embed__holder
	$(".pbv__embed__holder").removeClass("fullscreen-video");
	//remove .no-padding from .p__back__video__holder
	$(".p__back__video__holder").removeClass("no-padding");
	//remove .opacity-0 from p__s1__gradientback
	$(".p__s1__gradientback").removeClass("opacity-0");

	$(".p__logo__holder").removeClass("hide");
	$(".p__s1__bottom__parent").removeClass("hide");
	$(".ps1__vclose__holder").addClass("hide");
	$(".ps1__vpause__holder").addClass("hide");
	$(".ps1__v__progressbar__holder").addClass("hide");
	startScroll();

	changeVideoURL(defaultIndex);

	$(".pause__pp__svg.pause").removeClass("hide");
	$(".pause__pp__svg.play__abs").addClass("hide");

	//remove timeupdate event
	$("#backvideo").off("timeupdate");
	//mute video #backvideo
	$("#backvideo").prop("muted", true);
});

//when clicked on .playpause button, play or pause video
$(".playpause").click(function () {
	playPauseVideo1();
});

//when spacebar is pressed, play or pause video
$(document).keydown(function (e) {
	if (isHeroVideoPlaying) {
		if (e.keyCode == 32) {
			playPauseVideo1();
		}
	}
});

//function to play/pause video
function playPauseVideo1() {
	let video = $("#backvideo").get(0);
	if (video.paused) {
		video.play();
		$(".pause__pp__svg.pause").removeClass("hide");
		$(".pause__pp__svg.play__abs").addClass("hide");
	} else {
		video.pause();
		$(".pause__pp__svg.pause").addClass("hide");
		$(".pause__pp__svg.play__abs").removeClass("hide");
	}
}

function revealPage(index) {
	if (index == 0) {
		//remove .hide from .p__s1__bottom__parent
		$(".p__s1__bottom__parent").removeClass("hide");
	} else if (index == 1) {
		//remove .hide from .ps2bottom__title__holder
		$(".ps2bottom__title__holder").removeClass("hide");
		//find .p__s2__unit__holder and remove .hide with delay 500ms
		$(".p__s2__unit__holder").each(function (index) {
			$(this)
				.delay(200 * (index + 1))
				.queue(function (next) {
					$(this).removeClass("hide");
					next();
				});
		});
	} else if (index == 2) {
	} else if (index == 3) {
		//remove .hide from .ps2bottom__title__holder
		$(".ps3bottom__title__holder").removeClass("hide");
		//find .p__s2__unit__holder and remove .hide with delay 500ms
		$(".p__s4__unit__holder").each(function (index) {
			$(this)
				.delay(200 * (index + 1))
				.queue(function (next) {
					$(this).removeClass("hide");
					next();
				});
		});
		//remove .hide from .ps5u__news__back.logo
		$(".ps5u__news__back.logo").removeClass("hide");
	} else if (index == 4) {
	} else if (index == 5) {
		// $('.p__s6__unit__holder').each(function(index) {
		//     $(this).delay(200 * (index + 1)).queue(function(next) {
		//         $(this).removeClass('hide');
		//         next();
		//     });
		// });
	}
}

function resetPage(index) {
	if (index == 0) {
		$(".p__s1__bottom__parent").addClass("hide");
	} else if (index == 1) {
		$(".ps2bottom__title__holder").addClass("hide");
		$(".p__s2__unit__holder").addClass("hide");
	} else if (index == 2) {
	} else if (index == 3) {
		$(".ps3bottom__title__holder").addClass("hide");
		$(".p__s4__unit__holder").addClass("hide");
		$(".ps5u__news__back.logo").addClass("hide");
	} else if (index == 4) {
	} else if (index == 5) {
		//$('.p__s6__unit__holder').addClass('hide');
	}
}

resetPage(1);
resetPage(2);
resetPage(3);
resetPage(4);

function changeVideoURL(nextIndex) {
	let newURL = "";

	if (nextIndex == 0) {
		newURL = videoURLs[0];
		console.log(videoURLs);
	} else if (nextIndex == 1) {
		newURL = videoURLs[1];
	} else if (nextIndex == 2) {
		newURL = videoURLs[2];
	} else if (nextIndex == 3) {
		newURL = videoURLs[3];
	} else if (nextIndex == 4) {
		newURL = videoURLs[4];
	} else if (nextIndex == 5) {
		newURL = videoURLs[5];
	} else {
		newURL = "none";
	}

	if (newURL != "none") {
		//
		//change src of video #backvideo
		$("#backvideo").attr("src", newURL);

		//event when video is ready to play
		$("#backvideo").on("canplay", function () {
			//play video
			$("#backvideo").get(0).play();
			$(".p__back__video__holder").removeClass("zoomout");
			console.log("canplay");
		});
	} else {
		//pause video
		$("#backvideo").get(0).pause();
	}
}

//!Work Section
//add .active to first .p__s2__unit__holder
$(".p__s2__unit__holder").first().addClass("active");

//!Timeline Section
let isTimelineVideoPlaying = false;

//when clicked on .timeline__cta
$(".timeline__cta").click(function () {
	//add .hide to .30center__text
	$("._30center__text").addClass("hide");

	isTimelineVideoPlaying = true;

	//add .fullscreen-video to .pbv__embed__holder
	$(".pbv__embed__holder").addClass("fullscreen-video");
	//add .no-padding to .p__back__video__holder
	$(".p__back__video__holder").addClass("no-padding");
	//  //add .opacity-0 to p__s1__gradientback
	//  $(".p__s1__gradientback").addClass("opacity-0");

	$(".p__logo__holder").addClass("hide");
	$(".ps3__vclose__holder").removeClass("hide");
	$(".ps3__vpause__holder").removeClass("hide");
	$(".ps3__v__progressbar__holder").removeClass("hide");
	stopScroll();

	console.log("timeline video playing  ", videoURLs);

	//change src of video #backvideo
	$("#backvideo").attr("src", videoURLs[5]);
	//play video #backvideo from 0s unmuted
	$("#backvideo").get(0).play();
	//unmute video #backvideo
	$("#backvideo").prop("muted", false);

	//set ps1__v__progress width to video current time through binding of timeupdate event
	$("#backvideo").on("timeupdate", function () {
		let videoDuration = $("#backvideo").get(0).duration;
		let currentTime = $("#backvideo").get(0).currentTime;
		let percentage = (currentTime / videoDuration) * 100;

		console.log("percentage", percentage);

		if (percentage > 98 || percentage < 2) {
			//remove transition css from .ps1__v__progress
			$(".ps3__v__progress").css("transition", "none");
			$(".ps3__v__progress").css("width", percentage + "%");
		} else {
			//add transition css to .ps1__v__progress
			$(".ps3__v__progress").css("transition", "width 0.5s");
			$(".ps3__v__progress").css("width", percentage + "%");
		}
	});
});

//click on .p__cta__hero.close to close video
$(".p3__cta__hero.close").click(function () {
	//remove .hide from ._30center__text
	$("._30center__text").removeClass("hide");

	isTimelineVideoPlaying = false;

	//remove .fullscreen-video from .pbv__embed__holder
	$(".pbv__embed__holder").removeClass("fullscreen-video");
	//remove .no-padding from .p__back__video__holder
	$(".p__back__video__holder").removeClass("no-padding");
	//  //remove .opacity-0 from p__s1__gradientback
	//  $(".p__s1__gradientback").removeClass("opacity-0");

	$(".p__logo__holder").removeClass("hide");
	$(".ps3__vclose__holder").addClass("hide");
	$(".ps3__vpause__holder").addClass("hide");
	$(".ps3__v__progressbar__holder").addClass("hide");
	startScroll();

	changeVideoURL(5);

	$(".pause__pp__svg.pause3").removeClass("hide");
	$(".pause__pp__svg.play__abs3").addClass("hide");

	//remove timeupdate event
	$("#backvideo").off("timeupdate");
	//mute video #backvideo
	$("#backvideo").prop("muted", true);
});

//when clicked on .playpause button, play or pause video
$(".playpause3").click(function () {
	playPauseVideo3();
});

//when spacebar is pressed, play or pause video
$(document).keydown(function (e) {
	if (isTimelineVideoPlaying) {
		if (e.keyCode == 32) {
			playPauseVideo3();
		}
	}
});

//function to play/pause video
function playPauseVideo3() {
	let video = $("#backvideo").get(0);
	if (video.paused) {
		video.play();
		$(".pause__pp__svg.pause3").removeClass("hide");
		$(".pause__pp__svg.play__abs3").addClass("hide");
	} else {
		video.pause();
		$(".pause__pp__svg.pause3").addClass("hide");
		$(".pause__pp__svg.play__abs3").removeClass("hide");
	}
}

//!Awards Arrow Section
//get width css property of .award__unit__wrapper in % and convert to number
let awardUnitWidth = parseInt(
	$(".award__unit__wrapper").css("width").replace("%", "")
);
//get width css property of .award__list in % and convert to number
let awardListWidth = parseInt($(".award__list").css("width").replace("%", ""));
let awardInaRow = Math.floor(awardListWidth / awardUnitWidth);

//get number of children of .award__list
let awardListLength = $(".award__list").children().length;
let awardCurrentIndex = 0;
awardMaxIndex = awardListLength / 2 - awardInaRow;

let awardScrollPer = 0;

if (awardListLength < awardInaRow) {
	//make .award__arrow__wrapper display none
	$(".award__arrow__wrapper").css("display", "none");
} else {
	$(".award__arrow__wrapper.left").click(function () {
		if (awardCurrentIndex > 0) {
			awardCurrentIndex--;
			checkAwardArrow();
		}
	});
	$(".award__arrow__wrapper.right").click(function () {
		if (awardCurrentIndex < awardMaxIndex) {
			awardCurrentIndex++;
			checkAwardArrow();
		}
	});
}

//reset arrow state
function checkAwardArrow() {
	$(".award__list").css(
		"transform",
		"translateX(" + awardCurrentIndex * -(100 / awardInaRow) + "%)"
	);
	if (awardCurrentIndex == awardMaxIndex) {
		$(".award__arrow__wrapper.right").addClass("disable");
	} else {
		$(".award__arrow__wrapper.right").removeClass("disable");
	}

	if (awardCurrentIndex == 0) {
		$(".award__arrow__wrapper.left").addClass("disable");
	} else {
		$(".award__arrow__wrapper.left").removeClass("disable");
	}
}

//reset scroll position
function resizeAwardScroll() {
	awardCurrentIndex = 0;
	checkAwardArrow();
}

//when hover over and out
$(".p__s1__bottom__parent").hover(
	function () {
		$(".p__s1__gradientback").removeClass("hide");
		$(".p__s1__bottom__holder2").removeClass("hide");
	},
	function () {
		$(".p__s1__gradientback").addClass("hide");
		$(".p__s1__bottom__holder2").addClass("hide");
	}
);

//when hover over and out on .p__s2__unit__holder
$(".p__s2__unit__holder").hover(
	function () {
		$(".p__s2__unit__holder.active").removeClass("active");
		$(this).addClass("active");

		//get index of .p__s2__unit__holder
		let index = $(this).index();
		$(".p__back__video__holder").addClass("zoomout");
		changeVideoURL(index + 1);
	},
	function () {}
);

//when hover over and out on .ps4u__newsunit__holder
$(".ps4u__newsunit__holder").hover(
	function () {
		$(".ps4u__newsunit__holder.active").removeClass("active");
		$(this).addClass("active");

		//get index of .ps4u__newsunit__holder
		let index = $(this).index();
		console.log(index);
		//remove .active from .news__image__holder.active
		$(".news__image__holder.active").removeClass("active");
		//find .news__image__holder with index and add .active
		$(".news__image__holder").eq(index).addClass("active");
	},
	function () {}
);

//when hover over and out on .ps4__unit__wrapper
$(".ps4__unit__wrapper").hover(
	function () {
		$(".ps4__unit__wrapper.active").removeClass("active");
		$(this).addClass("active");
	},
	function () {}
);

//when hover over and out on .ps4__unit__wrapper
$(".award__unit__wrapper").hover(
	function () {
		$(".award__unit__wrapper.active").removeClass("active");
		$(this).addClass("active");
	},
	function () {
		$(this).removeClass("active");
	}
);

//!Awards Section Masks
//find all .award__image__wrapper
$(".award__image__wrapper").each(function () {
	//get .award__image in .award__image__wrapper
	let awardImage = $(this).find(".award__image");

	//get src of .award__image
	let awardImageSrc = awardImage.attr("src");

	//set mask-image of .award__image__wrapper to awardImageSrc
	$(this).css("mask-image", "url(" + awardImageSrc + ")");
});

//when page is resized
$(window).resize(function () {
	//get width css property of .award__unit__wrapper in % and convert to number
	awardUnitWidth = parseInt(
		$(".award__unit__wrapper").css("width").replace("%", "")
	);
	//get width css property of .award__list in % and convert to number
	awardListWidth = parseInt($(".award__list").css("width").replace("%", ""));
	awardInaRow = Math.floor(awardListWidth / awardUnitWidth);

	awardListLength = $(".award__list").children().length;
	awardMaxIndex = awardListLength / 2 - awardInaRow;

	resizeAwardScroll();
});