(function( $ ) {
    $.widget('balling.marquee', {
        _init: function() {
            $.extend(this.options, {
                imagesSelector: '.images li',
                flavorSelector: '.flavor li',
                thumbsSelector: '.thumbnails li',
                rotationInterval: 7000,
                imageHeight: 330,
                arrowClass: 'marquee-arrow',
                animationSpeed: 'slow'
            });

            this._imageCount = $(this.options.imagesSelector, this.element).length;
            
            this._animateItem = $('<li class="animate"></li>').appendTo($(this.options.imagesSelector, this.element).parent());
            
            $(this.options.thumbsSelector, this.element).append('<div class="' + this.options.arrowClass +'" style="display:none;"></div>');

            var self = this;
            $(this.options.thumbsSelector, self.element)
                .mouseover(function() {
                    var index = $(this).index();
                    self._stopRotation.apply(self);
                    self._setActiveIndex.apply(self, [index]);
                })
                .mouseout(function() {
                    self._startRotation.apply(self);
                });
            
            this._setActiveIndex(0);
            this._startRotation();

        },
        _setActiveIndex: function(index) {
        
            var self = this;

            if (this._activeIndex !== index) {
                var indexSelector = ':eq(' + index + ')';
                
                // update pointer arrow
                $(this.options.thumbsSelector + ' .' + this.options.arrowClass, this.element).hide();
                $(this.options.thumbsSelector + indexSelector + ' .' + this.options.arrowClass, this.element).show();
                
                // update flavor text
                $(self.options.flavorSelector, self.element).hide();
                $(self.options.flavorSelector + indexSelector, self.element).show();

                // set contents of animate item to currently visible image
                this._animateItem.empty();
                $(this.options.imagesSelector + ':eq(' + (this._activeIndex ? this._activeIndex : '0') + ')', this.element)
                    .contents()
                    .clone()
                    .appendTo(this._animateItem);

                // hide currently visible image
                $(this.options.imagesSelector + ':lt(' + this._imageCount + ')', this.element).hide();
                
                // show new image
                $(this.options.imagesSelector + indexSelector, this.element).show();
                
                if (typeof(this._activeIndex) == 'number') {
                    // shift animate item into view
                    var imageList = $(this.options.imagesSelector, this.element).parent();
                    imageList.css({
                        'position': 'relative',
                        'top': '-' + this.options.imageHeight + 'px'
                    });

                    // animate the animate item out of view
                    imageList
                        .stop()
                        .animate({'top': '0'}, this.options.animationSpeed, undefined, function() {
                            imageList.css({'position': 'static'});
                        });
                }
                            
                this._activeIndex = index;             
            }
            
        },
        _stopRotation: function() {
        
            if (this._rotationTimerId) {
                window.clearInterval(this._rotationTimerId);
                this._rotationTimerId = null;
            }
            
        },
        _startRotation: function() {
        
            if (!this._rotationTimerId) {
                var self = this;
                this._rotationTimerId = window.setInterval(function() { self._advanceRotation.apply(self); }, this.options.rotationInterval);
            }
            
        },
        _advanceRotation: function() {
        
            var nextIndex = this._activeIndex + 1;
            if (nextIndex < this._imageCount) {
                this._setActiveIndex(nextIndex);
            } else {
                this._setActiveIndex(0);
            }
            
        }
    });
})( jQuery );