/* 
 * Carousel met captions voor gebruik op http://www.fullmoon.nl
 * 
 * @author Mark Mulder (markmulder@gmail.com) -- http://github.com/bittersweet/
 * @date 08/01/09
 *
 * @edited by: Ton Linnartz (ton@fullmoon.nl) 
 * @date 20/5/2009
 * @added hack for second carousel on same page
 * @modified: Slide remains selected if mouse is moved away.
 *            If mouse hovers over element, element is selected and all others deselected. 
 */
(function($) {
	
	$.fn.ccarousel = function(options) {

		var defaults = {
			speed: 1000,
			interval: 4000
		};

		var options = $.extend(defaults, options);

		/* Setup the default styles */
		$("#cr-images").children().addClass("slide");
		$("div.slide:first").addClass("current-image");
		$("#titles li:first").addClass("active");
	
		var playSlideShow = setInterval(
			function() {
				$.fn.ccarousel.slideswitch(options)
			}, options.interval);

		$("#titles li").hover(

			function () {
				clearInterval(playSlideShow);	/* Clear the autostart interval */
				$(this).addClass("active");		/* Gives the mouseovered li a active class */				
				var slideId = $(this).attr("id");	/* Get the ID so we can push the corresponding image to the foreground */ 				
				$('#cr-titles').find('li:not(#'+slideId+')').removeClass("active");	/* Removes active class from all but the mouseovered li */	
				$("div#slide"+slideId).addClass('current-image-mouseover');	/* Push the corresponding image to the foreground */			
				$('#cr-images').find('div:not(#slide'+slideId+')').removeClass("current-image-mouseover"); /* Push all other images, and thus, by inclusion, the previous image to the background */
				
			},
			function () {
				playSlideShow = setInterval(
					function() {
						jQuery.fn.ccarousel.slideswitch(options)
					}, options.interval
				);
			
			}
		);

	};
	
	/* tweede carousel R(echts)*/
	$.fn.ccarouselR = function(options) {

		var defaults = {
			speed: 1000,
			interval: 4000
		};

		var options = $.extend(defaults, options);

		/* Setup the default styles */
		$("#cr-imagesR").children().addClass("slideR");
		$("div.slideR:first").addClass("current-image");
		$("#titlesR li:first").addClass("active");
	
		var playSlideShow = setInterval(
			function() {
				$.fn.ccarouselR.slideswitch(options)
			}, options.interval);

		$("#titlesR li").hover(

			function () {
				clearInterval(playSlideShow);	/* Clear the autostart interval */
				$(this).addClass("active");		/* Gives the mouseovered li a active class */
				var slideId = $(this).attr("id");	/* Get the ID so we can push the corresponding image to the foreground */
				$('#cr-titlesR').find('li:not(#'+slideId+')').removeClass("active");	/* Removes active class from all but the mouseovered li */	
				$("div#slideR"+slideId).addClass('current-image-mouseover');	/* Push the corresponding image to the foreground */			
				$('#cr-imagesR').find('div:not(#slideR'+slideId+')').removeClass("current-image-mouseover"); /* Push all other images, and thus, by inclusion, the previous image to the background */
				
			},
			function () {
				playSlideShow = setInterval(
					function() {
						jQuery.fn.ccarouselR.slideswitch(options)
					}, options.interval
				);
			}
			
		);

	};
	
})(jQuery);

$.fn.ccarousel.slideswitch = function(options) {
	
	var active = $(".current-image");

	if ( active.length === 0 ) { active = $("div.slide:last"); }

	var next = active.next("div.slide").length ? active.next("div.slide") : $("div.slide:first");
	
	var currentId = active.attr("id").substring(5);
	var nextId = next.attr("id").substring(5);
	
	$("li#"+currentId).removeClass("active");
	$("li#"+nextId).addClass("active");
	
	active.addClass("last-image");
	next.css({opacity: 0.0})
			.addClass("current-image")
			.animate({opacity: 1.0}, options.speed, function() {
				active.removeClass("current-image last-image");
			});

}

$.fn.ccarouselR.slideswitch = function(options) {
	
	var active = $(".current-image");
	
	if ( active.length === 0 ) { active = $("div.slideR:last"); }

	var next = active.next("div.slideR").length ? active.next("div.slideR") : $("div.slideR:first");
	
	var currentId = active.attr("id").substring(6);
	var nextId = next.attr("id").substring(6);
	
	$("li#"+currentId).removeClass("active");
	$("li#"+nextId).addClass("active");
	
	active.addClass("last-image");
	next.css({opacity: 0.0})
			.addClass("current-image")
			.animate({opacity: 1.0}, options.speed, function() {
				active.removeClass("current-image last-image");
			});

}