/*
*************************************************

SEBASTIAN NITU
jQuery Gallery Plugin

Created by Sebastian Nitu
http://www.sebnitu.com

*************************************************
*/

/**
STRUCTURE

<div class="gallery">
	<nav class="gallery-nav">
		<a href="#">Previous</a> <span>/</span> 
		<a href="#">Next Image</a>
		<span class="gallery-counter">(1 of 10)</span>
	</nav>
	<div class="image-wrap">
		<img src="_assets/img/content/sample-1.jpeg" width="640" height="441" alt="Sample 1" title="The description for the image would go here">
		<img src="_assets/img/content/sample-1.jpeg" width="640" height="441" alt="Sample 1" title="The description for the image would go here">
		...
	</div>
</div>

**/

(function($) {

/**
 * Plugin Definition
 */
$.fn.gallery = function(options) {

	// Extend our default options with those provided.
	var opts = $.extend({}, $.fn.gallery.defaults, options);

	return this.each(function() {
		
		// Save our object
  	var $this = $(this);
  	
  	// Build element specific options (syntax: o.optionName)
  	var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
		
		// Initialize Element Specific Variables
		var $images = $this.find('img').wrapAll('<div class="image-wrap">').css({ position : 'absolute', top : '0', left : '0', 'z-index' : 1, 'opacity' : 0 }),
				$imageWrap = $this.find('.image-wrap').css({ position : 'relative', cursor : 'pointer', 'overflow' : 'hidden' }),
				$imageCount = $images.size(),
				$currentImage = 1;
				
		$images.filter(':first').css({ 'z-index' : 3, 'opacity' : 1 });
		$imageWrap.height( $images.filter(':first').outerHeight() ).width( $images.filter(':first').outerWidth() );
		
		if( o.nav === true ) {
			var $nav = $this.append('<nav>').find('nav').addClass('gallery-nav');
			$nav.append('<a class="prev" href="#">' + o.prevText + '</a>' + ' <span>/</span> <a class="next" href="#">' + o.nextText + '</a>' + ' <span class="gallery-counter">1 of ' + $imageCount + ' Images</span>');
		}
		
		/**
		 * Swap Image Function
		 */
		function imageSwap(image) {
			
			if ( $images.filter(':not(:animated)') ) {
			
				if( image < 1 ) {
					image = $imageCount;
				} else if ( image > $imageCount ) {
					image = 1;
				}
			
				// Pre animation stack order
				$images.css({ 'z-index' : 1 });
				$( $images[image - 1] ).css({ 'z-index' : 2 });
				$( $images[$currentImage - 1] ).css({ 'z-index' : 3 });
				
				// Resize the wrapper
				$imageWrap.animate({
					height : ( $($images[image - 1]).outerHeight() ),
					width : ( $($images[image - 1]).outerWidth() )
				}, 500 );
				
				// Animate the image transition
				$( $images[image - 1] ).animate({
					opacity: 1
				}, 500);
				$( $images[$currentImage - 1] ).animate({
			    opacity : 0
			  }, {
			    duration: 500,  
			    complete: function() {
			    									
						$currentImage = image;
												
						// Post animation stack order
						$images.css({ 'z-index' : 1 });
						$( $images[$currentImage - 1] ).css({ 'z-index' : 3 });
					
					}
			  });
				
				if( o.nav === true ) {
					// Update Image Counter
					$nav.find('.gallery-counter').text(image + ' of ' + $imageCount + ' Images');
				}
			
			};	
			return false;
		}
		
		/**
		 * Auto Transition
		 */
		function autoTransition() {
	    intervalID = setInterval(function() {
	      imageSwap($currentImage + 1);
			}, o.autoSpeed);
			return intervalID;
		}

		if (o.auto) {

			var intervalID = autoTransition();

			$this.hover(function() {
				clearInterval(intervalID);
			}, function() {
				clearInterval(intervalID);
				intervalID = autoTransition();
			});

		}
		
		/**
		 * Event Bindings
		 */
		if( o.nav === true ) {
	    $( $nav.find('.prev') , this).click(function () {
				return imageSwap($currentImage - 1);                
	    });

	    $( $nav.find('.next') , this).click(function () {
				return imageSwap($currentImage + 1);
	    });
		}
		
		$( $imageWrap , this ).click(function () {
			return imageSwap($currentImage + 1);
    });
				
	});

};
	
/**
 * Plugin Defaults
 */
$.fn.gallery.defaults = {
	nav : true,
	auto : false,
	autoSpeed : 5000,
	transition : 'fade',
	prevText : 'Previous',
	nextText : 'Next Image'
};
	
})(jQuery);

/*-------------------------------------------    
	Fin
---------------------------------------------*/