/*
 * De structuur van de HTML moet alsvolgt zijn:
 * 
 * <div>
 *   <img> // grote foto
 *   <ul>
 *     <li><a><img></a></li> // opsomming thumbnails
 *   </ul>
 * </div>
 * 
 * Gebruik: $("").cccarroussel([argumenten]);
 */

var cccarrouselInterval;
var cccarrouselIndex = 0;

$.fn.cccarrousel = function(options)
{
	
	var defaults = {
						timeoutFade: 850,
						timeoutLoop: 5000,
						inactiveWidth: 58,
						activeWidth: 85,
						autorun: 	 true
	};
	
	var opts = $.extend(defaults, options);
	return this.each(
		function()
		{
			var $this = $(this);
	
			if ($this.find("ul li").length == 1)
			{
				$this.find("ul").hide();
			}
			else
			{
				if ($this.find("ul li.active").length == 0)
				{
					$.fn.cccarrousel.setActive(opts, $this.find("ul"), $(this).find("ul li:first"));
				}
				
				$this.find("img:first").clone().insertBefore($this.find("img:first"));
				
	// De click op de kleine foto's om de grote foto te laden
				$this.find("ul li a").click(
					function()
					{			
						$.fn.cccarrousel.replaceImage(opts, $this, $(this).attr("href"));
						$this.find("ul li.active").removeClass("active").find("img").attr("width", opts.inactiveWidth);
					
						$.fn.cccarrousel.setActive(opts, $this.find("ul"), $(this).parent());
						
						clearInterval(cccarrouselInterval);
						cccarrouselInterval = '';
						$.fn.cccarrousel.autorun(opts, $this.find("ul"), $this);
						
						return false;
					}
				);		
				
	// Automatisch de foto's laten wijzigen
				if (opts.autorun)
				{
					$.fn.cccarrousel.autorun(opts, $this.find("ul"), $this);
				}
			}
		}
	);
}

$.fn.cccarrousel.setActive = function(opts, oList, oLi)
{
	oList.find("li.active").removeClass("active").find("img").attr("width", opts.inactiveWidth);
	oLi.addClass("active").find("img").attr("width", opts.activeWidth);
	
}

$.fn.cccarrousel.replaceImage = function(opts, oBlock, sUrl)
{
	var oNew = oBlock.find("img:eq("+cccarrouselIndex+")").hide();
	cccarrouselIndex = 1 - cccarrouselIndex;
	var oOriginal = oBlock.find("img:eq("+cccarrouselIndex+")");
	
	oNew.attr("src", sUrl).fadeIn(opts.timeoutFade);
	oOriginal.fadeOut(opts.timeoutFade);
}

$.fn.cccarrousel.autorun = function(opts, oList, oBlock)
{
	if (oList.length > 0)
	{
		cccarrouselInterval = setInterval(function(){$.fn.cccarrousel.loopImages(opts, oList, oBlock)}, opts.timeoutLoop);
	}
}

$.fn.cccarrousel.loopImages = function(opts, oList, oBlock)
{
	
	if (oList.find("li.active").next("li").length > 0)
	{
		var li = oList.find("li.active").next("li");
	}
	else
	{
		var li = oList.find("li:first");
	}
	
	$.fn.cccarrousel.replaceImage(opts, oBlock, li.find("a").attr("href"));
	$.fn.cccarrousel.setActive(opts, oList, li);
}