let timefmt = null;

const MONTHS = Array.from({ length: 12 }, (_, i) =>
	new Date(0, i).toLocaleString(undefined, { month: 'long' }));

function padTime(x) {
	return (x < 10) ? '0' + x : x;
}

function updateTime() {
	let date = new Date();

	let h = date.getHours();
	let m = date.getMinutes();
	let s = date.getSeconds();

	let dd = date.getDate();
	let dm = date.getMonth();
	let dy = date.getFullYear();

	if (timefmt == 12) // default to 24
		h = h % 12 || 12;

	document.getElementById('time').textContent =
		padTime(h) + '\u00A0\u00A0' +
		padTime(m) + '\u00A0\u00A0' +
		padTime(s);
	document.getElementById('date').textContent =
		dd + ' ' + MONTHS[dm] + ' ' + dy;
}

// recursively calling setTimeout instead of using setInterval allows us to
// correct for any drift caused by imprecise delays.
function updateTimeRecursive() {
	updateTime();
	// +1ms to avoid updating too early
	setTimeout(updateTimeRecursive, 1001 - new Date().getTime() % 1000);
}

function startTempo() {
	timefmt = localStorage['timefmt'];

	let val;
	if ((val = localStorage['fg']))
		document.body.style.color = val;
	if ((val = localStorage['fg_date']))
		document.getElementById('date').style.color = val;
	if ((val = localStorage['bg']))
		document.body.style.backgroundColor = val;

	updateTimeRecursive();
}

window.onload = startTempo;

document.addEventListener('contextmenu', e => e.preventDefault());