$(function () {
    // Add a click function to all thumbnails
    $("#tn_scrollbox > a").each(function (i) {
        $(this).click(function (e) {
            e.preventDefault();

            autoPlay = false;

            if ($("#portrait_stage > img").attr("src").indexOf("id=" + i) == -1) {
                // Remove the active class from the last clicked thumbnail and store its index
                var lastImg = $("#tn_scrollbox img.active").removeClass("active").parent().index();

                // Generate a modifier based on whether the next thumbnail chosen was before or after
                var modifier = lastImg < i ? "-" : "+";

                // Add the active CSS class to this thumbnail
                $(this).children("img").addClass("active");

                // Show the image loader overlay
                $("#portrait_loader").show();

                // Instantiate a function that will animate the incoming image once the browser has loaded
                var imgLoaded = function () {
                    var $new = $(this).attr("title", "Click here for the full high-definition image");

                    $("#portrait_loader").hide();
                    $("#portrait_stage > img").animate(
                                { "left": modifier + "=546" },
                                1000,
                                function () {
                                    $("#portrait_stage").empty().append($new);
                                    $new.css({
                                        top: ($("#portrait_stage").height() - $new.height()) / 2,
                                        left: parseInt(modifier + 546) * -1
                                    })
                                    .animate({ "left": modifier + "=546" }, 1000);
                                });
                };

                // Create a new image object and bind the image loader to its load and error functions
                $img = $("<img />").attr("alt", "").load(imgLoaded).error(imgLoaded);

                // Set the image source ex-post-facto to correct IE misbehavior of load/error event firing
                $img.attr("src", "http://www.vaneatonromero.com/photo.ashx?mls=" + window.location.toString().match(/L\d+/) + "&id=" + i + "&maxw=546&maxh=365&compress=true");
            }
        });
    });

    $("#portrait").click(function () {
        window.open($(this).find("img").attr("src").match(/.*id=\d+/)[0] + "&compress=true");
    });

    $("#portrait_stage > img").each(function () {
        $(this).bind("load error", function () {
            $(this).css("top", ($(this).parent().height() - $(this).height()) / 2);
        }).attr("src", "http://www.vaneatonromero.com/photo.ashx?mls=" + window.location.toString().match(/L\d+/) + "&id=" + i + "&maxw=546&maxh=365&compress=true");
    });
});

$(window).load(function () {
    // Flush the scrollable thumbnail div
    var totWidth = 0;

    numPhotos = $("#tn_scrollbox img").each(function () {
        totWidth += $(this).width() + 28;
    }).length;

    $("#tn_scrollbox").css("width", totWidth - 12);

    var totLoaded = 0;

    var countLoaded = function () {
        if (++totLoaded == numPhotos && autoPlay) {
            startSlideShow();
        }
    };

    for (var i = 0; i < numPhotos; i++) {
        $("<img />")
            .load(countLoaded)
            .error(countLoaded)
            .attr("src", "http://www.vaneatonromero.com/photo.ashx?mls=" + window.location.toString().match(/L\d+/) + "&id=" + i + "&maxw=144&maxh=104&compress=true");
    }
});

var iid = -1, currentImage = 1, autoPlay = true;

function startSlideShow() {
    advanceImage();
    iid = setInterval("advanceImage()", 10000);
}


function advanceImage() {
    if (autoPlay) {
        $("#tn_scrollbox img").eq(currentImage).click();
        autoPlay = true;
        if (++currentImage == numPhotos) {
            currentImage = 0;
        }
    }
    else
        clearInterval(iid);
}