$(document).ready(function(){
   
    $('#viewer #closewindow, #mask').click(
	    function(){
	    	$('#viewer').fadeOut(300);
	    	$('#mask').fadeOut(300);
	    }
    );
   
   
   
	$('#productions li').hide()
	.each(function(index,val){
		
	setTimeout(function(){
			$('#productions li').eq(index).fadeIn(300);
		},index*100);

		})
	.hover( function () {
		$(this).toggleClass("hover");
		}
	)
	.click(
	
	function(){
	
		var $clicked = $(this);
		
		
		//get viewerleft position from clicked parent
		viewerleft = $clicked.parent().offset().left;
		
		$('#viewer').find('h2.title').text( $clicked.find('h2').text() ).end()
		.find('h3.channel').text( $clicked.find('h3').text() ).end()
		.find('div.description').html( $clicked.find('div.description').html() ).end()
		.css( {'top': $clicked.offset().top, 'left': viewerleft} )
		.fadeIn(500);
		
		//check for cookie - use to set sting
		var stingUrl = "";
		
		if ($.cookie("viewed")) {
		
		stingUrl = "/assets/video/ipm-short.mp4";
		} else {
		stingUrl = "/assets/video/ipm-long.mp4";
		$.cookie("viewed", 1);
		}
		
		$("#player").empty().flash({
			swf: '/assets/flash/videoplayer.swf',
			height: 240,
			width: 390,
			
flashvars:{
				url: $clicked.find('div.videourl').text(),
				sting: stingUrl
			}

		});
		
		//Get the screen height and width  
		var maskHeight = $(document).height();  
		var maskWidth = $(window).width(); 
		
		
		var $mask = $('#mask');
		
		var $viewerbottom = $clicked.offset().top + $("#viewer").height();
		
		if ($viewerbottom > ($(window).height() + $(document).scrollTop() )  || $clicked.offset().top < $(document).scrollTop()  ) {
		
		$(document).scrollTop($clicked.offset().top);
		
		}
		
		//Set height and width to mask to fill up the whole screen
		$('body').append($mask);  
		
		$mask.css({'width':maskWidth,'height':maskHeight, 'top':0, 'left':0});
		
		//transition effect       
		$mask.fadeTo(300,0.8);
	
	}
	
	);
	
	

});