function a(val) { alert(val.toSource()); }

jQuery(document).ready( function($)
{
	$('body').append("<div id='overlay-screen' class='close-overlay'></div>");
	
	$('.open-overlay').click(function(){
		var
			$this = $(this),
			overlayMatch = $this.attr('class').match(/overlay-[a-z0-9]+/),
			overlayId = overlayMatch.length ? overlayMatch[0] : '',
			overlayClassName,
			$overlay,
			$overlayOuter,
			$overlayInner,
			scrollX,
			scrollY,
			closeButton,
			sizeMatch,
			size,
			overlayPos;

		if (overlayId && ($overlay = $('#'+overlayId+'.overlay')) && $overlay.length == 1)
		{
			overlayClassName = $overlay.attr('class');
			
			closeButton = $overlay.hasClass('closeButton');
			sizeMatch   = overlayClassName.match(/[0-9]+x[0-9]+/) || ['640x480'];
			size        = sizeMatch[0].split('x');
			size[0]     = parseInt(size[0]);
			size[1]     = parseInt(size[1]);

			$overlayOuter =
				$("<div class='visible-overlay'>" +
				(closeButton ? "<span class='close-overlay'></span>" : '') +
				"<div class='inner'></div>" +
				"<div class='overlay-loading'></div>" +
				"</div>");

			$overlayInner = $overlayOuter.find('.inner');

			$overlay.appendTo($overlayInner);

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

			$overlayOuter.show();
			$overlayOuter.css({width: size[0]+'px', height: size[1]+'px'});

			// remember to adapt this if some of the CSS changes
			$overlayInner.css({
				"width":  ( size[0] - 20 ) + 'px', // because of margin 
				"height": ( size[1] - (closeButton ? 41 : 20) ) + 'px', // margin + button + button margin
				"overflow-x" : $overlay.hasClass('scrollX') ? 'scroll' : 'hidden',
				"overflow-y" : $overlay.hasClass('scrollY') ? 'scroll' : 'hidden'
			});
			
			overlayPos = calcPosForCenter($overlayOuter.height(), $overlayOuter.width());
			$overlayOuter.css({ "top": overlayPos.top+'px', "left": overlayPos.left+'px' });

			$('.overlay-loading').css({
				"width":  size[0] + 'px',
				"height": size[1] + 'px'});
			
			$('#overlay-screen').show();
		}
	});

	$('.close-overlay').live('click', function()
	{
		$('body').append($('.visible-overlay').find('.overlay'));

		if ($(this).is('#overlay-screen'))
		{
			// click on black bg: remove all overlays
			$('.visible-overlay').remove();
		}
		else
		{
			// click on close button: remove only own overlay
			$(this).closest('.visible-overlay').remove();
		}

		$('#overlay-screen').hide();
	});

	overlayLoaderShow = function(callback)
	{
		var callback = callback || function(){};
		
		$('.overlay-loading').css({opacity: 0}).show().animate({opacity: 0.8}, 100, callback);
	};

	overlayLoaderHide = function()
	{
		$('.overlay-loading').animate({opacity: 0}, 100, function(){ $(this).hide(); });
	};
});