var scroll = 0;
var amount = 300;
var maxWidth = 0;
var toggle = false;
var zIndex = 3;

var loading = false;

var galleryImageWidth = 600;
var galleryImageHeight = 300;

$(document).ready(function() {
    maxWidth = $("#galleryStop").offset().left - $("#galleryWindow").width() - amount;
});

function doShowImage(url, assetid) {
    if (!loading) {
        loading = true;
        var bottom = null;
        var top = null;
        if (toggle) {
            top = $("#imageHolderTwo");
            bottom = $("#imageHolderOne");
        }
        else {
            top = $("#imageHolderOne");
            bottom = $("#imageHolderTwo");
        }
        bottom.css("z-index", zIndex);
        bottom.html("<img src=\"/_assets/" + galleryImageWidth + "x" + galleryImageHeight + "/" + url + "\" alt=\"\" onload=\"doShowImageCallback();\"/>");
        var caption = $("#caption");
        caption.hide(250, function() {
            caption.load("/_services/assetcontent.aspx?asset=" + assetid, function() {
                if(caption.html() != "") caption.show(250);
            });
        });
    }
}

function doShowImageCallback() {
    var bottom = null;
    var top = null;
    if (toggle) {
        top = $("#imageHolderTwo");
        bottom = $("#imageHolderOne");
    }
    else {
        top = $("#imageHolderOne");
        bottom = $("#imageHolderTwo");
    }
    top.fadeOut(500);
    bottom.fadeIn(500);
    // prepare for next
    toggle = !toggle;
    zIndex++;
    loading = false;
}

function doScrollRight() {
    if (scroll > -maxWidth) {
        scroll -= amount;
        $("#gallery").animate({ left: scroll + 'px' }, "slow");
    }
    doButtons();
}

function doScrollLeft() {
    if (scroll < 0) {
        scroll += amount;
        $("#gallery").animate({ left: scroll + 'px' }, "slow");
    }
    doButtons();
}

function doButtons() {
    maxWidth = $("#galleryStop").offset().left - scroll - $("#galleryWindow").width() - amount;
    if (scroll > -maxWidth) {
        $("#btnRight").fadeIn(250);
    } else {
        $("#btnRight").fadeOut(250);
    }
    if (scroll < 0) {
        $("#btnLeft").fadeIn(250);
    } else {
        $("#btnLeft").fadeOut(250);
    }
}