document.createElement( 'video' );

window.addEvent( 'load', function( ) {
	// Add the backdrop here so we're guaranteed to have the correct document height.
	$( document.body ).grab(
		  new Element( 'div#VideoBackdrop', {
			styles: {
				 'height': Math.max( getWindowHeight( ), getDocumentHeight( ) )
				,'width': Math.max( getWindowWidth( ), getDocumentWidth( ) )
			}
		  } )
		,'top'
	);
} );

var Video = new Class( {
	
	  current: null
	, keyboard: null
	
	, video: null
	, flash: null
	
	, initialize: function( video ) {
		this.video = video.fade( 'hide' );
	  	
	  	this.clickHandler = this.click.bind( this );
	  	this.resizeHandler = this.resize.bind( this );
		
		this.keyboard = new Keyboard( {
			  defaultEventType: 'keyup'
			, events: {
				 'esc': this.clickHandler
/*				,'space': function( e ) {
					if( this.video.paused ) {
						this.video.play( );
					}
					else {
						this.video.pause( );
					}
				  }.bind( this )*/
			  }
		} );
		
		// Flash backup
		if( !can_play_video( ) ) {
			var flashContainer = new Element( 'div.flash', {
				  styles: {
					  width: this.video.get( 'width' )
					, height: this.video.get( 'height' )
				  }
			} );
			this.video.grab( flashContainer );
			
			var videoH264Source = this.video.getChildren(
				'source[ src$=".mp4" ]'
			);
			if( videoH264Source ) {
				videoH264Source = videoH264Source[0];
				
				this.flash = flowplayer(
					  flashContainer
					, {
						  src: auri( 'asset/flash/flowplayer.swf' )
						, version: [ 9, 115 ]
					  }
					, { clip: { url: videoH264Source.src } }
				);
			}
		}
	  }
	
	, attach: function( trigger ) {
		trigger.addEvent( 'click', this.clickHandler );
	  }
	
	, detach: function( trigger ) {
		trigger.removeEvent( 'click', this.clickHandler );
	  }
	
	, show: function( ) {
		$( document.body ).addClass( 'video-playing' );
		
		if( !this.flash ) {
			/**
			 * @browser Chrome: The body flickers if a video is in the loading phase but is hidden via css. So control visibility via DOM injection.
			 */
			$( document.body ).grab( this.video );
		}
		
		this.position( ).fade( 'in' );
		
		if( this.video.play ) {
			this.video.play( );
		}
		else
		if( this.flash ) {
			this.flash.play( );
		}
		
		if( !this._wasPlayEventTracked ) {
			this._wasPlayEventTracked = true;
			
			var slug = null;
			if( this.video.get( 'src' ) ) {
				slug = this.video.get( 'src' );
			}
			else {
				var videoSources = this.video.getChildren( 'source' );
				if( videoSources ) {
					slug = videoSources[0].get( 'src' );
				}
			}
			
			if( slug ) {
				slug = slug.match( /([^\/]*)\..*$/ )[1];
			}
			else {
				slug = document.location.pathname;
				var videos = $$( 'video' );
				if( videos ) {
					for( var i = videos.length - 1; i >= 0; i-- ) {
						if( videos[i] == this.video ) {
							slug += '['+i+']';
							break;
						}
					}
				}
			}
			
			trackEvent( 'Video', 'Video > play', slug, 0 )
		}
	  }
	
	, hide: function( ) {
		$( document.body ).removeClass( 'video-playing' );
		this.video.fade( 'hide' );
		
		if( this.video.pause ) {
			this.video.pause( );
			
			/**
			 * @browser Chrome: The body flickers if a video is in the loading phase but is hidden via css. So control visibility via DOM injection.
			 */
			this.video.dispose( );
		}
		else
		if( this.flash ) {
			this.flash.pause( );
		}
	  }
	
	, resize: function( ) {
		this.position( );
	  }
	
	, click: function( e ) {
		if( this.video.getStyle( 'opacity' ) == 0 ) {
			e.stop( );
		  	window.addEvent( 'resize', this.resizeHandler );
			this.show( );
			this.keyboard.activate( );
			this.attach( $( document.body ) );
		}
		else
		if( e.type == 'keyup' || e.target != this.video ) {
			if( e.target.getParent( 'video' ) != this.video ) {  // Ignore if clicking on degraded content.
				if( !e.target.hasClass( 'draggable' ) ) {
					e.stop( );
					window.removeEvent( 'resize', this.resizeHandler );
					this.hide( );
					this.keyboard.deactivate( );
					this.detach( $( document.body ) );
				}
			}
		}
	  }
	
	, position: function( ) {
		return this.video.position( );
	  }
} );

function can_play_video( ) {
	if( typeOf( can_play_video.bool ) === 'null' ) {
		can_play_video.bool = !!document.createElement( 'video' ).canPlayType;
	}
	return can_play_video.bool;
}