/**
 * ContentONE Gallery
 *
 * Add behaviours to a series of images and thumbnails allowing visitors
 * to browse the images using controls or clicking on thumbnails.
 *
 * @version		1.0
 * @date		October 1, 2009
 * @copyright	(c) World Web Management Services (http://www.worldwebms.com/)
 */
 (function($) {

	/**
	 * Create C1 jQuery extension.
	 */
	if( !$.fn.c1 ) {
		$.fn.c1 = function( name, options ) {
			if( this.c1[name] )
				return this.c1[name].call( this, options );
			return this;
		}
	}
	
	/**
	* Create C1 Gallery jQuery extension.
	*/
	$.fn.c1.gallery = function( options ) {
	
		// Setup the default options
		options = $.extend( {
		
			// Gallery settings
			selector: '.gallery',	// Base selector to find elements with
			
			// Animation settings
			speed: 'normal',			// Animation speed
			animation: 'fade',			// Default animation type for images
			zIndex: 1					// Base z-index of fade effects
		
		}, options );
		
		/**
		 * Shows a specific image.
		 * @param	integer pos The position of the image to show
		 */
		function _showImage( pos ) {
		
			// Get the current and next image
			var current = ( options.position != null ? $(images.images[options.position]) : null );
			var image = $(images.images[pos]);
			if( image.length == 0 )
				return;
			
			// If the image should slide in
			if( options.animation == 'slide' ) {
			
				// Move the list
				var list = $('ul', images.scroll);
				var offset = list.offset();
				var left = offset ? (offset.left - image.offset().left) : 0;
				list.animate( {'left': left + 'px'}, options.speed );
			
			// If the image should be faded
			} else {
			
				// Fade the new image over the top of the old image
				if( current )
					current.css( 'z-index', options.zIndex );
				image.css( 'z-index', options.zIndex + 1 ).fadeIn( options.speed, function() {
					if( current )
						current.hide();
				} );
				
			}
			
			// Update the current thumbnail status
			if( thumbs.images[options.position] )
				$(thumbs.images[options.position]).removeClass( options.selector.replace( '.', '' ) + '-thumb-active' );
				
			// Update the new thumbnail status and ensure it's visible
			if( thumbs.images[pos] ) {
			
				// Set the active class
				var thumb = $(thumbs.images[pos]);
				thumb.addClass( options.selector.replace( '.', '' ) + '-thumb-active' );
				
				// Ensure the thumbnail is visible
				var scroll = thumbs.scroll.offset();
				scroll.width = thumbs.scroll.width();
				scroll.right = scroll.left + scroll.width;
				var bounds = thumb.offset();
				bounds.width = thumb.outerWidth();
				bounds.right = bounds.left + bounds.width;
				
				// Move the thumbnail into the middle if possible
				var left = scroll.left + ( scroll.width / 2 ) - ( bounds.width / 2 );
				var shift = left - bounds.left;
				
				// Shift the list if required
				if( shift != 0 ) {
					var list = $('ul', thumbs.scroll);
					var left = parseInt( list.css( 'left' ) );
					left = ( isNaN( left ) ? 0 : left ) + shift;
					if( left > 0 )
						left = 0;
					else if( left < ( 0 - list.outerWidth() + scroll.width ) )
						left = 0 - list.outerWidth() + scroll.width;
					list.animate( { 'left': left + 'px' }, options.speed );
				}
				
			}
			
			
			// Update the position
			options.position = pos;
			
			// Update the controls
			$('a', images.prev)[pos == 0 ? 'hide' : 'show']();
			$('a', images.next)[pos >= ( images.images.length - 1 ) ? 'hide' : 'show']();
			
		}
		
		/**
		 * Scrolls the thumbnails in a certain direction.
		 * @param	integer direction The direction to move (-1 for left; 1 for right)
		 */
		function _scrollThumbs( direction ) {
			var list = $('ul', thumbs.scroll);
			var left = parseInt( list.css( 'left' ) );
			left = Math.floor( ( isNaN( left ) ? 0 : left ) - ( thumbs.scrollWidth / 2 * direction ) );
			if( left < thumbs.bounds.right )
				left = thumbs.bounds.right;
			else if( left > thumbs.bounds.left )
				left = thumbs.bounds.left;
			list.animate( {'left': left + 'px'}, 'slow' );
			$('a', thumbs.prev)[left == thumbs.bounds.left ? 'hide' : 'show']();
			$('a', thumbs.next)[left == thumbs.bounds.right ? 'hide' : 'show']();
		}
		
		/**
		 * Initialises the image settings.
		 */
		function _images() {
		
			var list = $('ul', images.scroll);
			
			// Reset the width of the list if we're sliding
			var listHeight = 0;
			if( options.animation == 'slide' ) {
				var listWidth = 0;
				var scrollWidth = images.scroll.width();
				images.images.each( function() {
					$(this).width( scrollWidth );
					listWidth += $(this).width();
				} );
				listHeight = list.width( listWidth ).height();
				
			// Calculate the height if we're fading
			} else {
				images.images.each( function() {
					var height = $(this).height();
					if( height > listHeight )
						listHeight = height;
				} );
			}
			
			// Set the height of the list if none is found
			images.scrollWidth = images.scroll.width();
			if( images.scroll.height() == 0 )
				images.scroll.height( listHeight );
				
			// Setup image controls
			images.prev.append( '<a href="#" title="View previous image" style="display:none"></a>' );
			images.prev.find( 'a' ).click( function() {
					_showImage( options.position - 1 );
					return false;
				} );
			images.next.append( '<a href="#" title="View next image" style="display:none"></a>' );
			images.next.find( 'a' ).click( function() {
					_showImage( options.position + 1 );
					return false;
				} );
			if( images.images.length > 1 )
				$('a', images.next).fadeIn( options.speed );
		
		}
		
		/**
		 * Initialises the thumbnail settings.
		 */
		function _thumbs() {
		
			// If there are no thumbnails, stop running
			if( thumbs.images.length == 0 )
				return;
			
			// Reset the width of the list
			var list = $('ul', thumbs.scroll);
			var listWidth = 0;
			thumbs.images.each( function() {
				listWidth += $(this).width();
			} );
			list.width( listWidth );
			
			// Set the height of the thumbnails if none is found
			thumbs.scrollWidth = thumbs.scroll.width();
			if( thumbs.scroll.height() == 0 )
				thumbs.scroll.height( list.height() );
				
			// Determine bounds for thumbnail scrolling
			var listOffset = list.offset();
			var itemOffset = $('li:first-child', list).offset();
			thumbs.bounds = {left: listOffset.left - itemOffset.left};
			thumbs.bounds.right = thumbs.bounds.left - listWidth + thumbs.scrollWidth;
		
			// Setup thumb controls
			thumbs.prev
				.append( '<a href="#" title="Scroll thumbnails to the left"></a>' )
				.find( 'a' )
				.hide()
				.click( function() {
					_scrollThumbs( -1 );
					return false;
				} );
			thumbs.next
				.append( '<a href="#" title="Scroll thumbnails to the right"></a>' )
				.find( 'a' )
				.hide()
				.click( function() {
					_scrollThumbs( 1 );
					return false;
				} );
			if( thumbs.bounds.right < 0 )
				$('a', thumbs.next).fadeIn( options.speed );
			
		}
		
		// Find all images and controls
		var images = {
			images:	$(options.selector + '-image', this),
			next:	$(options.selector + '-image-next', this),
			prev:	$(options.selector + '-image-prev', this),
			scroll:	$(options.selector + '-image-scroll', this)
		};
		if( options.lightbox )
			$(options.selector + '-image a', this).c1( 'lightbox', options.lightbox );
		_images();
		
		// Find all thumbnails and controls
		var thumbs = {
			images:	$(options.selector + '-thumb', this),
			next:	$(options.selector + '-thumb-next', this),
			prev:	$(options.selector + '-thumb-prev', this),
			scroll:	$(options.selector + '-thumb-scroll', this)
		};
		_thumbs();
		
		// Set default position
		options.position = null;
		_showImage( 0 );
		
		// Add thumb click event
		if( images.images.length == 0 && options.lightbox ) {
			$(options.selector + '-thumb a', this).c1( 'lightbox', options.lightbox );
		} else {
			$(options.selector + '-thumb a', this).each( function( i ) {
				$(this).click( function() {
					_showImage( i );
					return false;
				} );
			} );
		}
		
		return this;
	};
	
})(jQuery);