$(document).ready(function() {
  //Activate First Link
  $(".imagenav a:first").addClass("active");
  //width of a single image
  var imgwidth = $(".imageholder").width();
  //Total number of images
  var totalimg = $(".imgslider div").size();
  //Total width of all images
  var allimgwidth = imgwidth * totalimg;
  //Imgslider to new size which we got in above step
  $(".imgslider").css({'width' : allimgwidth});

  //Now right a new function for slide and slide navigation
  rotate = function(){
    //Number of times we need to slide
    var slideid = $active.attr("rel") - 1;
    //Set the distance which image needs to slide
    var slidedistance = slideid * imgwidth;
    //Remove active class
    $(".imagenav a").removeClass('active');
    //Add Active Class
    $active.addClass('active');
    //Slider Animation
    $(".imgslider").animate({
          left: -slidedistance
      }, 500 );
  }; 
 
  //Set Time for Rotation of slide
  rotation = function(){
    play = setInterval(function(){
      //Next slide nav
      $active = $('.imagenav a.active').next();
      if ( $active.length === 0) {
        //Move to first slide nav
        $active = $('.imagenav a:first');
      }
      rotate();
      //Timer speed 10 seconds
    }, 10000);
  };
  //Run rotation fuction
  rotation();
  $(".imagenav a").click(function() {
    $active = $(this);
    clearInterval(play);
    rotate();
    rotation();
    return false;
}  );
});