// Image gallery
// Constants
var LG_SCROLL_SPEED = 5;
var LG_CENTER_ZONE = 30; // Number of pixels from either side of center to not scroll
var LG_DEF_RATIO = 0.75; // Default aspect ratio (height / width)

// Variables
var lgMaxScroll = 0;
var lgContainerWidth = 0;
var lgThumbMouseX = 0;
var lgIndexSaveCtl = null;
var lgSelDesc = '';

var tb_pathToImage = "../images/loadingAnimation.gif";

$(document).ready(function() {
    if ($("#thumbRoll img").length == 0) {
        // no available photos
        $("#imgPreview").attr("src", "http://images.commercialsource.com/NoPhotoFull.jpg")
                            .show();
    } else {
        // Size thumbnail images correctly against default aspect ratio and then show
        $("#thumbRoll img").each(function() {

            // Normal loading: IE, Firefox
            var img = $(this);
            resizeImage(img);

            // Safari Fix: Wait until images are loaded before getting size, otherwise they are always 0
            // Duplicate necessary as load function not called in IE, Firefox
            $(this).load(function() {
                resizeImage(img);
            });
        });

        // Get width of thumb roll and its container
        lgContainerWidth = $(".thumbRollCon").width();
        var rollWidth = 0;

        // Get width of entire roll of thumbs including left and right margins
        $("#thumbRoll .thumb").each(function() {
            rollWidth += $(this).width() + parseInt($(this).css("margin-left").replace("px", "")) + parseInt($(this).css("margin-right").replace("px", ""));
        });


        // If scrolling is needed
        if (rollWidth > lgContainerWidth) {
            // Set up event handler for mouse tracking
            $(".thumbRollCon").mousemove(function(e) {
                lgThumbMouseX = e.pageX;
            });

            lgMaxScroll = lgContainerWidth - rollWidth;

            // Set up event handler for mouse movement
            $(".thumbRollCon").mouseover(function() {
                var off = (lgThumbMouseX - $(".thumbRollCon").offset().left) - (lgContainerWidth / 2);
                var current = parseInt($("#thumbRoll").css("marginLeft").replace("px", ""));
                var target = off < 0 ? 0 : lgMaxScroll;

                if (Math.abs(off) < LG_CENTER_ZONE) return;
                if ((off < 0 && current > target) || (off > 0 && current < target)) current = target;
                if (current == target) return;

                var time = Math.pow((200 - Math.abs(off)), 2) / LG_SCROLL_SPEED;

                $("#thumbRoll").animate({ marginLeft: target + "px" }, time, "linear");
            }).click(function() {  // in case user clicks thumbnail while scrolling
                $("#thumbRoll").stop();
            }).mouseout(function() {  // in case user drags before mouseup
                $("#thumbRoll").stop();
            });
        } //end if

        // Show Large Detail Photo 
        $(".thumb").mousedown(function() {
            setCurrentThumb(this);
        });

        // Initialize the currently selected thumb - this is maintained on postback
        setThumbIndex();

        // Preload loader thickbox image
        var imgLoader = new Image();
        imgLoader.src = tb_pathToImage;

        // Set up click event handler for thickbox popup
        $("#imgPreview").click(showPreview);
    }
});

// Resize Images
function resizeImage(img) {
    var ratio = img.height() / img.width();
    img.height(ratio <= LG_DEF_RATIO ? "100%" : "")
            .width(ratio >= LG_DEF_RATIO ? "100%" : "")
            .show();
}

function showPreview() {
    // Show thickbox
    tb_show(lgSelDesc, $("#imgPreview").attr("src"), "gallery");
}

function setCurrentThumb(liThumb) {
    // Set the passed in thumb (li element) as the active one

    var imgThumb = $(liThumb).find("img");

    // Set title and description variables
    lgSelDesc = $(liThumb).find("a[rel=gallery]").attr("title");

    $("#imgPreview").attr({ src: $(liThumb).find(".detailLarge").html().replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>') })
                        .show();

    // Save current index
    if (lgIndexSaveCtl != null) $("#" + lgIndexSaveCtl).val($("#thumbRoll").children().index(liThumb));
}

function setThumbIndex(index) {
    if (index == null && lgIndexSaveCtl != null) index = parseInt($("#" + lgIndexSaveCtl).val());
    if (index == null || isNaN(index)) index = 0;
    var newThumb = $("#thumbRoll li:eq(" + index + ")");
    if (newThumb != null && newThumb.length != 0) setCurrentThumb(newThumb);

    // TODO - make sure selected thumb is visible
}

function setNextThumb() {
    if (lgIndexSaveCtl == null) return;
    var newIndex = parseInt($("#" + lgIndexSaveCtl).val()) + 1;
    setThumbIndex(newIndex);
}

function setPrevThumb() {
    if (lgIndexSaveCtl == null) return;
    var newIndex = parseInt($("#" + lgIndexSaveCtl).val()) - 1;
    if (newIndex < 0) return;
    setThumbIndex(newIndex);
}

// End Image gallery