//
// Mask current page
//
function ShowMask() {
    $('#mask').fadeIn(1000);
    $('#mask').fadeTo("slow", 0.7);
}

//
// Hide mask and given modal dialog
//
function HideMaskAndDialog(dialogId) {
    $('#mask').hide();
    $(dialogId).hide();
}

//
// Mask UI and show given dialog in center
//
function ShowModalDialogCentered(dialogId) {
    var winH = $(window).height();
    var winW = $(window).width();
    $(dialogId).css('top', winH / 2 - $(dialogId).height() / 2);
    $(dialogId).css('left', winW / 2 - $(dialogId).width() / 2);
    ShowModalDialog(dialogId);
}

//
// Mask UI and show given dialog + close on id
//
function ShowModalDialog(dialogId) {
    ShowModalDialogAndCloseOn(dialogId, '.closeDialog');
}

//
// Mask UI and show given dialog
//
function ShowModalDialogAndCloseOn(dialogId, closeWhenClickOn) {
    ShowMask();

    // Put dialog on top of mask
    $(dialogId).fadeIn(1000);

    //if close button is clicked
    $(closeWhenClickOn).click(function(e) {
    if (($(this).attr('href')) == "" || ($(this).attr('href')) == "#") {
            //Cancel the link behavior
            e.preventDefault();
        }

        HideMaskAndDialog(dialogId);
    });

    //if mask is clicked
    $('#mask').click(function() {
        HideMaskAndDialog(dialogId);
    });
}