// the currently displayed image
var currentImageIdx = 0;

// the next image to display
var nextImageIdx = 0;

// the index of the image that is currently loading
var loadingImageIdx = 0;

// the element that will fade in the next image
var incomingImage = 0;

var waitingToDisplay = 1;

var inName;
var outName;

// alpha levels
var incomingAlpha = 0;
var outgoingAlpha = 100;

var FADE_STEP = 5;
var FADE_INTERVAL = 10;
var IMAGE_WAIT_TIME = 5000;

var images = new Array();
var files = new Array();

function init()
{
    // start loading the first image - it will be displayed once loaded
    preloadImage(0);
};

function swapImages()
{
    if (images[nextImageIdx] && images[nextImageIdx].loaded)
    {
        waitingToDisplay = 0;

        currentImageIdx = nextImageIdx;
        nextImageIdx = (currentImageIdx + 1) % imagePaths.length;

        incomingImage = (incomingImage + 1) % 2;

        startFade();

        if (!images[nextImageIdx])
        {
            // start getting the next image
            preloadImage(nextImageIdx);
        }
    }
    else
    {
        waitingToDisplay = 1;
    }
}

function preloadImage(idx)
{
    loadingImageIdx = idx;

    files[loadingImageIdx] = galleryPath + "/" + imagePaths[loadingImageIdx];

    // start loading the image
    images[loadingImageIdx] = new Image();
    images[loadingImageIdx].loaded = false;
    images[loadingImageIdx].onload = imageLoaded;
    images[loadingImageIdx].src = files[loadingImageIdx];
}

function imageLoaded()
{
    images[loadingImageIdx].loaded = true;
    
    if (waitingToDisplay)
    {
        // we are waiting to show this image already
        swapImages();
    }
}

function startFade()
{
    var slideElement = document.getElementById(slideContainerId);
    var halfMaxSlideWidth = slideElement.clientWidth / 2;
    var halfMaxSlideHeight = slideElement.clientHeight /2;

    // swap image source
    if (incomingImage == 0)
    {
        document.slide0.src = files[currentImageIdx];
        document.slide0.style.left = halfMaxSlideWidth - (images[currentImageIdx].width / 2);
        document.slide0.style.top = halfMaxSlideHeight - (images[currentImageIdx].height / 2);
    }
    else
    {
        document.slide1.src = files[currentImageIdx];
        document.slide1.style.left = halfMaxSlideWidth - (images[currentImageIdx].width / 2);
        document.slide1.style.top = halfMaxSlideHeight - (images[currentImageIdx].height / 2);
    }

    incomingAlpha = 0;
    outgoingAlpha = 100;

	if (incomingImage == 0)
    {
        inName = "slide0";
        outName = "slide1";
    }
    else
    {
        inName = "slide1";
        outName = "slide0";
    }

    // start fading loop
    crossfade();
}

function crossfade()
{
    incomingAlpha += FADE_STEP;
    outgoingAlpha -= FADE_STEP;

    if (document.all)
    {
        document.getElementsByName(inName)[0].style.filter = "alpha(opacity=" + incomingAlpha + ")";
        document.getElementsByName(outName)[0].style.filter = "alpha(opacity=" + outgoingAlpha + ")";
    }
    else
    {
        document.getElementsByName(inName)[0].style.opacity = incomingAlpha / 100;
        document.getElementsByName(outName)[0].style.opacity = outgoingAlpha / 100;
    }

    if (incomingAlpha < 100)
    {
        setTimeout("crossfade()", FADE_INTERVAL);
    }
    else
    {
        setTimeout("swapImages()", IMAGE_WAIT_TIME);
    }
}