var currentIndex = 0

function nav(offset) {
	var items = document.querySelectorAll('.items:not(.disabled)')
	if (offset === -1) {
		if (currentIndex <= 0) {
			return
		}
	}
	else if (offset === 1) {
		if (currentIndex >= items.length - 1) {
			return
		}
	}
	else {
		console.error(`nav called with unknown offset: ${offset}`)
	}

	currentIndex += offset
	items[currentIndex].focus()
	items[currentIndex].addEventListener('keydown', handleKeyDown)
}

function handleKeyDown(e) {
	switch (e.key) {
		case 'ArrowUp':
			e.preventDefault()
			e.stopPropagation()
			nav(-1)
			break
		case 'ArrowDown':
			e.preventDefault()
			e.stopPropagation()
			nav(1)
			break
	}
}

window.addEventListener('load', function (e) {
	// Select first item
	var items = document.querySelectorAll('.items:not(.disabled)')
	if (items.length > 0) {
		items[0].focus()
		items[0].addEventListener('keydown', handleKeyDown)
	}

	document.body.addEventListener('keydown', handleKeyDown)
})