function loadVisualEnhancements() {
	$(document).ready(function() {
		$("#navigation > ul > li").focusin(function() {
			$(this).addClass("focus");
		});
		$("#navigation > ul > li").focusout(function() {
			$(this).removeClass("focus");
		});
		$("#navigation > ul > li").mouseenter(function() {
			$(this).find("ul:first").hide().slideDown(120);
		});

		loadTeaserFromHtmlDeclarations("a.teaser");
		loadFancyboxFromHtmlDeclarations("a.fancybox");
		loadPortraitwheelFromHtmlDeclarations("ul.portraitwheel");
		loadTopSliderFromHtmlDeclarations(".slidergallery", "a.fancybox");
		loadCarouselFromHtmlDeclarations(".jcarousel-skin-makingprod");
	});
}



/*
 * This function allows to load the teaser decorator directly from HTML declarations:
 * the selector indicates which element(s) must be decorated.
 */
function loadTeaserFromHtmlDeclarations(sSelector) {
	$(sSelector).bind("focusin mouseenter", function() {
		$(this).find("img:first").hide();
		$(this).find("img.play").show();
	});

	$(sSelector).bind("focusout mouseleave", function() {
		$(this).find("img.play").hide();
		$(this).find("img:first").show();
	});
}



/*
 * This function allows to load the fancybox decorator directly from HTML declarations:
 * the selector indicates which element(s) must be decorated.
 * To create image sets, group them by using the "rel" attribute.
 */
function loadFancyboxFromHtmlDeclarations(sSelector) {
	var dGalleryNames= {};

	//Determining the different sets (called galleries)
	$(sSelector).each(function(i) {
		dGalleryNames[this.rel]= this.rel;
	});

	//Initializing the fancybox for each set
	for (var p in dGalleryNames) {
		$(sSelector+"[rel=\""+p+"\"]").fancybox({
			titlePosition: "inside",
			titleFormat  : function(title, currentArray, currentIndex, currentOpts) {
				var sTitle= currentArray[currentIndex].title;
				if (!sTitle) sTitle= title;
				sTitle= "<span class='fancybox-counter'>"
					+currentArray[currentIndex].rel+" : "
					+(currentIndex+1)+" / "+currentArray.length
					+"</span> "
					+sTitle;
				return sTitle;
			}
		});
	}

	//Initializing the fancybox for the remaining links
	$(sSelector+":not([rel])").fancybox({
		titlePosition: "inside",
		swf          : {
			quality          : "high",
			allowfullscreen  : "true",
			allowscriptaccess: "always",
			wmode            : "opaque"
		}
	});
/*
		'swf': {
			'quality'          : 'high',
			'allowfullscreen'  : 'true',
			'AllowScriptAccess': 'always',
			'wmode'            : 'opaque',
			'scale'            : 'showAll',
			'scalemode'        : 'showAll'
		}
*/
}



/*
 * This function allows to load the custom "portraitwheel" roundabout decorator directly from HTML declarations:
 * the selector indicates which element(s) must be decorated.
 */
function loadPortraitwheelFromHtmlDeclarations(sSelector) {
	$.extend($.roundabout_shape, {
		portraitwheel: function(r, a, t) {
			var x= Math.sin(r + a)-0.033;
			var y= Math.cos(r + a)/1.2-0.45;
			var z= (Math.cos(r + a) + 1);
			var scale= (Math.cos(r + a) + 1)/3;

			if (r > Math.PI) r-= 2*Math.PI;
			var d= r / (Math.PI/5);
			if (Math.abs(d) < 1) {
				x= 0 + (0.588 - 0)*d-0.035;
				y= 0.2 + Math.abs(0.024*d);
				z= 1;
				scale= 1 - Math.abs(0.397*d);
			}
			return {
				x: x,
				y: y,
				z: z,
				scale: scale
			}
		}
	});

	$(sSelector).roundabout({
		minOpacity: 1,
		minScale: 0.2,
//		maxOpacity: 1,
//		maxScale: 1.0,
		childSelector: "li",
		shape: "portraitwheel"
	});
}



/*
 * This function allows to load the carousel decorator directly from HTML declarations:
 * the selector indicates which element(s) must be decorated.
 */
function loadCarouselFromHtmlDeclarations(sSelector) {
	$(window).load(function() {
		$(sSelector).jcarousel({
			scroll      : 1,
			auto        : 4,
			wrap        : 'circular',
			initCallback: function(carousel) {
				// Disable autoscrolling if the user clicks the prev or next button.
				carousel.buttonNext.bind('click', function() {
					carousel.startAuto(0);
				});
	
				carousel.buttonPrev.bind('click', function() {
					carousel.startAuto(0);
				});
	
				// Pause autoscrolling if the user moves with the cursor over the clip.
				carousel.clip.hover(
					function() { carousel.stopAuto(); }, 
					function() { carousel.startAuto(); }
				);
			}
		});
	});
}



/*
 * This function allows to load the top gallery stripe slider decorator directly from HTML declarations:
 * the selector indicates which element(s) must be decorated.
 * The second argument is a selector for child nodes which need to get the fancybox decorator.
 * It is useful even if a general fancybox decorator was called before, because the fancybox event handlers
 * must be attached _after_ the slider ones (so that the clicks can be correctly trapped when drag n' dropping).
 */
function loadTopSliderFromHtmlDeclarations(sSelector, sFancyBoxSelector) {
	animateTopSliderLoading(sSelector);

	$(window).load(function() {
		$(sSelector).mkpslider({
			baseClassName  : "slidergallery"
		});
		if (sFancyBoxSelector) loadFancyboxFromHtmlDeclarations(sSelector+" "+sFancyBoxSelector);
		animateTopSliderLoaded(sSelector);
	});
}

/*
 * This function performs an animation on the stripe slider container element.
 * It is supposed to be called before the plugin loads, so that the animation will run while the page
 * finishes loading.
 */
function animateTopSliderLoading(sSelector) {
	var hElement= $(sSelector).get(0);
	if (!hElement) return;
	if (!hElement._initialized) {
		hElement._initialized= true;
		hElement._bgPosition= 0;
	}

	hElement._bgPosition-= 4;
	if (hElement._bgPosition < -128) hElement._bgPosition= -128;
	hElement.style.backgroundPosition= "0px "+hElement._bgPosition+"px";

	if (hElement._bgPosition > -128) {
		hElement._loadingTimeout= setTimeout("animateTopSliderLoading('"+sSelector+"');", 30);
	}
}
function animateTopSliderLoaded(sSelector) {
	var hElement= $(sSelector).get(0);
	if (!hElement) return;
	hElement.style.backgroundPosition= "";
	if (hElement.style.backgroundPositionX) {
	/*
	IE-specific properties
	IE8 handles the standard property if it contains a classic value, but ignores it when it is empty)
	IE6/7 always understand only the proprietary property (but we don't care about this...)
	*/
		hElement.style.backgroundPositionX= "";
		hElement.style.backgroundPositionY= "";
	}
	if (hElement._loadingTimeout) {
		clearTimeout(hElement._loadingTimeout);
		delete hElement._loadingTimeout;
	}
}