$(document).ready(function() {

    $("#slide-page a:first").addClass("activ");
    $("img.slide-image").css('z-index', '2').fadeOut();
    $("a.slide-link").css('z-index', '2').fadeOut();
    $("img.slide-image:first").css('z-index', '50').fadeIn(1000);
    $("a.slide-link:first").css('z-index', '50').fadeIn(1000);

    rotate = function() {	
      var triggerID = $active.attr("rel") - 1;

      $("#slide-page a").removeClass('activ');
      $(".slide-image").css('z-index', '2').fadeOut(1000);

      $active.addClass('activ');

      $(".slide-image:eq("+triggerID+")").css('z-index', '50').fadeIn(1000);
    };

    //Rotation + Timing Event
    rotateSwitch = function() {		
      play = setInterval(function () { //Set timer - this will repeat itself every 3 seconds
        $active = $('#slide-page a.activ').next();

        if ($active.length === 0) //If paging reaches the end...
        {
          $active = $('#slide-page a:first'); //go back to first
        }

        rotate(); //Trigger the paging and slider function
      }, 5000);
    };

    rotateSwitch(); //Run function on launch

    //On Hover
    $(".slide-image").hover(function() {
      clearInterval(play); //Stop the rotation
    }, function() {
      rotateSwitch(); //Resume rotation
    });

    //On Click
    $("#slide-page a").click(function() {	
      $active = $(this); //Activate the clicked paging
      //Reset Timer
      clearInterval(play); //Stop the rotation
      rotate(); //Trigger rotation immediately
      rotateSwitch(); // Resume rotation
      return false; //Prevent browser jump to link anchor
    });
  });