$(document).ready(function() {
    // Show video buttons
    $(".video-controls").removeClass("hidden");
    // Initialize slide position
    var xPos = 0;
    // Get slide width
    var slideWidth = $("div#videoSlide ul li").outerWidth();
    // Get viewport width
    var viewportWidth = (parseInt($("div#videoViewport").width()) / slideWidth);
    // Get number of video slides
    var slides = parseInt($("div#videoSlide ul li").size());
    toggleButtons(xPos, slides);
    // Set overall slide width
    $("div#videoSlide").width(slideWidth * slides);
    // Add click handlers to buttons
    $(".button-left").bind("click", function(e) {
        // If the current slide is greater than 1...
        if (xPos > 0) {
            // Calculate the offset to position the video slide
            var shift = (slideWidth * (xPos - 1)) * -1;
            // Animate
            $("div#videoSlide").animate({ left: shift }, 275);
            // Decrement slide counter
            xPos--;
            // Toggle nav button states
            toggleButtons(xPos, viewportWidth, slides);
        }
        return false;
    });
    $(".button-right").bind("click", function(e) {
        // If the current slide plus the maximum number of displayed slides is less than the number of slides...
        if ((xPos + viewportWidth) < slides) {
            // Calculate the left offset to position the video slide
            var shift = (slideWidth * (xPos + 1)) * -1;
            // Animate
            $("div#videoSlide").animate({ left: shift }, 275);
            // Increment slide counter
            xPos++;
            // Toggle nav button states
            toggleButtons(xPos, viewportWidth, slides);
        }
        return false;
    });
});

// Toggle nav button states
function toggleButtons(xPos, viewportWidth, slides) {
    // If at the first slide...
    if (xPos <= 0) {
        // Change previous slide button to "off" state graphic
        $(".button-left").attr("src", "https://www.srpnet.com/siteassets/graphics/main/LeftArrowOff.png");
    }
    // If not at the first slide, change previous slide button to "on" state graphic
    else { $(".button-left").attr("src", "https://www.srpnet.com/siteassets/graphics/main/LeftArrowOn.png"); }

    // If at the last slide...
    if ((xPos + viewportWidth) >= slides) {
        // Change next slide button to "off" state graphic
        $(".button-right").attr("src", "https://www.srpnet.com/siteassets/graphics/main/RightArrowOff.png");
    }
    // If not at the last slide, change next slide button to "on" state graphic
    else { $(".button-right").attr("src", "https://www.srpnet.com/siteassets/graphics/main/RightArrowOn.png"); }
}