// JavaScript Document for Olay UK individual product pages.

$(document).ready(function(){
	
	
	// Subsequent code generates a lightbox to display an enlarged product image.
	$('#containerFooter').after(
														
		'<div id="lightBoxBg"></div>' + 
		'<div id="lightBoxContainer">' +
			'<div id="lightBox">' +
				'<a href="">Schlie&szlig;en x</a>' +
				'<div id="lightBoxContent"></div>' +
			'</div>' +
		'</div>'
		
	);	
	
	$('#linkZoom a').click(function() {
		
		var url = this.href;
		
		$('#lightBoxContent').addClass('loading');
		$('#lightBoxBg').height($('#containerMain').height());
		$(document).scrollTop(0);
		$('#lightBoxBg').css('opacity', '0.75').fadeIn('slow');
		$('#lightBoxContainer').fadeIn('slow');
		$('#lightBox a').slideDown('slow');
		
		var img = new Image();
		
		$(img).load(function() {
				
			$(this).hide();
			
			$('#lightBoxContent').removeClass('loading').html(this);
			
			$(this).fadeIn('slow');
			
		})

		.attr('src', url);

		
		return false;
			
	});
	
	$('#lightBox a').click(function() {
																		 
		$(this).slideUp('slow');
		$('#lightBoxBg').fadeOut('slow');
		$('#lightBoxContainer').fadeOut('slow');
		
		return false;
			
	});
	
	//$('.txtRecommendation h4').css('display', 'none');
	
	// Adding a tooltip onMouseOver.
	$('.containerRecommendation:has(p)').tooltip({ 
		bodyHandler: function() { 
			return $($(this).children('.txtRecommendation').children('p')).text(); 
		}, 
		track: true, 
		delay: 0, 
		showURL: false,
		opacity: 1, 
		fixPNG: true,
		left: -42 
	}); 
	
	// Slide down for ingredients
	if ($('div').hasClass('ing')) {
		
		$('#linkBuyNow').after('<li id="linkIngredients">&#62; Gli Ingredienti</li>');
		
	}
	$('#showIngredients').css('display', 'none');
	$('#linkIngredients').css('cursor', 'pointer').click(function() {
																																		 
		if ($('#showIngredients').css('display') == 'none') {
			
			$('#showIngredients').slideDown('slow');
			
		} else {
			
			$('#showIngredients').slideUp('slow');
			
		}
		
	});
	
	// Dynamically setting height of the callout boxes to the one that is highest - contains the most copy -  so that the links line up horizontally.
	var h = 0;
	
	$('.containerRecommendation').each(function(){
																			 
			if ($(this).height() > h) {
				
				h = $(this).height();
				
			}
				
	});
	
	$('.containerRecommendation').height(h);
	
});