A mini lightbox (jQuery)

mini-lightbox.js

/* A small script to display lightboxes. No IE6 support. */
/*global jQuery: false*/
(function($, window){
"use strict";

$.miniLightbox = {};

var EVENT_NS = 'minilightbox';
var DEFAULT_SETTINGS = {
  'class': '',
  'opacity': 0.1,
  'onBeforeClose': null,
  'onAfterClose': null,
  'onBeforeShow': null,
  'onAfterShow': null,
  'closeOnEscape': true
};

var $overlay = null;
var $lightbox = null;
var $window = $(window);
var $document = $(window.document);
var $body = $(window.document.body);
var isOverlayVisible = false;
var customEvents = {};
var currentSettings = {};

function startEvents() {
  $window.bind('resize.' + EVENT_NS, function(){
    var winWidth = $window.width();
    var winHeight = $window.height();
    $overlay.css({
      width: winWidth,
      height: winHeight
    });
    if ($lightbox !== null) {
      var lightboxLeft = winWidth/2 - $lightbox.outerWidth()/2;
      var lightboxTop = winHeight/2 - $lightbox.outerHeight()/2;
      $lightbox.css({
        left: ((lightboxLeft > 0)? lightboxLeft : 0) + 'px',
        top: ((lightboxTop > 0)? lightboxTop : 0) + 'px'
      });
    }
  }).resize();

  $overlay.bind('click.' + EVENT_NS, function(e) {
    $.miniLightbox.close(customEvents.onAfterClose);
  });

  if (currentSettings.closeOnEscape) {
    $document.bind('keyup.' + EVENT_NS, function(e) {
      if (e.keyCode === 27) {
        $.miniLightbox.close(customEvents.onAfterClose);
      }
    });
  }
}
function endEvents() {
  $window.unbind('resize.' + EVENT_NS);
  $overlay.unbind('click.' + EVENT_NS);
  $document.unbind('keyup.' + EVENT_NS);
  customEvents = {};
}

function showOverlay(callback) {
  isOverlayVisible = true;
  if ($overlay === null) {
    $overlay = $('<div id="lightbox-overlay" style="display:none;position:fixed;z-index:10000;top:0;left:0;" />').appendTo($body);
  }
  startEvents();
  $overlay.stop().css('opacity', 0).show().animate({opacity: currentSettings.opacity}, 150, callback);
}

function assignCustomEvents() {
  var customEventsNames = ['onBeforeClose', 'onAfterClose', 'onBeforeShow', 'onAfterShow'];
  for (var i = 0; i < customEventsNames.length; i++) {
    if (currentSettings[customEventsNames[i]] !== null) {
      customEvents[customEventsNames[i]] = currentSettings[customEventsNames[i]];
    }
  }
}

function openLightbox(lightboxContent) {
  assignCustomEvents();

  if ($lightbox === null) {
    $lightbox = $('<div tabindex="0" id="lightbox" class="'+ currentSettings['class'] +'" style="display:none;position:fixed;z-index:10001;"></div>').appendTo($body);
  } else {
    $lightbox.attr('class', currentSettings['class']);
  }
  $lightbox.empty().append(lightboxContent);

  // Custom event: before show
  if (customEvents.onBeforeShow) {
    customEvents.onBeforeShow($lightbox);
  }

  $lightbox.stop().fadeIn(150, function() {
    // Custom event: after show
    if (customEvents.onAfterShow) {
      customEvents.onAfterShow($lightbox);
    }
  });
  $window.resize();
}

$.miniLightbox.open = function(lightboxContent, settings) {
  currentSettings = $.extend({}, DEFAULT_SETTINGS, settings);

  if (!isOverlayVisible) {
    showOverlay(function(){
      openLightbox(lightboxContent);
    });
  } else {
    openLightbox(lightboxContent);
  }
};

$.miniLightbox.wait = function() {
  // TODO: display the overlay and a loader
};

$.miniLightbox.refresh = function() {
  $window.trigger('resize.' + EVENT_NS);
};

$.miniLightbox.close = function(callback) {
  if ((customEvents.onBeforeClose && customEvents.onBeforeClose() !== false) || !customEvents.onBeforeClose) {
    isOverlayVisible = false;
    $overlay.stop().fadeOut(150);
    if ($lightbox !== null) {
      $lightbox.stop().fadeOut(150, function(){
        $lightbox.css('opacity', 1);
      });
    }
    if (callback) {
      callback($lightbox);
    }
    endEvents();
  }
};

})(jQuery, this);