// mjh-image-show.js
// Copyright Matthew J Heaton 2010

var bIsIE = (window.navigator.userAgent.indexOf( "MSIE ")>0)? true: false;
var bIsOpera = (window.navigator.userAgent.indexOf( "Presto")>0)? true: false;
var bIsChrome = (window.navigator.userAgent.indexOf( "Chrome")>0)? true: false;
var nStep = bIsIE? 40: bIsOpera||bIsChrome? 20: 20;

//function InitialiseImageShow()
//{
//  document.write("<div id='ImageShowBackGround' style='position:fixed;left:0px;top:0px;width:0px;height:0px;visibility:hidden;background:rgb(0,0,0);z-index:1000;'>");
//  document.write("</div>");
//  document.write("<div id='ImageShowImageBack' style='position:fixed;left:0px;top:0px;width:0px;height:0px;visibility:hidden;background:rgb(255,255,255)'>");
//  document.write(" <img id='ImageShowImage' style='visibility:hidden'>");
//  document.write("</div>");
//}

var nWindowWidth;
var nWindowHeight;
var TimerSize = 0;
var nSizeWidth = 0;
var nSizeHeight = 0;
var nSizePercent = 0;
var Img;
var divBack;
var divImageBack;
var imgImage;
var nCaptionHeight = 26;
var divMessage;
var szImageCaption;

function CreateElements()
{
  divBack = document.createElement('div');
  divBack.id='ImageShowBackGround';
  divBack.style.position='fixed';
  divBack.style.left='0px';
  divBack.style.top='0px';
  divBack.style.width='0px';
  divBack.style.height='0px';
  divBack.style.visibility='hidden';
  divBack.style.background='rgb(0,0,0)';
  divBack.style.zIndex=1000;
  document.body.appendChild(divBack);
  divImageBack = document.createElement('div');
  divImageBack.id='ImageShowImageBack';
  divImageBack.style.position='fixed';
  divImageBack.style.left='0px';
  divImageBack.style.top='0px';
  divImageBack.style.width='0px';
  divImageBack.style.height='0px';
  divImageBack.style.visibility='hidden';
  divImageBack.style.background='rgb(255,255,255)';
  imgImage = document.createElement('img');
  imgImage.id='ImageShowImage';
  imgImage.style.visibility='hidden';
  divImageBack.appendChild(imgImage);
  var divClose = document.createElement('div');
  divClose.style.position='absolute';
  divClose.style.right='3px';
  divClose.style.bottom='3px';
  divClose.style.cursor='pointer';
  divClose.style.border='1px solid rgb(128,128,128)';
  divClose.style.borderRadius='3px';
  divClose.style.margin='0px';
  divClose.style.padding='1px';
  divClose.style.fontSize='80%';
  divClose.onmousedown=HideImage;
  divClose.innerHTML='Close <b>X</b>';
  divImageBack.appendChild(divClose);
  divMessage = document.createElement('div');
  divMessage.style.position='absolute';
  divMessage.style.left='3px';
  divMessage.style.bottom='4px';
  divMessage.style.margin='0px';
  divMessage.style.padding='1px';
  divMessage.style.fontSize='80%';
  var textMessage = document.createTextNode(' ');
  divMessage.appendChild(textMessage);
  divImageBack.appendChild(divMessage);
  document.body.appendChild(divImageBack);
}

function ImageShow(szImage, szCaption)
{
  szImageCaption = szCaption;
  GetWindowSize();
  window.onresize=Resize;

  var elemImage = document.getElementById('ImageShowImage');
  if (!elemImage)
  {
    CreateElements();
    elemImage = imgImage;
    elemImage.src = null;
  }
  if (elemImage) elemImage.style.visibility = 'hidden';

  var elemBackground = document.getElementById('ImageShowBackGround');
  if (elemBackground)
  {
    elemBackground.style.width = nWindowWidth+'px';
    elemBackground.style.height = nWindowHeight+'px';
    elemBackground.style.visibility = 'visible';
    var nOpacity = nStep; //bIsIE? 70: 5;
    if (bIsIE) elemBackground.style.filter = 'alpha(opacity='+nOpacity+')';
    elemBackground.style.opacity = nOpacity/100.0;
    elemBackground.style.zIndex = 1000;
    elemBackground.onmousedown = HideImage;
  }
  Img = new Image();
  Img.src = szImage;

  nSizePercent = 0;
  TimerSize = setTimeout('SizeImage()',50);
}

function SizeImage()
{
  var elemBackground = document.getElementById('ImageShowBackGround');
  if (elemBackground && nSizePercent<100)//&& !bIsIE)
  {
    var nOpacity = nStep + nSizePercent*(80-nStep)/100.0;
    if (bIsIE) elemBackground.style.filter = 'alpha(opacity='+nOpacity+')';
    elemBackground.style.opacity = nOpacity/100.0;
  }
  if (Img.width == 0)
  {
    TimerSize = setTimeout('SizeImage()',50);
  }
  else
  {
    var elemImageBack = document.getElementById('ImageShowImageBack');
    if (elemImageBack)
    {
     if (nSizePercent==0 && Img.width==nSizeWidth && Img.height==nSizeHeight) nSizeWidth = nSizeHeight = 0;
     var nImageWidth = nSizeWidth + (Img.width-nSizeWidth)*nSizePercent/100;
     var nImageHeight = nSizeHeight + (Img.height-nSizeHeight)*nSizePercent/100;
     elemImageBack.style.left = (nWindowWidth-nImageWidth)/2 + 'px';
     elemImageBack.style.top = (nWindowHeight-nImageHeight)/2 + 'px';
     elemImageBack.style.width = nImageWidth+'px';
     elemImageBack.style.height = nImageHeight+nCaptionHeight+'px';
     elemImageBack.style.zIndex = 1001;
     elemImageBack.style.visibility = 'visible';
     elemImageBack.onmousedown = HideImage;
    }
    if (nSizePercent < 100)
    {
     nSizePercent += nStep;
     if (nSizePercent>100) nSizePercent=100;
     TimerSize = setTimeout('SizeImage()',nStep<<1);//10);
    }
    else
    {
     TimerSize = 0;
     var elemImage = document.getElementById('ImageShowImage');
     if (elemImage)
     {
      elemImage.src = Img.src;
      elemImage.style.visibility = 'visible';
      nSizeWidth = Img.width;
      nSizeHeight = Img.height;
      setTextContent( divMessage, szImageCaption? szImageCaption: elemImage.src );
     }
    }
  }
}

function HideImage()
{
  if (TimerSize) clearTimeout(TimerSize);
  TimerSize = 0;
  var elemImage = document.getElementById('ImageShowImage');
  if (elemImage) elemImage.style.visibility = 'hidden';
  var elemImageBack = document.getElementById('ImageShowImageBack');
  if (elemImageBack) elemImageBack.style.visibility = 'hidden';
  var elemBackground = document.getElementById('ImageShowBackGround');
  if (elemBackground) elemBackground.style.visibility = 'hidden';
  window.onresize=null;
}

function Resize()
{
  GetWindowSize();
  var elemBackground = document.getElementById('ImageShowBackGround');
  if (elemBackground)
  {
    elemBackground.style.width = nWindowWidth+'px';
    elemBackground.style.height = nWindowHeight+'px';
  }
  SizeImage();
}

function GetWindowSize() {
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    nWindowWidth = window.innerWidth;
    nWindowHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    nWindowWidth = document.documentElement.clientWidth;
    nWindowHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    nWindowWidth = document.body.clientWidth;
    nWindowHeight = document.body.clientHeight;
  }
}

function setTextContent(element, text)
{
    while (element.firstChild!==null)
        element.removeChild(element.firstChild); // remove all existing content
    element.appendChild(document.createTextNode(text));
}