var slideshowTimeouts = {};

function startSlideshow(containers, delay) {

    $(containers).each(function(idx) {

        //determine the number of slides based on the number of images
        var numSlides = $(this).children('img').length;

        var container = $(this); //grab a handle for use down below in a callback function

        //create the div for housing the navigation and description for each picture
        $(this).append('<div />');

        //construct the ordered list of links for each image
        var list = $('<ul />');
        for (var i = 1; i <= numSlides; i++) {
            list.append($('<li>'));
            list.find('li:last').append($('<a>', { href: '#', rel: i, click: function() { selectSlide(container.attr('id'), $(this).attr('rel'), delay); return false; } }));
        }

        //append the image links and description paragraph to the area
        $(this).find('div').append(list);
        $(this).find('div').append($('<p />'));

        //hide the images and move them back to their actual spot
        $(this).find('img').hide().css({ top: "0px", left: "0px" });

        //initialize the timeouts container for this item
        slideshowTimeouts[container.attr('id')] = Array();

        //select the first slide
        selectSlide(container, 1, delay);

    });

}

function selectSlide(container, slideNum, delay) {

    //make sure there's a delay set; otherwise default it
    if (isNaN(parseInt(delay))) delay = 5000;

    //make sure the container is a jquery object; if it isn't, assume the var is a string of the id of the object and select it
    container = container instanceof jQuery ? container : $('#' + container);

    //clear out all timeouts pertaining to this slideshow
    while (slideshowTimeouts[container.attr('id')].length > 0) clearTimeout(slideshowTimeouts[container.attr('id')].pop());

    //get rid of the "active" class for all links
    $(container).find('li a').removeClass();

    //determine the right link to select as "active"
    $(container).find('li:nth-child(' + slideNum + ') a').addClass('active');

    //clear out the description paragraph and then fill it with the right description
    $(container).find('div p').fadeOut('fast', function() { $(this).empty(); $(this).append($(container).find('img:nth-child(' + slideNum + ')').attr('alt')); $(this).fadeIn('fast') });

    //show the corresponding picture
    $(container).find('img:visible').hide();
    $(container).find('img:nth-child(' + slideNum + ')').fadeIn('slow');

    //determine the next slide number, starting back at 1 if the max is reached
    var nextSlide = (slideNum % $(container).find('img').length) + 1;

    //start the timer to call the next iteration of this function
    if (delay > 0) var timeoutId = setTimeout('selectSlide("' + container.attr('id') + '", ' + nextSlide + ', ' + delay + ');', delay);

    //add the new timeout to the timeouts array
    slideshowTimeouts[container.attr('id')].push(timeoutId);

}