/*
 * Slider - jQuery Plugin
 * Simple plugin that allows you to create a interface where items slide laterally
 *
 * Copyright (c) 2010 Miro Keller
 *
 * Version: 1.0.5 (14/10/2010)
 * Requires: jQuery v1.3+
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */

//create a closure to isolate the variables from other code
(function($, undefined) {
	$.fn.slider = function(options){
		var opts = $.extend(this, $.fn.slider.defaults, options);
		
		var
			$outer,
			$inner,
			itemsWidth = 0,
			$navContainer,
			$navInner,
			$numbers = new Array(),
			i,
			$navPrev,
			$navNext,
			autoSlideTimer,
			$this = $(this),
			slider = this;
		
		
		if(this.slideTo == undefined){
			this.slideTo = function(index, speedOverride){
				index = parseInt(index);
				if(index >= this.items.length) index = this.items.length -1;

				if(this.currentIndex != index){
					var images_width = 0;
					for(var j=0; j<index; j++){
						images_width += $(slider.items[j]).outerWidth(true);
					}
					images_width += $(slider.items[index]).outerWidth(true) / 2;
					var half_container = $this.outerWidth() / 2;	
					var offset = half_container - images_width;

					$inner.animate({
						left: offset+'px'
					}, (speedOverride == undefined) ? opts.speed : speedOverride);
					this.currentIndex = index;

					$numbers.removeClass('selected');
					$($numbers).filter('[data-index = '+index+']').addClass('selected');

					this.showOrHideNav();

					clearTimeout(autoSlideTimer);
					autoSlideTimer = setTimeout(function() {
						if(slider.autoSlide){
							slider.slideToNext();
						}
					}, this.autoSlideDelay);
				}
				
				return this;
			}
		}
		
		if(this.slideToNext == undefined){
			this.slideToNext = function(){
				var new_index;
				if(this.currentIndex >= slider.items.length-1){
					new_index = 0;
				} else {
					new_index = this.currentIndex + 1;
				}	
				this.slideTo(new_index);
			}
		}

		if(this.slideToPrev == undefined){
			this.slideToPrev = function(){
				var new_index;
				if(this.currentIndex <= 0){
					new_index = slider.items.length-1;
				} else {
					new_index = this.currentIndex - 1;
				}	
				this.slideTo(new_index);
			}
		}

		if(this.showOrHideNav == undefined){
			this.showOrHideNav = function(){
				if(!opts.continuous){
					if(this.currentIndex == 0){
						if($.support.opacity){
							$navPrev.fadeOut();
						} else {
							$navPrev.css('display', 'none');
						}
					} else {
						if($.support.opacity){
							$navPrev.fadeIn();
						} else {
							$navPrev.css('display', 'block');
						}
					}

					if(this.currentIndex == slider.items.length - 1 || slider.items.length == 0){
						if($.support.opacity){
							$navNext.fadeOut();
						} else {
							$navNext.css('display', 'none');
						}
					} else {
						if($.support.opacity){
							$navNext.fadeIn();
						} else {
							$navNext.css('display', 'block');
						}
					}
				}
			}
		}
		
		if(this.clearTimers == undefined){
			this.clearTimers = function(){
				clearTimeout(autoSlideTimer);
			}
		}
		
		//get all the items to slide
		slider.items = $this.children().get();
		//add the two wrapper elements
		$outer = $('<div class="slider_outer"></div>');
		$outer.append(
			$inner = $('<div class="slider_inner"></div>')
		).appendTo($this);
		
		//get the most-inner element of the navContainer
		$navContainer = $(opts.navContainer);
		$this.append($navContainer);
		$navInner = $navContainer.add($navContainer.find('*')).last();
		
		$numbers = jQuery();
		
		i = 0;
		
		$(slider.items).appendTo($inner).css('float', 'left').each(function(){
			itemsWidth += $(this).outerWidth();
			
			//create a new number element
			var $number_element = $(opts.navNumber);
			$numbers = $numbers.add($number_element);
			$navInner.append($number_element);
			
			//get the most-inner element of the navContainer
			var $num_inner = $number_element.add($number_element.find('*')).last();
			
			$number_element.attr('data-index', i);
			$num_inner.text(i+1);
			
			$number_element.click(function(){
				slider.slideTo($(this).attr('data-index'));
			})
			i++;
		});
		
		$inner.css({
			'width' : itemsWidth+100,
			'position' : 'relative'
		}).append('<div style="clear:both"></div>');
		
		$outer.css({
			'width' : '100%',
			'height' : '100%',
			'overflow' : 'hidden'
		});
		
		
		
		$this.prepend(
			$navPrev = $(opts.navPrev).click(function(e){
				if(slider.navPrevHandler == undefined){
					slider.slideToPrev();
				} else {
					slider.navPrevHandler(slider, e);
				}
			})
		);
		
		$this.append(
			$navNext = $(opts.navNext).click(function(e){
				if(slider.navNextHandler == undefined){
					slider.slideToNext();
				} else {
					slider.navNextHandler(slider, e);
				}
			})
		);
		
		//initial index
		this.slideTo(this.defaultIndex, 0);
		
		//auto-slide
		// if(this.autoSlide){
		// 	autoSlideTimer = setTimeout(function() {
		// 		slider.slideToNext();
		// 	}, this.autoSlideInitialDelay);	
		// }
		
		return this;
	}
	
	$.fn.slider.defaults = {
		speed: 500,
		autoSlide: false,
		autoSlideDelay: 5000,
		autoSlideInitialDelay: 8000,
		defaultIndex: 0,
		currentIndex: undefined,
		continuous: false,
		navContainer: '<div class="nav_container"></div>',
		navNumber: '<div class="nav_number"><a href="javascript:"></a></div>',
		navPrev: '<div class="nav_prev"><a href="javascript:">&lt;</a></div>',
		navNext: '<div class="nav_next"><a href="javascript:">&gt;</a></div>',
		navPrevHandler: undefined,
		navNextHandler: undefined
	};
	 
})(jQuery);