$(document).ready(function(){
	function reelHide(){
		// Remove the video.
		$('#reelWrapper').remove();
		
		// Fade the overlay out.
		$('#overlay').fadeOut('normal', function(){
			// Remove the overlay.
			$(this).remove();

			// IE 7 doesn't play nice if body is the target.
			var target;
			$.browser.msie && $.browser.version == 7 ? target = 'html' : target = 'body';
			$(target).css('paddingRight','0');
			$(target).css('overflow','auto');
		});
	}
	
	$('#showreelLink').click(function(event){
		// Remove the overlay div incase it is there.
		$('#overlay').remove();
		
		// Add padding to the body equal to the width of the scroll bar so the page doesn't shift, but they still can't scroll.
		// IE 7 doesn't play nice if body is the target.
		var target;
		$.browser.msie && $.browser.version == 7 ? target = 'html' : target = 'body';
		var origWidth = $(document).width();
		$(target).css('overflow','hidden');
		$(target).css('paddingRight', ($(document).width() - origWidth) + 'px');

		$('<div id="overlay"></div>').appendTo('body').hide().width($(document).width()).height($(document).height()).css('opacity', 0.5).fadeIn('normal', function(){
			// Create a div to laod the flash into and center it.
			var reelTop = ($(document).scrollTop() + ($(window).height() / 2) - 240) + 'px';
			var reelLeft = (($(window).width() / 2) - 400) + 'px';
			$('<div id="reelWrapper"></div>').appendTo('body').css('top', reelTop).css('left', reelLeft).load('showreel/showreel.html');
			
		}).click(function(){ reelHide(); });
	});
});