/*---------------------------------------------//

Typical setup for this plugin is as follows:

<div class="slider">
	<a href="" class="prev"></a>
	<a href="" class="next"></a>
	<ul>
		<li><img src=""/></li>
		<li><img src=""/></li>
		<li><img src=""/></li>
	</ul>
</div>

The plugin is then attached to the containing div like so:

$(".slider").imageSlider();

//---------------------------------------------*/

$.fn.imageSlider = function(options){

	// Default settings
	var settings = {
	
		container : this,
		items : $("ul", this).children(),
		prevBtn : null,
		nextBtn : null,
		playBtn : null,
		animationSpeed : 500,
		animationTimeout : 3500,
		loop : false,
		crumbs : true,
		hideCrumbs: true
	
	};
	
	// If options are passed in, merge them with default settings
	if(options){
		$.extend(settings, options);
	};

	var items = settings.items;
		
	$(items).hide();
	$(items[0]).show().addClass("current");
	
	// Image rotation variables
	var current = $(items).index(".current"),
		total = items.length,
		prev = total-1,
		next = current + 1,
		prevBtn = settings.prevBtn,
		nextBtn = settings.nextBtn,
		playBtn = settings.playBtn, 
		loop = settings.loop,
		hovering = false,
		animationSpeed = settings.animationSpeed,
		animationTimeout = settings.animationTimeout,
		container = settings.container,
		initCrumbs = settings.crumbs,
		hideCrumbs = settings.hideCrumbs;

	// If there are more than 1 images in our slideshow
	if(total > 1){
		// Initiate the breadcrumbs if they are enabled{
		if(initCrumbs){
			initBreadcrumbs();
			var breadcrumbs = $(".sliderCrumbs"),
				controls = [breadcrumbs];
		};

		// Initiate the slideshow
		animateSlideshow("play");
	};
	
	hideControls();
	
	if(hideCrumbs){
		// If the user mouses over the slider, bring back the controls
		$(this).mouseenter(function(){
			var timeout = $(this).data("timeout");
	
			if(timeout){ clearTimeout(timeout); };
			$(controls).each(function(){ $(this).stop().animate({"opacity" : 1}, "fast")});
		}).mouseleave(function(){
			hideControls();
		});
	};
	
	// When "previous" button is clicked	
	$(prevBtn).click(function(e){
	
		animateSlideshow("stop");
		$(playBtn).removeClass("pause").addClass("play");
	
		if(current != 0  || loop === true){

			e.preventDefault();
			
			$(items[current]).fadeOut(animationSpeed).removeClass("current");
			$(items[prev]).fadeIn(animationSpeed).addClass("current");
		
			navigator("prev");
			
			updateBreadcrumbs();

		};
	
	});
	
	// When "next" button is clicked	
	$(nextBtn).click(function(e){
	
		animateSlideshow("stop");
		$(playBtn).removeClass("pause").addClass("play");

		if(total-1 != current || loop === true){
		
			e.preventDefault();
			
			$(items[current]).fadeOut(animationSpeed).removeClass("current");
			$(items[next]).fadeIn(animationSpeed).addClass("current");
		
			navigator("next");
			
			updateBreadcrumbs();

		};
		
	});
	
	// When "play" or "pause" button is clicked
	$(playBtn).click(function(){
	
		if($(this).hasClass("pause")){
			animateSlideshow("stop");
			$(this).removeClass("pause").addClass("play");
		}else{
			$(this).removeClass("play").addClass("pause");
			animateSlideshow("play");
		};
		
		return false;
	
	});
	
	// When the user clicks on any breadcrumb itself
	$(".sliderCrumbs li").click(function(e){
		if(current != $(".sliderCrumbs li").index(this)){
			animateSlideshow("stop");
			
			$(items[current]).fadeOut(animationSpeed).removeClass("current");
			
			current = $(".sliderCrumbs li").index(this);
			
			$(items[current]).fadeIn(animationSpeed).addClass("current");
			
			navigator();
			updateBreadcrumbs();
		}
	});
	
	/*-----------------------------------------------
	FUNCTIONS
	-----------------------------------------------*/
	// Creates bullets for the number of slides 
	function initBreadcrumbs(){
		
		var list = $("<ol class=\"sliderCrumbs\"></ol>");
		
		// i starts with one in case we want to use these numbers inside of breadcrumbs
		for(var i = 1; i < total+1; i++){
		
			if(i === 1){
				$(list).append("<li class=\"current\">"+i+"</li>");
			}else{
				$(list).append("<li>"+i+"</li>");
			};
		
		};
		
		$(settings.container).append(list);
		
		$(".sliderCrumbs").css("left", settings.container.width() / 2 - $(".sliderCrumbs").width() / 2);
		
	};
	
	// Applies the visual styling the breadcrumb representing current slide
	function updateBreadcrumbs(){
		
		var crumbs = $(".sliderCrumbs li");
		
		$(crumbs).removeClass("current");
		$(crumbs[current]).addClass("current");
	
	};
	
	// Keeps track of breadcrumbs and values for prev / next buttons
	function navigator(type){

		if(type === "next"){
			if(current === 0){
				current++;
				prev = current - 1;
				if(current === total - 1){
					next = 0;
				}else{
					next = current + 1;
				}
			}else if(current > 0 && current < total -1){
				current++;
				prev = current - 1;
				next = (current === total-1) ? 0 : current + 1;
			}else if(current === total-1){
				current = 0;
				prev = total - 1;
				next = current + 1;
			};
		}else if(type === "prev"){
			if(current > 0 && current < total -1){
				current--;
				prev = (current === 0) ? total - 1 : current - 1;
				next = current + 1;;
			}else if(current === total - 1){
				current--;
				if(current === 0){
					prev = total - 1;
				}else{
					prev = current - 1;
				};
				next = current + 1;
			}else if(current === 0){
				current = total - 1;
				prev = current - 1;
				next = 0;
			};
		}else{
			current === $(".sliderCrumbs li.current").index();
			console.log(current);
			if(current === total-1){
				prev = current - 1;
				next = 0;
			}else if(current === 0){
				prev = total - 1;
				next = current + 1;
			}
			
			/*if(current === $(".sliderCrumbs li.current").index()){
				prev = current - 1;
				next = current + 1;
			}else if(current > 0 && current < total -1){
				prev = current - 1;
				next = current + 1;;
			}else if(current === total - 1){
				prev = current - 1;
				next = current + 1;
			};*/
		
		};
	};
	
	// Hide the image controls if the mouse leaves for more than specified amount of time
	function hideControls(){
		if(hideCrumbs){
		
			$(container).data("timeout", setTimeout($.proxy(function(){
			
				$(controls).each(function(){ $(this).stop().animate({"opacity" : 0}, "slow")});
            
        	}, container), 1000));
		
		};

	};
	
	function animateSlideshow(action){
	
		if(action === "play"){
			$(container).data('animateSlideshow', 
				setInterval(function(){
					
					$(items[current]).fadeOut(animationSpeed).removeClass("current");
					$(items[next]).fadeIn(animationSpeed).addClass("current");
					
					if(current === total-2){
						next = 0;
						current++;
					}else if(total-1 === current){
						current = 0;
						next++;
					}else{
						current++;
						next++;
					};
					
					updateBreadcrumbs();
				
				}, animationTimeout)
			);
		}else{
			clearInterval($(container).data('animateSlideshow'));
		};
	
	};
	
		
}