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()
                });
        }
});