jQuery(function ($) {
	gsap.registerPlugin(ScrollTrigger)

	let frameElements = $('.frame-box-content-data .box')
	let frameScrollWidth = parseFloat(0)
	frameElements.each(function (index, element) {
		frameScrollWidth += parseFloat(element.offsetWidth)

		let marginLeft = parseFloat($(element).css('margin-left'))
		if (!isNaN(marginLeft) && marginLeft !== 0) {
			frameScrollWidth += marginLeft
		}
	})

	$('#frame-box .frame-box-content-bg, #frame-box .frame-box-content-bg img').css('width', `${frameScrollWidth}px`)
	$('#frame-box .piano-keys').css('width', `${frameScrollWidth}px`)
	frameScrollWidth = frameScrollWidth - parseFloat($('#frame-box').width())
	$('.frame-box-content-data, #frame-box .piano').css( 'width', `${frameScrollWidth}px` )

	let dragHandle = document.querySelector('#drag-handle')
	Draggable.create(dragHandle, {
		type: 'x',
		bounds: '#frame-box',
		onDrag: updateScroll,
		onThrowUpdate: updateScroll,
	})

	function updateScroll() {
		let frameWidth = document.querySelector('#frame-box').offsetWidth
		let thisWidth = this.styles.target.clientWidth

		let scrollPosition = (this.x / (frameWidth - thisWidth)) * frameScrollWidth

		$('#frame-box-content, .piano').css(
			'transform',
			`translateX(${-scrollPosition}px)`
		)
	}

	// gsap.to("#frame-box-content, .piano", {
	//     xPercent: -100,
	//     ease: "linear",
	//     scrollTrigger: {
	//         id: "scrollTrigger",
	//         trigger: "main#content",
	//         pin: true,
	//         scrub: 1,
	//         end: () => "+=" + frameScrollWidth
	//     },
	// });
})

jQuery(function ($) {
	let currentAudio = null

	$('.actions .song').on('click', function () {
		let songURI = $(this).attr('song')

		if (currentAudio !== null) {
			currentAudio.pause()
			currentAudio.currentTime = 0
		}

		let audio = new Audio(songURI)

		currentAudio = audio

		audio.play()
		activePlayer()
	})

	$('.song-handler-anim').on('click', function () {
		let songURI = $(this).attr('song')

		if (currentAudio !== null) {
			currentAudio.pause()
			currentAudio.currentTime = 0
			currentAudio = null
			stopPlayer()
		} else {
			let audio = new Audio(songURI)
			currentAudio = audio
			audio.play()
			activePlayer()
		}
	})

	function activePlayer() {
		$('.song-handler-anim').addClass('active')
	}
	function stopPlayer() {
		$('.song-handler-anim').removeClass('active')
	}
	function togglePlayer() {
		$('.song-handler-anim').toggleClass('active')
	}
})

jQuery(function ($) {
	$('#frame-box nav #nav_foto').on('click', function () {
		$('#frame-box #foto').show()
		$('#frame-box #plyty').hide()
	})
	$('#frame-box nav #nav_plyty').on('click', function () {
		$('#frame-box #foto').hide()
		$('#frame-box #plyty').show()
	})
	$('#frame-box nav #nav_intro').on('click', function () {
		$('#frame-box #intro').show()
		$('#frame-box #foto').hide()
		$('#frame-box #plyty').hide()
	})

	$('#frame-box #intro p').on('click', function () {
		$('#frame-box #intro').hide()
		$('#frame-box #foto').hide()
		$('#frame-box #plyty').show()
	})
})

jQuery(function ($) {
	$('#frame-box .actions .text').on('click', function () {
		$('.text-data', this).toggleClass('active')
	})
})

jQuery(function ($) {
	Fancybox.bind('[data-fancybox]', {
		// Your custom options
	})
})

jQuery(function ($) {
	function finger_1_anim() {
		const element = $('.hand-finder-part-1')
		element.css('animation', 'finger-1 500ms')
		setTimeout(() => {
			element.css('animation', 'none')
			setTimeout(finger_1_anim, 3000)
		}, 1000)
	}
	function finger_2_anim() {
		const element = $('.hand-finder-part-2')
		element.css('animation', 'finger-2 500ms')
		setTimeout(() => {
			element.css('animation', 'none')
			setTimeout(finger_2_anim, 3000)
		}, 1000)
	}

	finger_1_anim()
	finger_2_anim()
})

jQuery(function ($) {
	$('#frame-box #nav_book').on('click', function () {
		$('#frame-box #book').fadeIn('slow')
		$('#flipbook').turn('page', 2)
	})
	$('#frame-box #book .book-close').on('click', function () {
		$('#frame-box #book').fadeOut('slow')
	})

	$('#flipbook').turn({
		width: window.matchMedia('(max-width: 968px)').matches
			? $(window).width() * 0.9
			: 600,
		height: window.matchMedia('(max-width: 968px)').matches
			? ($(window).width() * 0.9) / 1.445
			: 415,
		autoCenter: true,
		display: 'double',
		when: {
			turned: function (event, page, view) {
				if (page > 3) {
					$('.book-contents').fadeIn()
				} else {
					$('.book-contents').fadeOut()
				}
			},
			turning: function (event, page, view) {
				if (page === 1) {
					// event.preventDefault()
                    if (!$(event.target).closest('a').length) {
						event.preventDefault();
					}
				}
			},
		},
	})

    $('#flipbook').on('touchstart', 'a', function (event) {
		event.stopPropagation();
	});

	$(document).on('click', 'ul.table-of-contents', function (e) {
		e.stopPropagation()
	})

	$(document).on('click', '.goto-page', function (e) {
		e.preventDefault()
		e.stopPropagation()
		var page = $(this).data('page')

		$('#flipbook').turn('page', page)
	})

	$(document).on('click', '.book-contents', function (e) {
		e.preventDefault()
		e.stopPropagation()
		$('#flipbook').turn('page', 2)
	})
})