/*
 	@title jSimpleCarosel
	@autor hp-stuff
	
	<div class="carousel">
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	
	#Example 1:
	$('.carousel ul').simpleCarousel({
		bntNext : '.next',					//only selector for element or real DOM element;
		btnPrve : '.prev'					//only selector for element or real DOM element;
	});
	
	#Example 2:
	$('.carousel ul').simpleCarousel({
		bntNext : '.next',					
		btnPrve : '.prev',
		event : 'mouseover',				//manual change button event ('click' by default);  
		visible : 2,						//set how visible items have (1 by default);
		itemWidth : 90,						//manual set item with use for moving;
		speed : 200							//set animation speed (330 by default);					
	});
	
	#Example 3:
	$('.carousel ul').simpleCarousel({
		bntNext : '.next',					
		btnPrve : '.prev',
		beforStart : function(){			//function befor start animation;
			//inset code
		}	
		afterFinish : function(){			//function after finish animation;
			//inset code
		}			
	});
*/
(function($){
	$.fn.simpleCarousel = function(options){
		return this.each(function(){
			var obj = $(this),
				carouselEvent = options.event ? options.event : 'click',
				items = options.item ? $(this).find(options.item) : $(this).children(),
				itemWidth = options.itemWidth ? options.itemWidth : itemWidth(),
				visibles = options.visibles ? options.visibles : 1,
				itemsLength = items.length,
				index = 0,
				btnNext = options.btnNext ? options.btnNext : null,
				btnPrev = options.btnPrev ? options.btnPrev : null,
				navigation = options.navigation ? options.navigation : null,
				itemsHTML = '<li><a href="#"></a></li>',
				speed = options.speed ? options.speed : 300,
				afterFinish = options.afterFinish ? options.afterFinish : function(){},
				beforStart = options.beforStart ? options.beforStart : function(){};
			
			obj.css({'width': itemWidth*itemsLength+'px'});
			check();
			createNavigation();
			
			function check(){
				if (itemsLength < visibles){
					$(btnNext).hide();
					$(btnPrev).hide();
					$(navigation).hide();
				}
			}
			
			function createNavigation(){
				var navItems,i=1;
				navItems = itemsLength/visibles;
				while (i < navItems) {
					$(navigation).append(itemsHTML);
					i++;
				}
			}
			
			$(navigation).find('a').each(function(i,el){
				$(el).click(function(){
					index = 0;
					if (visibles*i > itemsLength-visibles){
						index = itemsLength-visibles;
						carouselMove(index);
					}else{
						index = visibles*i;
						carouselMove(index);
					}
					return false;
				});
			});
			
			function itemWidth(){
				var width = items.width()+parseInt(items.css('margin-left'))+parseInt(items.css('margin-right'))+parseInt(items.css('border-right-width'))+parseInt(items.css('border-left-width'));
				return width;
			}

			
			function carouselMove(currenItems){
				beforStart();
				obj.stop(true).animate({'left':-(currenItems*itemWidth)+'px'},speed,function(){
					afterFinish();
				});
				$(navigation).stop(true).animate({'backgroundPosition': Math.ceil(index/visibles)*13+'px -11px'},speed);
			}
			
			$(btnNext).bind(carouselEvent,function(){
				if(itemsLength - (index+visibles) < visibles && itemsLength - (index+visibles) > 0){
					index = index+(itemsLength - (index+visibles));
					carouselMove(index);
				}else{
					if (index < itemsLength - visibles){
						index = index + visibles;
						carouselMove(index);
					}
				}
				return false;
			});
			
			$(btnPrev).bind(carouselEvent,function(){
				if(index < visibles){
					index = 0;
					carouselMove(index);
				}else{
					if (index > 0){
						index = index - visibles;
						carouselMove(index);	
					}
				}
				return false;
			});
			
		});
	}
})(jQuery);