function initExamples(evt) {
	var tasks = document.querySelectorAll(".example .task");
	for (var i = 0; i < tasks.length; i++) {
		var input = tasks[i].appendChild(document.createElement("input"));
		input.type = "image";
		input.src = "design/key24.png";
		input.addEventListener("click", toggleSolution);
		input.className = "toggler";
		input.title = "Ukázat řešení";
		input.value = "Řešení";
	}
    
    //vyskakovaci poznamky
    var pops = document.querySelectorAll(".popup");
    for (var i = 0; i < pops.length; i++) {
        var popup = pops[i];
        
        
        var frag = document.createDocumentFragment();
        var icon = addChild(frag, "span", "popup-icon")
        icon.addEventListener("click", togglePopup);
        icon.title = "Zobrazit poznámku";
        
        var content = addChild(frag, "span", "popup-content");
        
        var closer = addChild(content, "span", "closer")
        closer.addEventListener("click", closePopup);
        closer.innerHTML = "×";
        
        while (popup.childNodes.length > 0) {
            content.appendChild(popup.firstChild);
        }
        
        popup.appendChild(frag);
    }
    
	var anims = document.querySelectorAll(".mixed");
	for (var i = 0; i < anims.length; i++) {
		var figure = anims[i];
		
		figure.setAttribute("data-last", "image");
		
		var radios = figure.querySelectorAll("input");
		for (var j = 0; j < radios.length; j++) {
			var radio = radios[j]
			radio.value = "video";
			if (j == 0) {
				radio.checked = true;
				radio.value = "image"
			}
			radio.addEventListener("click", toggleAnimation);
		}
		
	}
	
}


function toggleAnimation(evt) {
	var input = evt.currentTarget;
	
	var figure = input.parentNode.parentNode;
	if (input.value == figure.getAttribute("data-last")) {
		return;
	}
	
	var video = figure.querySelector("video");
	
	if (input.value == "image") {
		figure.classList.remove("animated");
		video.play(0);
		video.pause();
	}
	
	else {
		figure.classList.add("animated");
		video.play();
	}
	figure.setAttribute("data-last", input.value);
}

function addChild(parent, childName, childClass) {
    var child = parent.appendChild(document.createElement(childName));
    if (childClass) {
        child.className = childClass;
    }
    return child;
}

function addText(parent, text) {
    parent.appendChild(document.createTextNode(text));
}

function toggleSolution(evt) {
	var input = evt.currentTarget 
	var task = input.parentNode;
	
	if (task.classList.toggle("shown")) {
		input.title = "Skrýt řešení";
	}
	else {
		input.title = "Ukázat řešení";		

	}
}


function togglePopup(evt) {
    var toggler = evt.currentTarget;
    var popup = toggler.parentNode;
    if (popup.classList.toggle("shown")) {
        popup.title = "Schovat poznámku";
    }
    else {
         popup.title = "Zobrazit poznámku";
    }
}

function closePopup(evt) {
    var popup = evt.currentTarget.parentNode.parentNode;
    popup.classList.remove("shown");
}

//<span class="popup"><span class="popup-icon" onclick="togglePopup(this)" title="Zobrazit poznámku"></span><span class="popup-content" style="display: none;"><span class="closer" onclick="this.parentNode.style.display='none'" title="Zavřít poznámku">×</span>Termín „klasická řečtina“ značí jen určité období ve vývoji staré řečtiny – řečtinu klasického období, tedy 5. a&nbsp;4.&nbsp;st. př.&nbsp;n.&nbsp;l.</span></span>

window.addEventListener("load", initExamples)