/* Fading in images and syncing them with links */

$(document).ready(function () {

    //configuration
    var waitTime = 5000; //time between fades, in ms
    var fadeTime = 2000; //time for fade, in ms

    //inital variables
    var Images = $("#slideshow img");
    var Links = $("#synclinks a");

    var nImages = Images.length;
    var nLinks = Links.length;

    //if we have less than two images, nothing to do here.
    if (nImages < 2) {
        return;
    }

    //initial properties
    for (i = 0; i < nImages; i++) {
        $(Images[i]).css("opacity", "0").css("z-index", nImages - i);
    }

    //let's get this rolling
    $(Links[0]).addClass("active");
    $(Images[0]).css("opacity", "1");
    var currentObject = 0;

    setInterval(function () {
        
        if (currentObject + 1 < nImages) {

            $(Links).removeClass("active");
            $(Links[currentObject + 1]).addClass("active");
            
            $(Images[currentObject + 1]).css("opacity", "1");
            $(Images[currentObject]).animate({ opacity: 0 }, fadeTime, function () {
                //after animation
            });

            currentObject += 1;
        } else {

            $(Links).removeClass("active");
            $(Links[0]).addClass("active");

            $(Images[0]).animate({ opacity: 1 }, fadeTime, function () {
                $(Images[nImages - 1]).css("opacity", "0");
            });

            currentObject = 0;
        }

    }, waitTime);

});