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

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

                // Возможность спрятать окно кликом по оверлею.
                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" })
                }
        },
        
        close: function(){
              this.fx.overlayAnimation.start(0);
              this.fx.elementAnimation.start(0);
        },

        // Вызов этого метода покажет всплывающее окно.
        show: function()
        {
                // Выставляем элементы в нужные места.
                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).getScroll().y,'height':$(window).getScrollSize().y+$(window).getScroll().y
                      //  "top": window.getScrollTop(),
                      //  "height": window.getHeight()
                });
        }
});