$(function() {
            // run the code in the markup!
            $('table pre code').not('#skip,#skip2').each(function() {
                eval($(this).text());
            });

            $('#s4').before('<div id="nav" class="nav">').cycle({
                fx: 'turnDown',
                speed: 'fast',
                timeout: 0,
                pager: '#nav'
            });
            $('#s6').before('<div id="nav" class="nav">').cycle({
                fx: 'turnDown',
                speed: 'fast',
                timeout: 0,
                pager: '#nav'
            });
            $('#s7').cycle({
                fx: 'fade',
                speed: 300,
                timeout: 3000,
                next: '#s3',
                pause: 1
            });
            $('#s8').cycle({
                fx: 'fade',
                speed: 300,
                timeout: 5000,
                next: '#s3',
                pause: 1
            });

        });

        function onBefore() {
            $('#output').html("Scrolling image:<br>" + this.src);
            //window.console.log(  $(this).parent().children().index(this) );
        }
        function onAfter() {
            $('#output').html("Scroll complete for:<br>" + this.src)
        .append('<h3>' + this.alt + '</h3>');
        }