$(document).ready(function()
{
    // Hide the slideshow images while we get setup
    $('#slider img').css({'opacity':'0'});
    
    // Create the scroller
    $('#slider').append('<div id="scroller"></div>');
    
    // How many images do we have
    var no_of_imgs = $('#slider img').length;
    
    // Add the icons to the scroller
    var i = 1; while(i <= no_of_imgs)
    {
        $('#scroller').append('<div id="'+i+'"></div>'); i++;
    }
});

// Wait for image to load
$(window).load(function()
{
    // Display the first image
    var img = $('#slider img').first();
    img.animate({'opacity':'1'}, 1000);
    img.attr('class', 'current');
    $('#scroller div#1').attr('class', 'current');
    
    // Start playing
    setTimeout(ChangeImg, 6000);
    
    // Setup event handlers for the scroller
    $('#scroller div').click(function()
    {
        // Get the id number
        var id = $(this).attr('id');
        
        // Hide the current image
        $('#slider img.current').animate({'opacity':'0'}, 1000, function()
        {
            $('#slider img.current').attr('class', '');
            
            // Show the new image
            var new_img = $('#slider img').eq((id-1));
            new_img.attr('class', 'current');
            new_img.animate({'opacity':'1'}, 1000, function()
            {
                $('#scroller div.current').attr('class', '');
                $('#scroller div#'+id).attr('class', 'current');
            });
        });
    });
});

function ChangeImg()
{
    // What is the current img number
    var current_no = parseInt($('#scroller div.current').attr('id'));
    
    // What is the next img
    var next_no = current_no + 1;
    if (next_no > 4) next_no = 1;
    
    // Hide the current img
    $('#slider img.current').animate({'opacity':'0'}, 1000, function()
    {
        $('#slider img.current').attr('class', '');
        
        // Show the next img
        var new_img = $('#slider img').eq((next_no-1));
        new_img.attr('class', 'current');
        new_img.animate({'opacity':'1'}, 1000, function()
        {
            $('#scroller div.current').attr('class', '');
            $('#scroller div#'+next_no).attr('class', 'current');
        });
    });
    
    setTimeout(ChangeImg, 6000);
}