/*
Sample HTML structure
---------------------
<div class="article">
	<div class="article-gallery-wrapper" style="display:none">
		<div class="article-gallery"></div>
		<div class="jcarousel-scroll"><a href="#" class="jcarousel-prev" title="Previous"><span>Previous</span></a> <span class="jcarousel-numberof"></span> <a href="#" class="jcarousel-next" title="Next"><span>Next</span></a></div>
	</div>
	<div>
		Article content
	</div>
</div>


jQuery code sample
------------------
$("div.article").pmArticleGallery();

$("div.article").pmArticleGallery({
	thumbImageWidth: 330,
	thumbImageHeight: 218,
	lightboxImageWidth: 900,
	galleryWrapper: "div.article-gallery-wrapper",
	galleryContainer: "div.article-gallery",
	galleryScroller: "div.jcarousel-scroll"
});


Requrements
-----------
jquery.lightbox.js
perpetuum.jquery.article.jcarousel.js
*/

(function($) {
    $.fn.extend({
		pmArticleGallery: function(options) {
			
			var defaults = {
                thumbImageWidth: 200,
				thumbImageHeight: 100,
                lightboxImageWidth: 800, // Full image width. If it is empty the full image with will be the same as thumbnail width
            	galleryWrapper: ".article-gallery-wrapper",
				galleryContainer: ".article-gallery",
				galleryScroller: ".jcarousel-scroll"
			};

            var options = $.extend(defaults, options);
			
			return this.each(function(e) { 
				var $article = $(this);
				
				var $images = $article.find("img");
				var $galleryContainerWrapper = $article.find(options.galleryWrapper);
				var $galleryContainer = $article.find(options.galleryContainer);
				var $galleryContainerScroll = $article.find(options.galleryScroller);
				
				var $gallery = $("<ul class=\"article-carousel\">");
				
				if ($images.length > 0) {
					
					//	ArticleGalleryContainer is initialy hidden
					$galleryContainerWrapper.css("display", "block");
					
					//	If there is only one picture, we don't need images scroller
					$galleryContainerScroll[0].style.display = ($images.length > 1) ? "block" : "none";
					
					$images.each(function(){
						var $img = $(this);
						
						//	First hide image in text inline
						$img.hide();
						
						//	Then we get real img src value
						var strImgSrc = $img.attr("src");
						strImgSrc = strImgSrc.replace(/lgs/gi, "fgs");
						strImgSrc = (strImgSrc.indexOf("&sp=") == -1) ? strImgSrc : strImgSrc.substring(0, strImgSrc.indexOf("&sp="));
						
						//	And then we add new picture in the gallery
						$gallery.append("<li><a href=\"" + strImgSrc + "&sp=" + options.lightboxImageWidth + "\" class=\"lightbox\" title=\"" + $img.attr("alt") + "\"><img src=\"" + strImgSrc + "&sp=" + options.thumbImageWidth + "\" alt=\"" + $img.attr("alt") + "\" /></a></li>");
					});
					
					//	Append gallery into gallery container
					$gallery.appendTo($galleryContainer);
					
					//	Max image height must be equal to thumbImageHeight variable
					$gallery.find("img").each(function(){
						if (this.clientHeight > options.thumbImageHeight) $(this).css("height", options.thumbImageHeight);
					});
				
					$article.find("ul.article-carousel").jcarousel({
						scroll: 1,
						initCallback: carouselInitCallback,
						// This tells jCarousel NOT to autobuild prev/next buttons
						buttonNextHTML: null,
						buttonPrevHTML: null,
						galleryWrapper: options.galleryWrapper
					});
				}
				
				function carouselInitCallback(carousel) {
					$galleryContainerWrapper.find('.jcarousel-next').bind('click', function() {
						carousel.next();
						return false;
					});
				
					$galleryContainerWrapper.find('.jcarousel-prev').bind('click', function() {
						carousel.prev();
						return false;
					});
				}
				
			});
		}
    });
})(jQuery);