$.fn.banner = function(options) {
	    var options = $.extend({
	    	 lineWeight: 20,
			 lineCount: 10,
			 slideWidth: 100,
			 slideHeight: 100,
			 speed:3000,
			 init:function() {}
	    }, options);

		var $this = $(this),
    		slidesContainer = $('#slides',$this),
    		slides = $('span', slidesContainer),
    		slidesCount = slides.length,
    		slideHeight = options.slideHeight,
    		slideWidth = options.slideWidth,
    		lineWeight = options.lineWeight,
			lineCount = options.lineCount;
		//	currentSlide = $('span.c', slidesContainer);
		options.init($this);
		
   
		 /**
		 * Едем вправо
		 * @param {Number} next порядковый номер следующего слайда
		 * @param {Function} callback Колбек
		 */
   		function slideRight(currentSlide, next, callback){
				setNext(next);
				var lines = [currentSlide];
				for (var i = lineCount - 1; i >= 0; i -= 1) {
					var opacity = (1 / (lineCount+1) * (i+1)).toFixed(2), 
						marginLeft = [-(lineCount - i) * lineWeight, 'px'].join(''), 
						bgPosition = [-(i + 1) * lineWeight, 'px 0'].join('');
					lines.push(currentSlide.clone()
									.appendTo(slidesContainer)
									.css({
										width: lineWeight,
										opacity: opacity,
										marginLeft: marginLeft,
										backgroundPosition: bgPosition
									})
									.addClass('clone')
								);
				}
				animobj = $('span.c', slidesContainer)
				var z = 0, pN = 0;
				$({x: 0}).animate({
					x: slideWidth + lineWeight * lineCount
				}, {
					duration: options.speed,
					step: function(n){
						//n = Math.floor(n);
						if (pN != n) {
							for (var i = lines.length - 1; i >= 0; i -= 1) {
								lines[i].css({left: n,backgroundPosition: -n + lineWeight * i + 'px 0'
								});
							}
							pN = n;
						}
					},
					complete: function(){
						clear();
						if (!!callback) callback();
					}
				});
			}
   
   			/**
   			 * Едим влево
   			 * @param {Number} next порядковый номер следующего слайда
   			 * @param {Function} callback 
   			 */
   			function slideLeft(currentSlide, next, callback){
				setNext(next);
				var lines = [];
				for (var i = lineCount - 1; i >= 0; i -= 1) {
					var opacity = ((1 / (lineCount + 1)) * (i + 1)).toFixed(2), 
						bgPosition = [-slideWidth + (lineCount - i - 1) * lineWeight, 'px 0'].join('');
					lines.push(
						currentSlide.clone().appendTo(slidesContainer)
						.css({
							width: lineWeight,
							opacity: opacity,
							backgroundPosition: bgPosition
						})
						.addClass('clone')
					)
				}
				
				var z = 0, pN = 0;
				$({x: slideWidth}).animate({x: -lineCount * lineWeight}, {
					duration: options.speed,
					step: function(n){
						//n = Math.floor(n);
						//if (pN != n) {
							
							if ( n >= 0 ) currentSlide.css({width: n})
							else currentSlide.css({width: 0})
							
							for (var i = lines.length - 1; i >= 0; i -= 1) {
								lines[i][0].style.left = (n + lineWeight * i) + 'px';
								lines[i][0].style.backgroundPosition = -(n + lineWeight * i) + 'px 0';
								
								/*
								lines[i].css({
									marginLeft: [n + lineWeight * i, 'px'].join(''),
									backgroundPosition: [-n - lineWeight * i, 'px 0'].join('')
								})
								*/
							}
							//pN = n;
						//}
					},
					complete: function(){
						clear();
						if (!!callback) callback();
					}
				});
			}
   			/*
   			 * Всё зачистим после анимации
   			 */
   			function clear() {
					slidesContainer
						.find('span.clone')
							.remove()
						.end()
						.find('span.c')
							.removeClass('c')
							.css({left:0, backgroundPosition:'0 0', margin:0, width:options.slideWidth})
						.end()
						.find('span.n')[0].className = 'c';
						
						//console.log($('span.c'))
			}
   			
			/**
			 * Готовим следующий слайд
			 * @param {Number} n порядковый номер следующего слайда
			 */
			function setNext(n) {
				$('span', slidesContainer)[n].className = 'n';
			}
			
			//slideRight(slidesContainer);
	    	/**
	    	 * Распределяет анимацию: в зависимости от индекса нового слайда, анимирует влево, либо вправо
	    	 * @param {Number} newIndex Порядковый номер нового слайда
	    	 * @param {Function} callback Функция обратного вызова (вызывается после завершения анимации)
	    	 */
			function slide(newIndex, callback) {
				var currentSlide = $('span.c', slidesContainer), 
					currentSlideIndex = slides.index(currentSlide);
				if (newIndex > currentSlideIndex) {
					slideLeft(currentSlide, newIndex, callback);
				} else if (newIndex < currentSlideIndex) {
					slideRight(currentSlide, newIndex, callback);
				}
			}

	    	return {
				object: $this,
				slide: slide,
				slideLeft: slideLeft
			}
	};
	
/*
 * Dom ready
 */
$(function() {
  
  // Главный баннер - инициализация
  var banner = $('#banner').banner({
	  	slideWidth: 543, // ширина 
		slideHeight: 219, // высота
		lineCount: 3, // количество полос
		lineWeight: 16, // ширина полосы
		speed: 1200, // скорость
		init:function(obj) { 
			
			
			var ol = $('ol.pager', obj);
			var pagerEvent = function(e) {
				var $this = $(this), et = $(e.target);
				if (!et.hasClass('active')) {
					slTimer = clearTimeout(slTimer);
					et.addClass('active').siblings().removeClass('active');
					var index  = $('li', $this).index($(e.target));
					$('#banner-next,#banner-prev').add(ol).unbind('click');
					banner.slide(index, function() {
						ol.bind('click', pagerEvent);
						$('#banner-next,#banner-prev').bind('click', nextPrevEvent);
						slTimer = setTimeout(function() {
							$(nextBTN).trigger('click');
						}, 3000);
					});
				}
			}
			
			var nextPrevEvent = function() {
				var newIndex;
				slTimer = clearTimeout(slTimer);
				$('#banner-next,#banner-prev').add(ol).unbind('click');
				if (this.id.split('banner-')[1] === 'next') {
					newIndex = $('li', ol).index($('li.active', ol).next());
					if (newIndex === -1) newIndex = 0;
				} else {
					newIndex = $('li', ol).index($('li.active', ol).prev());
					if (newIndex === -1) newIndex = $('li', ol).length-1;
				}
				
				$('li:eq('+ newIndex +')', ol).addClass('active').siblings().removeClass('active')
				
				$('#banner-next,#banner-prev').unbind('click');
				banner.slide(newIndex, function() {
					$('ol.pager', obj).bind('click', pagerEvent);
					var nextBTN = $('#banner-next,#banner-prev').bind('click', nextPrevEvent)[0];
					slTimer = setTimeout(function() {
						$(nextBTN).trigger('click');
					}, 3000);
				});
			}
			
			
			$('ol.pager', obj).bind('click', pagerEvent);
			var nextBTN = $('#banner-next,#banner-prev').bind('click', nextPrevEvent)[0];
			
			slTimer = setTimeout(function() {
				$(nextBTN).trigger('click');
			}, 3000);
		}
		
	  });
// /dom ready
 }); 

