/* SHOW ELEMENT AFTER PAGE IS SCROLLED 100px */
var win = window,
    docEl = document.documentElement,
    $nav = document.getElementsByTagName('nav')[0];

win.onscroll = function() {
    var sTop = (this.pageYOffset || docEl.scrollTop) - (docEl.clientTop || 0);
    if (sTop > 100) {
        $nav.classList.add("dark-theme");
    } else {
        $nav.classList.remove("dark-theme");
    }
};


/*
 * Link preview in nav bar
 */
nav = document.getElementsByTagName('nav')[0];
navItems = nav.children[0].children;
for (navItem of navItems) {
    console.log(navItem);
    navItem.addEventListener('mouseover', function() {
        displayPreview(this);
    });
    navItem.addEventListener('mouseleave', function() {
        hidePreview();
    })
}

let iframe = document.createElement('iframe');
iframe.style.display = "none";
nav.appendChild(iframe);

function displayPreview(navItem) {
    let url = navItem.href;
    // console.log(url);
    iframe.src = url;
    iframe.id = "previewFrame";
    iframe.style.width = "600px";
    iframe.style.height = "600px";
    iframe.style.display = "block";
    iframe.style.position = "fixed";
    var x = event.clientX;
    // var y = event.clientY;
    iframe.style.top = 5 + 'em';
    iframe.style.left = (x - 50) + 'px';
}

function hidePreview() {
    iframe.style.display = "none";
}