// When the DOM is ready
$('document').ready(function(){

	/* -- Fancybox -- */

	// Set Fancybox defaults
	$.fn.fancybox.defaults.overlayColor = '#000';
	$.fn.fancybox.defaults.overlayOpacity = 0.7;
	$.fn.fancybox.defaults.hideOnContentClick = false;
	$.fn.fancybox.defaults.padding = 0;
	$.fn.fancybox.defaults.titlePosition = "inside";
	$.fn.fancybox.defaults.centerOnScroll = true;
	
	// Activate Fancybox links
	$('a.fancybox, a.fancybox-nofade').fancybox();
	
	/* -- Thumbnails -- */

	// Fade in thumbnail images
	$('.tile a, .fancybox, .thumbnail, a.image-small, a.image-medium, a.image-door, a.image-search').children('img').FadeInImageOnLoad();
	
	/* -- Input Hint -- */
	
	$('.field-text, .field-text-multiline').inputHint();
	
	/* -- Cycle functions -- */
	
	// For each cycle image
	$('a.cycle-image').each(function(index) {
		// Append the semi black overlay
		$(this).css('position', 'relative').append($('<span></span>').css({
			display : 'block',
			width : '90px',
			height : '130px',
			position: 'absolute',
			top: '0px',
			left: '0px',
			'background-color' : '#000000',
			'opacity' : 0.5
		}));

		// On click
		$(this).click(function() {
			// Change the image to the right
			onCycleImagePick($(this));
			
			// Prevent default link functionality
			return false;
		});
		
		// On mouse over
		$(this).mouseover(function() {
			animateElement($('span', $(this)), 0, 300);
		});
		
		// On mouse out
		$(this).mouseout(function() {
			animateElement($('span', $(this)), 0.5, 300);
		});
	});
	
	// Initiate the homepage cycle
	$('#cycle-homepage').cycle({
		fx: 'fade',
		auto: false,
		timeout: 5000,
		speed: 500
	});
	
	// Initiate the cycle
	$('#cycle').cycle({
		fx: 'fade',
		auto: false,
		timeout: 5000,
		speed: 500,
		pause: 1,
		//pager: '#cycle-pager'
		prev: '#cycle-prev',
		next: '#cycle-next'
	});

});

/**
 * Toggle a html-element
 * 
 * This function will show or hide (animated) a element
 *
 * @param element jQuery element
 * @param bool TRUE to show, FALSE to hide
 * @return void
 */
function toggleElement(element, displayFlag, speed) {
	if (!$(element).is(':animated')) {
		(displayFlag) ? $(element).stop().slideDown(speed) : $(element).stop().slideUp(speed);
	}
}

// When an image is chosen in the cycle
function onCycleImagePick($link) {
	// Fetch the element containing the images
	var $container = $('.col-image');
	if($container.length > 0) {
		// Hide all images
		$('a', $container).hide();
		
		// Now fade the correct one in
		$('#' + $link.find('img').attr('alt'), $container).stop().show().css('opacity', 0).animate({
			opacity: 1
		}, 500);
	}
}

// Function to animate an element
function animateElement($element, opacity, duration) {
	$element.stop().animate({
		opacity: opacity
	}, duration);
}