/*
 * placeholder widget - simulate HTML5 placeholder functionality
 *
 * Depends:
 *	jquery.ui.core.js
 *	jquery.ui.widget.js
 */
(function($){

    $.widget("UI.RotatorList2", {
        options: {},
        _init: function(){
            var self = this;
            var el = this.element;
            var $el = $(this.element);
            self.items = $('li', $el);
            self.currentIndex = 0;
            self.tmr = [];
			self.autoPlay = true;
			var pgr = $('<ul class="rotator-list-2-pager"/>');
            self.items.each(function(ind, el){
                var $item = $(el);
                $el.css('position', 'relative');
                self.itemWidth = $item.width() > self.itemWidth ? $item.width() : self.itemWidth;
                self.itemHeight = $item.height() > self.itemHeight ? $item.height() : self.itemHeight;
                $item.css('position', 'absolute').css('left', '0px').css('top', '0px').hide();
                $(this).hover(function(){
                    self.autoPlay = false;
                    self.clearTimeouts();
                    //self.showItem(ind);
                }, function(){
                    self.autoPlay = true;
                    self.clearTimeouts();
                    self.currentIndex = ind + 1;
                    self.tmr.push(setTimeout(function(){
                        self.showItem();
                    }, 2000));
                });
				var pgrbtn = $('<a>'+(ind+1)+'</a>').click(function(){
					self.autoPlay = false;
                    self.clearTimeouts();
                    self.showItem(ind);
				});
				var pgritm = $('<li class="pgr-btn-'+ind+'"/>');
				pgritm.append(pgrbtn);
				pgr.append(pgritm);
            });
			$el.after(pgr);
            $el.height(self.itemHeight);
            $el.width(self.itemWidth);
			self.showItem();
        },
        destroy: function(){
            $.Widget.prototype.destroy.call(this);
        },
        showItem: function(itm){
			//console.log('show', itm);
            var self = this;
            self.clearTimeouts();
            if (typeof(itm) != 'undefined') {
                self.currentIndex = itm;
            }
            if (self.currentIndex >= self.items.length) {
                self.currentIndex = 0;
            }
            $('li', $(self.element)).fadeOut();
			$('.rotator-list-2-pager li.selected', $(self.element).parent()).removeClass('selected');
			$('.rotator-list-2-pager li.pgr-btn-'+self.currentIndex, $(self.element).parent()).addClass('selected');
            self.items.each(function(ind, el){
                var $item = $(el);
                if (ind == self.currentIndex) {
                    $item.fadeIn('slow', function(){
                        if (self.autoPlay == true) {
                            self.currentIndex++;
                            if (self.currentIndex >= self.items.length) {
                                self.currentIndex = 0;
                            }
                            self.tmr.push(setTimeout(function(){
                                self.showItem();
                            }, 8000));
                            //console.log(tmr);
                        }
                    });
                }
            });
        },
        clearTimeouts: function(){
            var self = this;
            while (self.tmr.length > 0) {
                clearTimeout(self.tmr.shift());
            }
        },
        widget: function(){
            return this.element;
        }
    });
}(jQuery));