$(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 * -400
        }, 400, 'swing', function () {
            // hide / show the arrows depending on which frame it's on
            if (currSlide == 0) $slidePrevNav.hide();
            else $slidePrevNav.show();

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

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

        // animate the navigation indicator
        $('#active-nav-item').animate({
            left: (currSlide * 158.5)-10
        }, 400, 'swing');
    }

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

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#mainslideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1,
    $slidePrevNav = $slideshow.find('#slideshow-prev'),
    $slideNextNav = $slideshow.find('#slideshow-next'),
    $activeNavItem = $slideshow.find('#active-nav-item');

    // set navigation click events

    // left arrow
    $('#slideshow-prev').click(function (ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide(currSlide - 1);
    });

    // right arrow
    $('#slideshow-next').click(function (ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide(currSlide + 1);
    });

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

        activeSlideshow = false;

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

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