// Create the background
var overlay = $("<div id='modal-bg'></div>");
var modal = $("<div id='modal-window' class='hidden'><a href='#' rel='close'><h1>Request a Callback</h1></a><iframe scrolling='no' src='callback.php' width='100%' height='100%'></iframe></div>");

$(document).ready( function() {
	
	$("a[rel*=modal]").click(function(e) {
	
		modalShow( e.pageX, e.pageY );
		
		e.preventDefault();
	});
	
});

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

function modalShow(x, y) {
	
	// Show the background
	$("body").append( overlay.click( function() {
		modalHide(); 
	}));
	
	$("body").append( modal );
	
	overlay.css("opacity", 0.8);
	overlay.fadeIn(50);
	
	//var win_y = x - ( $("#modal-window").width() / 2 );
	//var win_x = 0;
	
	
	//$("#modal-window").css( {top: win_x , left: win_y  } );
	
	$("#modal-window").center();
	
	$("#modal-window").fadeIn(50);
	
	$("a[rel*=close]").click(function(e) {
		modalHide();
		e.preventDefault();
	});
}


// Hide the modalbox
function modalHide() {
	overlay.fadeOut(50);
	overlay.remove();
	
	$("#modal-window").fadeOut(50);
	$("#modal-window").remove(); 
}