/*
 	@title jSimpleCarosel
	@autor hp-stuff

	<div class="carousel">
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>

	#Example 1:
	$('.carousel ul').simpleCarousel({
		btnNext : '.next',					//only selector for element or real DOM element;
		btnPrev : '.prev'					//only selector for element or real DOM element;
	});

	#Example 2:
	$('.carousel ul').simpleCarousel({
		btnNext : '.next',
		btnPrev : '.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({
		btnNext : '.next',
		btnPrev : '.prev',
		beforeStart : function(){			//function before 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,
				autoTime = options.autoTime ? options.autoTime : 10000,
				auto = options.auto ? options.auto : false,
				btnNext = options.btnNext ? options.btnNext : null,
				btnPrev = options.btnPrev ? options.btnPrev : null,
				navigation = options.navigation ? options.navigation : null,
				itemsHTML = options.itemsHTML ? options.itemsHTML : '<li></li>',
				speed = options.speed ? options.speed : 400,
				direction = options.direction ? options.direction : 'left',
				afterFinish = options.afterFinish ? options.afterFinish : function(){},
				beforeStart = options.beforeStart ? options.beforeStart : 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('li').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-width')) ? parseInt(items.css('border-width')) : 0);
				return width;
			}


			function carouselMove(currenItems){
				beforeStart(index,obj);
				var animation = {};
				animation[direction] = -(currenItems*itemWidth)+'px'

				obj.stop(true).animate(animation,speed,function(){
					afterFinish(index,obj);
				});
				$(navigation).children('.active').removeClass('active');
				$($(navigation).children('li')[index/visibles]).addClass('active');
			}

			$(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;
			});

			if (auto){
				var flag = true;

				setInterval(function(){
					if (index == 0) {
						flag = true;
					}else if(index == itemsLength - visibles) {
						flag = false;
					}

					if (flag){
						index = index + visibles;
						carouselMove(index);
					}else{
						index = index - visibles;
						carouselMove(index);
					}
				},autoTime);
			}

		});
	}
})(jQuery);