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

 
 $(document).ready(function(){
     
      
     $("#banner a").bind("mouseenter",function(){
      $('#slideshow').cycle('pause');
      var name = $(this).html();
      
      $("#banner a").removeClass('hover');
      $(this).addClass('hover');
    }).bind("mouseleave",function(){
      $('#slideshow').cycle('resume',true);
      
    });
    
        
    $('#slideshow').cycle({ 
    fx: 'fade',
    timeout: 6000, 
    delay: 2000,
    before:  onBefore, 
    after:   onAfter,
    
    pager:  '#nav', 
    pagerEvent: 'mouseover', 
    pauseOnPagerHover: true,
    pagerAnchorBuilder: function(idx, slide) { 
        return '<a>'+ slide.alt + '</a>'; 
    } 
    });
 });