$(function () {
    function changeSlide(newSlide) {
        // cancel any timeout
        clearTimeout(slideTimeout);

        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if (currSlide > maxSlide) currSlide = 0;
        else if (currSlide < 0) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left: currSlide * -600
        }, 1000, 'swing', function () {
            // hide / show the arrows depending on which frame it's on
            if (currSlide == 0) $slideLeftNav.hide();
            else $slideLeftNav.show();

            if (currSlide == maxSlide) $slideRightNav.hide();
            else $slideRightNav.show();

            // set new timeout if active
            if (activeSlideshow) slideTimeout = setTimeout(nextSlide, 6000);
        });

        // animate the navigation indicator
        $activeNavItem.animate({
            left: currSlide * 75
        }, 400, 'swing');
    }

    function nextSlide() {
        changeSlide(currSlide + 1);
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1,
    $slideLeftNav = $slideshow.find('#slideshow-left'),
    $slideRightNav = $slideshow.find('#slideshow-right'),
    $activeNavItem = $slideshow.find('#active-nav-item');

    // set navigation click events

    // left arrow
    $slideLeftNav.click(function (ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide(currSlide - 1);
    });

    // right arrow
    $slideRightNav.click(function (ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide(currSlide + 1);
    });

    // main navigation
    $slideshow.find('#slideshow-nav a.nav-item').click(function (ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide($(this).index());
    });

    // start the animation
    slideTimeout = setTimeout(nextSlide, 6000);

    // Pauses the slider to let the viewer read the movie details
    $slideReel.mouseover(function () {
        clearTimeout(slideTimeout);
        slideTimeout = setTimeout(nextSlide, 60000);
    });

    // Starts from where slider left off
    $slideReel.mouseout(function () {
        clearTimeout(slideTimeout);
        slideTimeout = setTimeout(nextSlide, 1000);
    });

});