$(document).ready(function()
 {
    $('img[rel]').each(function(){
		$(this).click(function() {
			var background = $('<div/>');
			$(background).attr('id', 'overlayBackground').css(
			 {
			  'width' : $(window).width(),
			  'height' : $(document).height(),
			  'position'	:	'absolute',
			  'top'	:	'0px',
			  'left'	:	'0px',
			  'opacity'	:	'0.6',
			  'z-index'	:	'99'
			 }).fadeIn(1000);

			 $('body').append(background);

			/* get the block to be displayed in overlayer */
			//var overlayer = $('#overlayerAnchor').children('img').attr('rel');
			var overlayer = $(this).attr('rel');
			var overlayer_block = $('#' + overlayer);
			// what is the position
			$overlayer_top = ($(window).height() - $(overlayer_block).height())/2;
			$overlayer_width = ($(window).width() - $(overlayer_block).width())/2;
			$(overlayer_block).css({
				'position' : 	'fixed',
				'top'	: 	$overlayer_top,
				'left'	:	$overlayer_width,
				'opacity'	: '1',
				'z-index'	:	'100'
			});

			$(overlayer_block).fadeIn(2000);
			$('a.close').bind('click', function() {
				 $(overlayer_block).fadeOut(1000);
				 $('div#overlayBackground').fadeOut(1000, function()
				  {
				   $(this).remove();
				  });
			});
			$('div#overlayBackground').bind('click', function() {
			 				 $(overlayer_block).fadeOut(1000);
			 				 $('div#overlayBackground').fadeOut(1000, function()
			 				  {
			 				   $(this).remove();
			 				  });
			 			});
			$('div.overlayBlock').bind('click', function() {
				 $(overlayer_block).fadeOut(1000);
				 $('div#overlayBackground').fadeOut(1000, function()
				  {
				   $(this).remove();
				  });
			});
		});
	});

	$('span[rel]').each(function(){
		$(this).click(function() {
			var background = $('<div/>');
			$(background).attr('id', 'overlayBackground').css(
			 {
			  'width' : $(window).width(),
			  'height' : $(document).height(),
			  'position'	:	'absolute',
			  'top'	:	'0px',
			  'left'	:	'0px',
			  'opacity'	:	'0.6',
			  'z-index'	:	'99'
			 }).fadeIn(1000);

			 $('body').append(background);

			/* get the block to be displayed in overlayer */
			//var overlayer = $('#overlayerAnchor').children('img').attr('rel');
			var overlayer = $(this).attr('rel');
			var overlayer_block = $('#' + overlayer);
			// what is the position
			$overlayer_top = ($(window).height() - $(overlayer_block).height())/2;
			$overlayer_width = ($(window).width() - $(overlayer_block).width())/2;
			$(overlayer_block).css({
				'position' : 	'fixed',
				'top'	: 	$overlayer_top,
				'left'	:	$overlayer_width,
				'opacity'	: '1',
				'z-index'	:	'100'
			});

			$(overlayer_block).fadeIn(2000);
			$('a.close').bind('click', function() {
				 $(overlayer_block).fadeOut(1000);
				 $('div#overlayBackground').fadeOut(1000, function()
				  {
				   $(this).remove();
				  });
			});
			$('div#overlayBackground').bind('click', function() {
				 $(overlayer_block).fadeOut(1000);
				 $('div#overlayBackground').fadeOut(1000, function()
				  {
				   $(this).remove();
				  });
			});
			$('div.overlayBlock').bind('click', function() {
				 $(overlayer_block).fadeOut(1000);
				 $('div#overlayBackground').fadeOut(1000, function()
				  {
				   $(this).remove();
				  });
			});
		});
	});

	/* resize the page_content block */
	$('div.page_content').css({
		'min-height'	:	$('div.menu').height()
	});
 });