$(function(){
	var offsetX = 20;
	var offsetY = 100;
	$('a.video').click(function(e){	
								
		e.preventDefault();
		
		//Get the A tag
		var id = $(this).attr('href');
			
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
		
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(100);	
		$('#mask').fadeTo("slow",0.6);	
		
		//alert("true");
		
		var winH = $(window).height();
		var winW = $(window).width();	
		 
		$(id).css('top',  e.pageY-600);
		$(id).css('left', -100);
		
		//transition effect
		$(id).fadeIn(2000); 	
		
	});
	
	$('#mask').click(function () {
		$(this).hide();
		$('.video_window').hide();
	});				
	
});

function clicktoopen(id,href,imgwidth,imgheight,imgdesc) {
	
	//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
		//alert(id);
		
		var offsettop = 0;
		var p = $('#'+id);
		var offset = p.offset();
		
		
		var offsettop = offset.top;
		//alert(offsettop);
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(100);	
		$('#mask').fadeTo("slow",0.6);	
		
		var winH = $(window).height();
		var winW = $(window).width();
		
		$('#pop_up').html(''); 
		
		
		$('<div id="pop_up"></div>')
			.css({'top':offsettop-imgheight/2-50,'left':winW/2-imgwidth/2})
			.appendTo('body'); 
		
		var animateheight = parseInt(imgheight) + 50;
		//alert(animateheight + " " + winH);
				
			
		$('#pop_up').animate({'width':imgwidth,'height':animateheight},1000); 
			
		$('#pop_up').html('<img id="largeImage" src="' + href + '" alt="image" /><br />'+imgdesc+ '<br /><img id="close" src="/images/close.jpg" align="right" style="cursor:pointer" />'); 
			
	  /*  $('<img id="close" align="bottom" src="/images/close.jpg" />')
			.css({'top':winH/2-imgheight/2,'right':winW/2-imgwidth/2-20})
			.appendTo('body');   */
						
		//transition effect
		$('#pop_up').fadeIn(300); 
				
		//if close button is clicked
		$('#close').click(function (e) {
			$('#pop_up').hide();
			$('#mask').hide();
			$('#pop_up').remove();
		});		
		
		//if mask is clicked
		$('#mask').click(function () {			
			$('#pop_up').hide();
			$('#mask').hide();
			$('#pop_up').remove();
		});		

}