/**
 * ImageSlider
 * Plugin written for Claires Court Website - August 2011 - bob@shinytastic.com
 *
 */
(function($)
{
	$.fn.ImageSlider = function(options){

		opts = $.extend({}, $.fn.ImageSlider.defaults, options);

		return this.each(
			function(){
				/**
				 * Set up a nice lazy shortcut
				 */
				var $this = $(this);

				/**
				 * Get Slide Width
				 */
				var slideWidth = $this.find('.ImageSlider_Slides').first().width();
//				alert(slideWidth);

				/**
				 * Timeout int
				 */
				var timeInt;

				/**
				 * IsPaused Flag
				 */
				var isPaused = false;

				/**
				 * Set current index
				 */
				var curIndex = 0;

				/**
				 * Get number of slides
				 */
				var numSlides = $this.find('.ImageSlider_Slides li').length;

				/**
				 * Create list of slides
				 */
				var $slides = $this.find('.ImageSlider_Slides li');

				/**
				 * Create list of icons (the little squares)
				 */
				var $icons = $this.find('.ImageSlider_SlideList li');

				/* Move everything but the first item outside of the view area */
				$slides.css('left', slideWidth);
				$slides.first().css('left', 0);
//				$this.find('.ImageSlider_Slides li').css('left', slideWidth);
//				$this.find('.ImageSlider_Slides li').first().css('left', 0);


				/* Set up event handlers */

				// Mouse over - PAUSE!
				$this.hover(
					function(){
						clearTimeout(timeInt);
						isPaused = true;
					},
					function(){
						isPaused = false;
						pauseContinue();
					}
				);

				// Click on next/prev
				$this.find('.ImageSlider_Next').click(next);
				$this.find('.ImageSlider_Previous').click(previous);

				// Click on an item
				$icons.click(
					function(){
						var index = $(this).index();
						jumpTo(index);
					}
				);

				/* Start! */
				highlightIcon(0);
				pauseContinue();

				function next(){
					curIndex++;

					if(curIndex > numSlides-1){curIndex = 0;}

					var $thisSlide = $slides.eq(curIndex);
					// Bring me to the top then animate me
					$slides.not($thisSlide).css('z-index','1');
					$thisSlide.css('z-index','2');
					highlightIcon(curIndex);
					$slides.eq(curIndex).animate({left: 0}, opts.animSpeed, opts.easing, function(){
						// Reset other slides position
						$slides.not($thisSlide).css('left',slideWidth);
						if(!isPaused){
							pauseContinue();
						}
					});

				}

				function previous(){
					curIndex--;
					if(curIndex < 0){curIndex = numSlides-1;}

					var $thisSlide = $slides.eq(curIndex);
					// Bring me to the top then animate me
					$slides.not($thisSlide).css('z-index','1');
					$thisSlide.css('z-index','2');
					highlightIcon(curIndex);
					$slides.eq(curIndex).animate({left: 0}, opts.animSpeed, opts.easing, function(){
						// Reset other slides position
						$slides.not($thisSlide).css('left',slideWidth);
//						if(!isPaused){
//							pauseContinue();
//						}
					});

				}

				function jumpTo(index){
					curIndex = index;
					var $thisSlide = $slides.eq(curIndex);
					// Bring me to the top then animate me
					$slides.not($thisSlide).css('z-index','1');
					$thisSlide.css('z-index','2');
					highlightIcon(curIndex);
					$slides.eq(curIndex).animate({left: 0}, opts.animSpeed, opts.easing, function(){
						// Reset other slides position
						$slides.not($thisSlide).css('left',slideWidth);
//						if(!isPaused){
//							pauseContinue();
//						}
					});
				}

				function highlightIcon(index){
					var $thisIcon = $icons.eq(index);
					$thisIcon.animate({backgroundColor: opts.iconColorHighlight}, opts.animSpeed, opts.easing);
					$icons.not($thisIcon).animate({backgroundColor: opts.iconColor}, opts.animSpeed, opts.easingInverse);
//					$thisIcon.css('background-color',opts.iconColorHighlight);
//					$icons.not($thisIcon).css('background-color',opts.iconColor);

				}

				function pauseContinue(){
					timeInt = setTimeout(function(){next();}, opts.pauseTime);
				}



			} // end each function
		); // end each

		// Methods

	};

	/* Private Methods */


	/* Set up option defaults */
	$.fn.ImageSlider.defaults = {
		'animSpeed': 500,
		'pauseTime': 2000,
		'iconColor': '#cccccc',
		'iconColorHighlight': '#cc0000',
		'easing': 'easeInQuad',
		'easingInverse': 'easeOutQuad'

	};
})(jQuery);