function showOverlay(content_id, content_width, content_height) {
	if ($('.overlay_container').length == 0) {
		createOverlay();
		createContent(content_id, content_width, content_height);

		$('.overlay_container').fadeIn(400);
		
		setOverlayDimensions();
	}
}

function closeOverlay() {
	$('.overlay_container').fadeOut(400, function () {
		$(this).remove();	
	});
}

function createOverlay () {
	$('body').append('<div class="overlay_container"></div>');
	$('.overlay_container').append('<div class="overlay"></div>');
	  $(window).resize(function () {
		setOverlayDimensions();
	});
}

function createContent (content_id, content_width, content_height) {
	$('.overlay_container').append('<div class="content"></div>');
	
	$('.overlay_container .content').append('<a href="javascript:closeOverlay()" class="btn_overlay_close"><img src="/shared/gfx/overlay/btn_close.png" /></a>');

  // hack voor IE (wat anders?)
  var container = document.getElementById(content_id);
  var code = innerXHTML(container);
  $('.overlay_container .content').append('<div id="content_container">' + code + '</div>');

//	$('.overlay_container .content').append('<div id="content_container">' + $('#'+content_id).html() + '</div>');

  $(".overlay_container .content #content_container").css("height",content_height+"px");
  $(".overlay_container .content #content_container").css("width",content_width+"px");
  $(".overlay_container .content #content_container").attr("height",content_height);
  $(".overlay_container .content #content_container").attr("width",content_width);

}  

function setOverlayDimensions() {
	var viewportHeight = $(".overlay_container .overlay").height();
	var viewportWidth = $(".overlay_container .overlay").width();
	var contentPlayerHeight = $(".overlay_container .content #content_container").attr("height");
	var contentPlayerWidth = $(".overlay_container .content #content_container").attr("width");

	if(contentPlayerWidth == undefined) contentPlayerWidth = $(".overlay_container .content #content_container object").attr("width");
	
	$(".overlay_container .content a.btn_overlay_close").css("top",((viewportHeight)/2-((contentPlayerHeight)/2)-10)+"px");
	$(".overlay_container .content a.btn_overlay_close").css("left",((viewportWidth/2)+(contentPlayerWidth/2)-10)+"px");
	
	if ($(".overlay_container .content #content_container").length > 0) {
		$(".overlay_container .content #content_container").css("margin-top",((viewportHeight)/2-(contentPlayerHeight)/2)+"px");
	}
} 
