/* Logic for all controls in the sidebar */

// Since we have gl context, initialise whatever needs it
function initMenu() {
	initLevels();
	debugChange.call(debugModeCB);
	toggleRayMarching.call(disableRayMarching);
}

/* Level items */

const levelSelect = document.getElementById('level-select');
const levelDesc = document.getElementById('level-description');
// Add levels to dropdown box
function initLevels() {
	for (var i = 0; i < levels.length; i++) {
		var elem = document.createElement('option');
		elem.value = i;
		elem.innerText = levels[i].name;
		levelSelect.appendChild(elem);
	}
	levelChange.call(levelSelect);
}
function levelChange() {
	levelDesc.innerText = levels[this.value].description;
	levels[this.value].load();
}
levelSelect.addEventListener('change', levelChange);

const animPause = document.getElementById('pause-movement');
function pauseMovement() {
	pauseAnimations = this.checked;
}
pauseMovement.call(animPause);
animPause.addEventListener('change', pauseMovement);

/* Settings items */

const debugModeCB = document.getElementById('debug-mode');
function debugChange() {
	if(this.checked) {
		gl.uniform4f(uBlack, 1,0,0,1);
		gl.uniform4f(uBHBlack, 0,1,0,1);
	}
	else {
		gl.uniform4f(uBlack, 0,0,0,1);
		gl.uniform4f(uBHBlack, 0,0,0,1);
	}
}
debugModeCB.addEventListener('change', debugChange);

coordsElem = document.getElementById('coordinates');
const coordsCB = document.getElementById('coordinates-cb');
function coordscbChange() {
	if (this.checked) coordsElem.classList.remove('hide');
	else              coordsElem.classList.add('hide');
}
coordscbChange.call(coordsCB);
coordsCB.addEventListener('change', coordscbChange);

fpsElem = document.getElementById('fps');
const fpsCB = document.getElementById('fps-cb');
function fpsCBChange() {
	if (this.checked) fpsElem.classList.remove('hide');
	else              fpsElem.classList.add('hide');
}
fpsCBChange.call(fpsCB);
fpsCB.addEventListener('change', fpsCBChange);

const disableRayMarching = document.getElementById('disable-ray-marching');
function toggleRayMarching() {
	gl.uniform1i(uDisableRayMarching, this.checked);
}
disableRayMarching.addEventListener('change', toggleRayMarching);

const onlyHorizontalCB = document.getElementById('only-horizontal');
function horChange() {
	onlyHorizontal = this.checked;
}
horChange.call(onlyHorizontalCB);
onlyHorizontalCB.addEventListener('change', horChange);

const onlyVerticalCB = document.getElementById('only-vertical');
function verChange() {
	onlyVertical = this.checked;
}
verChange.call(onlyVerticalCB);
onlyVerticalCB.addEventListener('change', verChange);