document.addEventListener("DOMContentLoaded",function() {
	function sort(grid, by, reverse) {
		// by year, name, hours (see portfoliolite-block)
		let articles = [...document.querySelectorAll('.gamegrid article')]
		const toI = (el, prop) => {
			const propEl = el.querySelector(`.${prop}`)
			return propEl ? parseInt(propEl.innerHTML) : 0
		}
		var sorts = {
			"year": (a, b) => toI(a, 'year') > toI(b, 'year'),
			"name": (a, b) => a.innerHTML.localeCompare(b.innerHTML),
			"hours": (a, b) =>toI(a, 'hours') > toI(b, 'hours'),
			"date": (a, b) => a.querySelector('.date').dateTime.localeCompare(b.querySelector('.date').dateTime),
			"rating": (a, b) => toI(a, 'rating') < toI(b, 'rating')
		}

		articles.sort(sorts[by])
		if(reverse) articles.reverse()
		grid.innerHTML = ""
		grid.append(...articles)
	}
	function toggleSort() {
		const grid = document.querySelector('.gamegrid')
		const sortbtns = [...document.querySelectorAll('.sortbtn')]

		sortbtns.forEach(sortbtn => {
			sortbtn.addEventListener('click', function() {
				sortbtns.forEach(btn => btn.className = 'sortbtn')
				sortbtn.classList.add('sorted')

				const rev = sortbtn.dataset.sorted === 'asc' ? 'desc' : 'asc'
				sortbtn.dataset.sorted = rev

				sort(grid, sortbtn.dataset.sort, rev === 'desc')
				sortbtn.classList.add(`sorted-${rev}`)
			})
		})
	}
	toggleSort();

	const box = new SimpleLightbox('.lbox', { /* options */ });

	function enableSidebarMenuForMobile() {
        document.querySelector('[data-toggle="offcanvas"]').addEventListener('click', function () {
            document.querySelector('.row-offcanvas').classList.toggle('active')
        });
	}
	enableSidebarMenuForMobile();

	function scrollThenFixSidebar() {
		const mainHeight = document.querySelector('main div').clientHeight
		const sidebarHeight = document.querySelector('.sidebar-content').clientHeight
		const maxHeight =  sidebarHeight - window.innerHeight
		if(mainHeight < sidebarHeight) return

		document.addEventListener('scroll', function(e) {
		    const s = document.scrollingElement.scrollTop || document.querySelector('html').scrollTop || document.querySelector('body').scrollTop;
		    const content = document.querySelector('.sidebar-content')
			if(s > maxHeight) {
				content.classList.add('sidebar-fixed')
				content.classList.remove('sidebar-scrolling')
			} else {
				content.classList.add('sidebar-scrolling')
				content.classList.remove('sidebar-fixed')
			}
		})
	}
	scrollThenFixSidebar();

	var addTargetBlankToExternalLinks = function() {
		var host = (new URL(window.location.href)).hostname;
		[...document.querySelectorAll('article a')].forEach(function(a) {
			var url = a.getAttribute('href')
			if(url && url.startsWith('http') && url.indexOf(host) === -1) {
				a.setAttribute('target', '_blank')
				a.setAttribute('rel', 'noopener')
				a.classList.add('external')
			}
		})
	};
	addTargetBlankToExternalLinks();

	var addRandomImageToSideBarMenus = function() {
		var rand = Math.floor(Math.random() * 10) + 1;
		[...document.querySelectorAll('.sidebar-menu li')].forEach(function(el) {
			el.addEventListener('mouseenter', function() {
				el.style.background = `#f1f4dd url(/img/random/${rand}.gif) no-repeat right`
			})
			el.addEventListener('mouseleave', function() {
				el.style.background = 'none'
			})
			el.addEventListener('click', function() {
				location.href = el.querySelector('a').href
			})
		})
	};

	var obfuscateMail = function() {
		var meel = document.querySelector('.meel');
		var enc = "<o ofwo-zopsz='aowz orrfsgg' vfst='aowzhc:xst@xstyzoygqcrsl.qca'>xst@xstyzoygqcrsl.qca</o>  <o ofwo-zopsz='sbqfmdhwcb DUD ysm' vfst='vhhdg://ysmg.cdsbdud.cfu/jyg/j1/pm-twbusfdfwbh/24O319TO8708OP6961997205S66Q99941091O46R' hwhzs='Sbqfmdh aowzg kwhv am UDU ysm'><gju qzogg='wqcb wqcb-hslh' kwrhv='24' vswuvh='24'><igs lzwby:vfst='#zcqy'></igs></gju></o>"

		if(meel) {
			meel.addEventListener('click', function() {
				meel.setAttribute('class', '')
				meel.innerHTML = enc.replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+12)?c:c-26);});
			})
		}		
	}

	function makeTootClickable() {
		[...document.querySelectorAll('.toot')].forEach(toot => {
			toot.addEventListener('click', function() {
				const permalink = this.querySelector('.permalink')?.href
				if(permalink) {
					window.location.href = permalink
				}
			})
		})
	}

	addRandomImageToSideBarMenus();
	obfuscateMail();
	makeTootClickable();
});