/*
 * Matt Slider v1.0
 * http://bscene.com.au
 *
 * Copyright 2010, Matt Emery
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * August 2010 - maiden voyage
 *
 *

	*** SEE CSS FILE FOR STYLES ***
	*** OVEWRITE DEFAULT CSS STYLES BY PREPENDING YOUR SLIDE'S ID TO THE GIVEN CLASSES ***

	*** EXAMPLE HTML MARKUP ***
	<div id='home-banner-slideshow'>
		<ul>
			<li title='Title for ths slide caption (optional)...'><img src='/images/image1.jpg' alt='Some alt...' /></li>
			<li title='Title for ths slide caption (optional)...'><img src='/images/image2.jpg' alt='Some alt...' /></li>
			<li title='Title for ths slide caption (optional)...'>Anything here...divs, movies, pics, whatever.</li>
		</ul>
	</div>

	*** EXAMPLE OF (OPTIONAL) EXTERNAL NAV MARKUP ***
	<p>
		<a href='#home-banner-slideshow' rel='-'>prev</a>
		<a href='#home-banner-slideshow' rel='0'>000</a>
		<a href='#home-banner-slideshow' rel='1'>111</a>
		<a href='#home-banner-slideshow' rel='2'>222</a>
		<a href='#home-banner-slideshow' rel='+'>next</a>
	</p>

	*** EXAMPLE JS MARKUP ***
	<script type="text/javascript">
	$(window).load(function() {
		$('#home-banner-slideshow').mattSlider({animSpeed:400, skipSpeed:200, showNavNextPrev:true});
	});
	</script>

	*** DEFAULTS (see below) ***

 *
 */


//You need an anonymous function to wrap around your function to avoid conflict
(function($){

	//Attach this new method to jQuery
 	$.fn.extend({ 
 		
 		//plugin name
 		mattSlider: function(options) {

			//Set the default values
			var defaults = {
				animSpeed : 400,
				skipSpeed : 200,
				pauseTime : 4000,
				showCaptions : true,
				showNavNextPrev : true,
				showNavIndex : true,
				navPrevText : '&laquo;',
				navNextText : '&raquo;',
				pauseOnHover : true,
				stopOnHover : false
			}

			//merge defaults and user options (user options over-ride defaults)
			var options =  $.extend(defaults, options);

			//Iterate over the current set of matched elements
	    		return this.each(function() {

				var sliderContainer = $(this);
				var slider = $('ul', sliderContainer);
				var slides = $('li', slider);
				var slideWidth = sliderContainer.width(); //width of a slide should match container
				var slideHeight = sliderContainer.height(); //height of a slide should match container
				var numberOfSlides = slides.length;
				var direction  = 'forward';
				var targetIndex = null;
				var navNextPrev = '';
				var navIndex = '';


				//set timer
				var timer = 0;
				timer = setInterval( function(){ runSlide(); }, options.pauseTime);

				//wrap UL in container element - which will hide the overflowing slides
				$(slider).wrap("<div style='width:"+slideWidth+"px;height:"+slideHeight+"px;overflow:hidden;position:relative;'></div>");

				//allow overflow on UL if it's been hidden via css for non-js users
				sliderContainer.css('overflow','visible');

				//set slideshow UL width to sum of all slides
				slider.css('width', numberOfSlides*slideWidth+'px');

				//add mattSlider class (so we can have multiple sliders)
				slider.addClass('mattSlider');
				slides.addClass('mattSlider');
			
				//set slideshow li's to width/height of slideshow
				slides.css({'width' : slideWidth+'px', 'height' : sliderContainer.css('height')});
		
	
				//nav controls? ************************
				if(options.showNavNextPrev) {
					navNextPrev = "<a class='mattSlider-prev' href='#'>"+options.navPrevText+"</a><a class='mattSlider-next' href='#'>"+options.navNextText+"</a>";
				}


				//captions and nav index controls? ************************
				slides.each(function(index) {
					//captions?
					if(options.showCaptions) {
						$(this).append("<div class='mattSlider-caption'><span>"+$(this).attr('title')+"</span></div>").data('index', index);
					}

					//nav index links
					if(options.showNavIndex) {
						navIndex += " <a href='#' class='mattSlider-index' rel='"+index+"'>"+(index+1)+"</a> ";
					}
				});


				//got any controls? ************************
				if(options.showNavNextPrev || options.showNavIndex) {

					sliderContainer.append("<div class='mattSlider-nav'></div>");

					if(options.showNavNextPrev) {
						$('.mattSlider-nav', sliderContainer).append(navNextPrev);
					}

					if(options.showNavIndex) {
						$('.mattSlider-prev', sliderContainer).after(navIndex);
					}
				}
				
		
				//pause/stop on hover? ************************
				if(options.pauseOnHover || options.stopOnHover) {
					slider.hover(function(){
						clearInterval(timer);
					}, function(){
						if(!options.stopOnHover) {
							//runSlide();
							timer = setInterval( function(){ runSlide(); }, options.pauseTime);
						}
					});
				}
			
			
				//control buttons - update index buttons ************************
				function control_buttons(target) {
					$('a.mattSlider-index', sliderContainer).removeClass('mattSlider-index-active');
					$('a.mattSlider-index[rel="'+target+'"]', sliderContainer).addClass('mattSlider-index-active');
				}
			
			
				//next/prev button? ************************
				if(options.showNavNextPrev) {
					//next
					$('a.mattSlider-next', sliderContainer).live('click', function() {
						runSlide(options.skipSpeed);
						clearInterval(timer);
						return false;
					});
			
					//prev
					$('a.mattSlider-prev', sliderContainer).live('click', function() {
						runSlide(options.skipSpeed, 'reverse');
						clearInterval(timer);
						return false;
					});
				}		
		
		
				//index buttons ************************
				$('a.mattSlider-index', sliderContainer).live('click', function() {
					runSlide(options.skipSpeed, null, $(this).attr('rel'));
					clearInterval(timer);
					return false;
				});


				//external nav? (requires a href that = this ID)  ************************
				$('a[href=#'+$(sliderContainer).attr('id')+']').click( function() {
					var target = $(this).attr('rel');

					if(target == '-') {
						runSlide(options.skipSpeed, 'reverse');
					}
					else if(target == '+') {
						runSlide(options.skipSpeed);
					}
					else {
						runSlide(options.skipSpeed, null, target);
					}

					clearInterval(timer);
					return false;
				});
				
		
			
		
				//runSlide! ************************
				function runSlide(animSpeed,direction,targetIndex) {
		
					var currentSlide = $('li', slider).first();
					var currentSlideIndex = currentSlide.data('index');
					var nextSlide = $('li:eq(1)', slider);
					var lastSlide = $('li', slider).last();
		
		
					//target button
					if(typeof targetIndex != 'undefined') {
		
						//reverse?
						if(targetIndex < currentSlideIndex) {
							for(i=currentSlideIndex-1; i>=targetIndex; i--) {
								slide_reverse(slides[i]);
							}
						}
		
						//forward?  append/animate every slide that's before the target
						else {
							for(i=currentSlideIndex; i<targetIndex; i++) {
								slide_forward(slides[i]);
							}
						}
					}
		
		
					//prev button
					else if(direction == 'reverse') {
						targetIndex = lastSlide.data('index');
						slide_reverse(lastSlide);
					}
		
					//next button
					else {
						targetIndex = nextSlide.data('index')
						slide_forward(currentSlide);
					}
		
		
					function slide_reverse(el) {
						$(el)
						.prependTo(slider)
						.css({'marginLeft' : '-'+slideWidth+'px'})
						.animate({
							'marginLeft' : '0px'
							},
							animSpeed, 'linear', function() {
								control_buttons(targetIndex);
			  			});
					}
		
			
					function slide_forward(el) {
						$(el).animate({
							'marginLeft' : '-'+slideWidth+'px'
							},
							animSpeed, 'linear', function() {
								$(this).appendTo(slider).css({'marginLeft' : '0px'});
								control_buttons(targetIndex);
				  		});
					}
		
				} //end runSlide!
		
		
				//init stuff ************************
				control_buttons(0);

		
    			}); //end each

    		}//end mattSlider function

	}); //end extend

//pass jQuery to the function, 
})(jQuery);