$(document).ready(function () {

    //if close button is clicked
    $('#divPreviewWrapper #close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, #divPreviewWrapper').hide();
    });

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('#divPreviewWrapper').hide();
    });


    if (dbShowDialog)
        window.setTimeout(ShowDialog, dbHFdeInTime);
});

function ShowDialog() {
    //Required Variables: dbWidth, dbHeight, 
    var showMask = true;

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $('#divPreviewWrapper').css('width', parseInt(dbWidth) + 50);
    $('#divPreviewWrapper').css('height', parseInt(dbHeight) + 50);
    $('#hbt').css('width', dbWidth);
    $('#hbb').css('width', dbWidth);
    $('#vbl').css('height', dbHeight);
    $('#vbr').css('height', dbHeight);
    $('#divPreviewWrapper').css('top', winH / 2 - $('#divPreviewWrapper').height() / 2);
    $('#divPreviewWrapper').css('left', winW / 2 - $('#divPreviewWrapper').width() / 2);
    $('#divPreviewWrapper').css('display', 'block');
    $('#divPreview').css('width', dbWidth);
    $('#divPreview').css('height', dbHeight);

    if (showMask) {
        //Get the screen height and width
        var maskHeight;

        maskHeight = $(document).height();
            
        if (maskHeight < $(window).height())
            maskHeight = $(window).height();

        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({ 'width': maskWidth, 'height': maskHeight, 'background-color': dbBackcolor });

        //transition effect
        $('#mask').fadeIn('fast').fadeTo("normal", 0.8);
        $('#divPreviewWrapper').delay(1000).fadeIn(1000);
    }
}