$(function()
{
	var totalImages = $('#slideshow').find('.images').length;
	
    if (totalImages > '1')
    {
	
        $('.images[rel="inactive"]').hide();

        var delay = $('#timer').text();

        delay += '000';

        var id = setInterval( "slideSwitch()", parseInt(delay) );

        // bind function for stopping the interval on mouseover
        $('.images').bind("mouseover", function ()
        {
            clearTimeout(id);
        });

        // bind function for starting the interval on mouseout
        $('.images').bind("mouseout", function ()
        {
            id = setInterval( "slideSwitch()", parseInt(delay) );
        });
    }

    // bind function for showing the description
    //$('.images .left').bind("mouseover", function()
    $('.images .left').bind("mouseenter", function()
    {
        $('.left .picture').css( "display", "none" );
        $('.left .description').css( "display", "block" );
    });


    // bind function for showing the picture
    
    //$('.images .left').bind("mouseout", function()
    $('.images .left').bind("mouseleave", function()
    {
        $('.left .description').css( "display", "none" );
        $('.left .picture').css( "display", "block" );
    });
    

    // bind function for showing the description
    //$('.images .right').bind("mouseover", function()
    $('.images .right').bind("mouseenter", function()
    {
        $('.right .picture').css( "display", "none" );
        $('.right .description').css( "display", "block" );
    });

    // bind function for showing the picture
    //$('.images .right').bind("mouseout", function()
    $('.images .right').bind("mouseleave", function()
    {
        $('.right .description').css( "display", "none" );
        $('.right .picture').css( "display", "block" );
    });

    
    $('.arrowleft').bind("mouseenter", function()
    {
        $('.left .picture').css( "display", "none" );
        $('.left .description').css( "display", "block" );
    });

    $('.arrowleft').bind("mouseleave", function()
    {
        $('.left .description').css( "display", "none" );
        $('.left .picture').css( "display", "block" );
    });

    
    $('.arrowright').bind("mouseenter", function()
    {
        $('.right .picture').css( "display", "none" );
        $('.right .description').css( "display", "block" );
    });

    $('.arrowright').bind("mouseleave", function()
    {
        $('.right .description').css( "display", "none" );
        $('.right .picture').css( "display", "block" );
    });
    
});



function slideSwitch()
{
    // get active item
    var active = $("div[rel='active']");

    // check if there is a next item
    if ( active.next().html() != null )
    {
        // we have a next item

        var next = active.next();

        active.attr("rel", "inactive");

        next.attr("rel", "active");

        $('.images[rel="inactive"]').hide();
    }
    else 
    {
        // no more items, start over

        active.attr("rel", "inactive");

        $("div[id='firstItem']").attr("rel", "active");

        var next = $("div[id='firstItem']");

        $('.images[rel="inactive"]').hide();
    }

    // fade current item out, fade next item in
    active.fadeOut( 1000, function()
    {
        next.fadeIn( 1000 );
    });
}