$(document).ready(function(){
    var totalNumberOfSlides;
    
    $('.slide').css(
        {'position': 'absolute', 'display': 'none'}
    );
    $('#slideshow_container').css('height', '220px');
    $('.slide_content').append('<div class="slide_controls"></div>');
    
    totalNumberOfSlides = $('.slide').size();

    var slideIndex = 0;
    $('.slide').each(function(){
        slideIndex = 1 + $(this).index();
        $(this).attr("id", "slide" + slideIndex );
    });
    //$('.slide_controls').prepend('<img src="/images/arrow_prev.gif" height="10" width="10" />');
    for (var i = 1; i <= totalNumberOfSlides; i++)
    {
        $('.slide_controls').append('<div></div>');
    }
    //$('.slide_controls').append('<img src="/images/arrow_next.gif" height="10" width="10" />');

    $('.slide_controls div').click(function(){
        // alert ($(this).index());
        var clickedNumber = 1 + $(this).index();
        if ($(this).index() != $('.slide:visible').index())
        {
            $('.slide_controls').hide();
            $('.slide:visible:not(:animated)').stop(true, true).fadeOut(400, function(){
                runSlideShow(clickedNumber);
            });
        }
    });
    
    runSlideShow(1);
    
    function runSlideShow (slideNumber)
    {
        $('.slide_controls').hide();
        var slideIndex = slideNumber - 1;
        $('#slide' + slideNumber).fadeIn(400, function(){
            $('.slide_controls').fadeIn(700);
            $('.slide_controls div').eq(slideIndex * totalNumberOfSlides + slideIndex).addClass('active');
        }).delay(20000).fadeOut(400, function() {
            // if we're on the last slide (number 4), start over at number 1
            if (slideNumber == totalNumberOfSlides) {
                runSlideShow(1);
            }
            // otherwise, just move to the next slide
            else {
                slideNumber++;
                runSlideShow(slideNumber);
            }
        });
    }
});