window.addEvent('domready', function() {

   $('subs').addEvent('click',function(e){

      var e = new Event(e);
      e.stop();
      var popupFx = null;
      popupFx = new MoodalBox("Popup", "Overlay",{ width: 300, height: 150, offsetTop: this.offsetTop, offsetLeft: this.offsetLeft});
      popupFx.show();

   });
});



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

   options: {
      width: 420,
      height: 380,
      destinationOverlayOpacity: 0.3,
      allowManualClose: true

   },

   initialize: function(popup, overlay, options)
   {
      this.setOptions(options);

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

      if (this.options.allowManualClose)
         this.close.addEvent("click", this.hide.bind(this));

      this.targetCoords = this.popup.getCoordinates();

      this.fx = {
            overlayAnimation: new Fx.Tween(this.overlay, { property: "opacity" }),
            popupAnimation: new Fx.Tween(this.popup, { property: "opacity" })
      }
   },

   show: function()
   {
      this.setLayerStyle();
      this.fx.overlayAnimation.start(0, this.options.destinationOverlayOpacity);
      this.fx.popupAnimation.start(0, 1);
   },


   hide: function()
   {
      this.fx.overlayAnimation.start(this.options.destinationOverlayOpacity, 0);
      this.fx.popupAnimation.start(1, 0);
   },

   setLayerStyle: function()
   {

      this.popup.setStyles({
            "width": this.options.width,
            "height": this.options.height,
            "top": this.options.offsetTop-this.options.height*0.2,
            "left": this.options.offsetLeft-this.options.width*0.5

      });

      this.overlay.setStyles({
            "width": this.options.width+40,
            "height": this.options.height+40,
            "top": this.options.offsetTop-this.options.height*0.2-20,
            "left": this.options.offsetLeft-this.options.width*0.5-20

      });
   }
});