/* simple jQuery slideshow */

(function($){
	
	$.fn.slideshow = function( opts, value ){
		if(!this.length){ return this; }
		
		// is this a method call?
		if(typeof opts === "string"){
		
			// prevent access to "private" methods (prefixed with "_")
			return opts.substring(0,1) === "_"
				? this
				: this.data("slideshow")[opts](value);
		}
		
		return this.each(function(){
			var $this = $(this);
			!$this.data("slideshow") && $this.data("slideshow", new Slideshow(this, opts));
		});
	}

	// default options
	$.fn.slideshow.options = {
		delay: 4000,
		speed: 500
	}
	
	function Slideshow( container, options ){
		this.options = $.extend({}, $.fn.slideshow.options, options);
		this.current = 0;
		this.isRunning = false;
		
		// wrap the images in a container, and return the wrapped elements
		this.elements = $(container).addClass("jq-slideshow").children().map(function(){
			var $this = $(this),
				$item = $this.wrap('<div class="jq-slideshow-item"></div>'),
				title = $this.is("img") ? $this.attr("title") : $this.find("img").attr("title");
			
			// add title?
			if(title){
				var $title = $item.after('<div class="jq-slideshow-title"><p>' + title + '</p></div>').next();
				
				// if the item is an anchor, link up the title as well
				if( $item.is("a") ){
					$title.children().wrapInner('<a href="'+$item[0].href+'"></a>');
				}
			}
			
			return $item.parent().get();
		});
		
		// build in some controls TODO abstract this outta here!
		var self = this, controls = [];
		controls.push('<div class="jq-slideshow-controls">');
		controls.push('<a href="" rel="prev" class="jp-slideshow-prev"><img src="/images/slideshow/control_prev.png" alt="Previous" /></a>');
		controls.push('<a href="" rel="stop" class="jp-slideshow-stop"><img src="/images/slideshow/control_stop.png" alt="Pause" /></a>');
		controls.push('<a href="" rel="start" class="jp-slideshow-start" style="display:none"><img src="/images/slideshow/control_start.png" alt="Play" /></a>');
		controls.push('<a href="" rel="next" class="jp-slideshow-next"><img src="/images/slideshow/control_next.png" alt="Next" /></a>');
		controls.push('</div>');
		this.elements.find(".jq-slideshow-title").append(controls.join(''));
		
		$(".jq-slideshow-controls a", container).click(function(){
			var action = this.getAttribute("rel");
			
			// fire off the actual action
			self[ action ]();
			
			// play/pause toggle visibility of each
			if( action === "stop" || action === "start"){
				$(".jp-slideshow-start", container)[ action === "stop" ? "show" : "hide" ]();
				$(".jp-slideshow-stop", container)[ action === "stop" ? "hide" : "show" ]();
			}
			
			return false;
		});
		
		this.elements.not(":first").hide(); // hide all but the first
		this.start(); // start this thing...
	}
	
	Slideshow.prototype = {
		_fade: function( method ){
			this.elements.eq( this.current )[ "fade"+method ](this.options.speed);
		},
		
		_move: function( number ){
			this._fade("Out");
			this.current += number;

			// at the beginning/end?
			if( !this.elements.eq(this.current).length ){
				this.current = (number > 0)
					? 0
					: this.elements.length
			}
			
			// fade in the currently queued img
			this._fade("In");
		},
		
		/* public methds */
		isRunning: function(){
			return this.isRunning;
		},
		
		next: function( number ){
			this._move( number || 1 );
		},
		
		prev: function( number ){
			this._move( number || -1 );
		},
		
		start: function(){
			var self = this;
			
			// bail if already running
			if(this.running){
				return;
			}
			
			this.running = true;
			this.id = window.setInterval(function(){ 
				self.next();
			}, this.options.delay);
		},
		
		stop: function(){
			this.running = false;
			window.clearInterval( this.id );
		}
	}
	
})(jQuery);