$(document).ready(function(){
  //This keeps track of the slideshow's current location
  var current_panel = 1;
  //Controlling the duration of animation by variable will simplify changes
  var animation_duration = 3000;
  $.timer(5000, function (timer) {
    //Determine the current location, and transition to next panel
    switch(current_panel){
      case 1:
        $("#slideshow").stop().animate({left: "-550px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
        current_panel = 2;
        break;
      case 2:
        $("#slideshow").stop().animate({left: "0px", top: "-220px"}, {easing: 'easeOutBack', duration: animation_duration});
        current_panel = 3;
        break;
      case 3:
        $("#slideshow").stop().animate({left: "-550px", top: "-220px"}, {easing: 'easeOutBack', duration: animation_duration});
        current_panel = 4;
        break;
      case 4:
        $("#slideshow").stop().animate({left: "0px", top: "-440px"}, {easing: 'easeOutBack', duration: animation_duration});
        current_panel = 5;
        break;
      case 5:
        $("#slideshow").stop().animate({left: "-550px", top: "-440px"}, {easing: 'easeOutBack', duration: animation_duration});
        current_panel = 6;
        break;
      case 6:
        $("#slideshow").stop().animate({left: "0px", top: "-660px"}, {easing: 'easeOutBack', duration: animation_duration});
        current_panel = 7;
        break;
      case 7:
        $("#slideshow").stop().animate({left: "-550px", top: "-660px"}, {easing: 'easeOutBack', duration: animation_duration});
        current_panel = 8;
        break;
      case 8:
        $("#slideshow").stop().animate({left: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
        current_panel = 1;
        break;
      default:
        timer.reset(12000);
        break;
    }
  });
});