﻿/*!
 * jquery.yoxslide 0.2
 * jQuery simple image slideshow
 * http://yoxigen.com/
 *
 * Copyright (c) 2010 Yossi Kolesnicov
 * Date: 9th May, 2010
 * Version : 0.2
 */ 
(function($){
    $.fn.yoxslide = function(opt) {
        if (this.length == 0)
            return this;
        
        $this = $(this);
        
		var defaults = {
			delay: 3000,
			fadeTime: 1000,
			cacheImages: true,
			imageResizeMode: 'fill',
			setTitle: true,
			titleBackgroundOpacity: 0.5,
			titleBackgroundColor: "#000"
		};
		
		var options = $.extend(defaults, opt);
		$(this).data("yoxslide", new YoxSlide($this, options));
    };
	YoxSlide = function(container, options)
	{
		var self = this;
		var tempImg = new Image();
		var cacheImg = new Image();
		var $ = jQuery;
		var images; // image elements
		var currentImageIndex = currentCacheImg = options.startIndex || 0;
		var currentImage;
		var containerSize = {width: container.width(), height: container.height() };
        var contentPanels = [];
        var currentPanelIsFirst = true;
        var titlePanel;
        var titleText;
        var displayTimeout;
        
		function fitImageSize(imageSize, targetSize)
		{
			var resultSize = { width: imageSize.width, height: imageSize.height};
			if (imageSize.width > targetSize.width)
			{
				resultSize.height = Math.round((targetSize.width / imageSize.width) * imageSize.height);
				resultSize.width = targetSize.width;
			}
			
			if (options.imageResizeMode == 'fit' && resultSize.height > targetSize.height)
			{
				resultSize.width = Math.round((targetSize.height / resultSize.height) * resultSize.width);
				resultSize.height = targetSize.height;
			}
			else if (options.imageResizeMode == 'fill' && resultSize.height < targetSize.height)
			{
				resultSize.height = targetSize.height;
				resultSize.width = Math.round((targetSize.height / imageSize.height) * imageSize.width);
			}
			
			return resultSize;
		}

		function setImages()
		{
			if (options.images)
			{
				$.each(options.images, function(i, img){
				    var newImage = $("<img>", {
					    src: img.src,
					    alt: img.alt,
					    title: img.title
					});
					container.append(newImage);
				});
			}
			images = container.find("img");
		}
		$(tempImg).load(function(){
		    var loadedImage = this;
		    var prevImage = currentImage;
		    if (prevImage)
		        prevImage.css("z-index", "1");
		    
		    currentImage = images.eq(currentImageIndex);
		    var displaySize = fitImageSize(this, containerSize);
		    currentImage.css({
		       width: displaySize.width,
		       height: displaySize.height,
		       left: (containerSize.width / 2) - (displaySize.width / 2),
		       top: (containerSize.height / 2) - (displaySize.height / 2),
		       "z-index": 2
		    })
		    .fadeIn(options.fadeTime, function(){
		        if (prevImage)
		            prevImage.css("display", "none");
		            
		        displayTimeout = setTimeout(function(){
		            switchTo(currentImageIndex < images.length - 1 ? currentImageIndex + 1 : 0);
		        }, options.delay);
		    });
		    
		    // Set the title, if any:
		    if (!options.title)
		    {
		        var imageTitle = currentImage.attr("title");
		        titleText.html(currentImage.attr("title"));
		        titlePanel.animate({ height: (imageTitle && imageTitle != "") ? titleText.outerHeight() : 0 }, options.fadeTime);
		    }
		});
		
		function switchTo(imageIndex)
		{
			currentImageIndex = imageIndex;
			tempImg.src = images[imageIndex].src;
		}

		// init:
		container.addClass("yoxslide");
		setImages();
		if (images.length == 0 && options.cacheImages)
			cacheImages(options.startIndex || 0);

	    if (options.setTitle)
	    {
	        titlePanel = $("<div>", {
	            className: "yoxslide_titlePanel",
	            css: {
	                bottom: "0",
	                width: containerSize.width
	            }
	        });
	        titlePanel.append($("<div>", {
	            className: "yoxslide_titlePanelBackground",
	            css: {
	                width: containerSize.width,
	                opacity: options.titleBackgroundOpacity,
	                "background-color": options.titleBackgroundColor
	            }
	        }));
	        var titleTextPanel = $("<div>", {
	            className: "yoxslide_titleTextPanel",
	            width: containerSize.width
	        });
	        titleText = $("<div>", { className: 'yoxslide_titleText'});
	        titleTextPanel.append(titleText);
	        titlePanel.append(titleTextPanel).appendTo(container);
	    }
	    
	    // Set the title, if any:
	    if (options.title && options.title != "")
	    {
	        titleText.html(options.title);
	        titlePanel.css({ height: titleText.outerHeight() });
	    }
	    switchTo(options.startIndex || 0);
	};
})(jQuery);
