$(document).ready(function(){
	// Create registration & sign-in overlay
	$('body').append('<div id="overlay"></div>');
	var theBackground = $('div#overlay').css({
		'height': $(document).height() + 'px',
		'opacity': 0.4
	}).hide();
});

function showOverlay(theFunction) {
	// Fade the overlay in
	var theBackground = $('div#overlay');
	
	// Assign click event
	theBackground.click(function(){
		hideOverlay(theFunction);
	});
	
	// Determine which DIV to fade in
	if(theFunction == "register"){
		var theDialog = $('div#registration');
	}else if(theFunction == "sign-in"){
		var theDialog = $('div#sign-in-box');
	}
	
	// Position the dialog and fade in
	theDialog.css({
		'left': $(document).width() / 2 - 210 + 'px',
		'top': $(window).scrollTop() + $(window).height() / 8
	});
	
	theBackground.fadeIn(function(){
		theDialog.show();
	});
}

function switchRegistration(){
	$('div#sign-in-box').hide();
	showOverlay('register');
}

function hideOverlay(theFunction) {
	// Fade the overlay out
	var theBackground = $('div#overlay');
	theBackground.fadeOut();
	
	// Determine which DIV to fade out
	if(theFunction == "register"){
		var theDialog = $('div#registration');
	}else{
		var theDialog = $('div#sign-in-box');
	}
	
	// Fade the dialog out
	theDialog.hide();
}