/*
 * OverlayBox
 */
var OverlayBox = new Class({
    initialize: function( element ) {
      this.element = element;
      this.margin = 50;
      this.type = 'form';
      if( this.element.href.match( /\.(gif|jpg|png)$/ ) ) {
        this.type = 'image';
      } else if( this.element.rel == 'overlayBoxVideo' ) {
        this.margin = 25;
        this.type = 'video';
      }
      this.element.addEvent( 'click', this.display.bind( this ) );
      if( this.type == 'image' ) {
        // Capture image information
        var thumbnail = this.element.getElement( 'img' );
        var title = this.element.get( 'title' );
        if( thumbnail )
          title = thumbnail.get( 'title' );
        this.image = new Asset.image( this.element.href, { title: title } );
      } else if( this.type == 'image' ) {
        // Capture video information
      }
    },
    /**
     * OverlayBox - display method
     *
     * param    event [in] Reference to event fired.
     */
    display: function( event ) {
      if( this.type == 'video' ) {
        var minWidth = 998;
        if( window.getSize().x < minWidth )
          return true;
      }
      if( !this.overlay ) {
        this.overlay = new Element( 'div' );
        this.overlay.setStyles( {
            'position': 'fixed',
            'background': '#000',
            'top': 0,
            'left': 0,
            'right': 0,
            'bottom': 0,
            'z-index': 500
            } );
        this.overlay.inject( document.body );
      }
      if( !this.container ) {
        this.container = new Element( 'div' );
        this.container.setStyles( {
            'cursor': 'pointer',
            'position': 'fixed',
            'top': 0,
            'left': 0,
            'right': 0,
            'bottom': 0,
            'z-index': 501
            } );
        this.container.inject( document.body );
        this.container.addEvent( 'click', this.close.bind( this ) );
        this.content = new Element( 'div' );
        this.content.setStyles( {
            'border-top': '4px solid #c9caca',
            'border-right': '4px solid #c9caca',
            'border-left': '4px solid #c9caca',
            'background': '#fff',
            'cursor': 'pointer',
            'margin': '50px auto 0',
            'overflow-y': 'auto',
            'overflow-x': 'hidden',
            'width': '775px'
            } );
        this.content.inject( this.container );
        this.content.addEvent( 'click', this.close.bind ( this ) );
        this.content.scroll = new Fx.Scroll( this.content );
        this.closeBox = new Element( 'div' );
        this.closeBox.setStyles( {
            'background': '#fff',
            'border-left': '4px solid #c9caca',
            'border-right': '4px solid #c9caca',
            'border-bottom': '4px solid #c9caca',
            'height': '30px',
            'margin': 'auto',
            'text-align': 'right',
            'width': '775px'
            } );
        this.closeBox.inject( this.container );
        var closeImage = new Element( 'img', { 'src': '/pics/overlaybox/closelabel.gif' } );
        closeImage.setStyle( 'margin', '3px 5px 0 0' );
        closeImage.inject( this.closeBox );
      }
      this.content.setStyle( 'height', window.getSize().y - ( this.margin * 2 ) + this.closeBox.getSize().y );
      this.overlay.set( 'opacity', 0 );
      this.container.set( 'opacity', 0 );
      this.overlay.tween( 'opacity', 0.8 );
      this.url = this.element.href;
      if( this.type == 'form' )
        this.loadForm();
      else if( this.type == 'image' )
        this.loadImage();
      else if( this.type == 'video' )
        this.loadVideo();
      if( !this.resizeRegistered ) {
        window.addEvent( 'resize', this.resize.bind( this ) );
        this.resizeRegistered = true;
      }
      return false;
    },
    loadImage: function() {
      this.content.erase( 'html' );
      this.content.adopt( this.image );
      this.container.tween( 'opacity', 1 );
      var imageWidth = this.image.getSize().x;
      var imageHeight = this.image.getSize().y;
      imageHeight = Math.min( imageHeight, this.content.getSize().y );
      this.content.setStyles( {
        'width': imageWidth,
        'height': imageHeight
      } );
      this.closeBox.setStyles( {
        'width': imageWidth
      } );
      this.maxHeight = imageHeight;
      this.visible = true;
      this.resize();
    },
    loadForm: function() {
      this.request = new Request.HTML( {
          url: this.url,
          onSuccess: function( responseTree, responseElements, responseHTML, responseJavaScript ) {
              this.content.erase( 'html' );
              this.content.adopt( responseTree );
              this.container.tween( 'opacity', 1 );
              this.content.scroll.toTop();
              if( !this.visible ) {
                document.addEvent( 'keydown', this.keyboardListener.bind( this ) );
                window.addEvent( 'resize', this.resize.bind( this ) );
                this.visible = true;
              }
              this.myForm = this.content.getElement('form');
              if( this.myForm ) {
                this.url = this.myForm.get('action');
                this.myForm.set('action','');
                this.myForm.set('method','get');
                this.myForm.set('onsubmit','return false;');
                this.myForm.addEvent( 'submit', function(event){
                  this.request.post( this.myForm );
                  event.stop();
                  event.stopPropagation();
                  return false;
                }.bind( this ));
              }
              this.resize();
            }.bind( this ),
          onFailure: function() {
            window.location = this.element.href;
            }.bind( this )
          } );
      this.request.get();
      return false;
      },
    loadVideo: function() {
      this.content.setStyles( {
          'height': window.getSize().y - 80,
          'margin-top': 25,
          'width': 930
      } );
      this.closeBox.setStyle( 'width', 930 );
      // Display iFrame
      if( !this.iFrame ) {
        this.content.erase( 'html' );
        this.iFrame = new Element( 'iframe', { 'src': this.element.href } );
        this.iFrame.setStyles( {
            'border': 'none',
            'position': 'relative',
            'height': '100%',
            'width': '100%'
        } );
        this.iFrame.inject( this.content );
        // Capture frame ID
        this.iFrameIndex = window.frames.length - 1;
        this.iFrame.addEvent( 'load', function( event ) {
            var myDocument = this.iFrame.contentDocument || window.frames[this.iFrameIndex].document;
            if( !myDocument )
              return;
            this.iFrameBody = $( myDocument.body );
            if( !this.iFrameBody )
              return;
            // Touch up title to fit in popup
            var title = this.iFrameBody.getElement( 'h1' );
            if( title ) {
              title.setStyles( {
                  'font-size': '18px',
                  'padding': 0,
                  'margin': 0
              } );
            }
            //Remove footer from video pages
            var footer = this.iFrameBody.getElement( '#footer' );
            if( footer ) {
              footer.setStyles( {
                  'display': 'none'
              } );
            }
            //Remove puzzle background image
            var bgimg = this.iFrameBody.getElement( '#container' );
            if( bgimg ) {
              bgimg.setStyles( {
                  'background': 'none'
              } );
            }
            // Touch up content to fit in popup
            var content = this.iFrameBody.getElement( '#content' );
            if( content ) {
              content.setStyles( {
                  'margin-top': 0,
                  'margin-left': 10,
                  'padding-bottom': 0
              } );
            }
            // Touch up content to fit in popup
            var flashcontent = this.iFrameBody.getElement( '#flashcontent' );
            if( flashcontent ) {
              flashcontent.setStyles( {
                  'margin-left': 0,
                  'padding-bottom': 0
              } );
            }
            // Touch up content to fit in popup
            var tableimage = this.iFrameBody.getElement( '.tableimage' );
            if( tableimage ) {
              var tableimagetd = tableimage.getElement( 'td' );
              if( tableimagetd ) {
                var flashembed = tableimagetd.getChildren();
                if( flashembed.length > 0 ) {
                  this.maxHeight = flashembed[0].height.toInt() + 67;
                  this.content.setStyles( {
                      'height': this.maxHeight,
                      'width': flashembed[0].width.toInt() + 54
                  } );
                  this.closeBox.setStyle( 'width', flashembed[0].width.toInt() + 54 );
                }
              }
              this.resize();
            }
        }.bind( this ) );
      // Reload iFrame content
      } else {
        this.iFrame.src = this.element.href;
      }
      this.container.tween( 'opacity', 1 );
      this.content.scroll.toTop();
      this.visible = true;
    },
    close: function( event ) {
      if( this.iFrameBody ) {
        this.iFrameBody.empty();
      }
      this.container.tween( 'opacity', 0 );
      this.overlay.tween( 'opacity', 0 );
      document.removeEvent( 'keydown', this.keyboardListener.bind( this ) );
      window.removeEvent( 'resize', this.resize.bind( this ) );
      this.visible = false;
    },
    ignoreClick: function( event ) {
      event.stopPropagation();
    },
    keyboardListener: function(event) {
      // close the box when the user presses ESC
      if( event.key == 'esc' ) {
        this.close();
        event.stop();
      }
    },
    resize: function( event ) {
      if( this.visible ) {
        var newHeight = window.getSize().y - ( this.margin * 2 ) - this.closeBox.getSize().y;
        if( this.maxHeight ) {
          newHeight = Math.min( newHeight, this.maxHeight );
        }
        this.content.setStyle( 'height', newHeight );
      }
    }
    });
if(Browser.Engine.trident4){
  }
  else {
    window.addEvent( 'domready', function() {
    $$( 'a[rel^=overlayBox]' ).each( function( element ) {
        new OverlayBox( element );
        } );
    } );
};