//GLOBAL VARIABLES
var carouselIndex = 1;
var scrollIntervalID;

function incrementCarousel(){
        
    //DISPLAY NEXT IMAGE
    if (carouselIndex == 5) {

        displayImage(1);

        //SET INDEX
        carouselIndex = 1;
    }
    else {

        //INCREMENT INDEX
        carouselIndex += 1;

        displayImage(carouselIndex);
        
        
    }
    
}

function displayImage(index) {
    
    $(".carouselImages li:nth-child(" + index + ")").fadeIn(300);

    $(".carouselImages li").not(".carouselImages li:nth-child(" + index + ")").each(function () {
        $(this).fadeOut(300);
    });

    $(".carouselNumbers li").each(function () {
        $(this).css("background-color", "#E7E7E9");
    });

    $("div.carouselNumbers li:nth-child(" + index + ")").css("background-color", "#949599");

}

$(document).ready(function () {
    
    //DISPLAY IMAGE 1 ON PAGE LOAD
    $(".carouselImages li:nth-child(1)").css("display", "block");
    $(".carouselNumbers li:nth-child(1)").css("background-color", "#949599");

    //START TIMER TO SWITCH IMAGES EVERY FIVE SECONDS
    scrollIntervalID = setInterval(incrementCarousel, 8000);
    
    //SET CLICK EVENT TO SWITCH IMAGES
    $("div.carouselNumbers li").click(function () {

        //STOP AUTOMATIC SCROLLING
        clearInterval(scrollIntervalID);
        
        //DISPLAY SELECTED IMAGE        
        displayImage($(this).index() + 1);
    });


});