/*!
* jquery.slideShow. jQuery Slideshow plugin
*
* Copyright (c) 2009 Craig Thompson
* http://craigsworks.com
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
*/

"use strict"; // Enable ECMAScript "strict" operation for this function. See more: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
/*jslint browser: true, onevar: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: true */
/*global window: false, jQuery: false */
(function($) {
	function SlideShow(target) {
		var self = this,

		/* Current image index */
		current = 0,

		/* Anything matched by this is removed from src attribute of thumb to get full size image src */
		filter = /(\-tn)/i,

		/* Sldieshow timer store */
		timer = null,

		/* Determines speed of slideshow in milliseconds */
		speed = 3000,

		/* Determines duration of fade in milliseconds - ALWAYS LESS THAN THE ABOVE!!! */
		duration = 600,

		/* Dummy function for use with mousedown prevention */
		noop = function() { return false; };

		// Global target and slideshow references
		self.container = null;
		this.slideshow = null;

		$.extend(self, {
			init: function() {
				// Create slideshow container
				self.container = $('<div />', {
					'id': 'slideShow-' + $('.slideShow').length,
					'class': 'slideShow'
				})
				.insertBefore(target)
				.append(target);

				// Create full size container
				self.slideshow = $('<div />', {
						'class': 'slideShow-full'
					})
					.append( $('<img />') )
					.insertBefore(target);

				// Apply target class
				target.addClass('slideShow-thumbs').show();
					
				// Make thumbnails clickable
				target.children().click(function() {
					var index = $(this).index();

					self.stop();
					
					if(current !== index) {
						$(this).siblings().removeClass('selected');
						$(this).addClass('selected');
						
						self.goto( current = index );
					}
				})
				.mousedown(noop)

				// Fade on hover
				.hover(function(event) {
					$(this).stop().animate({ opacity: event.type === 'mouseenter' ? 1 : 0.7 }, 100);
				})
				.trigger('mouseleave');

				// Setup prev/next buttons
				$.each(['next', 'prev'], function(i, which) {
					$('<div />', {
						'class': 'slideShow-' + which,
						'click': function() {
							self.stop();
							self[which]();
							
							return false;
						},
						'mousedown': noop,
						'css': { opacity: 0.5 }
					})
					.hover(function(event) {
						$(this).stop().animate({ opacity: event.type === 'mouseenter' ? 1 : 0.5 }, 100);
					})
					.appendTo(self.slideshow);
				});

				// Setup first thumbnail and start the slideshow
				self.goto(0);
				self.start();
			},
			
			goto: function(index) {
				var thumb = $('img', target).eq(index),
					thumbSrc = thumb.attr('src'),
					big = $('img', self.slideshow),
					bigSrc = thumbSrc.replace(filter, '');

				// Animate only after slideshow is initialised
				if(!!big.attr('src')) {
					// Clone current full size image and update src to new
					big.clone(false)
						.attr('src', bigSrc)
						.addClass('clone')
						.css({
							'position': 'absolute',
							'left': 0, 'top': 0,
							'opacity': 0,
							'zindex': 1000 + $('.clone', self.slideshow).length
						})
						.appendTo(self.slideshow)

						// Fade new image in. Delete and update src on original when done
						.animate({ opacity: 1 }, duration, function() {
							big.attr('src', bigSrc);
							$(this).remove();
						});
				}
				else {
					// Update full size image src
					big.attr('src', bigSrc);
				}
			},
			
			next: function() {
				if(current >= $('img', target).length - 1) {
					current = -1;
				}

				self.goto(++current);
			},
			
			prev: function() {
				if(current <= 0) {
					current = $('img', target).length - 1;
				}

				self.goto(--current);
			},
			
			start: function(state) {
				if(state !== false) {
					(function interval() {
						if(timer) { self.next(); }
						timer = setTimeout(interval, speed);
					}());
				}
				else {
					clearTimeout(timer);
				}

				// Toggle playing class
				self.container.toggleClass('slideShow-playing', state !== false);
			},

			stop: function(){ self.start(false); }
		});

		self.init();
	}

	$.fn.slideShow = function() {
		return $(this).each(function() {
			var obj = new SlideShow( $(this) );
			$(this).data('slideShow', obj);
		});
	};
}(jQuery));