var realTarget = null;
var pagefade = null;
var outerContainer = null;
var container = null;
var is_chrome = null;
var list = null;
var controls = null;
var bigimage = null;
var imnum = 0;
var listLength = 0;
var j = 0;
var i = 1;

window.onload = function(){

    pagefade = document.getElementById('pagefade');
    outerContainer = document.getElementById('outer-container');
    container = document.getElementById('overlay');
    is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
    
    
    list = document.getElementsByTagName("img");
    listLength = list.length;
    
    
    
    for (i = 1; i < listLength; i++) {
    
        if (list[i].className == 'show-image') {
            j++;
        }
    }
    
    document.body.onclick = detectClick;
}


function detectClick(e){

    realTarget = e ? e.target : window.event.srcElement;
    
    
    if (realTarget.className == 'show-image') {
    
    
        imageNumber(); //determinate which image was clicked
        container.innerHTML = "<div id=\"controls\"><div id=\"previmage\"></div><div id=\"nextimage\"></div>click image to close</div><img src=\"" + (realTarget.parentNode.href) + "\" id=\"big-image\" alt=\"loading\"/>";
        
        controls = document.getElementById('controls');
        bigimage = document.getElementById('big-image');
        
        galleryImage = new Image();
        
        pagefade.style.width = document.documentElement.clientWidth + "px";
        pagefade.style.display = "block";
        
        galleryImage.onload = function(){
        
            showImage();
            
            controls.style.width = galleryImage.width + 20 + "px";
            
        }
        
        galleryImage.src = realTarget.parentNode.href;
        
        
        return false;
        
    }
    
    else 
        if (realTarget.id == 'overlay' || realTarget.id == 'pagefade' || realTarget.id == 'big-image') {
        
            outerContainer.style.display = "none";
            pagefade.style.display = "none";
            container.innerHTML = "none";
            
        //in case image won't load and/or user wants to close  
        
        }
        
        else 
            if (realTarget.id == 'nextimage') {
            
                outerContainer.style.display = "none"; // to make 'Loading' sign visible
                if (imnum >= j) {
                    imnum = 0;
                }
                else {
                    imnum = imnum + 1;
                }
                
                
                bigimage.onload = function(){
                
                    showImage();
                    controls.style.width = bigimage.width + 20 + "px";
                    checkImages();
                    
                }
                
                bigimage.src = list[imnum].parentNode.href;
                
                
                
                
            }
            
            
            else 
                if (realTarget.id == 'previmage') {
                
                    outerContainer.style.display = "none"; // to make 'Loading' sign visible
                    if (imnum <= 0) {
                        imnum = j;
                    }
                    else {
                        imnum = imnum - 1;
                    }
                    
                    
                    bigimage.onload = function(){
                    
                        showImage();
                        controls.style.width = bigimage.width + 20 + "px";
                        checkImages();
                    }
                    
                    bigimage.src = list[imnum].parentNode.href;
                    
                    
                }
    
    
    
}


function showImage(){

    outerContainer.style.width = document.documentElement.clientWidth + "px";
    outerContainer.style.display = "block";
    
    
    if (!is_chrome) {
    
        if (document.documentElement.scrollHeight < document.documentElement.clientHeight) {
            pagefade.style.height = document.documentElement.clientHeight + 30 + "px";
        }
        
        else {
        
            pagefade.style.height = document.documentElement.scrollHeight + "px";
            
        }
    }
    
    else {
    
        if (container.clientHeight < document.documentElement.clientHeight) {
            pagefade.style.height = document.documentElement.clientHeight + 30 + "px";
        }
        else {
        
            pagefade.style.height = container.clientHeight + 50 + "px";
            
        }
    }
    
    checkImages();
    
}


// function for update when resized 

function checkImages(){


    if ((pagefade != null) && (pagefade.style.display == "block")) {
    
        outerContainer.style.width = document.documentElement.clientWidth + "px";
        pagefade.style.width = document.documentElement.clientWidth + "px";
        pagefade.style.height = "0px";
        
        
        
        if (!is_chrome) {
        
            if (document.documentElement.scrollHeight < document.documentElement.clientHeight) {
                pagefade.style.height = document.documentElement.clientHeight + 30 + "px";
            }
            
            else {
            
                pagefade.style.height = document.documentElement.scrollHeight + "px";
                
            }
        }
        
        else {
        
            if (container.clientHeight < document.documentElement.clientHeight) {
                pagefade.style.height = document.documentElement.clientHeight + 30 + "px";
            }
            else {
            
                pagefade.style.height = container.clientHeight + 50 + "px";
                
            }
        }
    }
    
    else {
    }
    
    
}


function imageNumber(){

    imnum = 0;
    
    while (realTarget.src != list[imnum].src) {
        imnum++;
    }
    
}