/* 
creates a popup video seen here: www.lexi.com/individuals/tours

Instructions:

1. Add these includes to your documents header 
<script type="text/javascript" src="/web/common/js/flowplayer/flowplayer-3.1.4.min.js"></script> 
<script type="text/javascript" src="/videos/js/popup-video.js"></script>
<link rel="stylesheet" href="/videos/css/popup-video.css" />

2. Call the document ready function
	$(document).ready(function(){
		popupVideo();				
	});

3. Include this div in your HTML
<div id="video-container"></div>

4. Add this onclick function to whatever you want to trigger the popup
onclick="showVideo('/videos/pda/palm/updating/updating.', 'mp4', 'Updating Your Palm Software', '504', '640');"
format: (filePath, fileType, fileTitle, fileHeight, fileWidth)
Note: filePath should include the file name and a period (everything except the extension)
Note: You MUST include a .flv file in the same directory incase the user is running an older version of flash, it will fall back on that

Created by: Dan Freeman
*/



function popupVideo(){
	// sets the fade out onclick functions
	$('body').append('<div class="fade"><div class="black-overlay"></div></div>'); // needed for ie6, puts the black fade right after body
};

function fadeOut(){
	$('.black-overlay, #close').click(function(){
		$('.fade').fadeOut('fast');
	});	
};

// build the video HTML
function buildVideoHTML(fileWidth, fileHeight, fileTitle){
	var videoHTML = '<div class="fade video-wrap" style="width: ';
	videoHTML = videoHTML + fileWidth;
	videoHTML = videoHTML + 'px;">';
	videoHTML = videoHTML + '<div id="close">X</div>';
	videoHTML = videoHTML + '<p class="caption">' + fileTitle + '</p>';
	videoHTML = videoHTML + '<div id="player" style="width: ';
	videoHTML = videoHTML + fileWidth + 'px; height: ' + fileHeight + 'px;" class="popup-video"></div></div>';
	$('#video-container').html(videoHTML);
	fadeOut(); // need to set the fade out onclicks after the HTML is built
	/* HTML Structure
		<div class="fade video-wrap" style="width: 640px;">
			<div id="close">X</div>
			<p class="caption">Sneak Peek of the New Palm Pre Software</p>
			<div id="player" style="width: 640px; height:504px;" class="popup-video"></div>
		</div>
	*/
};

//extract variables and then fade in the video
function showVideo(filePath, fileType, fileTitle, fileHeight, fileWidth){
	buildVideoHTML(fileWidth, fileHeight, fileTitle);
	var vpath = filePath + fileType;
	var vpathflv = filePath + '.flv';

	$('.fade').fadeIn('slow');

	// flow player config
	$f("player", "/web/common/js/flowplayer/flowplayer-3.1.4.swf", {
		clip: {
			baseUrl: '',
			autoPlay:  false,
			// play M4V with Flash 9.115+ versions, otherwise play FLV
			url: flashembed.isSupported([9, 115]) ?
				vpath : vpathflv
		}
	});

	// track the page view in analyics
	pageTracker._trackPageview(vpath);

};