$(function(){
/*##################  OVERLAY  ################################ */
	$("#footnotes a[rel], #header a[rel]").overlay({expose: '#333333'});
	
/*##################  IMG HOVER  ################################ */
/*We don't know the height as the number of subcategories will make the container grow vertically. So animate the width. jQuery will calculate this with outerWidth()*/
	$('.contentWrap').hover(function(){
		var $goleft = $(this).find('.hover_link');
		$goleft.stop().animate({left:-$goleft.outerWidth()},{queue:false,duration:500});
	}, function(){
		var $goleft = $(this).find('.hover_link');
		$goleft.stop().animate({left:'0'},{queue:false,duration:500});
	});

	$('.featured .contentWrap').hover(function(){
		$(this).find('.hover_img').stop().animate({top:'395px'},{queue:false,duration:500});
	}, function(){
		$(this).find('.hover_img').stop().animate({top:'10px'},{queue:false,duration:500});
	});

	$('.theProds .contentWrap').hover(function(){
		$(this).find('.hover_link').stop().animate({top:'210px'},{queue:false,duration:500});
	}, function(){
		$(this).find('.hover_link').stop().animate({top:'0'},{queue:false,duration:500});
	});
	
/*##################  TABS  ################################ */
	$("#singleMainContent .related .tabs").tabs("div.panes > div", { event:'mouseover' });
		
});