/*
 	Slider
	 
	@author Daniel Nowacki
	@copyright EPRO IT 2009 
 	
 	Kod html: 
 	
 	<div id="slider">
		<div class="slider_window">
			<div class="slider_items">
				<div class="item" style="background: red;">
					1
				</div>
				<div class="item" style="background: green;">
					2
				</div>
				<div class="item" style="background: blue;">
					3
				</div>
				<div class="item" style="background: yellow;">
					4
				</div>
			</div>
		</div>
	</div>
	
	
	<a href="#" id="slide_left">w lewo</a>
	<span id="ico_box">
		<a href="#" class="ico"> 1 </a>
		<a href="#" class="ico"> 2 </a>
		<a href="#" class="ico"> 3 </a>
		<a href="#" class="ico"> 4 </a>
	</span>
	<a href="#" id="slide_right">w prawo</a>
 
 	Kod js:
 	<script type="text/javascript"> 	
 		jQuery(document).ready(function(){		
		jQuery('#slider').simpleslider({
			leftTrigger: 'slide_left',
			rightTrigger: 'slide_right',
			icons: 'ico_box',
			duration: 1,
			timer: 5,
			loop: true,
			stopOnUserEvent: true,
			startOnInit: true
		});
	});
	</script>
	
	Kod css:
	<style type="text/css">
		
		div.slider_window {
			width: 200px;
			height: 200px;
			overflow: hidden;
			position: relative;
			background: #f1f1f1;			
		}
		
		div.slider_window div.slider_items {
			position: relative;
		}
		
		div.slider_window div.slider_items div.item {
			width: 200px;
			height: 200px;
			float: left;
			display: inline;		
		}
		
		#ico_box {
			
		}
		
		#ico_box .selected {
			background: yellow;
		}

		#slide_left.disabled {
			background: red;			
		}
		
		#slide_right.disabled {
			background: red;
		}
		
	</style>
 */
jQuery.fn.extend({
	simpleslider: function(userConfig)
	{
		// domyślna konfiguracja
		var config = {
			leftTrigger: null,	// przewiń w lewo
			rightTrigger: null,	// przewiń w prawo
			icons: null,		// kontener z ikonkami
			duration: 2,		// czas trwania animacji
			timer: 5,			// czas automatycznego przewinięca 
			loop: true,			// powtarzaj od początku
			stopOnUserEvent: true,	// zatrzymaj automatyczne przewijanie po interakcji użytkownika
			startOnInit: true		// stratuj po wywołaniu
		}
		
		jQuery.extend(config, userConfig);
		
		var sliderWindow = jQuery(this).find('.slider_window');
		var itemsContainer = sliderWindow.find('.slider_items');
		var items = itemsContainer.find('.item');
		
		var icons = null;
		if (config.icons)	// przypięcie akcji do ikonek
		{
			icons = jQuery('#'+config.icons).find('.ico');
			
			icons.each(function(index, obj)
			{
				jQuery(this).click(function(ev){					
					ev.preventDefault();
					userEventStopTimer();
					scrollTo(index);	
				});
			});
		}
		
		
		/* kontener musi miec szerokosc ktora zmiesci wszystkie elementy do przewijania */
		itemsContainer.css({clear: 'both', width: items.outerWidth() * (items.size()*2)});
		//itemsContainer.css({width: })

		var leftArrow = jQuery('#'+config.leftTrigger);
		var rightArrow = jQuery('#'+config.rightTrigger);
		
		//if (leftArrow.size()) leftArrow.bind('click', scrolToPrev);
		if (rightArrow.size()) rightArrow.bind('click', scrolToNext);
		
		var carret = 0;
		
		selectIco(carret)
		
		var slideTimer = null;
					
		if (config.startOnInit) startTimer();
		
		// przewiń
		function scrollTo(no)
		{
			if (no == 'next')
			{
				carret++;
			}
			else if (no == 'prev')
			{
				carret--;
			}
			else if (carret != no)
			{
				carret = no;
			}
			else
			{
				return;
			}
			
			// przypnij akcje do trzałek jeżeli istnieją
			if (leftArrow.size()) leftArrow.unbind('click', scrolToPrev);
			if (rightArrow.size()) rightArrow.unbind('click', scrolToNext);

			if (carret > items.size()-2) 
			{
				if (leftArrow.size()) leftArrow.bind('click', scrolToPrev);
			}
			else if (carret == 0) 
			{				
				if (rightArrow.size()) rightArrow.bind('click', scrolToNext);
			}
			else
			{
				if (leftArrow.size()) leftArrow.bind('click', scrolToPrev);
				if (rightArrow.size()) rightArrow.bind('click', scrolToNext);
			}

			// wylicz margines przesunięcia
			var length = items.outerWidth() * -carret;

			itemsContainer.animate({
				marginLeft: length
			}, {
				queue: true,
				duration: config.duration * 1000,
				complete: function() {selectIco(carret)}
			});
		}

		// oznacz ikonkę/strzałkę za pomocą css
		function selectIco(no)
		{
			if (config.icons)
			{
				icons = jQuery('#'+config.icons).find('.ico');

				icons.each(function(index, obj)
				{
					jQuery(this).removeClass('selected');

					if (index == no) jQuery(this).addClass('selected');						
				});
			}
			
			if (rightArrow.size()) rightArrow.removeClass('disabled');
			if (leftArrow.size()) leftArrow.removeClass('disabled');
			
			if (leftArrow.size() && no == 0) leftArrow.addClass('disabled');									
			if (rightArrow.size() && no == items.size()-1) rightArrow.addClass('disabled');
		}
		
		function scrolToNext(ev)
		{
			ev.preventDefault();
			userEventStopTimer();
			scrollTo('next');
		}
		
		function scrolToPrev(ev)
		{
			ev.preventDefault();
			userEventStopTimer();
			scrollTo('prev');
		}			
					
		function userEventStopTimer()
		{
			if (slideTimer) clearInterval(slideTimer);
			
			if (!(config.stopOnUserEvent))
			{
				startTimer();
			} 
		}
		
		function startTimer()
		{
			if (config.timer)
			{
				slideTimer = setInterval(timerSlide, config.timer * 1000);
			}				
		}
		
		function timerSlide()
		{
			if (config.loop && carret >= items.size()-1) carret = -1;
			if (!config.loop && carret == items.size()-2 && slideTimer) clearInterval(slideTimer); 

			scrollTo('next');
		}
	}
});