// JavaScript Document

$.overlay = function(options) {
    var settings = $.extend({
      title: "Alert",
      id: "overlay",
      width: 400
    }, options);
    
    var $html = $('<div class="overlay"><div id="' + settings.id + '-content"></div></div>');
    $html.attr("id", settings.id);
    $html.css({width: settings.width});
      
    $("body").append($html);
    $("body").append('<div id="overlay-blocker"><div id="overlay-loading"><span>Loading...</span></div><iframe frameborder="0" /></div>');
    var $overlayBlocker = $("#overlay-blocker");
    $overlayBlocker.add("#overlay-blocker iframe").css({height: $(document).height()});
    
    var $overlay = $("#" + settings.id);
    var $overlayContent = $("#" + settings.id + "-content");
    $("#overlay-loading").css({top: (($(window).height() - 52) / 2) + $(window).scrollTop(), left: (($(window).width() - 52) / 2)});
    
    this.show = function() {
      var viewportHeight = $(window).height();
      var overlayHeight = $overlay.height();
      var centerY = ((viewportHeight - overlayHeight) / 2) + $(window).scrollTop();
      if (centerY < 17)  // allow for close box
          centerY = 17;
      
      var viewportWidth = $(window).width();
      var overlayWidth = $overlay.width();
      var centerX = (viewportWidth - overlayWidth) / 2;
            
      $overlay.css({top: centerY, left: centerX});
      $overlay.show();
    }
    
    this.hide = function() {
      $overlayContent.html("");
      $overlay.remove();
      $overlayBlocker.remove();
    }
    
    this.setContent = function(content) {
      $overlayContent.html(content);
    }
}