$(document).ready(function() {
  lightbox();
});

function lightbox() {
  var links = $('a[rel^=lightbox]');
  var overlay = $('<div id="overlay" style="display: none;"></div>');
  var container = $('<div id="lightbox" style="display: none"></div>');
  var target = $('<div class="target"></div>');
  var close = $('<a href="#close" class="close">&times;</a>');
  var titlebar = $('<div class="lightbox_titlebar"></div>');
  var title = $('<div class="lightbox_title"></div>');
  var frame = $('<iframe width="100%" height="100%" class="frame" frameborder="0"></iframe>');
  
  $('body').append(overlay).append(container);
  container.append(target);
  target.append(frame);
  frame.attr('height', container.height() - titlebar.outerHeight());
  container.show().css( { 'top' : Math.round(($(window).height() - container.outerHeight()) / 2) + 'px', 'left' : Math.round(($(window).width() - container.outerWidth()) / 2) + 'px', 'margin-top' : 0, 'margin-left' : 0 } ).hide();
  overlay.css('filter', 'alpha(opacity=80)');
  container.show();
  container.append(close);
  close.css( { 'top' : -10 + 'px', 'right' : -10 + 'px', 'margin-top' : 0, 'margin-left' : 0 } );
  container.hide();
  close.click(
    function(c) {
      c.preventDefault();
      container.hide('fast', function() { overlay.fadeOut('fast'); });
    }
  );
  overlay.click(
    function(d) {
      d.preventDefault();
      container.hide('fast', function() { overlay.fadeOut('fast'); });
    }
  );  
  links.each(
    function(i) {
      var link = $(this);
      link.click(
        function(s) {
          s.preventDefault();
          title.empty().append(link.attr('name'));
          frame.attr('src', link.attr('href'));
          overlay.fadeIn('fast', function() { container.show(); });
        }
      );
    }
  );
}