(function($)
{
    $.extend($.fn, 
    {
        CycleImageCollectionStd: function(ImagesUrls, ThumbsUrls,  DisplayWidth, DisplayHeight, ThumbWidth, ThumbHeight)
        {
            var x = $.data(this[0], 'CycleImageCollection');
            if ( x ) { return x; }
			
		    x = new $.CycleImageCollectionStd( this[0], ImagesUrls, ThumbsUrls,  DisplayWidth, DisplayHeight, ThumbWidth, ThumbHeight );
		    $.data(this[0], 'CycleImageCollection', x); 
        }
    });

    $.CycleImageCollectionStd = function(ClientID, ImagesUrls, ThumbsUrls,  DisplayWidth, DisplayHeight, ThumbWidth, ThumbHeight)
    {
        this.Init(ClientID, ImagesUrls, ThumbsUrls,  DisplayWidth, DisplayHeight, ThumbWidth, ThumbHeight);
    }

    $.extend( $.CycleImageCollectionStd, 
    {
        prototype : 
        {
            Init: function(ClientID, ImagesUrls, ThumbsUrls,  DisplayWidth, DisplayHeight, ThumbWidth, ThumbHeight) 
            {
                var t = this;
                this.$Wrap = $(ClientID);
                this.$Viewer = $(".Viewer", this.$Wrap);
                this.$Nav = $j(".Nav", this.$Wrap)
                this.$Left = $(".Left", this.$Nav);
                this.$Right = $(".Right", this.$Nav);
                this.$Thumbs = $(".Thumbnails ul", this.$Nav);
                this.ImagesUrls = ImagesUrls;
                this.ThumbsUrls = ThumbsUrls;
                
                for(var i=0;i<this.ImagesUrls.length;++i) this.$Viewer.append('<img src='+ this.ImagesUrls[i] +' />');
                
                this.Over = false;
                this.Animated = false;
                
                this.ThumbWidth = ThumbWidth + 4;
                this.PagerWidth = DisplayWidth - 22;
                this.Num = parseInt(this.PagerWidth / this.ThumbWidth);
                
                this.$Wrap.mouseover(function() { t.$Viewer.cycle('pause'); });
                this.$Wrap.mouseout(function() { t.$Viewer.cycle('resume'); });
                
                this.$Thumbs.css("left", "0px");
                $(".Nav ul", this.$Wrap ).css("height", ThumbHeight + 'px' );
                $(".Nav .Thumbnails", this.$Wrap ).css("width", (DisplayWidth - 24)  + 'px' )
            
                this.$Left.mouseover( function() { t.Over = true; t.ScrollLeft(); } );
                this.$Left.mouseout( function() { t.Over = false; } );
                
                this.$Right.mouseover( function() { t.Over = true; t.ScrollRight(); } );
                this.$Right.mouseout( function() { t.Over = false; } );
                    
                this.$Viewer.css("display", "block");
                this.$Nav.css("display", "block");
                $(".Load", this.$Wrap).css("display", "none");
                
            },
            GetLeftPos : function( idx ) { return ( idx ) * this.ThumbWidth; },
            GetRightPos : function( idx ) { return ( idx + 1 ) * this.ThumbWidth; },
            GetIndex : function( pos ) { return parseInt((pos)/this.ThumbWidth); },
            IsAlign : function( pos ) { return (pos%this.ThumbWidth == 0); },
            GetThumbOffset : function () { return parseInt(this.$Thumbs.css('left').replace('px', '')); },
            ScrollLeft : function()
            {
                if ( !this.Animated )
                {
                    var idx = this.GetIndex( - this.GetThumbOffset()  );
                    if ( this.GetThumbOffset() < 0 ) 
                    {
                        if (this.IsAlign( -this.GetThumbOffset() ) && this.GetThumbOffset() != 0) idx--;
                        this.SlideLeft(idx);
                    }
                }
            },
            
            ScrollRight : function()
            {
                if ( !this.Animated )
                {
                    var idx = this.GetIndex( - this.GetThumbOffset() + this.PagerWidth );
                    var max = this.ThumbsUrls.length;
                    if ( idx < max )
                    {
                        this.SlideRight(idx);
                    }
                }
            },
            
            SlideLeft : function(idx)
            {
                var t = this;
                this.Animated = true;
                this.$Thumbs.animate({left:-(idx*this.ThumbWidth) + 'px'}, 300, function() { t.Animated = false; if (t.Over) t.ScrollLeft(); } );
            },
            
            SlideRight : function(idx)
            {
                var t = this;
                this.Animated = true;
                var max = this.ThumbsUrls.length;
                this.$Thumbs.animate({left: -(((idx+1) * this.ThumbWidth) - this.PagerWidth) + 'px'}, 500, function() { t.Animated = false; if (t.Over) t.ScrollRight(); } );
            },
            
            Update : function()
            {
                var active = $j("a.activeSlide", this.$Thumbs);
                var index = $j("li", this.$Thumbs).index(active.parent().parent())   ;
                
                if (index >= 0)
                {
                    if ( index <= this.GetIndex( - this.GetThumbOffset()  )  )
                    {
                        if (!this.Animated)
                        {
                            this.SlideLeft(index);
                        }
                    }
                    
                    if ( index+1 >= this.GetIndex( - this.GetThumbOffset() + this.PagerWidth ) )
                    {
                        if (!this.Animated)
                        {
                            if (index+1 < this.ThumbsUrls.length) this.SlideRight(index+1);
                            else this.SlideRight(index);
                        }
                    }
                }
            }
            
        } 
    });
    
})(jQuery);