// アニメーション時間制御
var upper_target = document.querySelectorAll(".upper__in")
const styleWrap = document.querySelector(".textWrap")
const comStyle = document.defaultView.getComputedStyle(styleWrap)
let moveTimer = comStyle.getPropertyValue("--image-move-timer").slice(0, -1)
var $imageMoveTimer = moveTimer * 1000

// Audio
var playlist = [
	"https://nakanojo-biennale.com/2021/wp-content/themes/nb2021/assets/audio/mp3/e05.mp3",
	"https://nakanojo-biennale.com/2021/wp-content/themes/nb2021/assets/audio/mp3/e01.mp3",
	"https://nakanojo-biennale.com/2021/wp-content/themes/nb2021/assets/audio/mp3/e02.mp3",
	"https://nakanojo-biennale.com/2021/wp-content/themes/nb2021/assets/audio/mp3/e04.mp3",
	"https://nakanojo-biennale.com/2021/wp-content/themes/nb2021/assets/audio/mp3/e03.mp3",
]

var audioObj = [
	new Audio(playlist[0]),
	new Audio(playlist[1]),
	new Audio(playlist[2]),
	new Audio(playlist[3]),
	new Audio(playlist[4])
]
audioObj.forEach(function() {
	this.volume= 0.7
})

var audioIndex = 0;


// ボタン動作
var audioStatus = document.querySelector("#audioStatus .-active").innerText.trim() == "ON"
document.addEventListener("DOMContentLoaded", function() {
	document.querySelectorAll("#audioStatus .soundArea__btn").forEach(function(e){
		e.addEventListener("click", function(event){
			if(!this.classList.contains("-active")){
				document.querySelectorAll("#audioStatus .soundArea__btn").forEach(function(el){
					if(el.classList.contains("-active")){
						el.classList.remove("-active")
					} else {
						el.classList.add("-active")
						document.querySelectorAll(".hoverSlide").forEach(function(ele){
							if(!ele.classList.contains("added__effect")){
								ele.classList.add("added__effect")
								ele.addEventListener("mouseenter", function() {
									if(audioStatus){
										audioPlay(false)
									}
								}, false)
							}
						})
					}
				})
				audioStatus = document.querySelector("#audioStatus .-active").innerText.trim() == "ON"
			}
		})
	})
})

document.getElementById("startButton").addEventListener("click", handlePlayButton, false)

async function audioPlay(bool){
	try{
		if(bool){
			audioObj[audioIndex].muted = true
		} else {
			audioObj[audioIndex].muted = false
		}
		await audioObj[audioIndex].play()
		audioObj[audioIndex] = new Audio(audioObj[audioIndex].src)
		audioIndex++
		if(audioIndex >= playlist.length){
			audioIndex = 0
		}

	} catch (err) {
		audioIndex++
		if(audioIndex >= playlist.length){
			audioIndex = 0
		}
		audioPlay()
	}
}

function handlePlayButton() {
	audioObj.forEach(function(e, i) {
		audioPlay(true)
	})
}

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){


	document.addEventListener("DOMContentLoaded", function() {
		const actBlock = this.querySelector("#hoverSlideWrap")
	
		document.addEventListener('scroll', function(){
			active_height = window.innerHeight
			scroll = window.scrollY
			upper_target.forEach(function(e, i){
				setTimeout(function(){
					let target_height = e.getBoundingClientRect().top + scroll
					let image_height = e.querySelector("img").getBoundingClientRect().height
					if(active_height + scroll >= target_height - image_height && scroll <= target_height && !e.classList.contains("scroll__in")){
						e.classList.add("scroll__in")
	
						window.setTimeout(function(){
							const hoverSlide = e.parentNode
							let hoverStatus = false
							let activeFlag = true
							hoverSlide.classList.add("initialize__complete")
							hoverSlide.previousElementSibling.classList.add("complete")
							setTimeout(function(){
								hoverSlide.querySelector(".textWrap__text--loop").remove()
							}, $imageMoveTimer)
							hoverSlide.addEventListener("mouseenter", function(e) {
								const elem = this
								if(elem.classList.contains("js__active")){
									e.preventDefault()
									return
								}
	
								hoverStatus = true
								activeFlag = true
								elem.classList.add("js__active")
								const before = this.querySelector(".hover--before")
								const after = this.querySelector(".hover--after")
								before.classList.add("hover--after")
								after.classList.add("hover--before")
								before.classList.remove("hover--before")
								after.classList.remove("hover--after")
	
								setTimeout(function() {
									activeFlag = false
									if(!hoverStatus){
										elem.classList.remove("js__active")
									}
								}, $imageMoveTimer) // 画像がスライドしている時間
							})
							hoverSlide.addEventListener("mouseleave", function(e) {
								const elem = this
								if(!activeFlag){
									elem.classList.remove("js__active")
									hoverStatus = false
								} else {
									hoverStatus = false
								}
							})
						}, 500 + $imageMoveTimer) // 画面インからアニメーション完了までの時間
					}
				}, 100)
			})
		})
		active_height = window.innerHeight
		scroll = window.scrollY
		document.querySelectorAll(".upper__in").forEach(function(e, i){
			setTimeout(function(){
				let target_height = e.getBoundingClientRect().top + scroll
				let image_height = e.querySelector("img").getBoundingClientRect().height
				if(active_height + scroll >= target_height - image_height && scroll <= target_height && !e.classList.contains("scroll__in")){
					e.classList.add("scroll__in")
	
					window.setTimeout(function(){
						const hoverSlide = e.parentNode
						let hoverStatus = false
						let activeFlag = true
						hoverSlide.classList.add("initialize__complete")
						setTimeout(function(){
							hoverSlide.querySelector(".textWrap__text--loop").remove()
						}, $imageMoveTimer)
						hoverSlide.addEventListener("mouseenter", function(e) {
							const elem = this
							if(elem.classList.contains("js__active")){
								e.preventDefault()
								return
							}
	
							hoverStatus = true
							activeFlag = true
							elem.classList.add("js__active")
							const before = this.querySelector(".hover--before")
							const after = this.querySelector(".hover--after")
							before.classList.add("hover--after")
							after.classList.add("hover--before")
							before.classList.remove("hover--before")
							after.classList.remove("hover--after")
	
							setTimeout(function() {
								activeFlag = false
								if(!hoverStatus){
									elem.classList.remove("js__active")
								}
							}, $imageMoveTimer) // 画像がスライドしている時間
						})
						hoverSlide.addEventListener("mouseleave", function(e) {
							const elem = this
							if(!activeFlag){
								elem.classList.remove("js__active")
								hoverStatus = false
							} else {
								hoverStatus = false
							}
						})
					}, 200 + $imageMoveTimer) // 画面インからアニメーション完了までの時間
				}
			}, 100)
		})
	})
	
	jQuery(function($){
		let now_post_num = document.querySelectorAll("#hoverSlideWrap .aspect").length // 現在表示されている件数
		let get_post_num = now_post_num  // もっと読み込むボタンで取得する件数
		//archive側で設定したdata属性の値を取得
		let load = $(".additional__load")
		let post_type = load.data("post-type")
		let all_count = load.data("count") //カスタム投稿の全件数
		//admin_ajaxにadmin-ajax.phpの絶対パス指定（相対パスは失敗する）
		let host_url = location.protocol + "//" + location.host
		let admin_ajax = host_url + '/2021/wp-admin/admin-ajax.php'
	
		$(document).on("click", ".moreBtn", function () {
			if($(this).hasClass("additional__activate")){
				return
			}
			$(this).addClass("additional__activate")
			let atag = $(".aspect > a")
			let ngOrderIdList = []
			atag.each(function(i, e){
				ngOrderIdList.push($(e).attr("href").substring(1))
			})
			let ngOrderIds = ngOrderIdList.join(",")
			//ajax処理。data{}のactionに指定した関数を実行、完了後はdoneに入る
			$.ajax({
				type: 'POST',
				url: admin_ajax,
				data: {
					'action' : 'artist_post_ajax_action', //functions.phpで設定する関数名
					'now_post_num': now_post_num,
					'get_post_num': get_post_num,
					'post_type': post_type,
					'ng_order_ids': ngOrderIds
				},
			})
			.done(function(data){ //artist_post_ajax_action関数で取得したデータがdataに入る
				//.loadにデータを追加
				load.append(data);
				//表示件数を増やす
				now_post_num = now_post_num + get_post_num; 
				//まだ全件表示されていない場合、ボタンを再度表示
				//読み込み中はボタン非表示
				$btnWrap = $('.moreBtn').parent()
				$('.moreBtn').remove()
	
				if(all_count > now_post_num) { 
					$btnWrap.append('<button class="moreBtn"><span class="c_gradationBlue transpose_area"><span class="ja_area">もっと読み込む</span><span class="en_area">VIEW MORE</span></span></button>')
				}
				upper_target = document.querySelectorAll(".upper__in")
				active_height = window.innerHeight
				scroll = window.scrollY
				upper_target.forEach(function(e, i){
					setTimeout(function(){
						let target_height = e.getBoundingClientRect().top + scroll
						let image_height = e.querySelector("img").getBoundingClientRect().height
						if(active_height + scroll >= target_height - image_height && scroll <= target_height && !e.classList.contains("scroll__in")){
							e.classList.add("scroll__in")
	
							if(document.querySelector("#startButton").classList.contains("-active")){
								document.querySelectorAll(".hoverSlide").forEach(function(ele){
									if(!ele.classList.contains("added__effect")){
										ele.classList.add("added__effect")
										ele.addEventListener("mouseenter", function() {
											if(audioStatus){
												audioPlay(false)
											}
										}, false)
									}
								})
							}
	
							window.setTimeout(function(){
								const hoverSlide = e.parentNode
								let hoverStatus = false
								let activeFlag = true
								hoverSlide.classList.add("initialize__complete")
								setTimeout(function(){
									hoverSlide.querySelector(".textWrap__text--loop").remove()
								}, $imageMoveTimer)
								hoverSlide.addEventListener("mouseenter", function(e) {
									const elem = this
									if(elem.classList.contains("js__active")){
										e.preventDefault()
										return
									}
	
									hoverStatus = true
									activeFlag = true
									elem.classList.add("js__active")
									const before = this.querySelector(".hover--before")
									const after = this.querySelector(".hover--after")
									before.classList.add("hover--after")
									after.classList.add("hover--before")
									before.classList.remove("hover--before")
									after.classList.remove("hover--after")
	
									setTimeout(function() {
										activeFlag = false
										if(!hoverStatus){
											elem.classList.remove("js__active")
										}
									}, $imageMoveTimer) // 画像がスライドしている時間
								})
								hoverSlide.addEventListener("mouseleave", function(e) {
									const elem = this
									if(!activeFlag){
										elem.classList.remove("js__active")
										hoverStatus = false
									} else {
										hoverStatus = false
									}
								})
							}, 200 + $imageMoveTimer) // 画面インからアニメーション完了までの時間
						}
					}, 100)
				})
	
			})
			.fail(function(e){
				console.log('エラーが発生しました');
			})
		})
	})
	}
	if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){

	document.addEventListener("DOMContentLoaded", function() {
		const actBlock = document.querySelector("#hoverSlideWrap")
		document.addEventListener('scroll', function(){
			active_height = window.innerHeight
			scroll = window.scrollY
			upper_target.forEach(function(e, i){
				setTimeout(function(){
					let target_height = e.getBoundingClientRect().top + scroll
					let image_height = e.querySelector("img").getBoundingClientRect().height
					if(active_height + scroll >= target_height - image_height && scroll <= target_height && !e.classList.contains("scroll__in")){
						e.classList.add("scroll__in")
						window.setTimeout(function(){
							const hoverSlide = e.parentNode
							hoverSlide.classList.add("initialize__complete")
							hoverSlide.previousElementSibling.classList.add("complete")
							setTimeout(function(){
								hoverSlide.querySelector(".textWrap__text--loop").remove()
							}, $imageMoveTimer)
							autoSlide(hoverSlide)
						}, 200 + $imageMoveTimer ) // 画面インからアニメーション完了までの時間
					}
				}, 100)
			})
		})
	})
	
	jQuery(function($){
		let now_post_num = document.querySelectorAll("#hoverSlideWrap .aspect").length // 現在表示されている件数
		let get_post_num = now_post_num  // もっと読み込むボタンで取得する件数
		//archive側で設定したdata属性の値を取得
		let load = $(".additional__load")
		let post_type = load.data("post-type")
		let all_count = load.data("count") //カスタム投稿の全件数
		//admin_ajaxにadmin-ajax.phpの絶対パス指定（相対パスは失敗する）
		let host_url = location.protocol + "//" + location.host
		let admin_ajax = host_url + '/2021/wp-admin/admin-ajax.php'
	
		active_height = window.innerHeight
		scroll = window.scrollY
		$(document).on("click", ".moreBtn", function () {
			if($(this).hasClass("additional__activate")){
				return
			}
			$(this).addClass("additional__activate")
			let atag = $(".aspect > a")
			let ngOrderIdList = []
			atag.each(function(i, e){
				ngOrderIdList.push($(e).attr("href").substring(1))
			})
			let ngOrderIds = ngOrderIdList.join(",")
			//ajax処理。data{}のactionに指定した関数を実行、完了後はdoneに入る
			$.ajax({
				type: 'POST',
				url: admin_ajax,
				data: {
					'action' : 'artist_post_ajax_action', //functions.phpで設定する関数名
					'now_post_num': now_post_num,
					'get_post_num': get_post_num,
					'post_type': post_type,
					'ng_order_ids': ngOrderIds
				},
			})
			.done(function(data){ //artist_post_ajax_action関数で取得したデータがdataに入る
				//.loadにデータを追加
				load.append(data);
				//表示件数を増やす
				now_post_num = now_post_num + get_post_num; 
				//まだ全件表示されていない場合、ボタンを再度表示
				//読み込み中はボタン非表示
				$btnWrap = $('.moreBtn').parent()
				$('.moreBtn').remove()
	
				if(all_count > now_post_num) { 
					$btnWrap.append('<button class="moreBtn"><span class="c_gradationBlue transpose_area"><span class="ja_area">もっと読み込む</span><span class="en_area">VIEW MORE</span></span></button>')
				}
				upper_target = document.querySelectorAll(".upper__in")
				upper_target.forEach(function(e, i){
					setTimeout(function(){
						let target_height = e.getBoundingClientRect().top + scroll
						let image_height = e.querySelector("img").getBoundingClientRect().height
						if(active_height + scroll >= target_height - image_height && scroll <= target_height && !e.classList.contains("scroll__in")){
							e.classList.add("scroll__in")
							window.setTimeout(function(){
								const hoverSlide = e.parentNode
								hoverSlide.classList.add("initialize__complete")
								hoverSlide.previousElementSibling.classList.add("complete")
								setTimeout(function(){
									hoverSlide.querySelector(".textWrap__text--loop").remove()
								}, $imageMoveTimer)
								autoSlide(hoverSlide)
							}, 200 + $imageMoveTimer ) // 画面インからアニメーション完了までの時間
						}
					}, 100)
				})
	
			})
			.fail(function(){
				console.log('エラーが発生しました');
			})
		})
	})
	}
	
	function autoSlide(hoverSlide){
		let timer = randomMinMax(2000 + $imageMoveTimer, 3000 + $imageMoveTimer)
		setTimeout(function(){
			const before = hoverSlide.querySelector(".hover--before")
			const after = hoverSlide.querySelector(".hover--after")
			before.classList.add("hover--after")
			after.classList.add("hover--before")
			before.classList.remove("hover--before")
			after.classList.remove("hover--after")
			hoverSlide.classList.add("js__active")
			setTimeout(function(){
				hoverSlide.classList.remove("js__active")
				autoSlide(hoverSlide)
			}, $imageMoveTimer)
		}, timer)
		
	}
	
	function randomMinMax(min, max){
		const rand = Math.floor(Math.random() * (max + 1 - min)) + min
	
		return rand
	}