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" })
        }
    },

    // Вызов этого метода покажет всплывающее окно.
    show: function(x, y, imageId) {
        // Выставляем элементы в нужные места.
        this.setPosition(x, y, imageId);

        // Запускаем анимацию показа (изменение прозрачности до видимых значений).
        this.element.setStyles({
            "display": ""
        });
        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);
        this.element.setStyles({
            "display": "none"
        });
    },
    getScrollY: function() {
        scrollY = 0;
        if (typeof window.pageYOffset == "number") {
            scrollY = window.pageYOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) {
            scrollY = document.documentElement.scrollTop;
        } else if (document.body && document.body.scrollTop) {
            scrollY = document.body.scrollTop;
        } else if (window.scrollY) {
            scrollY = window.scrollY;
        }
        return scrollY;
    },
    setPosition: function(x, y, imageId ) {
        if (x < 0) {
            var imgH = (window.getHeight() - $(imageId).height) / 2;
            this.element.setStyles({
                "marginLeft": -(this.targetCoords.width / 2),
                "top": this.getScrollY() + imgH
            });
        } else {
            this.element.setStyles({
                "left": x,
                "top": y
                //"marginLeft": -(this.targetCoords.width / 2),
                //"marginTop": -(this.targetCoords.height / 2)
            });
        }

        this.overlay.setStyles({
            "top": 0,
            "height": document.body.scrollHeight ,
            "width": window.getWidth() 
        });
    },
    getInnerHeight: function() {
        height = 0;
        if (window.innerHeight) {
            height = window.innerHeight - 18;
        } else if (document.documentElement && document.documentElement.clientHeight) {
            height = document.documentElement.clientHeight;
        } else if (document.body && document.body.clientHeight) {
            height = document.body.clientHeight;
        }
        return height;
    }
});