function hideImageLayer()
{
   $('#layer_mask').css('display', 'none');
   $('body').css('overflow', 'auto');
	$('#layer_content').css('display', 'none');
	$('#layer_img').attr('src', '');
}

function showImageLayer(imgPath)
{
   if ( $('#layer_img').length == 0) {
      $('body').append(
         "<div id='layer_mask'></div>" +
         "<div id='layer_content' onclick='hideImageLayer()' title='Click to close'>" +
         "<div id='layer_scrollpane'>" +
         "<img id='layer_img' onclick='hideImageLayer()' onload='onImageLoaded()' title='Click to close'/>" +
         "</div>" +
         "</div>");
   }
	$('#layer_img').attr('src', imgPath);
}

function onImageLoaded()
{
   var scrollpane = $('#layer_scrollpane');
   scrollpane.css({left: '0px', top: '0px'});

   $('body').css('overflow', 'hidden');
   $('#layer_mask').css('display', 'block');
   
   var content = $('#layer_content');
   content.css('display', 'block');

   scrollpane.css({
      left: Math.floor((content.width() - scrollpane.width()) / 2) + 'px',
      top: Math.floor((content.height() - scrollpane.height()) / 2) + 'px'});
}