const resizeHandler = () => {
	const photosElement  = document.getElementById('photos');
	const photos         = document.querySelectorAll('.photo');
	const containerWidth = parseFloat(photosElement.getBoundingClientRect().width, 10);
	let   ratio          = [];

	photos.forEach((element, index) => {
		ratio[index] = element.dataset.height > 0 ? element.dataset.width / element.dataset.height : 1;
	});

	let layoutGeometry = require('justified-layout')(ratio, {
		containerWidth: containerWidth,
		containerPadding: 0,
		targetRowHeight: 200
	});

	photosElement.style.height = layoutGeometry.containerHeight + 'px';

	photos.forEach((element, index) => {
		element.style.top               = layoutGeometry.boxes[index].top + 'px';
		element.style.width             = layoutGeometry.boxes[index].width + 'px';
		element.style.height            = layoutGeometry.boxes[index].height + 'px';
		element.style.left              = layoutGeometry.boxes[index].left + 'px';
		element.children[1].style.width = layoutGeometry.boxes[index].width + 'px';
	});
};

resizeHandler();

document.addEventListener('keyup', () => {
	if (event.ctrlKey === true || event.altKey === true) return;
	if (event.key == "Escape") {
			window.stop()
			document.getElementById('back').click();
	};
});

document.addEventListener('keydown', () => {
	if (event.ctrlKey === true || event.altKey === true) return;
	if (event.key == " ") {
		event.preventDefault();
		event.stopPropagation();

		const element = document.getElementById("toggle");
		element.checked = !element.checked;
	};
});

document.addEventListener('DOMContentLoaded', () => {
	const photosElement = document.getElementById("photos")
	photosElement.classList.remove('flex');
	photosElement.classList.add('justified');

	window.onresize = resizeHandler;
	resizeHandler();
});