$(document).ready(function(){
	var grayContent = "<div id='fade' class='black_overlay'></div>";
	grayContent += "<div id='light' class='white_content'>";
		grayContent += "<div class='close'><a id='gbClose' style='cursor:pointer'>Close</a></div>";
		grayContent += "<div id='gbBody'></div>";
	grayContent += "</div>";
	
	$("body").prepend(grayContent);
	
	$("#gbClose").click(function(){
		closeGrayBox();						 
	});
});

function showGrayBox(gbWidth, gbHeight, bodyContent) {		
	var gbLeft = ((screen.width - gbWidth)/2)  + "px";
	var gbTop = f_scrollTop() + (($(window).height() - gbHeight)/2) + "px";
	
	$("#light").css({width:gbWidth+"px",height:gbHeight+"px",top:gbTop,left:gbLeft}).fadeIn(500);
	$("#fade").css({height:$(document).height() + "px",opacity:"0.9"}).fadeIn(300);
	
	$("#gbBody").html(bodyContent);
}

function f_scrollTop() {
	return f_filterResults ( window.pageYOffset ? window.pageYOffset : 0, document.documentElement ? document.documentElement.scrollTop : 0, document.body ? document.body.scrollTop : 0);
}

function f_filterResults(n_win, n_docel, n_body) {
	var n_result = n_win ? n_win : 0;
	if (n_docel && (!n_result || (n_result > n_docel)))
		n_result = n_docel;
	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

function closeGrayBox(){
	$("#light").fadeOut(300);
	$("#fade").fadeOut(300);	
}