$(document).ready(function() {
    // Start cycle.
    $("#frames").cycle({
        fx: 'fade', 
        speed: 300, // Speed of the slide transition ( 300 = .3 seconds )
        timeout: 8000, // Time before the slide transitions ( 3000 = 3 seconds )
        after: function(inSlide, outSlide, options) {
            $("#thumbnails a").removeClass("selected");
            $("#thumbnails a." + $(this).attr("id")).addClass("selected");
        }
    });
 
    // Set up click handlers. The cycle plugin can autogenerate nav elements as well, but since these were already created I'll use them instead.
    $("#thumbnails a").each(function(i) {
        $(this).click(function() {
            $("#frames").cycle(i);
            $("#frames").cycle("pause");
        });
    });
});