// slideUp
const slideUp = (el, duration = 300) => {
	el.style.height = el.offsetHeight + "px";
	el.offsetHeight;
	el.style.transitionProperty = "height, margin, padding";
	el.style.transitionDuration = duration + "ms";
	el.style.transitionTimingFunction = "ease";
	el.style.overflow = "hidden";
	el.style.height = 0;
	el.style.paddingTop = 0;
	el.style.paddingBottom = 0;
	el.style.marginTop = 0;
	el.style.marginBottom = 0;
	setTimeout(() => {
		el.style.display = "none";
		el.style.removeProperty("height");
		el.style.removeProperty("padding-top");
		el.style.removeProperty("padding-bottom");
		el.style.removeProperty("margin-top");
		el.style.removeProperty("margin-bottom");
		el.style.removeProperty("overflow");
		el.style.removeProperty("transition-duration");
		el.style.removeProperty("transition-property");
		el.style.removeProperty("transition-timing-function");
	}, duration);
};

// slideDown
const slideDown = (el, duration = 300) => {
	el.style.removeProperty("display");
	let display = window.getComputedStyle(el).display;
	if (display === "none") {
		display = "block";
	}
	el.style.display = display;
	let height = el.offsetHeight;
	el.style.overflow = "hidden";
	el.style.height = 0;
	el.style.paddingTop = 0;
	el.style.paddingBottom = 0;
	el.style.marginTop = 0;
	el.style.marginBottom = 0;
	el.offsetHeight;
	el.style.transitionProperty = "height, margin, padding";
	el.style.transitionDuration = duration + "ms";
	el.style.transitionTimingFunction = "ease";
	el.style.height = height + "px";
	el.style.removeProperty("padding-top");
	el.style.removeProperty("padding-bottom");
	el.style.removeProperty("margin-top");
	el.style.removeProperty("margin-bottom");
	setTimeout(() => {
		el.style.removeProperty("height");
		el.style.removeProperty("overflow");
		el.style.removeProperty("transition-duration");
		el.style.removeProperty("transition-property");
		el.style.removeProperty("transition-timing-function");
	}, duration);
};

document.addEventListener('DOMContentLoaded', () => {

	// gnav
	var gnav = {
		btn: document.getElementsByClassName('gnav__btn')[0],
		wrap: document.getElementsByClassName('gnav')[0],
		content: document.getElementsByClassName('gnav__content')[0],
		list: document.getElementsByClassName('gnav__list')[0].children,
		list_items: [],
		close_btn: document.getElementsByClassName('gnav__close')[0],
		init: function() {
			for (list_item of gnav.list) {
				if (list_item.getElementsByTagName('ul').length)	gnav.list_items.push(list_item);
			}
		},
		open: function() {
			gnav.content.style.right = 'calc(100% - ' + gnav.content.clientWidth + 'px)';
			gnav.wrap.classList.add('active');
		},
		close: function() {
			gnav.content.removeAttribute('style');
			gnav.wrap.classList.remove('active');
		},
		toggle: function(list_item) {
			var ul = list_item.getElementsByTagName('ul')[0];
			if (list_item.classList.contains('active')) {
				slideUp(ul);
				list_item.classList.remove('active');
			} else {
				slideDown(ul);
				list_item.classList.add('active');
			};
		}
	}

	gnav.init();

	gnav.btn.addEventListener('click', e => {
		(gnav.wrap.classList.contains('active')) ? gnav.close() : gnav.open();
		e.preventDefault();
	});

	gnav.close_btn.addEventListener('click', e => {
		gnav.close();
		e.preventDefault();
	});

	window.addEventListener('resize', () => {
		if (gnav.wrap.classList.contains('active')) gnav.open();	// メニューの横幅修正
	});

	gnav.list_items.forEach((list_item) => {
		list_item.getElementsByTagName('a')[0].addEventListener('click', e => {
			gnav.toggle(list_item);
			e.preventDefault();
		});
	});

	// to top
	document.querySelector('.pagetop a').addEventListener('click', e => {
		window.scroll({
			top: 0,
			behavior: "smooth"
		});
		e.preventDefault();
	});

	// ヘッダーの白座布団
	let header = document.querySelector('.header');
	let headerBgActive = false;
	if (header) {
		addEventListener("scroll", (event) => {
			if (!headerBgActive && scrollY > 40) {
				header.classList.add('header--bg-active');
				headerBgActive = true;
			} else if (headerBgActive && scrollY <= 40) {
				header.classList.remove('header--bg-active');
				headerBgActive = false;
			}
		});
	}

	// 子カテゴリの表示・非表示
	const showdownBtns = document.getElementsByClassName('filter__showdown');
	if (showdownBtns.length) {
		Array.from(showdownBtns).forEach(element => {
			var btn = element.getElementsByTagName('a')[0];
			var ul = element.nextElementSibling;
			btn.addEventListener('click', e => {
				(ul.style.display == 'block') ? slideUp(ul) : slideDown(ul);
				e.preventDefault();
			});
		});
	}

	// フィルターの年別ごとの月別をドロップダウン表示
	const yearly = document.getElementsByClassName('filter__yearly');
	if (yearly) {
		Array.from(yearly).forEach(yearly_elem => {
			Array.from(yearly_elem.getElementsByTagName('a')).forEach(anchor_elem => {
				anchor_elem.addEventListener('click', e => {
					e.preventDefault();
					const year = e.target.textContent.substring(0, 4);
					const monthly = yearly_elem.nextElementSibling.getElementsByClassName('filter__monthly--' + year)[0];
					if (monthly.classList.contains('active')) {
						slideUp(monthly);
						setTimeout(() => {
							monthly.classList.remove('active');
							// .filter__yearly li
							e.target.parentNode.classList.remove('selected');
						});
					} else {
						// close
						const active_month = yearly_elem.nextElementSibling.getElementsByClassName('filter__monthly__inner active')[0];
						if (active_month) {
							active_month.style.display = 'none';
							active_month.classList.remove('active');
							var yearly_selected = yearly_elem.getElementsByClassName('selected')[0];
							if (yearly_selected) {
								yearly_selected.classList.remove('selected');
							}
						}
						// slideDown
						slideDown(monthly);

						setTimeout(() => {
							monthly.classList.add('active');
							// .filter__yearly li
							e.target.parentNode.classList.add('selected');
						}, 300);
					}
				});
			});
		});
	}

	// 高さ揃え
	const heightWrapper = document.getElementsByClassName('articles__inner')[0];
	if (heightWrapper) {
		const colLength = window.getComputedStyle(heightWrapper).gridTemplateColumns.split(" ").length;
		if (colLength > 1) {
			const heightElems = document.getElementsByClassName('articles__title');
			const heightElemsArray = Array.prototype.slice.call(heightElems);
			// 行ごとのループ
			for (var index = 0; index < heightElemsArray.length; index += colLength) {
				var heightElemsInRow = heightElemsArray.slice(index, index + colLength);
				var maxHeight = 0;
				// 一行内の要素ごとのループ
				// 一番高いコンテンツの高さを取得するためのループ
				for (var j = 0; j < heightElemsInRow.length; j++) {
					// 変数に入っている高さを上回ったら上書きする
					if (heightElemsInRow[j].clientHeight > maxHeight) {
						maxHeight = heightElemsInRow[j].clientHeight;
					}
				};
				// 一番高い高さを反映するためのループ
				for (var j = 0; j < heightElemsInRow.length; j++) {
					heightElemsInRow[j].style.height = maxHeight + 'px';
				};
			}
		}
	}

	// 記事詳細ページのサイドバー
	const sidebar = document.getElementsByClassName('article__sidebar')[0];
	if (sidebar) {
		Array.from(sidebar.getElementsByClassName('children')).forEach(element => {
			element.previousElementSibling.addEventListener('click', e => {
				if (element.hasAttribute('style')) {
					(element.style.display == 'block') ? slideUp(element) : slideDown(element);
				} else {
					if (element.parentNode.classList.contains('current-cat-parent')) {
						slideUp(element);
					} else if (element.parentNode.classList.contains('active')) {
						slideUp(element);
					} else {
						slideDown(element);
					}
				}
				// element.parentNode.classList.contains('active')
				e.preventDefault();
			});
		});
	}

	// ヘッダーの検索バー
	if(document.querySelector('.header-search')) {
		const searchbar = document.querySelector('.header-search__bar');
		document.querySelector('.header-search__btn').addEventListener('click', (event) => {
			searchbar.classList.add('header-search__bar--active');
			event.preventDefault();
		});
		document.querySelector('.searchform__close').addEventListener('click', (event) => {
			searchbar.classList.remove('header-search__bar--active');
			event.preventDefault();
		});
	}

});