/**
 * Inline Gallery
 *
 * @author Vincent Verbruggen
 * @date 2010-20-01
 * @usage jQuery(selector).inlineGallery();
 */
jQuery.fn.inlineGallery = function() {
	/**
	 * Show the previous image and text
	 */
	function previous()
	{
		inlineImageContainer.stop();
		// Find the index and calculate the new offset for the container
		_oldIndex = _index;
		l = -((_index - 1) * _width);
		//l = '+=' + _width;
		if (_offset==0) {
			_index = jQuery('img', inlineImageContainer).length-1;
			_offset = _width - inlineImageContainer.width();
			l = _offset;
		}
		else {
			_offset += _width;
			_index--;
		}

                jQuery('.active', '.inline-gallery-navigation').removeClass('active');
                jQuery('a', jQuery(':nth-child(' + (_index + 1) + ')', '.inline-gallery-navigation')).addClass('active');

		// Slide the image into view and show the text
		inlineImageContainer.stop().animate({"left": l+"px"}, 'slow', finishedAnimation);
		toggleText();
	}

	/**
	 * Show the next image and text
	 */
	function next()
	{
		inlineImageContainer.stop();
		// Find the index and calculate the new offset for the container
		_oldIndex = _index;
		l = -((_index + 1) * _width);
		//l = "-=" + _width;
		if (_offset==_width - inlineImageContainer.width()) {
			_offset = 0;
			l = _offset;
			_index = 0;
		}
		else {
			_offset -= _width;
			_index++;
		}

                jQuery('.active', '.inline-gallery-navigation').removeClass('active');
                jQuery('a', jQuery(':nth-child(' + (_index + 1) + ')', '.inline-gallery-navigation')).addClass('active');
                
		// Slide the image into view and show the text
		inlineImageContainer.stop().animate({"left": l+"px"}, 'slow', finishedAnimation);
		toggleText();
	}

	/**
	 * Slide the images from the linked list
	 */
	function goTo ()
	{
		jQuery('.active', inlineGallery).removeClass('active');
		jQuery(this).addClass('active');
		inlineImageContainer.stop();
		_oldIndex = _index;
		var listItem = jQuery(this).parent();
		_newIndex = jQuery('li', inlineGalleryNavigation).index(listItem);

		var diff = Math.abs(_newIndex - _oldIndex);
		if (_newIndex > _oldIndex) {
			//l = "-=" + (_width * diff);
			l = -((_index + diff) * _width);
			if (_offset==(_width * diff) - inlineImageContainer.width()) {
				_offset = 0;
				l = _offset;
				_index = 0;
			}
			else {
				_offset -= _width * diff;
				_index += diff;
			}

			// Slide the image into view and show the text
			inlineImageContainer.stop().animate({"left": l+"px"}, 'slow', finishedAnimation);
			toggleText();
		}
		else if (_newIndex < _oldIndex) {
			l = -((_index - diff) * _width);
			//l = "+=" + (_width * diff);
			if (_offset==0) {
				_index = jQuery('img', inlineImageContainer).length-1;
				_offset = (_width * diff) - inlineImageContainer.width();
				l = _offset;
			}
			else {
				_offset += _width * diff;
				_index -= diff;
			}

			// Slide the image into view and show the text
			inlineImageContainer.stop().animate({"left": l+"px"}, 'slow', finishedAnimation);
			toggleText();
		}
	}

	function finishedAnimation ()
	{
		_ready = true;
	}

	/**
	 * Show the corresponding text to an image
	 */
	function toggleText ()
	{
		if (_oldIndex!=_index) {
			jQuery('div.partDescription:eq('+(_oldIndex)+')', inlineGalleryContent).stop(true, true).slideUp();
			jQuery('div.partDescription:eq('+(_index)+')', inlineGalleryContent).stop(true, true).slideDown();
		}
	}



	/**
	 * Create the inline gallery
	 * Buildup:
	 *		<div class="inline-gallery">
	 *			<div class="inline-gallery-wrapper">
	 *				<ul class="inline-gallery-navigation">
	 *					<li><a href="javascript:;"><span>1.</span> My title</a></li>
	 *					<li><a href="javascript:;"><span>2.</span> My title</a></li>
	 *					<li><a href="javascript:;"><span>3.</span> My title</a></li>
	 *					...
	 *				</ul>
	 *				<div class="inline-gallery-container">
	 *					<div>
	 *						<img src="image-1.jpg" alt=""/>
	 *						<img src="image-2.jpg" alt=""/>
	 *						<img src="image-3.jpg" alt=""/>
	 *						...
	 *					</div>
	 *					<a class="inline-gallery-left-nav" href="javascript:;"><!-- IE --></a>
	 *					<a class="inline-gallery-right-nav" href="javascript:;"><!-- IE --></a>
	 *				</div>
	 *			<div class="clear"><!-- IE --></div>
	 *			<div class="inline-gallery-content">
	 *				<div>
	 *					<h3>1. My title</h3>
	 *					[MY CONTENT OF TITLE 1]
	 *				</div>
	 *				<div>
	 *					<h3>2. My title</h3>
	 *					[MY CONTENT OF TITLE 2]
	 *				</div>
	 *				<div>
	 *					<h3>3. My title</h3>
	 *					[MY CONTENT OF TITLE 3]
	 *				</div>
	 *				...
	 *			</div>
	 */
	gallery = jQuery(this);
	var inlineGallery = jQuery('<div class="inline-gallery"><\/div>');
	var inlineGalleryWrapper = jQuery(':first-child', inlineGallery.append('<div class="inline-gallery-wrapper"><\/div>'));
	var inlineGalleryNavigation = jQuery(':first-child', inlineGalleryWrapper.append('<ul class="inline-gallery-navigation"><\/ul>'));
	var inlineGalleryContainer = jQuery(':nth-child(2)', inlineGalleryWrapper.append('<div class="inline-gallery-container"><\/div>'));
	inlineGalleryWrapper.append('<div class="clear"><!-- IE --><\/div>');
	var inlineImageContainer = jQuery(':first-child', inlineGalleryContainer.append('<div\/>'));
	inlineGallery.append('<div class="clear"><!-- IE --><\/div>');
	var inlineGalleryContent = jQuery('.inline-gallery-content', inlineGallery.append('<div class="inline-gallery-content"><\/div>'));
	var prevButton = jQuery(':nth-child(2)', inlineGalleryContainer.append('<a class="inline-gallery-left-nav" href="javascript:;"><!-- IE --></a>'))
	.click(previous);
	var nextButton = jQuery(':nth-child(3)', inlineGalleryContainer.append('<a class="inline-gallery-right-nav" href="javascript:;"><!-- IE --></a>'))
		.click(next);
	gallery.after(inlineGallery);

	// Variables
	var _oldIndex = 0;
	var _index = 0;
	var _offset = 0;
	var _width = jQuery('li:first img:first', gallery).width();
	var _ready = true;

    var _itemCount = jQuery('li', gallery).length;

	// Fill in the content of the gallery	
	jQuery('li', gallery).each(function(m, el){
		var title = jQuery('h3', el);
		var image = title.next();
		title = title.text();
		var content = image.next().html();

		var link = jQuery('<a href="javascript:;" style="height: ' + (400/_itemCount) + 'px;"/>').html(title).prepend('<span>'+(m+1)+'.<\/span>');
		link.click(goTo);
		var listItem = jQuery('<li\/>').append( link );
		inlineGalleryNavigation.append( listItem );

		inlineImageContainer.append(image).width( inlineImageContainer.width() + (m==0 ? 0 : image.width()) );

		inlineGalleryContent.append(
			jQuery('<div '+(m==0 ? '' : 'style="display:none;"') + ' class="partDescription"' + '\/>')
					.append( jQuery('<h3\/>').html(m+1 + '. ').append( jQuery('<span class="red"\/>').html( title ) ) )
					.append(content)
				)
			.height( Math.max(image.next().height(), inlineGalleryContent.height()) );
	});

	jQuery('a:first', inlineGalleryNavigation).addClass('active');
	gallery.remove();
};

jQuery(window).load(function(){
	jQuery('.gallery').inlineGallery();
});