$(function() {
	// install flowplayer on the container
    featureplayer = $f("player", "flowplayer-3.1.1.swf", { 
			// our fake fullscreen action
		onBeforeFullscreen: function() {
			// 1. launch overlay
			$("div.overlay").overlay().load();	
			// 2. pause the player 	
			this.hide().pause();
			// disable fullscreen button when overlaid
			this.getControls().enable({fullscreen:false});
			// disable normal fullscreen action by returning false
			return false;
		},
		// When ESC is pressed above the player, fullscreen is closed.
		onKeyPress: function(key) {
			if (key == 27) {
				$("div.overlay").overlay().close();
			}
		},
		clip: { scaling: 'fit' },
		canvas: {backgroundGradient: 'none'}

	});	

// setup overlay
$("div.overlay").overlay({

	// 1. start expose effect when overlaying begins
		onBeforeLoad: function() {
			this.getBackgroundImage().expose('#123448').load();
		},
	// 2. when overlay is loaded, we reposition and resize the player on top of it
	 	onLoad: function() {
			// get handle to the embed element
			var embed = $("#player :first");
		
			/* and reposition / resize it. you will propably have to tweak
			these when placing this on your site */
			var img = this.getBackgroundImage();
			var height = img.css("height");
			if (height == 'auto') height = 511;
			
			embed.css({
				// size
				width:parseInt(img.css("width")) -80,
				height:parseInt(height) -80,

				// position
				left: parseInt(img.css("left")) + 40,
				top: parseInt(img.css("top")) + 40
			});

			// while overlay was growing we were in the paused state
			$f().resume();
		},

		// when overlay closes
		onClose: function() {

		// 1. return our player to its original size/position
		$("#player :first").css({top: null, left: null, width: null, height: null});

		// 2. enable the fullscreen button again
		$f().getControls().enable({fullscreen:true});

		$f().stop();
		$f().unload();

		// 3. unexpose (remove the darkened browser canvas)
		this.getBackgroundImage().expose().close();

	}
});

});