/* Create
 * <nav id="scrCont"><select id="scrSel"></select></nav>
 */

const scrCont = document.createElement('nav');
scrCont.id = 'scrCont';
document.body.insertBefore(scrCont, document.body.firstChild);

const scrSel = document.createElement('select');
scrSel.id = 'scrSel';
scrCont.appendChild(scrSel);

const reloadBtn = document.createElement('button');
reloadBtn.id = 'reloadBtn';
reloadBtn.innerHTML = 'Reload';
scrCont.appendChild(reloadBtn);

/* Add options to scrSel, from scripts array */

for (var i = 0; i < scripts.length; i++) {
	var temp = document.createElement('option');
	temp.value = i;
	temp.text = scripts[i][0];
	scrSel.appendChild(temp);
}


/* Logic for changing rendered object */

function renderScr (index) {
	var temp = document.createElement('script');
	temp.src = scripts[index][1];
	temp.id = scripts[index][1];
	document.body.appendChild(temp);
}

var oldIndex = scrSel.value;

scrSel.onchange = function() {
	try {
		document.body.removeChild(document.getElementById(scripts[oldIndex][1]));
		document.body.removeChild(document.getElementsByTagName('canvas')[0]);
	} catch(e) {}

	renderScr(scrSel.value);
	oldIndex = scrSel.value;
	localStorage.setItem('render', scrSel.value);
}

if (localStorage.getItem('render') !== 0 && localStorage.getItem('render')) {
	scrSel.value = localStorage.getItem('render');
	scrSel.onchange();
} else {
	renderScr(scrSel.value);
}

reloadBtn.onclick = function() {
	try {
		document.body.removeChild(document.getElementById(scripts[oldIndex][1]));
		document.body.removeChild(document.getElementsByTagName('canvas')[0]);
	} catch(e) {}

	renderScr(oldIndex);
}