/**
 * 
 * File contains 2 types of sliders:
 * Generic carousel slider (multiple items in viewing range)
 * and the coupled slider (two sliders with the same navigation buttons) 
 * 
 */

function slideElementOut($slideElementOut, isNext) {
	
	var $slideElementOutListItem = $slideElementOut.parents("li");
	var $slideElementPrevToSlideOutListItem = isNext == true ? $slideElementOutListItem.prev() : $slideElementOutListItem.next();
	
	// Hide the content when there's a image in the slider element
	// otherwise the content will be partially visible after fading out the slider element.
	$slideElementOutListItem.find('div.flipContent').fadeTo(1, 0.0, function() {});		
	
	$slideElementPrevToSlideOutListItem.find('div.slideContent').fadeOut(1100, function() {});

	// Fade out the slide content of the slider element
	$slideElementOutListItem.find('div.slideContent').addClass("transition").fadeTo(750, 0.3, function() {
		jQuery(this).removeClass('nonblur');
		jQuery(this).addClass('blur');	
		jQuery(this).parent().addClass('in_active');
		jQuery(this).removeClass("transition");
	});
	
}

function slideElementIn($slideElementIn, isNext) {
	
	var $slideElementInListItem = $slideElementIn.parents("li");
	var $slideElementNextToInListItem = isNext == true ? $slideElementInListItem.next() : $slideElementInListItem.prev();
	
	//Only when there is a img
	$slideElementInListItem.find('div.slideContent img').fadeTo(1100, 1, function() {
		$slideElementInListItem.find('div.flipContent').fadeTo(1, 1, function() {});
	});
	
	var arrowClass =  isNext == true ? "right" : "left";
	
	$slideElementInListItem.find('div.addArrow').removeClass(arrowClass);
	$slideElementNextToInListItem.find('div.addArrow').addClass(arrowClass);
	
	$slideElementInListItem.find('div.slideContent').fadeTo(750, 1, function() {
		// Show the content under the image after fading the image in when there's a image in the slider element
		// otherwise the content will not be visible after fading in the slider element.
		$slideElementInListItem.find('div.flipContent').fadeTo(1, 1.0, function() {});
		
		jQuery(this).addClass('nonblur');
		jQuery(this).removeClass('blur');
		jQuery(this).parent().removeClass('in_active');
		jQuery(this).parent().removeClass('noHover');
	});
	
	$slideElementNextToInListItem.find('div.slideContent').css("opacity", 0).show().fadeTo(1100, 0.3, function() {});
//	$slideElementNextToInListItem.find('div.slideContent img').fadeTo(1100, 0.3, function() {});
}

var carouselAnimation = function(carousel, $sliderHolder, $slideElementIn, $slideElementOut, isNext){
	
	//Add no hover class to disable the hover during animation
//	jQuery('#' + name + ' .slide' + (carousel.first -1)).find('div.slideContent').parent().addClass("noHover");
	
	slideElementOut($slideElementOut, isNext);
	slideElementIn($slideElementIn, isNext);
	
};

var carouselSlowAnimation = function(carousel, $sliderHolder, $slideElementIn, $slideElementOut, isNext){
	
	//Add no hover class to disable the hover during animation
//	jQuery('#' + name + ' .slide' + (carousel.first -1)).find('div.slideContent').parent().addClass("noHover");
	
	slideElementOut($slideElementOut, isNext);
	slideElementIn($slideElementIn, isNext);
	
};

jQuery(document).ready(function() {
	
	jQuery("div.carouselSlider").each( function() {
		
		$nextButton = jQuery("ul.carousel_nav a.pijl_rechts", jQuery(this));
		$prevutton = jQuery("ul.carousel_nav a.pijl_links", jQuery(this));
		
		jQuery('ul.slides', jQuery(this)).jcarousel({
			scroll: 1,
			animation: carouselAnimationSpeed,
			
			initCallback: function(carousel) {
				carousels[carouselCounter++] = carousel;
	    	},
			
			setupCallback: function(carousel) {
				
				removePlaceholders(carousel);
				
				// Only for webkit browsers (chrome / safari)
				if (jQuery.browser.webkit) {
					// The width of the slider is not big enough in Safari, so add some width..					
					var currentWidth = jQuery("ul.slides", carousel.container).width();
					jQuery("ul.slides", carousel.container).width(currentWidth + 2500)
				}
				
	    	},
			
			buttonPrevElement: $prevutton,
			buttonNextElement: $nextButton,
			
			buttonPrevCallback: function(carousel, controlElement, isEnabled) {
				defaultButtonChangeCallback(carousel, controlElement, isEnabled);
			},
			
			buttonNextCallback: function(carousel, controlElement, isEnabled) {
				defaultButtonChangeCallback(carousel, controlElement, isEnabled);
			},
			
			buttonPrevClickCallback: function(carousel, controlElement) {
				
				// When clicking the prev button the slided in element is the first element in the carousel, minus 2
				var slideInElementIndex = carousel.first - 2; 
				
				// When clicking the prev button the slided out element is the last element in the carousel, minus 1
				var slideOutElementIndex = carousel.last - 1;
				
				defaultPrevClickCallback(carousel, controlElement, carouselAnimation, slideInElementIndex, slideOutElementIndex);
			},
			
			buttonNextClickCallback: function(carousel, controlElement) {
				defaultNextClickCallback(carousel, controlElement, carouselAnimation);
			}
			
		});
		
	});
	
	var secondSlider = null;
	var secondSliderIsStillBusy = false;
	
	// The callbacks of the secondsSlider are called from within the callback of the firstSlider
	jQuery('div.doubleSliders #secondSlider ul.slides').jcarousel({
	    auto: 0,
		scroll: 1,
		animation: carouselAnimationSpeed + 200,
		
		initCallback: function(carousel) {
			carousels[carouselCounter++] = carousel;
    	},
		
		setupCallback: function(carousel) {
			removePlaceholders(carousel);
			secondSlider = carousel;
		},
		
		itemVisibleInCallback: function(carousel) {
			// Slider is finished animating.. 
			// Set the state so the dependable first slider knows when it's done..
			secondSliderIsStillBusy = false;
		},
		
		buttonPrevClickCallback: function(carousel, controlElement) {
			
			// When clicking the prev button the slided in element is the first element in the carousel, minus 2
			var slideInElementIndex = carousel.first - 2; 
			
			// When clicking the prev button the slided out element is the last element in the carousel, minus 1
			var slideOutElementIndex = carousel.last - 1;
			
			defaultPrevClickCallback(carousel, controlElement, carouselSlowAnimation, slideInElementIndex, slideOutElementIndex);
		},
		
		buttonNextClickCallback: function(carousel, controlElement) {
			defaultNextClickCallback(carousel, controlElement, carouselSlowAnimation);
		}
    });
	
	
	jQuery("div.doubleSliders #firstSlider ul.slides").jcarousel({
		scroll: 1,
		animation: carouselAnimationSpeed,
	
		initCallback: function(carousel) {
			carousels[carouselCounter++] = carousel;
    	},
		
		setupCallback: function(carousel) {
			removePlaceholders(carousel);
		},

		buttonPrevElement: jQuery("#firstSlider ul.carousel_nav a.pijl_links"),
		buttonNextElement: jQuery("#firstSlider ul.carousel_nav a.pijl_rechts"),
		
		buttonPrevCallback: function(carousel, controlElement, isEnabled) {
			defaultButtonChangeCallback(carousel, controlElement, isEnabled);
		},
		
		buttonNextCallback: function(carousel, controlElement, isEnabled) {
			defaultButtonChangeCallback(carousel, controlElement, isEnabled);
		},
		
		buttonPrevClickCallback: function(carousel, controlElement) {
			
			// Check if second slider is done sliding
			// If so, wait for it to finish and do nothing untill user clicks prev button again..
			if (secondSliderIsStillBusy) {
				return false;
			}
			
			// When clicking the prev button the slided in element is the first element in the carousel, minus 2
			var slideInElementIndex = carousel.first - 2; 
			
			// When clicking the prev button the slided out element is the last element in the carousel, minus 1
			var slideOutElementIndex = carousel.last - 1;
			
			defaultPrevClickCallback(carousel, controlElement, carouselAnimation, slideInElementIndex, slideOutElementIndex);
			
			// Slide the second slider also, but only when there is a previous slide to show..
			if (secondSlider.first != 1) {
				secondSliderIsStillBusy = true;
				secondSlider.funcPrev();
			}
		},
		
		buttonNextClickCallback: function(carousel, controlElement) {
			
			// Check if second slider is done sliding
			// If so, wait for it to finish and do nothing untill user clicks next button again..
			if (secondSliderIsStillBusy) {
				return false;
			}
			
			defaultNextClickCallback(carousel, controlElement, carouselAnimation);
			
			// Slide the second slider also, but only when there is a next slide to show..
			if (secondSlider.last != secondSlider.size()) {
				secondSliderIsStillBusy = true;
				secondSlider.funcNext();
			}
		}
		
	});
	
	/**
	 * When a slider is not in viewing range it acts as a next or previous button
	 */
	jQuery('div.slider_inhoud li').click(function() {
		
		//Check if li has in_active can't use a selector for it because it changes after pageload
		if (jQuery(this).hasClass('in_active') && jQuery(this).find(".slideContent:visible").length > 0) {
			
			// If slider arrow is in double slider, 
			// get the navigation arrow of the double slider
			if (jQuery(this).parents(".doubleSliders").length > 0) {
				var $parent = jQuery(this).parents(".doubleSliders").first();
			} else {
				var $parent = jQuery(this).parents('.sliderHolder');
			}
			
			// Check if the prev slide is visible and isn't in_active (outside the carousel). 
			// In that case, the slider should be sliding to the left..
			var $prevSlide = jQuery(this).prev("div.slider_inhoud li").prev("div.slider_inhoud li");
			var isNavigationNext = $prevSlide.length > 0 && !$prevSlide.hasClass("in_active");

			if (isNavigationNext) {
				// Trigger the next arrow button (above the slider)
				var $arrow = jQuery("a.pijl_rechts", $parent);
			} else {
				// Trigger the prev arrow button (above the slider)
				var $arrow = jQuery("a.pijl_links", $parent);
			}

			if ($arrow.attr("disabled") == undefined) {
				$arrow.trigger("click");
			}
		}
	});
	
});