var Images = [];
var lnkDetailImage;
var imgDetailImage;
var lnkLeftArrow;
var lnkRightArrow;
var pnlCaption;
var lnkZoom;
var ThumbnailBoxID;
var ScrollAmount;
var ClickableDetailImage;
var CurrentScrollIndex = 0;
var NumImagesPerScrollerPage = 0;
var NumImages = 0;

function scrollToLeft() {
    var currentMargin = $("#" + ThumbnailBoxID).css("marginLeft");
    currentMargin = currentMargin.substring(0, currentMargin.length - 2);
    currentMargin = Math.abs(currentMargin);

    if (currentMargin > 0) // only scroll left if we're not at the limit
    {
        $("#" + ThumbnailBoxID).animate({ marginLeft: '+=' + ScrollAmount }, { duration: 250, easing: "swing" });
        CurrentScrollIndex -= 1;

        // show right arrow on scroll left trigger
        if (lnkRightArrow)
            lnkRightArrow.attr('class', 'rightArrow');

        // hide left arrow if scroll index is 0 (at the beginning)
        if (CurrentScrollIndex == 0)
        {
            if (lnkLeftArrow)
                lnkLeftArrow.attr('class', 'leftArrowHidden');
        }
    }
}

function scrollToRight(Max) {
    var currentMargin = $("#" + ThumbnailBoxID).css("marginLeft");
    currentMargin = currentMargin.substring(0, currentMargin.length - 2);
    currentMargin = Math.abs(currentMargin);

    if (currentMargin < Max) // don't scroll past last image
    {
        $("#" + ThumbnailBoxID).animate({ marginLeft: '-=' + ScrollAmount }, { duration: 250, easing: "swing" });
        CurrentScrollIndex += 1;

        // show left arrow on scroll right trigger
        if (lnkLeftArrow)
            lnkLeftArrow.attr('class', 'leftArrow');

        // hide right arrow if we're at the end
        if (CurrentScrollIndex + NumImagesPerScrollerPage == NumImages)
        {
            if (lnkRightArrow)
                lnkRightArrow.attr('class', 'rightArrowHidden');
        }
    }
}

function scrollToPosition(ScrollPosition) {
    $("#" + ThumbnailBoxID).animate({ marginLeft: '-' + ScrollPosition }, { duration: 250, easing: "swing" });
}

function setImage_ByProductPhotoID(ESProductPhotoID) {
    // find the index of this photo
    var PhotoIndex;
    for (var i = 0; i < Images.length; i++) {
        if (Images[i]["productPhotoID"] == ESProductPhotoID) {
            PhotoIndex = i;
        }
    }

    // image was found
    if (PhotoIndex != null) {
        setImage(PhotoIndex);
    }
}

function initImageGallery(numImages, numImagesPerScrollerPage, lnkLeftArrowID, lnkRightArrowID, lnkDetailImageID, imgDetailImageID, pnlCaptionID, lnkZoomID, thumbnailBoxID, scrollAmount, clickableDetailImage) {
    if (clickableDetailImage == true) {
        lnkDetailImage = $("#" + lnkDetailImageID);
    }
    NumImages = numImages;
    NumImagesPerScrollerPage = numImagesPerScrollerPage;
    imgDetailImage = $("#" + imgDetailImageID);
    pnlCaption = $("#" + pnlCaptionID);
    lnkZoom = $("#" + lnkZoomID);
    lnkLeftArrow = $("#" + lnkLeftArrowID);
    lnkRightArrow = $("#" + lnkRightArrowID);
    ThumbnailBoxID = thumbnailBoxID;
    ScrollAmount = scrollAmount;
    ClickableDetailImage = clickableDetailImage;
    if(lnkLeftArrow)
        lnkLeftArrow.attr('class', 'leftArrowHidden');
}

function addImage(index, imageUrl, zoomImageUrl, caption, productPhotoID, tdID) {
    var ImageDetails = [];
    ImageDetails["imageUrl"] = imageUrl;
    ImageDetails["zoomImageUrl"] = zoomImageUrl;
    ImageDetails["caption"] = caption;
    ImageDetails["productPhotoID"] = productPhotoID;
    ImageDetails["tdID"] = tdID;
    Images[index] = ImageDetails;
}

function setImage(index) {
    imgDetailImage.attr('src', Images[index]["imageUrl"]).attr('alt', Images[index]["caption"]);
    if (ClickableDetailImage == 'true')
        imgDetailImage.attr('href', Images[index]["zoomImageUrl"]).attr('title', Images[index]["caption"]);
    lnkZoom.attr('href', Images[index]["zoomImageUrl"]);
    pnlCaption.html(Images[index]["caption"]);

    // set classes correctly
    for (var i = 0; i < Images.length; i++) {
        $("#" + Images[i]["tdID"]).removeClass();
        if (i == index)
            $("#" + Images[i]["tdID"]).addClass('selected');
    }
}