var SlideBox = new Class(
{
	initialize: function( overlay, slideshow, slideOptions )
	{
		this.overlay = document.id( overlay );
		this.slideshow = new Slideshow( slideshow, slideOptions );

		this.overlayFx = new Fx.Tween( overlay, { property: 'opacity' } );

		this.bound =
		{
			hide: this.hide.bind( this ),
			onMouseEnter: this.onMouseEnter.bind( this ),
			onMouseLeave: this.onMouseLeave.bind( this ),
			onSlideChange: this.onSlideChange.bind( this )
		};

		this.slideshow.addEvent( 'show', this.bound.onSlideChange );

		this.overlay.addEvent( 'click', this.bound.hide );
		this.overlay.getChildren().addEvents(
		{
			'click': function( e ) { e.stop(); },
			'mouseenter': this.bound.onMouseEnter,
			'mouseleave': this.bound.onMouseLeave
		});

		var self = this;
		document.id( this.overlay ).getElements( '.control' ).addEvent( 'click', function()
		{
			self.slideshow.show( this.hasClass( 'previous' ) ? 'previous' : 'next' );
		} );

		document.id( this.overlay ).getElements( '.close' ).addEvent( 'click', this.bound.hide );

		document.id( this.overlay ).getElements( '.description' ).set( 'slide', { resetHeight: true } );
	},

	show: function( i )
	{
		this.slideshow.show( i, { skipFx: true } );
		this.overlay.set( 'opacity', 0 ).setStyle( 'display', 'block' );
		this.overlayFx.start( 0, 1 ).chain( function()
		{
			if ( $$( '.video-slide' ).length == 0 ) this.slideshow.play();
		}.bind( this ) );
	},

	hide: function()
	{
		this.overlayFx.start( 1, 0 ).chain( function()
		{
			this.overlay.setStyle( 'display', 'none' );
			this.slideshow.stop();
		}.bind( this ) );
	},
	
	onSlideChange: function( slide )
	{
		document.id( this.overlay ).getElements( '.description' ).slide( 'out' ).set( 'text', slide.get( 'title' ) ).slide( 'in' );
		//var description = document.id( this.overlay ).getElements( '.description' );
		//description.get( 'slide' ).
	},

	onMouseEnter: function()
	{
		document.id( this.overlay ).getElements( '.control' ).setStyle( 'display', 'block' );
	},

	onMouseLeave: function()
	{
		document.id( this.overlay ).getElements( '.control' ).setStyle( 'display', 'none' );
	}
});