/**
                 * A home made slider.
                 * @param {Array} imageArray An array containing the image to use in the slider.
                 * @param {Number} imageWidth The width of the image.
                 * @param {Number} animationDuration How fast to animate between images (in milliseconds).
                 * @param {Number} rotationInterval How often to rotate the images (in milliseconds).
                 */
                function slider(imageArray, imageWidth, animationDuration, rotationInterval) {

                    /* Configuration */
                    //var rotationInterval  = 10000; // How often to rotate the images (speed in milliseconds, e.g., 5000 = 5 seconds)

                    //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 imageCount     = imageArray.length;
                    var imageReelWidth = imageWidth * imageCount;


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

                    //Paging + Slider Function
                    var currentDirection, $active, play;

                    $active = $(".paging a:first");

                    currentDirection = "ltr"; // left-to-right

                    //Load the first image only.
                    loadImage(0,0);

                    function loadImage(from, to) {
                        $(".image_reel img").each(function(index){
                            if(index >= from && index <= to && $(this).attr("src") == "") {
                                $(this).attr("src", imageArray[index]);
                            }
                        }
                        );
                    }

                    function rotate() {
                        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
                        }, animationDuration );

                    }

                    function setNextActive() {
                        $active = currentDirection == "ltr" ? $('.paging a.active').next() : $('.paging a.active').prev();
                        //Load the current active slide image
                        loadImage($active.attr("rel") - 1, $active.attr("rel") - 1);
                    }

                    function toggleDirection() {
                        /* Toggle between left-to-right and right-to-left. */
                        currentDirection = currentDirection == "ltr" ? "rtl" : "ltr";
                    }

                    //Rotation + Timing Event
                    function rotateSwitch() {
                        play = setInterval(
                            function(){ //Set timer - this will repeat itself every 3 seconds
                                if(typeof showingVideo != "undefined") {//Avoid animation during video
                                    if(showingVideo) {
                                        return;
                                    }
                                }
                                setNextActive();
                                if ( $active.length === 0) { //If paging reaches the end...
                                     toggleDirection();
                                    setNextActive();
                                }
                                rotate(); //Trigger the paging and slider function
                            },
                            rotationInterval
                        );
                    }

                    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() {
                        //Load all the image between the last active slide image and the current slide active image
                        if(currentDirection == "ltr") {
                            firstImageToLoad = ($active.attr("rel")) > imageCount ? 0 : $active.attr("rel");
                        } else {
                            firstImageToLoad = ($active.attr("rel") - 2) < 0 ? imageCount : ($active.attr("rel") - 2);
                        }
                        loadImage(firstImageToLoad, $(this).attr("rel") - 1);

                        $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
                    });
                }