$(document).ready(function() { 

//Set Default State of each portfolio piece 
$(".paging").show(); 
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel. 
var imageWidth = $(".window").width(); 
var imageSum = $(".image_reel img").size(); 
var imageReelWidth = imageWidth * imageSum; 


$(".paging").css({'width' : (imageSum*25)+50});
//Adjust the image reel to its new size 
$(".image_reel").css({'width' : imageReelWidth}); 

//Paging + Slider Function 
rotate = function(){ 
    var triggerID = $active.attr("rel"); //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
    //Slider Animation
    $(".image_reel").animate({left: -image_reelPosition}, 700 );
};

//Rotation + Timing Event
rotateSwitch = function(){ 
    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
    $active = $('.paging a.active').next();
    if ( $active.length === 0) { //If paging reaches the end...
        $active = $('.paging a:first'); //go back to first
    }
    rotate(); //Trigger the paging and slider function
    }, 4000); //Timer speed in milliseconds (3 seconds)
}; 
rotateSwitch(); //Run function on launch

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

//On Click 
$(".paging 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
});
$("img#prev").click(function() {
    $active = $('.pages a.active').prev();
    console.log($active.length);
    if ( $active.length === 0) { //If paging reaches the end...
        $active = $('.pages a:last');}
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor
});
$("img#next").click(function() {
    $active = $('.pages a.active').next();
    console.log($active.length);
    if ( $active.length === 0) { //If paging reaches the end...
        $active = $('.pages a:first');}
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor
});
});