document.addEventListener("DOMContentLoaded", function() {
	setupOverlayButtons();
	setupHistoryGraph();
});

function setupOverlayButtons() {
	const openButton = document.getElementById("overlay-open");
	const closeButton = document.getElementById("overlay-close");
	
	openButton.addEventListener("click", function() {
		document.getElementById("overlay").classList.remove("w3-hide")
	});
	closeButton.addEventListener("click", function() {
		document.getElementById("overlay").classList.add("w3-hide");
	});
}

function setupHistoryGraph() {
	const request = new XMLHttpRequest();
	
	if (!request || document.getElementById("history-graph") === null) {
		return;
	}
	
	request.open("GET", "ajax.php");
	request.onload = function() {
		const data = JSON.parse(this.response);
		const canvas = document.getElementById("history-graph");
		const chart = new Chart(canvas, {
			type: 'line',
			data: data,
			options: {
				scales: {
					y: {
						title: {
							display: true,
							text: "Aantal punten"
						}
					},
					x: {
						title: {
							display: true,
							text: "Datum"
						}
					}
				}
			}
		});
	};
	request.send();
}