var VideoLightbox = Class.create(Lightbox, {
  
  videoFrame: undefined,
  
  /* Initialize */
  initialize: function() {
    this.videoFrame = $('video-frame');
    this.updateVideoList();
    this.overlayDuration = LightboxOptions.animate ? 0.2 : 0;  // shadow fade in/out duration

    var objBody = $$('body')[0];
		objBody.appendChild(Builder.node('div',{id:'overlay'}));

		$('overlay').hide().observe('click', (function() { this.hide(); }).bind(this));
		$('video-frame-close').observe('click', (function(event) { event.stop(); this.hide(); }).bind(this));

    var th = this;
    (function(){
        var ids = 'overlay';   
        $w(ids).each(function(id){ th[id] = $(id); });
    }).defer();


  },
  
  
  /* Display */
  display: function() {
    var arrayPageSize = this.getPageSize();
    $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
    new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
    
    width = this.videoFrame.getWidth();
    height = this.videoFrame.getHeight();
    x = arrayPageSize[0]/2 - width/2;
    y = arrayPageSize[1]/2 - height/2;
    this.videoFrame.setStyle({ display: 'block', left: x + 'px', top: y + 'px'});
  },
  
  /* Hide */
  hide: function() {
    this.videoFrame.style.display = 'none';
    new Effect.Fade(this.overlay, { duration: this.overlayDuration });
    //$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
  },

  
  /* Update list */
  updateVideoList: function() {   
      this.updateVideoList = Prototype.emptyFunction;

      document.observe('click', (function(event){
          var target = event.findElement('a[rel^=video-lightbox]');
          if (target) {
              event.stop();
              this.display();
          }
      }).bind(this));
  }
  
    
});

document.observe('dom:loaded', function () { new VideoLightbox(); });