(function($) {
  $.modal = {}
  $.modal.show  = function(message) {

    $.fn.push = function(html) { return this.append(html).children(":last"); };

    var DIALOG_WIDTH = 700;
    var DIALOG_HEIGHT = 424;
    var CUSHION_LENGTH = 20000;
    FADE_DURATION = 400;
    var mask = $("<div/>")
      .animate({opacity: 0.85}, FADE_DURATION)
      .css({
        position: "absolute",
        top: -CUSHION_LENGTH,
        left: -CUSHION_LENGTH,
        background: "",
        zIndex: 999998,
        height: 2*CUSHION_LENGTH+$(window).height(),
        width: 2*CUSHION_LENGTH+$(window).width(),
        opacity: 0.01
      })
      .click(function(ev) {
        close(ev);
      })
      .appendTo($(document.body));

    var dialog = $("<div/>")
      .fadeIn(FADE_DURATION)
      .css({
        position: "absolute",
        background: "#fff",
        border: "2px solid #fff",
        width: DIALOG_WIDTH,
        zIndex: 999999,
        top: $(window.body).scrollTop()+$(window).height()/2-DIALOG_HEIGHT/2,
        left: $(window).width()/2-DIALOG_WIDTH/2
      })
      .push("<div/>")
        .css({
          margin: "0"
        })
        .html(message)
      .end()
      .push("<div/>")
        .css({
          position: "absolute",
          top: "-1.2em",
          right: "4px",
          cursor: "pointer"
        })
        .html("<b><font color='#fff'><span style='background:#000; padding: 4px;'>(X) Close</span></font></b>")
        .click(function(ev) {
          close(ev);
        })
      .end()
      .appendTo($(document.body));

    $(window.body).keyup(function(ev) { 
      if (ev.charCode==27 || ev.keyCode==27) close(ev);
    });

    function close(ev) {
      ev.stopPropagation();
      dialog.slideUp(FADE_DURATION, function() { dialog.remove(); });
      mask.fadeOut(FADE_DURATION, function() { mask.remove(); });
    }

  }
})(jQuery);