/* POPUP TUTORIAL VIDEOS */
/* Based on jQuery modal window from queness.com (http://www.queness.com/post/77/simple-jquery-modal-window-tutorial) */

function showMovie(path) {
	var movieWidth = 640;
	var movieHeight = 375;
	
	/* Create the video container */
	$('<video id="popup_movie" width="'+movieWidth+'" height="'+movieHeight+'" controls="controls" autoplay="autoplay"></video><a id="close_button" href=""></a><div id="mask"></div>').prependTo('body');
	$('#popup_movie').css({
		position: 'absolute',
		height: movieHeight,
		width: movieWidth,
		padding: '10px',
		zIndex: '9999',
		backgroundColor: '#fff',
		display: 'none'
	});
	$('#close_button').css({
		position: 'absolute',
		height: '30px',
		width: '30px',
		background: 'url(/scripts/fancyZoom/images/closebox.png) no-repeat',
		zIndex: '10000',
		display: 'none'
	});
	$('#mask').css({
		position: 'absolute',
		top: '0',
		left: '0',
		zIndex: '9000',
		backgroundColor: '#000',
		display: 'none'
	});
	
	/* Show the mask */
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();
	//Set height and width of the mask to fill up the whole screen
	$('#mask').css({'width':maskWidth,'height':maskHeight});
	//transition effect
	$('#mask').css('opacity',0.8);
	$('#mask').fadeIn('fast');
	
	/* Show the movie */
	//Get the window height and width
	var winH = $(window).height();
	var winW = $(window).width();
	//Get the window scroll offset
	var winS = $(window).scrollTop();
	//Set the popup window to center
	$('#popup_movie').css('top',  winH/2-movieHeight/2+winS);
	$('#popup_movie').css('left', winW/2-movieWidth/2);
	//Set the close button to upper left of popup
	$('#close_button').css('top', winH/2-movieHeight/2+winS-15);
	$('#close_button').css('left', winW/2-movieWidth/2-15);
	//Put the movie into the container
	$('#popup_movie').append('<source src="'+path+'.mov" type="video/mp4"><source src="'+path+'.webm" type="video/webm"><object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param name="src" value="'+path+'.mov"/><param name="autoplay" value="true"/><param name="controller" value="true"/><embed src="'+path+'.mov" width="640" height="375" autoplay="true" controller="true" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>');
	//transition effect
	$('#popup_movie,#close_button').fadeIn('fast',function(){ document.getElementById('popup_movie').play(); });
	
	/* Set the click behaviors */
	//if close button is clicked
	$('#close_button').click(function(e) {
		e.preventDefault();
		var movie = document.getElementById('popup_movie');
		movie.pause();
		$('#popup_movie,#close_button,#mask').fadeOut('fast',function(){ $('#popup_movie,#close_button,#mask').remove(); });
	});		
	//if mask is clicked
	$('#mask').click(function () {
		var movie = document.getElementById('popup_movie');
		movie.pause();
		$('#popup_movie,#close_button,#mask').fadeOut('fast',function(){ $('#popup_movie,#close_button,#mask').remove(); });
	});
}

if (typeof(ie_browser) == "undefined") {
	$(document).ready(function(){	
		$('a.popup_movie').click(function(e) {
			e.preventDefault();
			// Get the path
			var path = $(this).attr('href');
			// Remove the file extension
			var dot = path.lastIndexOf('.');
			path = path.substring(0,dot);
			// Show the movie
			showMovie(path);
		});
	});
}