var DetailsContainer = document.getElementById("DIV_ImageDetailsContainer");
var DIV_Photo = document.getElementById("DIV_Photo");
var Image = document.getElementById("IMG_Image");
var ImageLink = document.getElementById("IMG_Image_Link");
var SPAN_ImageTitle = document.getElementById("SPAN_Title");
var SPAN_ImageDescr = document.getElementById("SPAN_Descr");
var DIV_ImageCredits = document.getElementById("DIV_ImageCredits");

var PhotoHolder = document.getElementById("DIV_Photos");
var LeftScrollButton = document.getElementById('IMG_ScrollLeft');
var RightScrollButton = document.getElementById('IMG_ScrollRight');

var PositionLeft = 0;
var PhotoHolderWidth = PhotoHolder.offsetWidth;
var SizerWidth = document.getElementById("DIV_Sizer").offsetWidth;
var ScrollRightTimer;
var ScrollLeftTimer;

//Determine if scrolling is necessary
function DetermineScroll(){
    if(PhotoHolderWidth < SizerWidth){
        RightScrollButton.className='Hidden';
    }
}
DetermineScroll();

//Scrolls throught the photos Right
function scroll_Right(hover){
    if (hover){
        PositionLeft -= 5;
        if (PositionLeft > -(PhotoHolderWidth - SizerWidth)){
            PhotoHolder.style.marginLeft = PositionLeft + 'px';
            timeoutScrollRightTimer();
            LeftScrollButton.className='IMG_ScrollLeft';
        }else{
            RightScrollButton.className='Hidden';
            clearTimeout(ScrollRightTimer);
        }
    }else{
        clearTimeout(ScrollRightTimer);
    }
}

function timeoutScrollRightTimer(){
    ScrollRightTimer = setTimeout(function(){scroll_Right(true)}, '3');
}

//Scrolls throught the photos Left
function scroll_Left(hover){
    if (hover){
        PositionLeft += 5;
        if (PositionLeft < 3){
            PhotoHolder.style.marginLeft = PositionLeft + 'px';
            timeoutScrollLeftTimer();
            RightScrollButton.className='IMG_ScrollRight';
        }else{
            PhotoHolder.style.marginLeft = '0px';
            PositionLeft = 0;
            LeftScrollButton.className='Hidden';
            clearTimeout(ScrollLeftTimer);
        }
    }else{
        clearTimeout(ScrollLeftTimer);
    }
}

function timeoutScrollLeftTimer(){
    ScrollLeftTimer = setTimeout(function(){scroll_Left(true)}, '3');
}    
       
//Hides the Photo Title and Description
function hidePhotoDescr(){
    DetailsContainer.className = "Hidden";
}       
       
//Switches the Large Photo       
function switchPhoto(id){
    DIV_Photo.className = 'DIV_MainPhotoDisplay';
    Image.src = ImageAddress[id];
    ImageLink.href = LargeImageAddress[id];
    Image.className = 'IMG_LargeThumb';
    Image.onload = function(){displayPhotoDetails(id)};
}

//If a photo has a title or a description it is Displayed
function displayPhotoDetails(id){            
        
    PhotoDescr = ImageDescr[id];
    PhotoCredits = ImageCredits[id];

    document.getElementById("SPAN_Descr").innerHTML = "";
    
    if(PhotoCredits.length > 0){
        DIV_ImageCredits.innerHTML = "image credit: " + PhotoCredits;
        DIV_ImageCredits.className = "DIV_ImageCredits";
    }else{
        DIV_ImageCredits.className = "Hidden";
    }
    if(PhotoDescr.length > 0){
        SPAN_ImageDescr.innerHTML += PhotoDescr;
        DetailsContainer.className = "DIV_ImgDetCont Invisible"; 
        positionDetails(); 
        DetailsContainer.className = "DIV_ImgDetCont Visible";
                        
    }else{
        DetailsContainer.className = "Hidden";
    }
}       
        
//positions the photo details over the image
function positionDetails(){
    target = Image;

    DetailsContainer.style.width = (target.offsetWidth - 6) + "px";
    imageXpos = 4;
    imageYpos = -1;
    imageHeight = target.offsetHeight;
    
    for(i = 0; target.offsetParent != null; i++){
        imageXpos += target.offsetLeft;
        imageYpos += target.offsetTop;
        target = target.offsetParent;
    }
    
    DetailsContainer.style.top = imageYpos + imageHeight - (DetailsContainer.offsetHeight + 1) + "px";
    DetailsContainer.style.left = imageXpos + "px";         
}