// JS Slideshow 1.0
// For CSS 3 Compliant browsers or those supporting opacity


/* VARIABLES */
// Randomize the slideshow
var randomize = true;

// Time in milliseconds to show each image in slideshow
var interval = 10000;

// Time taken in milliseconds to crossfade
var crosstime = 500;

// Number of images in the slideshow
var qty = 20;

// Width of the slideshow
var width = 384;

// Height of the slideshow
var height = 70;

// Path to images. Images must be of the format #.ext where # is an integer. Must end with '/'
var imgdir = "imglib/slideshow/";

// Image extension
var ext = ".jpg"

/* No editing necessary past this point */

var timeout = 20;

var IMG_FORE = 0;
var IMG_BACK = 1;

var isRunning = false;
var currentFore = 1;
var currentBack = 2;

var opacity = 1;
var deltaOp = (1 / (crosstime / timeout));


function preload_ss() {
    //ptc("Preloading Images...");
    var pic = new Array();
    for (var i = 1; i < qty + 1; i++) {
        pic[i] = new Image(width, height);
        pic[i].src = imgdir + i + ext;
    }
}

/* 
 * Initializes the slideshow.
 */
function startSlideshow(customimgdir) {
    //ptc("Starting....");
    if (customimgdir !== undefined) {
        imgdir = customimgdir;
    }
    preload_ss();
    isRunning = true;

    //ptc("Applying initial configuration...");

    if (randomize) {
        currentFore = Math.floor(Math.random() * qty + 1);
        currentBack = Math.floor(Math.random() * qty + 1);
    }

    document.getElementById("ss_background").style.width = width + "px";
    document.getElementById("ss_background").style.height = height + "px";
    document.getElementById("ss_foreground").style.width = width + "px";
    document.getElementById("ss_foreground").style.height = height + "px";
    document.getElementById("ss_foreground").style.backgroundImage = "url('" + imgdir + currentFore + ext + "')";
    document.getElementById("ss_background").style.backgroundImage = "url('" + imgdir + currentBack + ext + "')";
    document.getElementById("ss_foreground").style.backgroundRepeat = "no-repeat";
    document.getElementById("ss_background").style.backgroundRepeat = "no-repeat";
    document.getElementById("ss_foreground").style.backgroundPosition = "center center";
    document.getElementById("ss_background").style.backgroundPosition = "center center";
    //ptc("Fading...");
    //ptc("deltaop: " + deltaOp);
    y = setTimeout("fade_ss()", interval);
}

/* 
* Stops the slideshow.
*/
function stopSlideshow() {
    //ptc("Stopping...");
    isRunning = false;
    currentFore = 1;
    currentBack = 2;
    opacity = 1;
}

/* 
* Utilizes css opacity to fade images. A foreground image's transparency is decreased
* until it reaches zero, after which it loads the next slide.
*/
function fade_ss() {
    if (opacity <= 1 && opacity >= 0) {
        opacity -= deltaOp;
        document.getElementById("ss_foreground").style.opacity = opacity;
        document.getElementById("ss_foreground").style.filter = "alpha(opacity=" + (opacity * 100) + ")";
        if (isRunning) {
            var t = setTimeout("fade_ss()", timeout)
        }
    } else {
        clearTimeout(t);
        if (opacity > 1) {
            opacity = 1;
        }
        if (opacity < 0) {
            opacity = 0;
        }
        nextSlide();
    }
}

/* 
* Resets opacity and loads new images, then starts next fade.
*/
function nextSlide() {
    //ptc("Assembling next image...");
    currentFore = currentBack;
    opacity = 1;
    if (randomize) {
        currentBack = Math.floor(Math.random() * qty + 1);
    } else {
        if (currentBack < qty) {
            currentBack += 1;
        } else {
            currentBack = 1;
        }
    }
    document.getElementById("ss_foreground").style.backgroundImage = "url('" + imgdir + currentFore + ext + "')";
    document.getElementById("ss_foreground").style.opacity = opacity;
    document.getElementById("ss_foreground").style.filter = "alpha(opacity=" + (opacity * 100) + ")";
    document.getElementById("ss_background").style.backgroundImage = "url('" + imgdir + currentBack + ext + "')";
    //ptc("Fading...");
    //ptc("deltaop: " + deltaOp);
    if (isRunning) {
        var u = setTimeout("fade_ss()", interval);
    }
}

/* Prints messages */
function ptc(text) {
    document.getElementById("console").innerHTML += text + "<br />";
}