$(document).ready(function() {
  //Show the paging and activate its first link
  $(".slider_pager").show();
  $(".slider_pager a:first").addClass("active");

  var imageWidth = $(".slider_window").width();
  var imageSum = $(".slider_reel img").size();
  var imageReelWidth = imageWidth * imageSum;

  //Adjust the image reel to its new size
  $(".slider_reel").css({'width' : imageReelWidth});

  //Paging  and Slider Function
  rotate = function(){
    var triggerID = $active.attr("rel") - 1;
    var image_reelPosition = triggerID * imageWidth;

    $(".slider_pager a").removeClass('active');
    $active.addClass('active');

    //Slider Animation
    $(".slider_reel").animate({
      left: -image_reelPosition
    }, 800 );
  };

  //Rotation  and Timing Event
  rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
      $active = $('.slider_pager a.active').next();
      if ( $active.length === 0) {
        $active = $('.slider_pager a:first');
      }
      rotate();
    }, 5000); //Timer speed in milliseconds (5 seconds)
  };

  rotateSwitch();

  //On Hover
  $(".slider_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
  }, function() {
    rotateSwitch(); //Resume rotation timer
  });

  //On Click
  $(".slider_pager a").click(function() {
    $active = $(this);
    //Reset Timer
    clearInterval(play);
    rotate();
    rotateSwitch();
    return false;
  });
});