/*
 * jQuery Fast2 Image Player plugin
 *
 * Copyright (c) 2009 Fast2 AB (http://fast2.se)
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 */
;(function($) {

	var version = "0.3.1";
	
	f2 = {};
	f2.imagePlayer = {
	
		id : null,
		imageList : null,
		currentIndex : 0,
		containerRef : function () { return this.id + "Container" },
		imagePrefix : "Image-",
		imageContainer : "imageContainer", 
		showImageText : false,
		showImagePagination : false,
		imagePaginationContainer : null,
		showImageThumbnails : false,
		
		text : {
			prev : "« |",
			next : "| »",
			prevtitle : "Föregånde",
			nexttitle : "Nästa",
			current : "Bild {1} av {2}"
		},
		
		init : function (id, settings) {
			// Make sure everything is in order
			if ($("#" + id).length < 0 || !$.isArray(settings.imageList) || settings.imageList.length < 1) {
				return false;
			}
		
			this.id = id;
			this.imageList = settings.imageList;
			this.showImagePagination = settings.showImagePagination;
			this.showImageText = settings.showImageText;
			this.showImageThumbnails = settings.showImageThumbnails;
			this.imagePaginationContainer = settings.imagePaginationContainer;
			
			// Add a wraping container
			$("#" + this.id).wrap("<div id='" + this.containerRef() + "' class='f2ImageSlider'><div class='" + this.imageContainer + "'></div></div>");

			// Use first image in list if src of image element is empty
			var imageElementSrc = $("#" + this.id).attr("src");
			if ((imageElementSrc === undefined || imageElementSrc == '') && this.imageList.length > 0) {
				$("#" + this.id).attr("src", this.imageList[0].image);
			}
			
			// Calculate current index
			for (var i = 0; i < this.imageList.length; i++) {
				if (this.imageList[i].image  == $("#" + this.id).attr("src")) {
					this.currentIndex = i; 
					break;
				}
			}

			// Add image text
			if (this.showImageText) {
				$("#" + this.containerRef()).append("<div class='imagetext'>" + this.imageList[this.currentIndex].text + "</div>");
			}
			
			// Add pagination
			this.imagePaginationContainer =  "#" + (this.imagePaginationContainer ? this.imagePaginationContainer : this.containerRef());
			if (this.showImagePagination) {
				$(this.imagePaginationContainer).append("<div class='pagination'><span class='prev' title='" + this.text.prevtitle + "'>" + this.text.prev + "</span><span class='current'>" + this.getCurrentText() + "</span><span class='next' title='" + this.text.nexttitle + "'>" + this.text.next + "</span></div>");
			}
			
			// Add thumbnails
			if (this.showImageThumbnails) {
				var html = "";
				for (var i = 0; i < this.imageList.length; i++) {
					var imageHtml = "<img id='" + this.id + this.imagePrefix + "thumbnail" + i + "' src='" + this.imageList[i].thumbnail + "'";
					if (this.currentIndex == i) {
						imageHtml += " class='current'";
					}
					imageHtml += ">";
					html += imageHtml;
				}
				 
				$("#" + this.containerRef()).append("<div class='thumbnails'>" + html + "</span></div>");
			}
			
			// Set image id
			$("#" + this.id).attr("id", this.id + this.imagePrefix + this.currentIndex);
			
			// Add event handlers
			that = this;
			$(".prev",this.imagePaginationContainer).click(function () {
				that.changeImage(that.currentIndex - 1);
			});
			$(".next",this.imagePaginationContainer).click(function () {
				that.changeImage(that.currentIndex + 1);
			});
			$(".imageContainer","#" + this.containerRef()).click(function () {
				that.changeImage(that.currentIndex + 1);
			});
			$(".thumbnails img","#" + this.containerRef()).each(function (i) {
				$(this).click(function () {
					// Load image if not already loaded
					if ($("#" + that.id + that.imagePrefix + i).length == 0) {
						$("." + that.imageContainer ,"#" + that.containerRef() ).append("<img src='" + that.imageList[i].image + "' id='" + that.id + that.imagePrefix + i + "' style='display:none;'  />");
					}
					that.changeImage(i);
				});
			});
			
			// Preload previus and next image
			this.preload(this.currentIndex);
		},
		
		getCurrentText : function () {
			return this.text.current.replace("{1}", this.currentIndex+1).replace("{2}", this.imageList.length);
		},
		
		preload : function (index) {
			var previusIndex = (index - 1 < 0 ? this.imageList.length -1 : index - 1); 
			var nextIndex = (index + 1 > this.imageList.length - 1 ? 0 : index + 1);
			
			if ($("#" + this.id + this.imagePrefix + previusIndex).length == 0) {
				// Load previus image
				$("." + this.imageContainer ,"#" + this.containerRef()).append("<img src='" + this.imageList[previusIndex].image + "' id='" + this.id + this.imagePrefix + previusIndex + "' style='display:none;' />");
			}
			if ($("#" + this.id + this.imagePrefix + nextIndex).length == 0) {
				// Load next image
				$("." + this.imageContainer ,"#" + this.containerRef() ).append("<img src='" + this.imageList[nextIndex].image + "' id='" + this.id + this.imagePrefix + nextIndex + "' style='display:none;'  />");
			}
		},
		
		changeImage : function (nextIndex) {
			var indexToDisplay = (nextIndex > this.imageList.length - 1 ? 0 : (nextIndex < 0 ? this.imageList.length - 1 : nextIndex));
			// Hide current image
			$("#" + this.id + this.imagePrefix + this.currentIndex).hide();
			// Change active thumbnail
			if (this.showImageThumbnails) {
				$(".thumbnails img").removeClass("current");
				$("#" + this.id + this.imagePrefix + "thumbnail" + indexToDisplay).addClass("current");
			}
			// Show next picture
			$("#" + this.id + this.imagePrefix + indexToDisplay).show();
			// Set the current index
			this.currentIndex = indexToDisplay;
			// Update Text
			$(".current",this.imagePaginationContainer).html(this.getCurrentText());
			// Update Image Text
			if (this.showImageText) {
				$("#" + this.containerRef() + " div.imagetext").html(this.imageList[indexToDisplay].text);
			}
			// Preload images
			this.preload(indexToDisplay);
		}
	};
		
	$.fn.f2ImagePlayer = function(settings) {
		f2.imagePlayer.init(this.attr("id"), settings);
		
		return this;
	};
})(jQuery);