/*
 * jQuery Blue Earth template projects plugin
 * @author	Display:inline <contact@display-inline.fr>
 * @url		http://display-inline.fr
 * @version	1.0
 */

/*
 * Enables slideshow on projects list images
 *
 * Elements markup must be :
 * <ul>
 *	 <li><div class="project-images">
 *		 </img />
 *		 </img />
 *		 </img />
 *		 ...
 * 	   </div></li>
 *	 ...
 * </ul>
 * Images must have height and width properties defined
 * 
 * Global parameters
 * @param	int			duration			slide duration (default: 7000)
 * @param	int			restartDuration		time before slideshow restarts after hover (default: 11000)
 * @param	int|string	slidingDuration		duration of the sliding movement : 'fast', 'normal', 'slow' or a number of milliseconds (default: 'slow')
 * @param	int|string	slidingDuration		duration of the thumbnails movement : 'fast', 'normal', 'slow' or a number of milliseconds (default: 'normal')
 * @param	string		easing				the name of the easing effect (default: 'swing')
 * 											- jQuery core : 'linear' or 'swing'
 * 											- include plugin to use custom effects (ie: http://plugins.jquery.com/project/Easing)
 */
$.fn.projectSlideshow = function(options)
{
	// Options
	settings = $.extend({
		duration: 				7000,
		restartDuration: 		11000,
		slidingDuration: 		'slow',
		showThumbnailsSpeed: 	'normal',
		easing: 				'swing'
	}, options);
	
	this.each(function(i)
	{
		// Init
		this._settings = settings;
		var slideshow = $(this);
		if (this.id == undefined || this.id == '')
		{
			this.id = 'projectSlideshow'+Math.round(Math.random()*10000);	// Generate random id (if none) to handle timeout
		}
		
		// Add shadow
		var shadow = slideshow.append('<div class="projects-img-shadow"></div>').children(':last-child');
		
		// Removes overflow:auto style (hides scroll bars)
		slideshow.css('overflow', 'hidden');
		
		// If only one image, no animation needed
		var images = slideshow.children('img');
		if (images.length < 2)
		{
			return;
		}
		
		// Create thumbnails
		var thumbnails = [];
		images.each(function(i)
		{
			thumbnails.push('<img src="'+this.src+'" title="Click to view full-size image" />');
		});
		var thumbnails = shadow.after('<div class="project-thumbnails">'+thumbnails.join('')+'</div>').next();
		thumbnails.css('bottom', -thumbnails.outerHeight()+'px').children().hover(function()
		{
			$(this).animate({marginTop: '-5px', marginBottom: '5px'}, 100);
		}, function()
		{
			$(this).animate({marginTop: '0', marginBottom: '0'});
		}).click(function()
		{
			$(this).parent().parent().children('img[src="'+$(this).attr('src')+'"]').eq(0).projectSlideshowShow();
		});
		
		// Duplicate first image for loop
		images.eq(0).clone().insertBefore(shadow);
		
		// Images setup
		slideshow.projectSlideshowReset();
		
		// Behaviour
		slideshow.hover(function()
		{
			// Stop timeout
			clearTimeout($(this).get(0)._timeout);
			
			// Show thumbnails
			$(this).children('.project-thumbnails').stop().animate({bottom: 0}, settings.showThumbnailsSpeed, settings.easing).children('img').each(function(i)
			{
				$(this).css({marginTop: '100px', marginBottom: '-100px'}).animate({opacity: 1}, i*100).animate({marginTop: '-5px', marginBottom: '5px'}).animate({marginTop: '0', marginBottom: '0'});
			});
		}, function ()
		{
			// Hide thumbnails
			$(this).children('.project-thumbnails').stop().animate({bottom: -thumbnails.outerHeight()+'px'});
			
			// Restart
			var slideshow = $(this).get(0);
			clearTimeout(slideshow._timeout);
			slideshow._timeout = setTimeout('$(\'#'+slideshow.id+'\').projectSlideshowNext()', slideshow._settings.restartDuration);
		});
		
		// Timeout for next slide
		this._timeout = setTimeout('$(\'#'+this.id+'\').projectSlideshowNext()', this._settings.duration);
	});
	
	return this;
};

/**
 * Resets slideshow to first image
 */
$.fn.projectSlideshowReset = function()
{
	this.each(function(i)
	{
		// Images setup
		var pos = 0;
		this._current = $(this).children('img').each(function(i)
		{
			pos += $(this).css('position', 'absolute').css('left', '0').css('top', pos+'px').height();		// left:0 needed for IE 6/7
		}).get(0);
	});
	
	return this;
}

/**
 * Show previous image
 */
$.fn.projectSlideshowPrev = function()
{
	this.each(function(i)
	{
		var prev = $(this._current).prev('img');
		if (prev.length == 0)
		{
			prev = $(this).children('img:last');
		}
		prev.projectSlideshowShow();
		
		// Timeout
		clearTimeout(this._timeout);
		this._timeout = setTimeout('$(\'#'+this.id+'\').projectSlideshowNext()', this._settings.duration);
	});
	
	return this;
}

/**
 * Show next image
 */
$.fn.projectSlideshowNext = function()
{
	this.each(function(i)
	{
		var next = $(this._current).next('img');
		if (next.length == 0)
		{
			next = $(this).children('img:first');
		}
		next.projectSlideshowShow();
		
		// Timeout
		clearTimeout(this._timeout);
		this._timeout = setTimeout('$(\'#'+this.id+'\').projectSlideshowNext()', this._settings.duration);
	});
	
	return this;
}

/**
 * Show selected slides
 */
$.fn.projectSlideshowShow = function()
{
	this.each(function(i)
	{
		// Init
		var slideshow = $(this).parent();
		var slideshowNode = slideshow.get(0);
		var settings = slideshowNode._settings;
		var height = slideshow.height();
		var image = $(this);
		
		// If change
		if (slideshowNode._current != this)
		{
			// Siblings
			var previous = image.prevAll('img');
			var next = image.nextAll('img');
			
			// Store current slide
			slideshowNode._current = this;
			
			// Previous images movement
			var pos = 0;
			previous.each(function(i)
			{
				pos += $(this).height();
				$(this).stop().animate({top:-pos+'px'}, settings.slidingDuration, settings.easing);
			});
			
			// Selected image movement
			image.stop().animate({top:0}, settings.slidingDuration, settings.easing, (next.length == 0) ? function() { slideshow.projectSlideshowReset(); } : null);
			
			// Next images movement
			var pos = image.height();
			next.each(function(i)
			{
				$(this).stop().animate({top:pos+'px'}, settings.slidingDuration, settings.easing);
				pos += $(this).height();
			});
		}
	});
	
	return this;
};