jQuery.noConflict();
     
jQuery(document).ready(function(){

	jQuery("div.popup").hide();
	
	jQuery("img#button_tips").click(function(){
	
		jQuery("div.popup").fadeIn(500);
	});		
	
	jQuery("img#button_terug").click(function(){
	
		jQuery("div.popup").fadeOut(500);
	});	
	
	var theDiv = jQuery("#tip1");
	var totalWidth = theDiv.height();
	
	setOverlay();
	
	hovers();
	

});


function setOverlay(){
	
	var w1 = jQuery("#tip1").width();
	var h1 = jQuery("#tip1").height();
	jQuery("#tip1").append("<div class=\"overlay\" style=\"width: " + w1 + "px; height: " + h1 + "px;\">&nbsp</div>");
	
	var w2 = jQuery("#tip2").width();
	var h2 = jQuery("#tip2").height();
	jQuery("#tip2").append("<div class=\"overlay\" style=\"width: " + w2 + "px; height: " + h2 + "px;\">&nbsp</div>");
	
	var w3 = jQuery("#tip3").width();
	var h3 = jQuery("#tip3").height();
	jQuery("#tip3").append("<div class=\"overlay\" style=\"width: " + w3 + "px; height: " + h3 + "px;\">&nbsp</div>");
	
	var w4 = jQuery("#tip4").width();
	var h4 = jQuery("#tip4").height();
	jQuery("#tip4").append("<div class=\"overlay\" style=\"width: " + w4 + "px; height: " + h4 + "px;\">&nbsp</div>");
	
}

function hovers() {
	jQuery("#tip1 .overlay").mouseenter(function(){
		jQuery(this).fadeOut();
	});
	jQuery("#tip1").mouseleave(function(){
		jQuery("#tip1 .overlay").fadeIn();
	});
	
	jQuery("#tip2 .overlay").mouseenter(function(){
		jQuery(this).fadeOut();
	});
	jQuery("#tip2").mouseleave(function(){
		jQuery("#tip2 .overlay").fadeIn();
	});
	
	jQuery("#tip3 .overlay").mouseenter(function(){
		jQuery(this).fadeOut();
	});
	jQuery("#tip3").mouseleave(function(){
		jQuery("#tip3 .overlay").fadeIn();
	});
	
	jQuery("#tip4 .overlay").mouseenter(function(){
		jQuery(this).fadeOut();
	});
	jQuery("#tip4").mouseleave(function(){
		jQuery("#tip4 .overlay").fadeIn();
	});
}