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

   options:
   {
      bgcolor: '#404040',
      opacity: 0.7,
      windowId: false,
      backWindowId: 'backWindowId',
      containerId: false,
      backWindowIdRandom: true,
      fadeTime: 200,
      closeBut: false,
      contentId: false,
      closeTime: 200,
      backTime: 200,
      isCentre: false,
      isClearOnClose: true,
      isModal: false,
      isAutoUpdateFade: true
   },

   initialize: function(options)
   {
      this.setOptions(options);
      this.fade = null;
      if (this.options.isCentre) window.addEvent('scroll', function(){if ($(this.options.windowId).getCoordinates().top >= 0) $(this.options.windowId).centre();}.bind(this));
      if (!this.options.isModal)
      {
        $(document.body).addEvent('keyup',function(event){if(event.key=='esc'){this.close(this.options.isClearOnClose);}}.bind(this));
        $$(this.options.closeBut).addEvent('click', function(){this.close(this.options.isClearOnClose);}.bind(this));
      }
   },

   open: function()
   {
      $(this.options.windowId).setOpacity(0);
      $(this.options.windowId).centre();
      new Fx.Morph(this.options.windowId, {duration: this.options.fadeTime}).start({'opacity': [0, 1]});
      this.fadeOn();      
   },

   close: function(withClear)
   {
      if ($(this.options.windowId).style.top == '-1000000px') return;
      new Fx.Morph(this.options.windowId, {duration: this.options.closeTime}).start({'opacity': [1, 0]}, function(){$(this.options.windowId).style.top = '-1000000px';});
      $(this.options.windowId).style.top = '-1000000px';
      this.fadeOff();
      if (withClear) $(this.options.windowId).innerHTML = '';
   },

   centre: function()
   {
      $(this.options.windowId).centre();
   },

   isClosed: function()
   {
      return ($(this.options.windowId).getStyle('top').toInt() < 0);
   },

   fadeOn: function()
   {
      this.setupFadeElement();
      this.fade.style.position = 'absolute';
      this.fade.style.backgroundColor = this.options.bgcolor;
      this.fade.style.top = 0;
      this.fade.style.left = 0;
      this.fade.style.width = window.getScrollSize()['x'] + 'px';
      this.fade.style.height = window.getScrollSize()['y'] + 'px';
      this.fade.style.zIndex = $(this.options.windowId).getStyle('z-index').toInt() - 1;
      this.fade.style.visibility = 'visible';
      new Fx.Morph(this.fade.id, {duration: this.options.backTime}).start({'opacity': [0, this.options.opacity]});
   },

   fadeOff: function()
   {
      this.setupFadeElement();
      new Fx.Morph(this.fade.id, {duration: this.options.backTime}).start({'opacity': [this.options.opacity, 0]}).addEvent('complete', function(){this.fade.dispose();}.bind(this));
   },

   fadeUpdate: function()
   {
      this.fade.style.width = window.getScrollSize()['x'] + 'px';
      this.fade.style.height = window.getScrollSize()['y'] + 'px';
   },

   setupFadeElement: function()
   {
      if (this.fade) this.fade.dispose();
      if (!$(this.options.backWindowId))
      {
        if (this.options.backWindowIdRandom) this.fade = new Element('div', {id: this.options.backWindowId + parseInt(Math.random() * 1000000)});
        else this.fade = new Element('div', {id: this.options.backWindowId});
        this.fade.setOpacity(0);
        if (!this.options.containerId)
          this.fade.inject(document.body, 'top');
        else
          this.fade.inject($(containerId), 'top');
      }
      else this.fade = $(this.options.backWindowId);
   }
});