var imgTransitionSpeed = 500;   // Fade Duration measured (in ms)
var imgShownLength = 3000;      // Image shown length (in ms)
var timerValue = 30;            // Timer interval (in ms)

var imgOpacity;                 // Image Opacity value
var deltaOpacity;               // Calculated Opacity transition for images
var imgInterval;                // Interval Container

var currentImage;               // Current Image Pointer

function startSlideShow() {
    imgOpacity = 100;
    deltaOpacity = imgOpacity / imgTransitionSpeed * timerValue;
    currentImage = 0;
    
    $get('galleryTop').style.backgroundImage = 'url(' + galleryList[currentImage] + ')';
    currentImage += 1;
    if(currentImage == galleryList.length) currentImage = 0;
    $get('galleryBottom').style.backgroundImage = 'url(' + galleryList[currentImage] + ')';

    setTimeout('startFade()', imgShownLength);
}

function startFade() {
    imgInterval = setInterval('fadeImage()', timerValue);
}

function fadeImage() {
    imgOpacity -= deltaOpacity;
    $get('galleryTop').style.opacity = imgOpacity/100;
	$get('galleryTop').style.filter = 'alpha(opacity=' + imgOpacity + ')';
    if(imgOpacity <= 0) {
        clearInterval(imgInterval);

        $get('galleryTop').style.backgroundImage = 'url(' + galleryList[currentImage] + ')';
        imgOpacity = 100;
        $get('galleryTop').style.opacity = 1;
	    $get('galleryTop').style.filter = 'alpha(opacity=100)';
        
        currentImage += 1;
        if(currentImage == galleryList.length) currentImage = 0;
        $get('galleryBottom').style.backgroundImage = 'url(' + galleryList[currentImage] + ')';

        setTimeout('startFade()', imgShownLength);
    }
}