$(document).ready(function() {	
    $('#mask').hide();
});

function showPopup()
{
        $('#mask').show();
         
        // window size 
        var maskHeight = $(window).height();
        var maskWidth = $(window).width();        

        // mask
        
        $('#mask').css({'width':maskWidth,'height':maskHeight});
        
//        var width_img = $('#mask_pop img').width();
//        var height_img = $('#mask_pop img').height();

        var width_img = 600;
        var height_img = 400;
        
        var new_width = (maskWidth - width_img)/2;
        var new_height = (maskHeight - height_img)/2;

        // pop on the center crean
        $('#mask_pop').css({'left':new_width,'top':new_height});

        //transition effect
        $('#mask_pop').fadeIn(500);
	
	//if pop is closed
	$('#mask').click(function () {
		$(this).hide();
                $('#mask_pop').hide();
		$('.window').hide();
	});
        
        //if pop is closed
        $('#mask_pop a').click(function () {
             $('#mask_pop').hide();
             $('#mask').hide();
	});
}