var MoodalBox = new Class({
   Implements: [Options],

   // Зададимся двумя опциями.
   options: {
      // Прозрачность оверлея после показа всплывающего окна.
      destinationOverlayOpacity: 0.8,
      
      // Возможность спрятать окно кликом по оверлею.
      allowManualClose: true
   },

   // В конструктор передаем два обязательных аргумента и необязательный аргумент с опциями.
   //  element — идентификатор элемента окна.
   //  overlay — идентификатор элемента оверлея.
   initialize: function(element, overlay, options)
   {
      this.setOptions(options);

      // Получаем элемент по его идентификатору.
      this.element = $(element);
      this.overlay = $(overlay);

      // Проверяем опцию возможности скрытия окна по клику.
      if (this.options.allowManualClose)
         // Цепляем на клик по оверлею метод скрытия.
         // Примечание: функция bind(param) возвращает метод this.hide, внутри которого переменная this
         // привязана к param. Если опустить вызов bind, тогда this внутри this.hide будет привязан к элементу,
         // событие в котором мы обрабатываем, т.е. к this.overlay.
         this.overlay.addEvent('click', this.hide.bind(this));

      // Получаем размеры окна для последующей его центровки.
      this.targetCoords = this.element.getCoordinates();

      // Эффекты для показывания/скрытия окна и оверлея.
      // Используется эффект, изменяющий заданное CSS-свойство во времени, в данном случае — это прозрачность.
      this.fx = {
         overlayAnimation: new Fx.Tween(this.overlay, { property: 'opacity' }),
         elementAnimation: new Fx.Tween(this.element, { property: 'opacity' })
      }
   },

   // Вызов этого метода покажет всплывающее окно.
   show: function(login)
   {
      // Выставляем элементы в нужные места.
      this.setPosition();
      
      // Запускаем анимацию показа (изменение прозрачности до видимых значений).
      this.fx.overlayAnimation.start(0, this.options.destinationOverlayOpacity);
      this.fx.elementAnimation.start(0, 1);
   },

   // Вызов этого метода скроет всплывающее окно.
   hide: function()
   {
      // Запускаем анимацию скрытия (изменение прозрачности до невидимых значений).
      this.fx.overlayAnimation.start(this.options.destinationOverlayOpacity, 0);
      this.fx.elementAnimation.start(1, 0);
   },

   // Здесь мы корректируем позицию всплывающего окна на странице и
   // размеры оверлея.
   setPosition: function()
   {
      this.element.setStyles({
         'marginLeft': -(this.targetCoords.width / 2),
         'marginTop': -(this.targetCoords.height / 2)
      });

      this.overlay.setStyles({
         'top': window.getScrollTop(),
         'height': window.getHeight()
      });
   }
});