/* Add EventListener to page */
if(window.addEventListener){
    window.addEventListener("DOMContentLoaded", hideAddress, false);
    window.addEventListener("load", startShow, false);
} else if(window.attachEvent){
    window.attachEvent("onload", startShow);
} else {
    window.onload = startShow;
}

var iImgNr = new Array(3);
var arrPageImg = new Array(3);
var arrSourceImg = new Array();
var iNumberOfImages;

/* Hide address by default */
function hideAddress(){           
    var addr = document.getElementById("footer");
    if(addr){
        addr.style.display = "none";
        addr.style.position = "fixed";
        addr.getElementsByTagName("img")[0].style.display = "block";
    }
}

/* Function to start slideshow */
function startShow(){  
    // Collect images first
    iNumberOfImages = 18;
    for(var i = 0; i < iNumberOfImages; i++){
        var pic = new Image();
        pic.src = "fotos/foto" + (i + 1) + ".jpg"
        arrSourceImg[i] = pic;
    }
    
    // Select initial images and make originals visible when thumbnails are clicked
    arrPageImg = document.getElementById("sidebar").getElementsByTagName("img");
    if(!arrPageImg) return;
    iImgNr[0] = -1; iImgNr[1] = -1; iImgNr[2] = -1;
    
        if(window.addEventListener){
            for(var i = 0; i < 3; i++){
                arrPageImg[i].style.display = "block";
                arrPageImg[i].addEventListener(
                    "click",
                    function(ev){
                        var newElem = document.createElement("div");
                        var newSrc = ev.target.src.replace(".jpg", "_large.jpg");
                        newElem.setAttribute("style", "height: 100%; width: 100%; position: fixed; left: 0; top: 0; background: transparent url(images/transparent_bg.png);");
                        newElem.setAttribute("id", "largeImage");
                        var innerElem = document.createElement("div");
                        innerElem.setAttribute("style", "height: 100%; width: 100%; background: transparent url(" + newSrc + ") 50% 50% no-repeat;");
                        innerElem.addEventListener(
                            "click", 
                            function(){ 
                                document.body.removeChild(document.getElementById("largeImage")); 
                                document.body.style.overflow = "auto" 
                            }, false);
                        newElem.appendChild(innerElem);
                        document.body.appendChild(newElem);
                        document.body.style.overflow = "hidden";
                    }, false)
                SelectNewImage(i);
            }
            var cnt = document.getElementById("sidebar").getElementsByTagName("li");
            cnt = cnt[cnt.length - 1].getElementsByTagName("a")[0];
            cnt.addEventListener(
                "click",
                function(ev){
                    ev.preventDefault();
                    var addr = document.getElementById("footer");
                    addr.style.display = (addr.style.display == "block")? "none" : "block";
                }, false);
            var btnClose = document.getElementById("footer");
            if(btnClose)
                btnClose.getElementsByTagName("img")[0].addEventListener(
                    "click", function(ev){ ev.target.parentNode.style.display = "none" }, false);
        } else if(window.attachEvent){
            hideAddress();
            for(var i = 0; i < 3; i++){
                arrPageImg[i].style.display = "block";
                arrPageImg[i].attachEvent(
                    "onclick",
                    function(ev){
                        var newElem = document.createElement("div");
                        var newSrc = ev.srcElement.src.replace(".jpg", "_large.jpg");
                        newElem.style.height = "100%";
                        newElem.style.width = "100%"; 
                        newElem.style.position = "absolute"; 
                        newElem.style.left = "0"; 
                        newElem.style.top = "0";
                        newElem.style.background = "transparent url(images/transparent_bg.png)";
                        newElem.setAttribute("id", "largeImage");
                        var innerElem = document.createElement("div");
                        innerElem.style.height = "100%";
                        innerElem.style.width = "100%"; 
                        innerElem.style.background = "transparent url(" + newSrc + ") 50% 50% no-repeat"; 
                        innerElem.attachEvent(
                            "onclick",
                            function(){
                                document.body.removeChild(document.getElementById("largeImage")); 
                                document.documentElement.style.overflow = "auto";
                            }) 
                        newElem.appendChild(innerElem);
                        document.body.appendChild(newElem);
                        document.documentElement.style.overflow = "hidden";
                    })   
                SelectNewImage(i);
            }
            var cnt = document.getElementById("sidebar").getElementsByTagName("li");
            cnt = cnt[cnt.length - 1].getElementsByTagName("a")[0];
            cnt.href= "#";
            cnt.attachEvent(
                "onclick",
                function(ev){
                    var addr = document.getElementById("footer");
                    addr.style.display = (addr.style.display == "block")? "none" : "block";                    
                }, false);
            var btnClose = document.getElementById("footer");
            if(btnClose)
                btnClose.getElementsByTagName("img")[0].attachEvent(
                    "onclick", function(ev){ ev.srcElement.parentNode.style.display = "none" });
        }    
        
    // Change images at set intervals
    window.setInterval( function(){
        i = Math.floor(Math.random() * 3);    
        var fadeOut = window.setInterval( function(){
            var iOp = (!arrPageImg[i].style.opacity || arrPageImg[i].style.opacity == "")? 1 : arrPageImg[i].style.opacity;
            iOp -= 0.05;    
            if(iOp <= 0){
                arrPageImg[i].style.opacity = iOp;
                arrPageImg[i].style.filter = "alpha(opacity=" + (iOp * 100) + ")"
                window.clearInterval(fadeOut);
                SelectNewImage(i);
                var fadeIn = window.setInterval( function(){       
                    iOp = 1 * arrPageImg[i].style.opacity;
                    iOp += 0.05;
                    if(iOp >= 1){
                        arrPageImg[i].style.opacity = iOp;
                        arrPageImg[i].style.filter = "alpha(opacity=" + (iOp * 100) + ")"
                        window.clearInterval(fadeIn);
                    } else {
                        arrPageImg[i].style.opacity = iOp;
                        arrPageImg[i].style.filter = "alpha(opacity=" + (iOp * 100) + ")"
                    }
                }, 40)
            } else {
                arrPageImg[i].style.opacity = iOp;
                arrPageImg[i].style.filter = "alpha(opacity=" + (iOp * 100) + ")";
            }
        }, 40);
    }, 7500);
}

/* Selects a new image taking into account which ones are already visible */
function SelectNewImage(forNr){
    var iNr;
    do { iNr = Math.floor(Math.random() * iNumberOfImages);
    } while(iNr == iImgNr[0] || iNr == iImgNr[1] || iNr == iImgNr[2]);
    iImgNr[forNr] = iNr;
    arrPageImg[forNr].src = arrSourceImg[iNr].src;
}