$(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;

    //adjust the image reel to its new size
    $(".image_reel").css({ 'width': imagereelwidth });

    //paging + slider function
    rotate = function() {
        var triggerid = $active.attr("rel") - 1; //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
        }, 500);

    };

    //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
        }, 5000); //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
    });

});