$(document).ready( function()
{  
    $('#slideshow').cycle({
        random: 0,
        timeout: 4000,
        speed: 1500,
        next:            '#nextSlide',     // selector for element to use as click trigger for next slide 
        prev:            '#previousSlide'  // selector for element to use as click trigger for previous slide       
    });
    
    $('#slideshow').mouseover(shownav);
    $('#nextSlide').mouseover(shownav);
    $('#previousSlide').mouseover(shownav);  

    $('#slideshow').mouseout(hidenav);
    $('#nextSlide').mouseout(hidenav);
    $('#previousSlide').mouseout(hidenav);

    var hidenavtimeout = null;

    function shownav()
	{
        if(hidenavtimeout) 
			clearTimeout(hidenavtimeout);

        $('#previousSlide').animate({opacity: .6});
        $('#nextSlide').animate({opacity: .6});

    }    

    function hidenav()
	{
        hidenavtimeout = setTimeout( function()
		{
            $('#previousSlide').animate({opacity: 0});
            $('#nextSlide').animate({opacity: 0});
        }, 100);
    }

    $('#previousSlide').css('opacity', 0);
    $('#nextSlide').css('opacity', 0);
    $('#previousSlide').css('display', 'block');
    $('#nextSlide').css('display', 'block');
});