$(function() {

    var iid; // create variable for interval
    var count = 0; // set variable for count. The count is the number of articles in the container.

    function doRepeat() {
        if (count <= 2) {
            changeActiveTab(count);
            count++;
        } else {
            count = 0;
        }
    }
    iid = setInterval(doRepeat, 3500); // Start interval

    $("#lg-graduates-home-banner div").eq(0).addClass("visible"); // Set the first item as visible
    $("#lg-graduates-home-banner ul li a").eq(0).addClass("active"); // Set the first link as active

    $("#lg-graduates-home-banner ul li a").mouseover(function() {
        clearInterval(iid); // Pause the rotation
        var currentTab = $("#lg-graduates-home-banner ul li a").index(this); // get the index of the active link
        changeActiveTab(currentTab, this); // pass current index to changeActiveTab function
    });
    $("#lg-graduates-home-banner ul li a").mouseout(function() {
        count = $("#lg-graduates-home-banner ul li a").index(this); // get the index of the active link
        iid = setInterval(doRepeat, 3500); // re-start the index
    });

    function changeActiveTab(activeIndex) {
        // Remove active-link class from all links
        $("#lg-graduates-home-banner ul li a").removeClass("active");
        // Remove visible class from all containers making all content invisible
        $("#lg-graduates-home-banner div").removeClass("visible");

        // Add active-link class to the selected link
        $("#lg-graduates-home-banner ul li a").eq(activeIndex).addClass("active");
        // Add visible class to the selected content
        $("#lg-graduates-home-banner div").eq(activeIndex).addClass("visible");
    }
});