/// <reference path="jquery.js" />
/// <reference path="jquery.fitToParent.js" />

// Gallery code ...

jQuery.fn.gallery = function(params) {

    var options = { thumbSelector: ".thumb img", fullSizeSelector: ".full-size img" };

    op = jQuery.extend(options, params);

    galleryObj = function(jqElem) {

        var $self = this;

        this.$g = $(jqElem);  // Main gallery tag.

        this.selectedThumb = null;
        this.selectedThumbIndex = -1;

        this.thumbsLoaded = false;
        this.fullsLoaded = false;

        // load thumbs 
        this.$thumbImgs = this.$g.find(op.thumbSelector);
        var numThumbs = this.$thumbImgs.size();
        this.$thumbImgs.each(function(pos) {
            var img = $(this);
            var fnOnLoad = function() {
                img.fadeIn("slow");
                if (--numThumbs == 0) {
                    $self.onThumbsLoaded();
                }
            }

            if (this.complete) {
                fnOnLoad();
            } else {
                img.load(fnOnLoad)
            }
        });

        this.$fullImgs = this.$g.find(op.fullSizeSelector);
        var numFulls = this.$fullImgs.size();
        this.$fullImgs.each(function(pos) {
            var img = $(this);
            var fnOnLoad = function() {
                //                console.log("loaded full [" + pos + "]: " + img.attr("src") + " (" + numFulls + " left)");
                //img.center();
                img.fitToParent().center();
                //                if (pos == 0) {
                //                    img.fadeIn("slow");    // Fade in the first/top image ...
                //                }

                if (--numFulls == 0) {
                    //                    console.log("fulls done; fire callback");
                    $self.onFullsLoaded();
                }
            }

            if (this.complete) {
                fnOnLoad();
            } else {
                img.load(fnOnLoad)
            }
        });

    };

    galleryObj.prototype = {

        thumbClicked: function(thumbClicked, index) {

            if (index != this.selectedThumbIndex) {
                thumbClicked.toggleClass("thumb-selected");
                if (this.selectedThumb != null)
                    this.selectedThumb.toggleClass("thumb-selected");

                if (this.selectedThumbIndex != -1)
                    this.$fullImgs.eq(this.selectedThumbIndex).fadeOut("slow");

                if (index != -1)
                    this.$fullImgs.eq(index).fadeIn("slow");

                this.selectedThumbIndex = index;
                this.selectedThumb = thumbClicked;

                // alert(this.$fullImgs.eq(index).attr("src"));
            }
        },

        checkReady: function() {
            //  console.log("Ready? " + (this.fullsLoaded && this.thumbsLoaded));
            if (this.fullsLoaded && this.thumbsLoaded) {
                $(".full-size").removeClass("loading");
                var firstThumb = this.$g.find(".thumb:first");
                this.thumbClicked(firstThumb, 0);
            }
        },

        onFullsLoaded: function() {
            //            console.log("Full sizes loaded....");
            this.fullsLoaded = true;
            this.checkReady();
        },

        onThumbsLoaded: function() {
            //            console.log("Thumbs loaded....");

            var scrollHeight = $(".thumbs").parent().height();
            var heightThumbs = $(".thumbs").height();

            $(".thumb").bind("click", this, function(evt) {
                var thumbClicked = $(this);
                var index = evt.data.$g.find(".thumb").index(thumbClicked);
                evt.data.thumbClicked(thumbClicked, index);
            });

            $(".thumb").hover(
                function() {
                    $(this).toggleClass("thumb-over");
                },
                function() {
                    $(this).toggleClass("thumb-over");
                }
            );

            if (heightThumbs > scrollHeight) {
                $("#gallery-slider").slider({
                    animate: false,
                    slide: function(e, ui) {
                        var maxScroll = heightThumbs - scrollHeight;
                        $(".thumb-tray").scrollTop(ui.value * (maxScroll / 100));
                    },
                    change: function(e, ui) {
                        var maxScroll = heightThumbs - scrollHeight;
                        $(".thumb-tray").scrollTop(ui.value * (maxScroll / 100));
                    }
                });
                $("#gallery-slider").css("visibility", "visible");
            }

            this.thumbsLoaded = true;
            this.checkReady();
        }
    };

    var g = new galleryObj(this);

}