$(document).ready(function() {
    $("form").append("<div onclick=\"closePOPUP()\" id=\"out_box\" style=\"z-index:9;position:absolute;display:none;width:100%;height:100%;background-color:#333333;left:0px;top:0px;opacity: 0.75;filter: alpha(opacity=75);\"></div>");
});

var _popupid = "";
var _popuptype = 0;

function closeDiv(id) {
    $("#" + id).css('display', 'none');
    _popupid = id;
    _popuptype = 1;
}

function showDiv(obj, id) {
    $("#" + id).css('display', 'none');
    var myoffset = $(obj).offset();
    var width = $(obj).width();
    $("#" + id).css({ 'left': myoffset.left + width, 'top': myoffset.top, 'z-index':100 });
    $("#" + id).show("slow", function() {
        $("#" + id).stop();
    });
    
    _popupid = id;
    _popuptype = 1;
}

function showDivTwo(id) {
    var boxWidth = $("#" + id).width();
    var boxheight = $("#" + id).height();
    //alert($(window).height());
    
    $("#" + id).css({ "display": "block", "left": ($(window).width() - boxWidth) / 2, "top": ($(window).height() - boxheight) / 2, 'z-index': 100 });
    // for firefox bug - not 'block'
    $("#out_box").css({ "display": "block", "width": $(document).width(), "height": $(document).height() });
    
    _popupid = id;
    _popuptype = 2;
}

function closeDivTwo(id) {
    $("#" + id).css({ "display": "none" });
    $("#out_box").css({ "display": "none" });
    
    _popupid = id;
    _popuptype = 2;
}

function closePOPUP()
{
    if(_popuptype == 1)
    {
        closeDiv(_popupid);
    }
    else
    {
        closeDivTwo(_popupid);
    }
}