function getWidth()
{
   var w;
   if(document.innerWidth)
   {
      w = document.innerWidth;
   }
   else if(document.documentElement.clientWidth)
   {
      w = document.documentElement.clientWidth;
   }
   else if(document.body)
   {
      w = document.body.clientWidth;
   }
   return w;
}

function getHeight()
{
   var h;
   if(document.innerHeight)
   {
      h = document.innerHeight;
   }
   else if(document.documentElement.clientHeight)
   {
      h = document.documentElement.clientHeight;
   }
   else if(document.body)
   {
      h = document.body.clientHeight;
   }
   return h;
}

function showPicture(uri,width,height)
{
   var page_width = getWidth();
   var page_height = getHeight();

   var middle_left = page_width / 2;
   var middle_top = page_height / 2;

   var left = middle_left - (width / 2);
   var top = middle_top - (height / 2) + document.documentElement.scrollTop;

   if(left < 0)
   {
      left = 0;
   }

   if(top < 0)
   {
      top = 0;
   }

   document.getElementById('picture_show').style.display = 'block';
   document.getElementById('picture_background').style.display = 'block';

   document.getElementById('picture_show').style.left = left + 'px';
   document.getElementById('picture_show').style.top = top + 'px';

   var html = '<table border="0" width="' + width + '" height="' + height + '"><tr><td><a style="cursor: pointer;" onclick="hidePicture()"><img border="0" src="' + uri + '" alt="" /></a></td></tr></table>';

   document.getElementById('picture_show').innerHTML = html;
}

function showPictureLeft(uri,width,height, left)
{
   var page_width = getWidth();
   var page_height = getHeight();

   var middle_top = page_height / 2;
   var top = middle_top - (height / 2) + document.documentElement.scrollTop;

   if(top < 0)
   {
      top = 0;
   }

   document.getElementById('picture_show').style.display = 'block';
   document.getElementById('picture_background').style.display = 'block';

   document.getElementById('picture_show').style.left = left + 'px';
   document.getElementById('picture_show').style.top = top + 'px';

   var html = '<table border="0" width="' + width + '" height="' + height + '"><tr><td><a style="cursor: pointer;" onclick="hidePicture()"><img border="0" src="' + uri + '" alt="" /></a></td></tr></table>';

   document.getElementById('picture_show').innerHTML = html;
}

function hidePicture()
{
   document.getElementById('picture_show').style.display = 'none';
   document.getElementById('picture_background').style.display = 'none';
}