window.addEventListener("load", initScroller)

function initScroller(evt) {
    window.addEventListener("keydown", resolveScrollerKeys);
    
    createScroller();
    
    var scs = document.querySelectorAll("[data-rel='scroller'], [rel='scroller']");
    
    for (var i =0; i < scs.length; i++) {
        scs[i].addEventListener("click", openScroller);


    }
}

function createScroller() {
    var scr = document.createElement("div");
    scr.className = "scroller outer-container hidden";
    
    var scr2 = scr.appendChild(document.createElement("div"));
    scr2.className = "img-scroller";
    
    var img = scr2.appendChild(document.createElement("img"));
    img.setAttribute("alt", "obrazek");
    img.id = "scroller-img";
    
    var toolbar = scr.appendChild(document.createElement("div"));
    toolbar.className = "toolbar";
    var title = toolbar.appendChild(document.createElement("div"));
    title.className = "title";
    var closer = toolbar.appendChild(document.createElement("input"));
    closer.className = "closer";
    closer.type = "image";
    closer.src = "../design/zavrit.png";
    closer.setAttribute("onclick", "hideScroller()");
    closer.value = "Zavřít obrázek";
    
    document.querySelector("body").appendChild(scr);
}

//<div class="scroller outer-container hidden">
//    <div class="img-scroller">
//        <img id="scroller-img" src="" alt="velky obrazek">
//    </div> 
//    <div class="toolbar">
//        <div class="title"></div>
//        <input class="closer" onclick="hideScroller()" type="image" value="Zavřít" src="../design/zavrit.png">
//    </div>
//</div>
        
function openScroller(evt) {
    evt.preventDefault();

    var link = evt.currentTarget;
    var scr = document.querySelector(".scroller");

    scr.classList.remove("hidden");

    var img = document.getElementById("scroller-img");
    img.src = link.href;
    img.parentNode.scrollTop = 0;

    scr.querySelector(".title").innerHTML = link.title;
}

function hideScroller() {
   var scr =   document.querySelector(".scroller");
    scr.classList.add("hidden")

}

function resolveScrollerKeys(evt) {
    var scroller = document.querySelector(".scroller");
    if (scroller.classList.contains("hidden")) {
        return;
    }

    if (evt.keyCode == 27) {
        evt.preventDefault();
        hideScroller()
    }

    if (evt.keyCode == 40) {
        evt.preventDefault();
        var cont = scroller.querySelector(".img-scroller"); 
        cont.scrollTop += 50;
    }
    if (evt.keyCode == 38) {
        evt.preventDefault();
        var cont = scroller.querySelector(".img-scroller"); 
        cont.scrollTop -= 50;
    }
}