$(document).ready(function() {
  	$('#content .product').hover( 
		function() {
			$(this).addClass('hover');
		},
		function() {
			$(this).removeClass('hover');
		}
	);
	
	$('#facets ul li ul li').hover( 
		function() {
			$(this).addClass('hover');
		},
		function() {
			$(this).removeClass('hover');
		}
	);
	
	
	$('div.product_group_item').hover(function() {
		$(this).find('div.product_group_information').show();
	}, function() {
		$(this).find('div.product_group_information').hide();
	});
	
	
	var information_hover = $('<div id="information_hover"></div>');
	$(document.body).append(information_hover);
	$('span.information').hover(function (e) {
		var info = $(this);
		info.addClass('hovered');
		var left = e.pageX, top = e.pageY;
		setTimeout( function() {
			if (info.hasClass("hovered") && !info.hasClass("shown")) {
				show_information_hover( info, left, top - 32 );
			}
		}, 800);
	}, function() {
		hide_information_hover( $(this) );
	}).click(function() {
		show_information_hover( $(this) );
	});
	
});


function show_information_hover(info_span, _left, _top) {
	var information_hover = $('#information_hover');
	var pos = info_span.position();
	information_hover.css({top: _top, left: _left});
	information_hover.html(info_span.attr('information'));
	information_hover.show();
	info_span.addClass("shown");
}

function hide_information_hover(info_span) {
	var information_hover = $('#information_hover');
	info_span.removeClass('hovered').removeClass('shown');
	information_hover.hide();
}