$(document).ready(function(){

    var slides = new Array();
            slides[0] = '01.jpg';
            slides[1] = '02.jpg';
            slides[2] = '03.jpg';
            slides[3] = '04.jpg';
            slides[4] = '05.jpg';
            slides[5] = '06.jpg';
            slides[6] = '07.jpg';
            slides[7] = '08.jpg';
            slides[8] = '09.jpg';
            slides[9] = '10.jpg';
            slides[10] = '11.jpg';
            slides[11] = '12.jpg';

    var i;

    for (i = 0; i < slides.length; i++) {
        var temp = new Image();
        temp.src = '/images/slideshow/' + slides[i];
    }

    setTimeout(function () { slideshow('#slideshow div', 0, slides, 1250, 6000); }, 4000);

});

function slideshow(container, currentPhoto, photoList, fadeTime, waitTime) {
    currentPhoto = currentPhoto > (photoList.length - 1) ? 0 : currentPhoto;
    nextPhoto = currentPhoto + 1;
    nextPhoto = nextPhoto > (photoList.length - 1) ? 0 : nextPhoto;

    var preload = new Image();
    preload.src = '/images/slideshow/' + photoList[nextPhoto];

    $(container).children('span.bottom').css('background-image', 'url(\'images/slideshow/' + photoList[nextPhoto] + '\')');
    $(container).children('span.top').css('background-image', 'url(\'images/slideshow/' + photoList[currentPhoto] + '\')');
    $(container).children('span.top').attr('name', photoList[nextPhoto]);

    $(container).children('span.top').fadeOut(fadeTime, function() { 
        $(container).children('span.top').css('background-image', 'url(\'/images/slideshow/' + $(this).attr('name') + '\')');
        $(container).children('span.top').show(); 
    });
    setTimeout(function() {slideshow(container, currentPhoto + 1, photoList, fadeTime, waitTime);}, fadeTime + waitTime);
}