// uložíme si count, inputs a images elementy do premenných, aby sme k nim mohli jednoducho pristupovať
var count = document.getElementById('count');
var inputs = document.getElementById('inputs');
var images = document.getElementById('images');
// pomocná funkcia, ktorá naviaže obsluhu stlačenia klávesy na vstupný prvok formulára
// využíva oninput z HTML5 (ktorý sa volá po každej zmene hodnoty) s fallbackom pre staršie prehliadače na onkeydown (ktorý sa volá po každom stlačení klávesy)
var bindInput = function(input, fn) {
	input.oninput = function(e) {
		this.onkeydown = null;
		fn.call(this, e);
	};
	input.onkeydown = function(e) {
		fn.call(this, e);
	};
};
// táto funkcia sa bude volať pri zmene hodnoty vo vygenerovaných textových poliach
// používame časovač, aby sa obrázok začal načítavať až po nejakom čase nečinnosti
var onInput = function(e) {
	// fallback pre staršie prehliadače (e = udalosť, target = prvok, ktorý danú udalosť vyvolal)
	e = e || window.event;
	var target = e.target || e.srcElement;
	// ak časovač čaká, aby mohol načítať obrázok, ...
	if (target.timer) {
		// ...tak ho zrušíme, pretože hodnota sa zmenila a budeme načítavať iný obrázok
		clearTimeout(target.timer);
		target.timer = null;
	}
	// zistíme index textového prvku, v ktorom sa zmenila hodnota, aby sme mohli zmeniť adresu obrázka s rovnakým indexom
	// prebehneme cez všetky deti prvku so vstupnými prvkami
	for (var input = inputs.firstChild, i = 0; input; input = input.nextSibling, ++i)
		// ak sme našli vstupný prvok, v ktorom sa zmenila hodnota, ...
		if (input == target) {
			// ...nastavíme časovač, ...
			target.timer = setTimeout(function() {
				// ...aby nastavil adresu obrázka...
				images.childNodes[i].src = target.value;
				target.timer = null;
			// ...po pol sekunde nečinnosti 
			}, 500);
			// našli sme, čo sme chceli, tak ukončíme cyklus
			break;
		}
};
// táto funkcia sa volá pri zmene hodnoty v textovom poli s počtom prvkov
var onCountInput = function(e) {
	// z hodnoty v poli prečítame počet a obmedzíme ho na hodnoty 1 až 6
	var count = Math.max(1, Math.min(6, this.value));
	// ak v poli nebola číselná hodnota, ...
	if (isNaN(count))
		// ...použijeme predvolenú hodnotu 1
		count = 1;
	// zistíme aktuálny počet vstupných polí
	var actual = inputs.childNodes.length;
	// pokiaľ je požadovaný počet menší ako aktuálny počet (ktorý postupne zmenšujeme), ...
	while (count < actual--) {
		// ...odstránime posledné vygenerované vstupné pole...
		inputs.removeChild(inputs.lastChild);
		// ...a jemu prislúchajúci obrázok
		images.removeChild(images.lastChild);
	}
	// pokiaľ je aktuálny počet menší ako požadovaný počet (aktuálny počet vždy zväčšujeme), ...
	while (++actual < count) {
		// vygenerujeme nové textové pole...
		var input = document.createElement('input');
		// ...s požadovaným názvom...
		input.name = 'cislo' + (actual + 1);
		// ...a naviazanou obslužnou funkciou,...
		bindInput(input, onInput);
		// ktoré pridáme za ostatné vstupné polia,...
		inputs.appendChild(input);
		// ...spolu s obrázkom, ...
		var image = new Image();
		// ...ktorý pridáme za ostatné obrázky
		images.appendChild(image);
	}
}
// naviažeme obslužnú funkciu, aby sa vykonala po každej zmene hodnoty v poli s požadovaným počtom obrázkov
bindInput(count, onCountInput);
// zavoláme funkciu manuálne, aby sa vygenerovali polia podľa aktuálnej hodnoty
onCountInput.call(count);