/*
This plugin build simple image gallery from article links

TODO: max thumbnail image height must be equal to thumbImageHeight option
TODO: max big image height must be equal to bigImageHeight option

HTML structure sample
---------------------
<div class="article">
	<h1>Article title</h1>
	<div class="article-content">Article text</div>
	<ul class="article-gallery-images">
		<li><a href="fgs.axd?id=1">Image 1</a></li>
		<li><a href="fgs.axd?id=2">Image 2</a></li>
		<li><a href="fgs.axd?id=3">Image 3</a></li>
	</ul>
</div>

jQuery code sample
------------------
$("ul.article-gallery-images").pmArticleSimpleGallery();

or

$("ul.article-gallery-images").pmArticleSimpleGallery({
	thumbImageWidth: 25,
	thumbImageHeight: 20,
	bigImageWith: 300,
	bigImageHeight: 200,
	autoRotate: true,
	rotateSpeed: 10000,
	fadeInSpeed: 1000,
	lightbox: false,	// use or not light box
	lightboxImageWidth: 900,
	galleryWrapper: "div.article"	//wrapper where to put image gallery inside of article
});

HTML structure sample after plugin application
----------------------------------------------
<div class="article">
	<div class="simple-article-gallery">
		<div class="simple-article-gallery-image"><img src="fgs.axd?id=1" alt="Image 1" title="Image 1"></div>
		<div class="simple-article-gallery-items">
			<ul class="article-gallery-images">
				<li><a href="fgs.axd?id=1" class="article-gallery-image selected-image"><img src="fgs.axd?id=1" alt="Image 1" title="Image 1"></a></li>
				<li><a href="fgs.axd?id=2" class="article-gallery-image"><img src="fgs.axd?id=2" alt="Image 2" title="Image 2"></a></li>
				<li><a href="fgs.axd?id=3" class="article-gallery-image"><img src="fgs.axd?id=3" alt="Image 3" title="Image 3"></a></li>
			</ul>
		</div>
	</div>
	<h1>Article title</h1>
	<div class="article-content">Article text</div>
</div>
*/

(function($){

	$.fn.pmArticleSimpleGallery = function(customOptions) {
	
		var options = $.extend("", $.fn.pmArticleSimpleGallery.defaultOptions, customOptions);
		
		return this.each(function(e){
								  
			var $galleryContent = $(this);
			
			var $galleryWrapper = $galleryContent.parents(options.galleryWrapper);
			
			var $galleryContainer = $("<div class=\"simple-article-gallery\"><div class=\"simple-article-gallery-image\"></div><div class=\"simple-article-gallery-items\"></div></div>");
			var $galleryCurrentImageContainer = $galleryContainer.find("div.simple-article-gallery-image");
			
			var $firstLink = $galleryContent.find("a:first");
			
			var $currentImage; 
			var currentImageIndex = 0;
			var galleryIndex = e;
			
			if (!options.lightbox) {
				$currentImage = $("<img src=\"" + $firstLink.attr("href") + "&sp=" + options.bigImageWidth + "\" alt=\"" + $firstLink.text() + "\" title=\"" + $firstLink.text() + "\" style=\"display: none\"/>");
			} 
			else {
				$currentImage = $("<a href=\"" + $firstLink.attr("href") + "&sp=" + options.lightboxImageWidth + "\" title=\"" + $firstLink.text() + "\" style=\"display: none\"><img src=\"" + $firstLink.attr("href") + "&sp=" + options.bigImageWidth + "\" alt=\"" + $firstLink.text() + "\" title=\"" + $firstLink.text() + "\" /></a>");
			}
			
			//	move gallery items from article to gallery
			$galleryContainer.find("div.simple-article-gallery-items").append($galleryContent);
			
			//	add gallery into gallery wrapper
			$galleryContainer.prependTo($galleryWrapper);
			
			//	transform gallery items link into gallery items image
			$galleryContent.find("a").each(function(e){
				var $link = $(this);
				var strLinkText = $link.text();
				
				$link.html("");
				
				$link.addClass("article-gallery-image");
				
				if (e == 0) {
					$link.addClass("selected-image");	
				};
				
				$link.append("<img src=\"" + $link.attr("href") + "&sp=" + options.thumbImageWidth + "\" alt=\"" + strLinkText + "\" title=\"" + strLinkText + "\" />");
				
				var $linkImage = $link.find("img");
			
				//	max thumbnail image height must be equal to thumbImageHeight option
				/*
				if ($linkImage.height() < options.thumbImageHeight) {
					var thumbImageWidth = parseInt(($linkImage.width() / $linkImage.height()) * options.thumbImageWidth);
					
					$linkImage.attr("src", $link.attr("href") + "&sp=" + thumbImageWidth);
				}
				*/
				
				$link.click(function(event){
					event.preventDefault();
					
					if (options.autoRotate) {
						$(document).stopTime("swapimages" + galleryIndex);
					}
					
					if (!options.lightbox) {
						$currentImage = $("<img src=\"" + $link.attr("href") + "&sp=" + options.bigImageWidth + "\" alt=\"" + strLinkText + "\" title=\"" + strLinkText + "\" style=\"display: none\"/>");
					} 
					else {
						$currentImage = $("<a href=\"" + $link.attr("href") + "&sp=" + options.lightboxImageWidth + "\" title=\"" + strLinkText + "\"  style=\"display: none\"><img src=\"" + $link.attr("href") + "&sp=" + options.bigImageWidth + "\" alt=\"" + strLinkText + "\" title=\"" + strLinkText + "\" /></a>");
					}

					showImage($currentImage, e);
					
					currentImageIndex = e;
					
					if (options.autoRotate) {
						rotateImages();
					}
				});
			});
			
			function showImage(currentImage, linkIndex) {
				$galleryCurrentImageContainer.empty();
					
				currentImage.appendTo($galleryCurrentImageContainer).fadeIn(options.fadeInSpeed, function(){
					$galleryContent.find("a").removeClass("selected-image");
					$galleryContent.find("a:eq(" + linkIndex + ")").addClass("selected-image");
				});
				
				if (options.lightbox) {
					$galleryCurrentImageContainer.find("a").lightBox(options.lightboxOptions);
				}
				
			}
			
			function rotateImages() {
				var filesLength = $galleryContent.find("a").length;
				
				if (filesLength > 1) {				
					$(document).everyTime(options.rotateSpeed, "swapimages" + galleryIndex, function() {
						currentImageIndex++;
						if (currentImageIndex == filesLength) currentImageIndex = 0;
						
						var $currentLink = $galleryContent.find("a:eq(" + currentImageIndex + ")");
													
						if (!options.lightbox) {
							$currentImage = $("<img src=\"" + $currentLink.attr("href") + "&sp=" + options.bigImageWidth + "\" alt=\"" + $currentLink.text() + "\" title=\"" + $currentLink.text() + "\" style=\"display: none\"/>");
						} 
						else {
							$currentImage = $("<a href=\"" + $currentLink.attr("href") + "&sp=" + options.lightboxImageWidth + "\" title=\"" + $currentLink.text() + "\"  style=\"display: none\"><img src=\"" + $currentLink.attr("href") + "&sp=" + options.bigImageWidth + "\" alt=\"" + $currentLink.text() + "\" title=\"" + $currentLink.text() + "\" /></a>");
						}
						
						showImage($currentImage, currentImageIndex);
					});
				}
			}
			
			//	add first image
			showImage($currentImage, 0);
			
			//	play autorotate if autorotate is enabled
			if (options.autoRotate) {
				rotateImages();
			}
			
		});
	
	};
	
	$.fn.pmArticleSimpleGallery.defaultOptions = {
		thumbImageWidth: 40,
		thumbImageHeight: 30,
		bigImageWidth: 300,
		bigImageHeight: 200,
		autoRotate: true,
		rotateSpeed: 10000,
		fadeInSpeed: 1000,
		lightbox: false,
		lightboxImageWidth: 900,
		galleryWrapper: "div.article"	
	};

})(jQuery);


