/**
 * TODO:
 *  _ Test and optimize for all required browsers
 *	_ Compress/optimize for delivery?
 */

var defaultWidth;
var defaultHeight;
var expandWidth = 780; // Setting either to 'null' will keep aspect ratio
var expandHeight = 590; // Setting either to 'null' will keep aspect ratio
var transitionDuration = 800; // Length of transition, in milliseconds

var videoPlayer;
var animExpand;
var animCollapse;
 
function init ( )
{
	videoPlayer = document.getElementById( 'videoPlayer' );

	defaultWidth   = videoPlayer.offsetWidth;
	defaultHeight  = videoPlayer.offsetHeight;
	
	//$( 'vidExpand_window' ).effect( 'width' ).set( defaultWidth );
	//$( 'vidExpand_window' ).effect( 'height' ).set( defaultHeight );
}

/**
 * Expands the video view. Requires the mootools JavaScript framework and Fx package.
 */
function expandVideoContainer ( ) 
{
	// Show expanded window and blur screen
	$( 'vidExpand_window' ).set( { 'styles':{ 'display':'block' } } );
	$( 'vidExpand_blurscreen' ).set( { 'styles':{ 'display':'block' } } );
	
	// Setup and start expand transition
	animExpand = new Fx.Styles( 'vidExpand_window' , 
		{ 
			duration:transitionDuration , 
			transition:Fx.Transitions.Cubic.easeInOut , 
			onComplete: onExpandComplete
		}
	);
	animExpand.start({
		'width':expandWidth ,
		'height':expandHeight
	});
}

/**
 * Collapses the video view. Requires the mootools JavaScript framework and Fx package.
 */
function collapseVideoContainer ( )
{
	// Snap video player to default dimensions
	//$( 'videoPlayer' ).effect( 'height' ).set( defaultHeight );
	//$( 'videoPlayer' ).effect( 'width' ).set( defaultWidth );
	videoPlayer.style.height = defaultHeight + "px";
	videoPlayer.style.width  = defaultWidth + "px";
	
	// Setup and start collapse transition
	animCollapse = new Fx.Styles( 'vidExpand_window' ,
		{
			duration:transitionDuration ,
			transition:Fx.Transitions.Cubic.easeInOut ,
			onComplete: onCollapseComplete
		}
	);
	animCollapse.start({
		'width': defaultWidth ,
		'height': defaultHeight
	});
}

/**
 * Event handler called when video expand animation is complete.
 */
function onExpandComplete ( ) 
{
	// Snap video player to xpanded dimensions
	//$( 'videoPlayer' ).effect( 'height' ).set( expandHeight );
	//$( 'videoPlayer' ).effect( 'width' ).set( expandWidth );
	videoPlayer.style.height = expandHeight + "px";
	videoPlayer.style.width  = expandWidth + "px";

	
	// Tell Flash content that resize is complete
	//$( 'videoPlayer' ).onResizeOver();
	videoPlayer.onResizeOver();
}

/**
 * Event handler called when video collapse animation is complete.
 */
function onCollapseComplete ( ) 
{
	// Hide expanded window and blur screen
	$( 'vidExpand_window' ).set( { 'styles':{ 'display':'none' } } );
	$( 'vidExpand_blurscreen' ).set( { 'styles':{ 'display':'none' } } );
	
	// Tell Flash content that resize is complete
	//$( 'videoPlayer' ).onResizeOver();
	//videoPlayer.onResizeOver();
}