var testing, inReload, inText, inScale, iframe, group, versions, pad_link

function nav_versions() {
	// let response = fetch('index.txt');
    
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			var index = this.response.split('\n')
			index.forEach(function(item, i){
				versions = document.querySelector('#versions')
				var name = item.split('-')
				name = name[name.length-1]
				versions.href = '<option data-href="'+item+'" value="'+name+'">'+name+'</option>'
			});
            
			versions.onchange = function (e) {
				group = this.value;
				loadLetters(document.querySelector('#inText').value)
				location.hash = group
				// var ll = this.getAttribute('data-href')
				// var selected  = this.options[this.selectedIndex].getAttribute('data-href')
				// pad_link.innerHTML = selected 
			};

			group = versions.value;
		}
	};
	xhttp.open("GET", "index.txt", true);
	xhttp.send();
}


function scale(value){
	testing.style.transform = 'scale(' + value + ')'
}

function rand(){
	return Math.floor((Math.random() * 10000) + 1)
}

function loadLetters(letters){
	var tabLetters = letters.split('')
	testing.innerHTML = ''
	tabLetters.forEach(function(item, i){
		var itemCode = item.charCodeAt(0)
		var ra = rand()
		testing.innerHTML += '<img src="projects/' + group + '/svg/' + itemCode + '.svg?rand=' + ra + '" />' 
	})
}

document.addEventListener("DOMContentLoaded", (event) => {
  group = location.hash.replace('#', '')
	testing = document.querySelector('#testing')
	pad_link = document.getElementById('pad_link')
	inReload = document.querySelector('#inReload')
	inText = document.querySelector('#inText')
	inScale = document.querySelector('#inScale')
	inReload.addEventListener('click', (event) => {
		loadLetters(inText.value)
	})
	

	inScale.addEventListener('change', (event) => {
		scale(inScale.value)
	})


	nav_versions()

})