$(function() {
  // Вешаем обработчик на ссылки с нужным классом
  $('a.darkbox').click(function() {

    var link = $(this);

    if(!$('div.darkbox-frame').length) {

      // Если попап прежде не вызывался,
      // создаём его и цепляем к BODY
      darkbox = $('<div class="darkbox-frame"><div class="darkbox-shadow"></div><div class="darkbox-canvas"><div class="darkbox-button"></div></div></div>').appendTo('body');
    }

    // Клонируем попап,
    // прицепляем клон к BODY и показываем его
    var frame = darkbox.clone().appendTo('body').addClass('darkbox-frame-on');

    var shadow = frame.find('div.darkbox-shadow').animate({opacity:0.6},300);
    var canvas = frame.find('div.darkbox-canvas');
    var button = frame.find('div.darkbox-button');

    // Цепляем к попапу картинку и ждём её загрузки
    var image = $('<img src="'+ link.attr('href') +'" alt="'+ link.attr('title') +'"/>');

    image.appendTo(canvas);
    image.load(function(){

      var imageWidth = image.width();
      var imageHeight = image.height();
      var frameWidth = frame.width()-40;
      var frameHeight = frame.height()-40;

      // Вписываем картинку в размер окна,
      // если она шире, чем окно
      if(imageWidth > frameWidth) {

        imageWidth = frameWidth;
        image.width(imageWidth);
        while(image.height() > frameHeight) {
          image.width(imageWidth);
          imageWidth--;
        }

        imageHeight = image.height();
      }

      // Вписываем картинку в размер окна,
      // если она выше, чем окно
      if(imageHeight > frameHeight) {

        imageHeight = frameHeight;
        image.height(imageHeight);
        while(image.width() > frameWidth) {
          image.height(imageHeight);
          imageHeight--;
        }

        imageWidth = image.width();
      }

      // Анимируем загрузчик до размеров картинки
      // и одновременно смещаем к центру
      canvas.addClass('darkbox-canvas-load').animate({

        width:imageWidth,
        marginLeft:-imageWidth/2,
        height:imageHeight,
        marginTop:-imageHeight/2

      },500,function() {

        // После завершения анимации показываем кнопку и картинку
        canvas.addClass('darkbox-canvas-done');
        button.addClass('darkbox-button-on');
        button.addClass(navigator.platform.toLowerCase().indexOf('mac')+1?'darkbox-button-left':'darkbox-button-right');

        image.animate({opacity:1},500,function() {

          // Вешаем обработчики закрытия
          shadow.click(closer);
          button.click(closer);

        });
      });
    });

    // Функция закрытия попапа
    var closer = function() {

      canvas.remove();
      shadow.animate({opacity:0},300,function() {
        frame.remove();
      });
    }

    // Внимательно слушаем клавишу Esc
    $(document).keydown(function(e) {
      if(e.which==27) closer();
    });

    return false;
  });
});