/*
 * Basic jQuery Slider plug-in v.1.1
 * 
 * http://www.basic-slider.com
 *
 * Authored by John Cobb
 * Visit my blog at http://www.johncobb.name
 * Or say helo on twitter: @john0514
 *
 * Copyright 2011, John Cobb
 * Free for all to use, abuse and improve under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * August 2011
 */

(function(jQuery){
	jQuery.fn.bjqs = function(options) {
		
	var settings = {};	
		
	var defaults = {
		width: 700,					// Width + Height used to ensure consistency
		height: 300,				// Width + Height used to ensure consistency
		animation: 'fade',			// The type of animation (slide or fade)
		animationDuration: 450, 	// The duration in ms of the transition between slides
		automatic: true,			// Automatically rotate through the slides
		rotationSpeed: 4000,		// Delay in ms between auto rotation of the slides
		hoverPause: true,			// Pause the slider when any elements receive a hover event
		showControls: true,			// Show the manual slider controls
		centerControls: true,		// Center the controls vertically
		nextText: 'Next',			// Text to display in 'next' controller
		prevText: 'Prev',			// Text to display in 'previous' controller
		showMarkers: true,			// Show positional markers
		centerMarkers: true,		// Center the positional indicators
		keyboardNav: true,			// Allow navigation with arrow keys
		useCaptions: true			// Use image title text as caption
	}
	
	// Overwrite the defaults with the provided options (if any)
	settings = jQuery.extend({}, defaults, options);
	
	// Variables
	var	jQuerycontainer = this;
		jQueryslider = jQuery('ul.bjqs'),
		slides = jQueryslider.children('li'),
		slideCount = slides.length,
		animating = false,
		paused = false,
		current = 0,
		slidePosition = 1,
		next = 0,
		jQueryactive = slides.eq(current),
		forward = 'forward',
		back = 'backward'
	
	// Make everything consistent in size
	// TODO: move away from px and make slider responsive
	slides.css({'height':settings.height,'width':settings.width});
	jQueryslider.css({'height':settings.height,'width':settings.width});
	jQuerycontainer.css({'height':settings.height,'width':settings.width});

	// Add unique class to slide list elements to differentiate from slide content list elements
	slides.addClass('bjqs-slide');
	
	// Phat Controller(s)
	if(settings.showControls && slideCount > 1){
		
		// Create the elements for the controls
		jQuerycontrolContainer = jQuery('<ul class="bjqs-controls"></ul>');
		jQuerynext = jQuery('<li><a href="#" class="bjqs-next" class="controls">'+settings.nextText+'</a></li>');
		jQueryprevious = jQuery('<li><a href="#" class="bjqs-prev" class="controls">'+settings.prevText+'</a></li>');
		
		// Bind click events to the controllers
		jQuerynext.click(function(e){
			e.preventDefault();
			if(!animating)
				bjqsGo(forward,false);
		});
		
		jQueryprevious.click(function(e){
			e.preventDefault();
			if(!animating)
				bjqsGo(back, false);
		});
		
		// Put 'em all together and what do you get? Ding dong. Hotdog
		jQuerynext.appendTo(jQuerycontrolContainer);
		jQueryprevious.appendTo(jQuerycontrolContainer);
		jQuerycontrolContainer.appendTo(jQuerycontainer);
		
		// Vertically center the controllers
		if(settings.centerControls){
			jQuerycontrol = jQuerynext.children('a');
			offset = (jQuerycontainer.height() -jQuerycontrol.height()) / 2;
			jQuerynext.children('a').css('top', offset).show();
			jQueryprevious.children('a').css('top', offset).show();
		}
		
	}
	
	// Let's put in some markers
	if(settings.showMarkers && slideCount > 1){
		
		jQuerymarkerContainer = jQuery('<ol class="bjqs-markers"></ul>');
		
		//Create a marker for each banner and add append it to the wrapper
		jQuery.each(slides,function(key,value){
			if(settings.animType == 'slide'){
				if(key != 0 && key != slideCount-1)
					jQuerymarker = jQuery('<li><a href="#">'+key+'</a></li>');
			}
			else{
				key++
				jQuerymarker = jQuery('<li><a href="#">'+key+'</a></li>');
			}
			
			jQuerymarker.click(function(e){
				e.preventDefault();
				if(!jQuery(this).hasClass('active-marker') && !animating)
					bjqsGo(false,key);
			});
			
			jQuerymarker.appendTo(jQuerymarkerContainer);
			
		});
		
		markers = jQuerymarkerContainer.children('li');
		markers.eq(current).addClass('active-marker');
		jQuerymarkerContainer.appendTo(jQuerycontainer);
		
		if(settings.centerMarkers){
			offset = (settings.width - jQuerymarkerContainer.width() )/ 2;
			jQuerymarkerContainer.css('left', offset);
		}
		
	}
	
	// Enable keyboard navigation
	if(settings.keyboardNav && slideCount > 1){
		
		jQuery(document).keyup(function(event) {
			
			if(!paused){
				clearInterval(bjqsInterval);
				paused=true;
			}
			
			if (!animating) {
				if(event.keyCode == 39){
					event.preventDefault();
					bjqsGo(forward, false);
				}
				else if(event.keyCode == 37){
					event.preventDefault();
					bjqsGo(back,false);
				}
			}
			
			if(paused & settings.automatic){
				bjqsInterval = setInterval(function(){ bjqsGo(forward) }, settings.rotationSpeed);
				paused=false;
			}
			
		});
	}
	
	// Show captions
	if(settings.useCaptions){
		
		jQuery.each(slides, function(key, value){
			
			var jQueryslide = jQuery(value);
			var jQueryslideChild = jQueryslide.children('img:first-child');
			var title = jQueryslideChild.attr('title');
			
			if(title){
				var jQuerycaption = jQuery('<p class="bjqs-caption">'+title+'</p>');
				jQuerycaption.appendTo(jQueryslide);
			}

		});
		
	}
	
	// Run a bubble-bath and float in that m'fkr like a hovercraft. (enable hover pause)
	if(settings.hoverPause && settings.automatic){
			
		jQuerycontainer.hover(function(){
			if(!paused){
				clearInterval(bjqsInterval);
				paused=true;
			}
		},function(){
			if(paused){
				bjqsInterval = setInterval(function(){ bjqsGo(forward) }, settings.rotationSpeed);
				paused=false;
			}
		});
		
	}
	
	
	// We have to make a few tweaks if we're sliding instead of fading
	if(settings.animation == 'slide' && slideCount > 1){
		
		jQueryfirst = slides.eq(0);
		jQuerylast = slides.eq(slideCount-1);
		
		jQueryfirst.clone().addClass('clone').removeClass('slide').appendTo(jQueryslider);
		jQuerylast.clone().addClass('clone').removeClass('slide').prependTo(jQueryslider);
		
		slides = jQueryslider.children('li');
		slideCount = slides.length;
		
		jQuerywrapper = jQuery('<div class="bjqs-wrapper"></div>').css({
			'width' : settings.width,
			'height' : settings.height,
			'overflow' : 'hidden',
			'position' : 'relative'
		});
		
		jQueryslider.css({
			'width' : settings.width*slideCount,
			'left' : -settings.width
		});
		
		slides.css({
			'float': 'left',
			'position': 'relative',
			'display' : 'list-item'
		});
		
		jQuerywrapper.prependTo(jQuerycontainer);
		jQueryslider.appendTo(jQuerywrapper);
		
	}
	
	// Check position to see if we're at the first or last slide and update 'next' accordingly
	var checkPosition = function(direction){
		
		if(settings.animation == 'fade'){
			
			if(direction == forward){
				!jQueryactive.next().length ? next = 0 : next++
			}
			else if(direction == back){
				!jQueryactive.prev().length ? next = slideCount-1 : next--
			}
			
		}
		
		if(settings.animation == 'slide'){
			
			if(direction == forward){
				next = slidePosition + 1;
			}
			
			if(direction == back){
				next = slidePosition - 1;
			}
		}
		
		return next;
	}
	
	// Kick off the rotation if we're on auto pilot, but only if we have more than 1 slide (thanks Efrain!)
	if(settings.automatic && slideCount > 1){
		var bjqsInterval = setInterval(function(){ bjqsGo(forward,false) }, settings.rotationSpeed);
	}
	
	// Show the first slide	
	slides.eq(current).show();
	jQueryslider.show();
	
	// What comes next? Hey, Bust a move!
	var bjqsGo =  function(direction,position){
		
		if(!animating){
			
			if(direction){
				next = checkPosition(direction);
			}
			else if(position && settings.animation == 'fade'){
				next = position-1;
			}else{
				next = position;
			}
			
			animating = true;
			
			if(settings.animation == 'fade'){
				
				if(settings.showMarkers){
					markers.eq(current).removeClass('active-marker');
					markers.eq(next).addClass('active-marker');
				}
				
				jQuerynext = slides.eq(next);
				
				jQueryactive.fadeOut(settings.animationDuration);
				jQuerynext.fadeIn(settings.animationDuration, function() {
					jQueryactive.hide();
					current = next;
					jQueryactive = jQuerynext;
					animating = false;
				});
			}
			else if(settings.animation == 'slide'){
				
				if(settings.showMarkers){
					
					markers.eq(slidePosition-1).removeClass('active-marker');
					
					if(next==slideCount-1){
						markers.eq(0).addClass('active-marker');
					}else if(next==0){
						markers.eq(slideCount-3).addClass('active-marker');
					}else{
						markers.eq(next-1).addClass('active-marker');
					}
					
				}
				
				jQueryslider.animate({'left': -next*settings.width}, settings.animationDuration, function(){
					
					if(next==0){
						slidePosition=slideCount-2;
						jQueryslider.css({'left' : -slidePosition*settings.width});
					}else if(next==slideCount-1){
						slidePosition=1;
						jQueryslider.css({'left' : -settings.width});
					}else{
						slidePosition=next;
					}
					
					animating=false;
					
				});
				
			}
			
		}
		
	}
		
	return this; // KTHXBYE
	
	}
})(jQuery);