jQuery.fn.slidegallery = function (options) {
    var settings = jQuery.extend({ images: "#imageList", thumbs: "#thumbList", width: 622, height: 454 }, options);
    var imageList = $(settings.images);
    var thumbList = $(settings.thumbs);
    var imagePos = 0;
    var count = 0;
    var currentIndex = 1;
    var currentPage = 0;
    var totalPages = 0;


    $(this).css({ height: settings.height });
    thumbList.css({ visibility: "hidden" });
    thumbList.append("<div id='thumbsContainer'></div>");
    var thumbsContainer = $("#thumbsContainer");
    thumbsContainer.css({ position: "absolute", top: 0, left: 0 });

    imageList.children().each(function (i) {
        var image = $(this).find("img");

        var thumb = $(this).find("img").clone();
        thumb.css({ height: "82px" });
        thumb.appendTo(thumbsContainer);
        image.css({ display: "none", height: settings.height, position: "absolute" });
        if (isImageLoaded(image)) {
            imageLoaded(i);
        } else {
            image.bind("load", { index: i }, loadHandler);
        }
    });

    $(this).css({ visibility: "visible" });

    //get the text for currentIndex
    updateTexts();

    function loadHandler(event) {
        imageLoaded(event.data.index);
    }

    function imageLoaded(index) {
       // alert(count + " " + index);
        if (typeof index === "undefined") {
        } else {
        count++
        if (count == imageList.children().length)
            queueLoaded();
            }
    }

    function queueLoaded() {
        currentIndex = (imageList.children().length > 2) ? 1 : 0;

        imageList.children().each(function (i) {
            var image = $(this).find("img");
            image.after("<div class='overlay'></div>");
            image.next(".overlay").css({ left: imagePos, top: 0, height: settings.height, width: image.width(), position: "absolute" });
            var thumb = thumbsContainer.find("img").eq(i);
            thumb.bind("click", { index: i, left: imagePos, width: image.width() }, imageClick);
            image.parent().bind("click", { index: i, left: imagePos, width: image.width() }, imageClick);
            var _opacity = 0.4;
            var _alpha = "alpha(opacity=40)";

            /*if(i == 0) { imagePos = ((settings.width - image.width()) * .5); }*/

            if (i == currentIndex) {
                var targetPos = imagePos - ((settings.width - image.width()) * .5);
                imageList.css({ right: targetPos });
                image.next(".overlay").css({ visibility: "hidden" });
                thumb.addClass('selected');
                _opacity = 1;
                _alpha = "alpha(opacity=100)";
            }

            image.css({ left: imagePos, top: 0, opacity: _opacity, filter: _alpha });
            image.fadeIn();

            imagePos += image.width();
        });

        buildPaging();
    }

    function buildPaging() {
        thumbList.after("<div id='PagingContainer'></div>");
        totalPages = Math.ceil(thumbsContainer.height() / settings.height - .1);
        if (totalPages > 1) {
            $("#PagingContainer").append("<a id='prevPage' href='#'><span>&lt;</span></a>");
            for (var i = 0; i <= (totalPages - 1); i++) {
                $("#PagingContainer").append("<a class='page' href='#'><span>" + (i + 1) + "</span></a>");
                var button = $("#PagingContainer").find(".page").eq(i);
                button.bind("click", { index: i }, pageClick);
                if (i == 0) {
                    button.addClass('selected');
                }
            }
            $("#PagingContainer").append("<a id='nextPage' href='#'><span>&gt;</span></a>");
            $("#prevPage").bind("click", { index: i }, prevPage);
            $("#nextPage").bind("click", { index: i }, nextPage);
            $("#prevPage").css({ visibility: "hidden" });
        }

        thumbList.css({ visibility: "visible" });
    }

    function pageClick(event) {
        currentPage = event.data.index;
        updatePaging();
    }

    function imageClick(event) {
        if (currentIndex != event.data.index) {
            var prevIndex = currentIndex;
            currentIndex = event.data.index;

            var previous = imageList.find("img").eq(prevIndex);
            var current = imageList.find("img").eq(currentIndex);
            var targetPos = event.data.left - ((settings.width - event.data.width) * .5);
            thumbsContainer.find('.selected').removeClass('selected');
            currentThumb = thumbsContainer.find("img").eq(currentIndex);
            currentThumb.addClass('selected');
            previous.next(".overlay").css({ visibility: "visible" });
            previous.css({ opacity: 0.4, filter: "alpha(opacity=40)" });
            current.next(".overlay").css({ visibility: "hidden" });
            current.css({ opacity: 1, filter: "alpha(opacity=100)" });
            imageList.animate({ right: targetPos }, 1000);

            var offset = currentThumb.position().top - (settings.height * currentPage);
            if (offset > settings.height) {
                currentPage++;
                updatePaging();
            }
            else if (offset < 0) {
                currentPage--;
                updatePaging();
            }

            updateTexts();
        }
    }

    function updateTexts() {
        $("#heading").html(__slideshow[currentIndex][1]);
        $("#price").html(__slideshow[currentIndex][2]);
        $("#bodytext").html(__slideshow[currentIndex][0]);
    }

    function updatePaging() {
        var offset = (currentPage > 0) ? -(currentPage * (settings.height + 11)) : 0;
        thumbsContainer.css({ top: offset });
        $("#PagingContainer").find('.selected').removeClass('selected');
        $("#PagingContainer").find(".page").eq(currentPage).addClass('selected');

        var prevVisibility = (currentPage == 0) ? "hidden" : "visible";
        $("#prevPage").css({ visibility: prevVisibility });
        var nextVisibility = (currentPage == totalPages - 1) ? "hidden" : "visible";
        $("#nextPage").css({ visibility: nextVisibility });
    }

    function nextPage() {
        if (currentPage < totalPages - 1) {
            currentPage++;
        }
        updatePaging();
    }

    function prevPage() {
        if (currentPage > 0) {
            currentPage--;
        }
        updatePaging();
    }

    function isImageLoaded(image) {
        if (!image.get(0).complete) {
            if (($.browser.msie) && ($.browser.version == '9.0')) {
                loadHandler(image);
            } else {
                return false;
            }
        }
        else if (image.height() === 0) {
            if (($.browser.msie) && ($.browser.version == '9.0')) {
                loadHandler(image);
            } else {
                return false;
            }
        }
        return true;
    }
};