var direction = 0, interval = 0;
var curIndex = 1;
var aniDur = 1000;
var timeoutId;
var itemImage, itemImageClone;
var thumbs, thumbTemplate;
var thumbCount, thumbHeight = 105;

function setupSlideshow() {
    var slide = $(".slide");
    // show the slide show controls
    slide.html(
                "<a href=\"#\" onclick=\"showSlide(-1, 3000);return false;\" title=\"Show backwards, fast\">&lt;&lt;</a>&nbsp;" +
                "<a href=\"#\" onclick=\"showSlide(-1, 9000);return false;\" title=\"Show backwards, slowly\">&lt;</a>" +
                "&nbsp;<span>Slideshow</span>&nbsp;" +
                "<a href=\"#\" onclick=\"showSlide(1, 9000);return false;\" title=\"Show forwards, slowly\">&gt;</a>&nbsp;" +
                "<a href=\"#\" onclick=\"showSlide(1, 3000);return false;\" title=\"Show forwards, fast\">&gt;&gt;</a>");

    thumbTemplate = $(".thumb:first");

    thumbs = $(".thumbs")
    thumbs.wrap("<div class=\"thumbsContainer\"></div>");

    thumbCount = $(".thumb").length;

    var thumbsContainer = $(".thumbsContainer");
    thumbsContainer.css("overflow", "hidden");
    thumbsContainer.css("position", "absolute");
    thumbsContainer.css("zIndex", "1000");
    thumbsContainer.css("width", (thumbs.width() + 11) + "px");
    thumbsContainer.css("height", thumbs.height() + "px");
    thumbsContainer.css("margin", thumbs.css("marginTop") + " 0 0 -" + (thumbs.width() + 10) + "px");

    thumbs.css("position", "relative");
    thumbs.css("margin", "0");

    setupThumbLinks();
    $(window).load(setupItemLink);
}

function reset() {
    if (interval > 0) {
        timeoutId = window.setTimeout("showSlide(direction,interval)", interval);
    }
}

function setupThumbLinks() {
    var thumbLinks = $(".thumbLink");
    for (var index = 0; index < thumbLinks.length; index++) {
        thumbLinks[index].index = index;
        thumbLinks[index].onclick = function() {
            showSlide(this.index - curIndex, 0); return false;
        };
    }
}

function setupItemLink() {
    var itemLink = $(".itemLink");
    itemLink[0].onclick = function() {
        showSlide(1, 0); return false;
    }
}

function showSlide(newDirection, newInterval, oncomplete) {
    direction = newDirection;
    interval = newInterval;
    if (timeoutId) { window.clearInterval(timeoutId); timeoutId = null; }

    if (!itemImage) {
        itemImage = $(".itemImage");
        itemImageClone = itemImage.clone();
        itemImageClone.attr("class", "itemImageClone");
        itemImage.before(itemImageClone);
        itemImageClone.css("position", "absolute");
        itemImageClone.css("opacity", "0");

        itemImage.load(onImageLoad);
    }

    var current = $(".thumb.current");
    current.removeClass("current");
    $(".thumb:eq(" + (curIndex + direction) + ")").addClass("current");

    var currentItem = gallery.currentItem;
    gallery.currentItem = gallery.currentItem.sibling(direction);
    var thumbImage;
    for (var count = 1; count <= Math.abs(direction); count++) {
        var item = direction > 0
                    ? currentItem.sibling(thumbCount - 1 - curIndex + count)
                    : currentItem.sibling(-curIndex - count);

        var thumb = thumbTemplate.clone();
        thumb.removeClass("current");
        thumb.children(".itemPath").attr("href", "../" + item.path);

        thumbImage = thumb.contents().find(".thumbImage");
        thumbImage.isLoaded = false;
        if (direction > 0) {
            thumbs.append(thumb);
            thumbs.css("marginTop", "0");
        } else {
            thumbs.prepend(thumb);
            thumbs.css("marginTop", (parseInt(thumbs.css("marginTop")) - thumbHeight) + "px");
        }
        thumbImage.attr("alt", item.title);

        if (count == Math.abs(direction)) {
            thumbImage.load(function() {
                if (!this.isLoaded) {
                    this.isLoaded = true;
                    // set the clone to the old image
                    itemImageClone.attr("src", itemImage.attr("src"));
                    itemImageClone.attr("alt", itemImage.attr("alt"));
                    itemImageClone.css("opacity", 1);
                    // animate the tabs
                    if (direction > 0) {
                        thumbs.animate({ "marginTop": (-thumbHeight * direction) + "px" }, aniDur * 2, null, function() {
                            $(".thumb:lt(" + direction + ")").remove();
                            thumbs.css("marginTop", "0");
                            setupThumbLinks();
                            if (interval == 0) {
                                window.location = "../" + gallery.currentItem.path;
                            }
                        });
                    } else {
                        thumbs.animate({ "marginTop": 0 }, aniDur * 2, null, function() {
                            $(".thumb:gt(" + (thumbCount - 1) + ")").remove();
                            setupThumbLinks();
                            if (interval == 0) {
                                window.location = "../" + gallery.currentItem.path;
                            }
                        });
                    }
                    // load the new image behind the clone
                    itemImage.attr("src", "../" + gallery.currentItem.path + "Image.jpg");
                    itemImage.attr("alt", gallery.currentItem + interval > 0 ? " (click to stop slideshow)" : "");
                }
            });
        }
        thumbImage.attr("src", "../" + item.path + "thumb.jpg");
    }
}

function onImageLoad() {
    itemImage.css("opacity", 0);
    itemImage.animate({
        "height": gallery.currentItem.height + "px",
        "width": gallery.currentItem.width + "px",
        "opacity": 1
    }, aniDur);
    $(".itemImageClone").animate({
        "height": gallery.currentItem.height + "px",
        "width": gallery.currentItem.width + "px",
        "opacity": 0
    }, aniDur, null, reset);
    $(".itemTitle").html(gallery.currentItem.title);
    $(".itemDescription").html(gallery.currentItem.description);
    $(".nextItemPath").attr("href", "../" + gallery.currentItem.path);
}