var userSetImage = false;
var imagesRoot = "/images/Home/Photos/";
function SetNextImage() {
    if (!userSetImage) {
        var images = $("#ThumbnailArea img");
        var currentIndex = images.index($("#ThumbnailArea img.selectedThumb"));
        if (currentIndex == images.length - 1)
            SetImage(images.first().get(0), false);
        else
            SetImage(images.slice(currentIndex + 1, currentIndex + 2).get(0), false);
        window.setTimeout(SetNextImage, 4000);
    }
}

var isSettingImage = false;
function SetImage(sender, isManual) {
    //only one at a time
    if (isSettingImage)
        return;
    isSettingImage = true;

    userSetImage = isManual;

    var fileName = sender.src.replace(/.*\//, '');

    var newPhotoArea;
    var currentPhotoArea;
    if ($("#PhotoArea1:visible").length == 0) {
        newPhotoArea = $("#PhotoArea1");
        currentPhotoArea = $("#PhotoArea2");
    }
    else {
        newPhotoArea = $("#PhotoArea2");
        currentPhotoArea = $("#PhotoArea1");
    }

    newPhotoArea.find("img").attr("src", imagesRoot + fileName).attr("alt", sender.alt);
    newPhotoArea.find(".photoCaption").text(sender.alt);
    currentPhotoArea.fadeOut();
    newPhotoArea.fadeIn();

    $("#ThumbnailArea img.selectedThumb").removeClass("selectedThumb").animate({ opacity: 0.4 });

    var imageCount = $("#ThumbnailArea img").length;
    var middleIndex = Math.ceil(imageCount / 2) - 1;
    var newIndex = $("#ThumbnailArea img").index(sender);
    var offsetIndex = newIndex - middleIndex;

    $(sender).addClass("selectedThumb").animate({ opacity: 1 }, 1500);
    if (offsetIndex > 0) {
        //copy the cells to be removed to the end
        $("#ThumbnailArea .thumbCell").slice(0, offsetIndex).clone().appendTo("#ThumbnailArea tr");
        //shrink the first cell content and remove it
        $("#ThumbnailArea .imageHolder").slice(0, offsetIndex).animate({ width: "1px", padding: "0px" }, 500, function () { $(this).parents(".thumbCell").remove(); });
        //add a bounce effect
        $("#ThumbnailArea").animate({ paddingLeft: "100px" }, 400, function () {
            $(this).animate({ paddingLeft: "50px" }, 1000, "easeOutBounce", function () {
                isSettingImage = false;
            })
        });
    } else if (offsetIndex < 0) {

        //copy the last cell to the front as collapsed cells
        $("#ThumbnailArea .thumbCell").slice(imageCount + offsetIndex).clone().find(".imageHolder").css({ width: "1px", margin: "0px" }).parents(".thumbCell").prependTo("#ThumbnailArea tr");

        //grow the new first cells content
        $("#ThumbnailArea .imageHolder").slice(0, (-1 * offsetIndex)).animate({ width: "80px", padding: "7px" }, 500);
        //add a bounce effect
        $("#ThumbnailArea").animate({ paddingLeft: "0px" }, 400, 'linear', function () {
            $(this).animate({ paddingLeft: "50px" }, 1000, "easeOutBounce", function () {
                //remove end cells that were copied to the front
                $("#ThumbnailArea .thumbCell").slice(imageCount).remove();
                isSettingImage = false;
            })
        });


    }
    else {
        $("#ThumbnailArea").animate({ paddingLeft: "100px" }, 400, 'linear', function () { $(this).animate({ paddingLeft: "50px" }, 1500, "easeOutBounce") });
    }
}


function InitImages() {
    $("#ThumbnailArea img").not(".selectedThumb").css({ opacity: 0.4 });
    $('#ThumbnailArea').scrollTo(".selectedThumb", 1500, { axis: 'x', offset: -430, easing: 'easeOutBounce' });
    window.setTimeout(SetNextImage, 4000);
    if ($.browser.msie && $.browser.version.substr(0, 1) < 7)
        $('#ThumbnailArea').width("875px");

}

function InitHistoryImages() {
    $("#ThumbnailArea img").not(".selectedThumb").css({ opacity: 0.4 });
    $('#ThumbnailArea').scrollTo(".selectedThumb", 1500, { axis: 'x', offset: -255, easing: 'easeOutBounce' });
    window.setTimeout(SetNextImage, 4000);
    if ($.browser.msie && $.browser.version.substr(0, 1) < 7)
        $('#ThumbnailArea').width("875px");

}