// JavaScript Document
$(document).ready(function() {
    $activePage = $(".paging a:first").css("z-index", 1).addClass("active");
    $(".image_reel a:first").fadeIn(700);

    switchImage = function() {
      var oldIdImg = $oldPage.attr("rel");
      var activeIdImg = $activePage.attr("rel");
      $oldImg = $(".image_reel a[rel="+(oldIdImg)+"]");
      $oldImg.css("z-index", 0)
      $activeImg = $(".image_reel a[rel="+activeIdImg+"]");
      $activeImg.css("z-index", 1);
      $(".paging a").removeClass("active");
      $activePage.addClass("active");
      $activeImg.fadeIn(700, function() {$oldImg.fadeOut(5);});
    };

   changeActive = function() {
     play = setInterval(function() {
       $oldPage = $activePage;

       $activePage = $activePage.next();
       if($activePage.length===0) {
          $activePage = $(".paging a:first");
       }
       $activePage.addClass("active");
       switchImage()
     }, 4000);
   };

   changeActive();

   $(".paging a").click(function() {
      $oldPage = $activePage;
      $activePage = $(this);
      clearInterval(play);
      switchImage();
      changeActive();
   });

   $(".image_reel a").hover(function() {
      clearInterval(play);
   }, function() {
      changeActive();
   });
});