var nextImage = 1;
var currentImage = 0;
var slideshowPaused = false;
var slideshowFading = false;
var captionParagraph = null;
var slideshowTimer = null;
var slideshowSelectorTitle = null;
var slideshowSelectorList = null;
var selectorBox;
var slideshowChangeEvents = null;
var addSlideshowChangeEvent = function(event) {
    if (typeof (slideshowChangeEvents) == 'function') {
        var oldEvents = slideshowChangeEvents;
        slideshowChangeEvents = function (image_index) {
            oldEvents(image_index);
            event(image_index);
        }
    }
    else
        slideshowChangeEvents = event;
}

function clearTimer() {
    if (slideshowTimer != null) {
        window.clearTimeout(slideshowTimer);
        slideshowTimer = null;
    }
}

function setSlideshowImage(imageIndex) {
    var el = document.getElementById(imageContainer);
    var targetImage = null;
    for (var i = 0; i < images.length; i++) {
        var t = el.childNodes[i];
        if (i == imageIndex) {
            t.style.visibility = 'visible';
            targetImage = t;
        }
        else {
            t.style.visibility = 'hidden';
        }
    }
    targetImage.src = images[imageIndex];
    if (targetImage.nextSibling && targetImage.nextSibling.nodeName.toUpperCase() == 'IMG') {
        targetImage.nextSibling.src = images[imageIndex + 1];
    }
    currentImage = imageIndex;
    slideshowFading = false;
    if (showSlideshowCaptions) {
        captionParagraph.innerHTML = imageCaptions[imageIndex];
    }

    clearTimer();
    slideshowTimer = window.setTimeout(startFading, imageTimeout);
}

function pageLoad() {

    var el = document.getElementById(imageContainer);
    while (el.firstChild) { el.removeChild(el.firstChild); }

    for(var i = 0; i < images.length; i++) {
        // only load the first two images
        var currentImageSrc = (i <= 1) ? images[i] : ''
        var t = document.createElement('IMG');
        t.src = currentImageSrc;
        t.style.position = 'absolute';
        t.style.visibility = 'hidden';
        el.appendChild(t);
    }
    if (showSlideshowButtons) {

        var btnBox = document.createElement('DIV');
        btnBox.id = 'slideshow_button_container';
        btnBox.style.position = 'absolute';
        btnBox.style.zIndex = 900;

        var playButton = createSlideshowButton('pause', function () { toggleSlideshowPause(); });
        var backButton = createSlideshowButton('back', function () { slideshowBack(); });
        var forwardButton = createSlideshowButton('forward', function () { slideshowForward(); });

        btnBox.appendChild(backButton);
        btnBox.appendChild(playButton);
        btnBox.appendChild(forwardButton);

        el.appendChild(btnBox);
    }
    if (showSlideshowCaptions) {
        var captionBox = document.createElement('DIV');
        captionBox.id = 'slideshow_caption_container';
        captionBox.style.position = 'absolute';
        captionBox.style.zIndex = 910;
        
        captionParagraph = document.createElement('P');
        captionParagraph.innerHTML = imageCaptions[0];
        
        captionBox.appendChild(captionParagraph);
        el.appendChild(captionBox);
    }
    if (showSlideshowSelector) {
        selectorBox = document.createElement('DIV');
        selectorBox.id = 'slideshow_selector_container';
        selectorBox.onmouseover = function () { slideshow_selector_visible(true); };
        selectorBox.onmouseout = function () { setTimeout('slideshow_selector_hide()', 400); };
        selectorBox.style.position = 'absolute';
        selectorBox.style.zIndex = 920;
        
        slideshowSelectorTitle = document.createElement('P');
        slideshowSelectorTitle.innerHTML = 'Select image';
        slideshowSelectorTitle.style.cursor = 'pointer';
        
        slideshowSelectorList = document.createElement('UL');
        slideshowSelectorList.id = 'slideshow_selector_list';
        slideshowSelectorList.style.display = 'none';
        for (var i = 0; i < images.length; i++) {
            var link = createSlideshowSelectorLink(i);
            slideshowSelectorList.appendChild(link);
        }
        selectorBox.appendChild(slideshowSelectorTitle);
        selectorBox.appendChild(slideshowSelectorList);
        el.appendChild(selectorBox);
    }
    
    el.firstChild.style.visibility = 'visible';

    clearTimer();
    slideshowTimer = window.setTimeout(startFading, imageTimeout);

}

function slideshow_selector_hide() {
    slideshow_selector_visible(false);
}

var visibilityCounter = 0;
function slideshow_selector_visible(makeVisible) {
    if (makeVisible) {
        visibilityCounter++;
        if (visibilityCounter > 0) {
            slideshowSelectorList.style.display = 'block';
            slideshowSelectorTitle.style.display = 'none';
            selectorBox.style.width = '100%';
        }
    }
    else {
        visibilityCounter--;
        if (visibilityCounter == 0) {
            slideshowSelectorList.style.display = 'none';
            slideshowSelectorTitle.style.display = 'block';
            selectorBox.style.width = 'auto';
        }
    }
}

function createSlideshowSelectorLink(imageIndex) {
    var linkItem = document.createElement('LI');
    
    var link = document.createElement('A');
    link.href = 'javascript:void(0);';
    link.onclick = function () { setSlideshowImage(imageIndex); };
    link.innerHTML = imageCaptions[imageIndex];
    
    if (showSlideshowThumbnails) {
        var thumbnail = document.createElement('IMG');
        thumbnail.src = imageThumbnails[imageIndex];
        
        linkItem.appendChild(thumbnail);
    }
    linkItem.appendChild(link);
    
    return linkItem;
}

var movingBackward = false;
var movingForward = false;
function slideshowBack() {
    movingBackward = true;
    startFading(false);
    movingBackward = false;
}
function slideshowForward() {
    movingForward = true;
    startFading(true);
    movingForward = false;
}

function createSlideshowButton(buttonRef, onclickFunction) {

        var btnLink = document.createElement('A');
        btnLink.id = 'slideshow_button_link_' + buttonRef;
        btnLink.href = 'javascript:void(0);';
        btnLink.onclick = function () { onclickFunction(); };
        
        var btn = document.createElement('IMG');
        btn.id = 'slideshow_button_image_' + buttonRef;
        btn.src = '/images/' + buttonRef + '-button.png';
        btn.style.width = '24px';
        btn.style.height = '24px';
        btnLink.appendChild(btn);
        
        return btnLink;
}

function toggleSlideshowPause() {

    if (slideshowFading) {
        return;
    }

    slideshowPaused = !slideshowPaused;

    var btn = document.getElementById('slideshow_button_image_pause');
    if (slideshowPaused) {
        btn.src = '/images/play-button.png';
    }
    else if (!slideshowFading) {
        btn.src = '/images/pause-button.png';
        clearTimer();
        slideshowTimer = window.setTimeout(startFading, 50);
    }
}

function startFading(forward) {

    if (typeof(forward)=='undefined') {
        forward = true;
    }

    if (slideshowPaused && !movingForward && !movingBackward) {
        return;
    }
    if (slideshowFading) {
        return;
    }

    if (forward) {
        nextImage = (currentImage < images.length - 1) ? currentImage + 1 : 0;
    }
    else {
        nextImage = (currentImage > 0) ? currentImage - 1 : images.length - 1;
    }
    
    slideshowFading = true;

    if (showSlideshowCaptions) {
        captionParagraph.innerHTML = imageCaptions[nextImage];
    }
    
    var el = document.getElementById(imageContainer).childNodes[nextImage];

    // start loading the image after
    if (el.nextSibling && el.nextSibling.nodeName.toUpperCase() == 'IMG') {
        el.nextSibling.src = images[nextImage + 1];
    }

    if (el.src != images[nextImage]) {
        el.src = images[nextImage];
    }
    el.style.visibility = 'visible';
    el.style.zIndex = 2;
    setOpacity(el, 0);
    fadeImage(el,0,forward);
    
    currentImage = nextImage;
    
    if (typeof (slideshowChangeEvents) == 'function') {
        slideshowChangeEvents(currentImage);
    }
}

function fadeImage(el, currentOpacity, forward) {

    currentOpacity += 5;

    if (currentOpacity > 100) {
        setOpacity(el, 100);
        var prevEl;
        if (forward) {
            prevEl = el.previousSibling ? el.previousSibling : el.parentNode.childNodes[images.length - 1];
        }
        else {
            prevEl = (el.nextSibling && el.nextSibling.nodeName.toUpperCase() == 'IMG') ? el.nextSibling : el.parentNode.childNodes[0];
        }
        prevEl.style.visibility = 'hidden';
        el.style.zIndex = 1;        
        clearTimer();
        slideshowTimer = window.setTimeout(startFading, imageTimeout);
        slideshowFading = false;
    }
    else {
        setOpacity(el, currentOpacity);
        clearTimer();
        slideshowTimer = window.setTimeout(function() { fadeImage(el, currentOpacity, forward); }, 50);
    }

}

addToOnload(pageLoad);