var lastImage = 0;

function updateSampleImage() {

    // Feel free to change these two variables to suit your needs
    var secondsBetweenImages = 8; // (Including the nearly one second transition)
	var lastImageNumber = 34; // The number of the last image in the samples folder (ex: image042.jpg)

    // Get access to the image box
    var sampleImageBox = document.getElementById( "sample_image_box" );


    // If the image box couldn't be found, just quit
    if( !sampleImageBox ) return;

    var nextImage = lastImage == 0 ? Math.floor(Math.random()*lastImageNumber)+1 : (lastImage % lastImageNumber)+1;
    var pendingImage = (nextImage % lastImageNumber)+1;

    lastImage = nextImage;

    nextImage = "000" + nextImage;
    nextImage = nextImage.substr( nextImage.length - 3 );

    pendingImage = "000" + pendingImage;
    pendingImage = pendingImage.substr( pendingImage.length - 3 );

    var preLoad = new Image();
    preLoad.src = "images/samples/image" + pendingImage + ".jpg";

    // Fade out the old image, replace it and fade the new image in
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=90)"; box.style.opacity = ".9"; }, 50 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=80)"; box.style.opacity = ".8"; }, 100 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=70)"; box.style.opacity = ".7"; }, 150 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=60)"; box.style.opacity = ".6"; }, 200 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=50)"; box.style.opacity = ".5"; }, 250 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=40)"; box.style.opacity = ".4"; }, 300 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=30)"; box.style.opacity = ".3"; }, 350 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=20)"; box.style.opacity = ".2"; }, 400 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=10)"; box.style.opacity = ".1"; }, 450 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=0)";  box.style.opacity = "0"; },  500 );

    setTimeout( new Function( "document.getElementById( 'sample_image_box' ).innerHTML = '<img src=\"images/samples/image" + nextImage + ".jpg\"/>'" ), 755 );

    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=10)"; box.style.opacity = ".1"; }, 760 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=20)"; box.style.opacity = ".2"; }, 810 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=30)"; box.style.opacity = ".3"; }, 860 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=40)"; box.style.opacity = ".4"; }, 910 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=50)"; box.style.opacity = ".5"; }, 960 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=60)"; box.style.opacity = ".6"; }, 1010 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=70)"; box.style.opacity = ".7"; }, 1060 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=80)"; box.style.opacity = ".8"; }, 1110 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=90)"; box.style.opacity = ".9"; }, 1160 );
    setTimeout( function () { var box = document.getElementById( "sample_image_box" ); box.style.filter = "alpha(opacity=100)"; box.style.opacity = "1"; }, 1210 );

    // After a certain amount of time, do it all again
    setTimeout( new Function( "updateSampleImage()" ), secondsBetweenImages*1000 );
}