var thumbnailCarouselSlideshowSpeed;
var thumbnailCarouselCurrentZindex;
// We should statically set the first image
var thumbnailCarouselActiveContainer;
var thumbnailCarouselCurrentImg;
var thumbnailCarouselAnimating;

function StartCarousel(carouselArray) {
    if (carouselArray != undefined && carouselArray != null) {
        window.thumbnailCarousel = $.parseJSON(carouselArray);
    }

    if (window.thumbnailCarousel == null) {
        $(".dsg_sp_thumbnailCarouselHeader").hide();
        return;
    }
    InitThumbnailCarousel();
    thumbnailCarouselNavigate("next");
    if (window.thumbnailCarousel.length == 1) {
        $(".dsg_sp_thumbnailCarouselNavigationContainer").hide();
        //$(".dsg_sp_thumbnailCarouselNavigationLeftArrow").css({"visibility":"hidden"});
        //$(".dsg_sp_thumbnailCarouselNavigationRightArrow").css({"visibility":"hidden"});
        $("#DSG_ThumbnailImages").hide();
    }
    else {
        //thumbnailCarouselShowImage(
        // Start playing the animation
        interval = setInterval(function () {
            thumbnailCarouselNavigate("next");
        }, thumbnailCarouselSlideshowSpeed);
    }
}
function InitThumbnailCarousel() {
    thumbnailCarouselSlideshowSpeed = 5000;
    thumbnailCarouselCurrentZindex = -1;
    // We should statically set the first image
    thumbnailCarouselActiveContainer = 1;
    thumbnailCarouselCurrentImg = 0;
    thumbnailCarouselAnimating = false;


    $("#lnkPrev").click(function () {
        //stopAnimation();
        thumbnailCarouselNavigate("back");
    });
    $("#lnkNext").click(function () {
        //stopAnimation();
        thumbnailCarouselNavigate("next");
    });
    //$("#DSG_ThumbnailCarouselBulletsInner").empty();
    if (window.thumbnailCarousel == null) {
        return;
    }
    for (var index = 0; index < window.thumbnailCarousel.length; index++) {
        $("<a id='thumbnailCarouselBullet" + index + "' href='javascript:' ></a>").appendTo("#DSG_ThumbnailCarouselBulletsInner span");
        $("<div id='thumbnailDiv" + index + "' class='dsg_sp_thumbnailItem'><a id='thumbnailImage" + index + "' href='javascript:'><img width='80px' height='54' alt='Thumbnail' src='" + window.Environment.UserRecipeImageUrl + window.thumbnailCarousel[index].ImageUrl + "' /></a></div>").appendTo("#DSG_ThumbnailImages");
        var result = index % 4;

        if (result == 0) {
            $("#thumbnailDiv" + index).css("padding-left", "0px");
        }


    }
    $("a[id*='thumbnailCarouselBullet']").each(function (idx) {
        $("#thumbnailCarouselBullet" + idx).click(function () { thumbnailCarouselNavigate(idx); });
    });
    $("a[id*='thumbnailImage']").each(function (idx) {
        $("#thumbnailImage" + idx).click(function () { thumbnailCarouselNavigate(idx); });
    });



}
var thumbnailCarouselNavigate = function (direction) {
    // Check if no animation is running. If it is, prevent the action
    if (thumbnailCarouselAnimating) {
        return;
    }
    if (window.thumbnailCarousel == null) {
        return;
    }

    // Check which current image we need to show
    if (direction == "next") {
        thumbnailCarouselCurrentImg++;
        if (thumbnailCarouselCurrentImg == window.thumbnailCarousel.length + 1) {
            thumbnailCarouselCurrentImg = 1;
        }
    } else if (direction == "back") {
        thumbnailCarouselCurrentImg--;
        if (thumbnailCarouselCurrentImg == 0) {
            thumbnailCarouselCurrentImg = window.thumbnailCarousel.length;
        }
    }
    else {
        thumbnailCarouselCurrentImg = direction + 1;
    }
    // Check which container we need to use
    var thumbnailCarouselCurrentContainer = thumbnailCarouselActiveContainer;

    if (thumbnailCarouselActiveContainer == 1) {
        thumbnailCarouselActiveContainer = 2;
    } else {
        thumbnailCarouselActiveContainer = 1;
    }
    var thumbnailCarouselCurrentIndex = thumbnailCarouselCurrentImg - 1;
    thumbnailCarouselShowImage(window.thumbnailCarousel[thumbnailCarouselCurrentIndex], thumbnailCarouselCurrentContainer, thumbnailCarouselActiveContainer, thumbnailCarouselCurrentIndex);

};
var thumbnailCarouselShowImage = function (currentObject, thumbnailCarouselCurrentContainer, thumbnailCarouselActiveContainer, currentIndex) {

    thumbnailCarouselAnimating = true;
    // Make sure the new container is always on the background
    thumbnailCarouselCurrentZindex--;

    // Set the background image of the new active container
    $("#DSG_ThumbnailCarouselHeaderImages" + thumbnailCarouselActiveContainer).css({
        "display": "block",
        "z-index": thumbnailCarouselCurrentZindex
    });
    for (var i = 0; i < window.thumbnailCarousel.length; i++) {
        $("#thumbnailCarouselBullet" + i).removeClass("dsg_sp_thumbnailCarouselSelectedBullet");
    }

    $("#thumbnailCarouselBullet" + currentIndex).addClass("dsg_sp_thumbnailCarouselSelectedBullet");
    $("#DSG_ThumbnailCarouselHeaderImages" + thumbnailCarouselActiveContainer).html("<img width='370px' height='250px' src='" + window.Environment.UserRecipeImageUrl + currentObject.ImageUrl + "' />");

    // Fade out the current container
    // this is for auto sliding
    $("#DSG_ThumbnailCarouselHeaderImages" + thumbnailCarouselCurrentContainer).fadeOut(function () {
        setTimeout(function () {
            thumbnailCarouselAnimating = false;
        }, 500);

    });
    $("#DSG_ThumbnailCarouselHeaderImages" + thumbnailCarouselCurrentContainer).hide();
    document.createComment("div");
};