(function ($) {
	
    $.promo = function (el, options) {
        var self = this,
			node = $(el),
			strip = $('ul', node),
			blocks = $('> li', strip);
			amount = blocks.size();
			
        node.data('promo', this);

        this.init = function () {
            this.options = $.extend({}, $.promo.defaultOptions, options);
			
			this.active = 0;
			this.width = blocks.width() + parseInt(blocks.css('padding-right')) + parseInt(blocks.css('padding-left'));
			
			if (amount > 1) {
				strip.width(this.width * amount);
				
				var navi = '',
					a;
					
				for (a = 0; a < amount; a++) {
					navi += '<a' + (a == 0 ? ' class="active"' : '') + '>' + (a + 1) + '</a>';
				}
				
				navi = $('<div class="navi"><div class="navi-2"><div class="navi-3">' + navi + '</div></div></div>');
				navi.appendTo(node);
				this.navi = $('a', navi);
				this.navi.each(function (i) {
					$(this).data('i', i);
				}).click(this._navi);
				
				this.timeout();
			}
        };
		
		this.timeout = function () {
			self.interval = window.clearInterval(self.interval);
			self.interval = window.setInterval(self._interval, 10000);
		};
		
		this._interval = function () {
			self.active++;
			if (self.active > amount - 1) self.active = 0;
			self.navi.eq(self.active).trigger('click');
		};
	
		this._navi = function () {
			var target = $(this),
				index = target.data('i');
			
			if (target.hasClass('active') || self.off == 1) return;
			self.off = 1;
			
			self.navi.removeClass('active').eq(index).addClass('active');
			var first = $('> li:first', strip);
			
			blocks.eq(index).insertAfter(first);
			
			strip.animate({left: -node.width()}, function () {
				first.appendTo(strip);
				strip.css({left: 0});
				self.off = 0;
				self.active = index;
				self.timeout();
			});
		};
		
        this.init();
    };

    $.promo.defaultOptions = {
    };

    $.fn.promo = function (options) {
        return this.each(function () {
            (new $.promo(this, options));
        });
    };
	
})(jQuery);

$('#promo').promo();