$(document).ready(function() {
  $.each($('div.overlay'), function(i, o) {
    var $overlay = $(o);
    var $close_button = $('<a href="#" class="close">Close</a><br />');
    $close_button.click(function(e) {
      e.preventDefault();
      $('.mask').remove();
      $('div.overlay').hide();
    });
    $overlay.prepend($close_button);
  });
  $('div.overlay').click(function(e) {
    e.stopPropagation();
  });
  $('a.overlay').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    var overlay_id = $(this).attr('href');
    overlay_id = overlay_id.substr(1, overlay_id.length-1);
    var $mask = $('<div class="mask"></div>');
    $('body').append($mask);
    $('#'+overlay_id).show();
    $(window).resize();
  });
  $(window).resize(function() {
    $.each($('div.overlay:visible'), function(i, o) {
      var $overlay = $(o);
      $overlay.css('left', (($(window).width()  - $overlay.width())  / 2) - 30);
      $overlay.css('top',  (($(window).height() - $overlay.height()) / 2) - 20);
    });
  });
});