$(function() {
     var interval = setInterval('slideSwitch()', 8000);
     
     $('#next').click(slideSwitch);
     $('#stop').click(function() {clearInterval(interval)});
     $('#play').click(function() {
          clearInterval(interval);
          interval = setInterval('slideSwitch()', 8000);
     });
     
     $('#jumpto1').click(function() {
          clearInterval(interval);
          interval = setInterval('slideSwitch()', 8000);
          jumpTo('#1');
     });
     $('#jumpto2').click(function() {
          clearInterval(interval);
          interval = setInterval('slideSwitch()', 8000);
          jumpTo('#2');
     });
     $('#jumpto3').click(function() {
          clearInterval(interval);
          interval = setInterval('slideSwitch()', 8000);
          jumpTo('#3');
     });

     $('#accordion').accordion({
          header:'span',
          collapsible: true,
          active: false,
          clearStyle: true,
          alwaysOpen: false
     });
});

function jumpTo(box) {
     var $current = $('#centerbox .active');
     if($current.length == 0) $current = $('#centerbox :last');

     var $next =  $(box);

     $current.addClass('last-active');

     $next.css({opacity: 0.0})
      .addClass('active')
      .animate({'opacity': '1.0'}, 1000, function() {
          $current.removeClass('active last-active');
     });
}

function slideSwitch() {
   var $current = $('#centerbox .active');

   if($current.length == 0) $current = $('#centerbox :last');

   var $next =  $current.next().length ? $current.next() : $('#centerbox :first');

   $current.addClass('last-active');

   $next.css({opacity: 0.0})
      .addClass('active')
      .animate({'opacity': '1.0'}, 1000, function() {
          $current.removeClass('active last-active');
      });
}