$(document).ready(function() {	

	$('a#loginLink').click(function(e) {
		e.preventDefault();
		
		PopupBox.popup('#loginPopup');
	});
	
	$('.window .close, #screenMask').click(function (e) {
		e.preventDefault();
		
		PopupBox.closeAll();
	});
	
	$('#boxes').appendTo('body');
	
});

function PopupBox() {}

PopupBox.popup = function(strId) {
	
	//Get the screen height and width
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();
	
	//Get the window height and width
	var winH = $(window).height();
	var winW = $(window).width();
        
	//Set the popup window to center
	$(strId).css('top',  winH/2-$(strId).height()/2);
	$(strId).css('left', winW/2-$(strId).width()/2);
	
	//Set heigth and width to mask to fill up the whole screen
	$('#screenMask').css({'width': maskWidth, 'height': maskHeight});
	
	$('#sb_viewer').hide();
	
	//transition effect
	$('#screenMask').fadeIn(1000);
	$('#screenMask').fadeTo("slow", 0.4);
	
	//transition effect
	$(strId).fadeIn(2000);
	
	$('#txtUsername').focus();
}

PopupBox.closeAll = function() {
	$('#screenMask').hide();
	$('.window').hide();
	$('#sb_viewer').show();
}