/********************************************************************/
/* Image script                                                     */
/*                                                                  */
/* Displays a image within a semi-transparent frame. Frame will     */
/* scroll in and out                                                */
/********************************************************************/

/********************************************************************/
/* Variable Declaration                                             */
/********************************************************************/

var intWidth = 0;
var intHeight = 0;
var intScrollX = 0;
var intScrollY = 0;
var divContainer;
var divFrame;
var divTitleWindow;
var divTitleText;
var divCloseText;
var divPictureFrame;
var divPictureWindow;
var divPictureContainer;
var divLoading;
var divPicture;

/********************************************************************/
/* Event handlers                                                   */
/********************************************************************/

window.onresize = GetWindowSize;
window.onscroll = GetScrollPosition;

/********************************************************************/
/* Functions                                                        */
/********************************************************************/

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

function GetScrollPosition()   // get current scroll position
{
  if (document.all)
  {
    if (!document.documentElement.scrollTop) intScrollY = document.body.scrollTop; else intScrollY = document.documentElement.scrollTop;
    if (!document.documentElement.scrollLeft) intScrollX = document.body.scrollLeft; else intScrollX = document.documentElement.scrollLeft;
  }
  else
  {
    intScrollY = window.pageYOffset;
    intScrollX = window.pageXOffset;
  }
}

function Init()   // initialize variables
{
  // get elements
  if (document.getElementById)
  {
    divContainer = document.getElementById("Container");
    divFrame = document.getElementById("Frame");
    divTitleWindow = document.getElementById("TitleWindow");
    divTitleText = document.getElementById("TitleText");
    divCloseText = document.getElementById("CloseText");
    divPictureFrame = document.getElementById("PictureFrame");
    divPictureWindow = document.getElementById("PictureWindow");
    divPictureContainer = document.getElementById("PictureContainer");
    divLoading = document.getElementById("Loading");
    divPicture = document.getElementById("Picture");
  }
  else if (document.all)
  {
    divContainer = document.all["Container"];
    divFrame = document.all["Frame"];
    divTitleWindow = document.all["TitleWindow"];
    divTitleText = document.all["TitleText"];
    divCloseText = document.all["CloseText"];
    divPictureFrame = document.all["PictureFrame"];
    divPictureWindow = document.all["PictureWindow"];
    divPictureContainer = document.all["PictureContainer"];
    divLoading = document.all["Loading"];
    divPicture = document.all["Picture"];
  }

  GetWindowSize();   // get client window size
  GetScrollPosition();   // get client window scroll position
}

function ReplaceTitle(imgAlt)   // set the title for the picture
{
  if (document.getElementById)
  {
    x = document.getElementById("TitleText");
    x.innerHTML = imgAlt;
  }
  else if (document.all)
  {
    x = document.all["TitleText"];
    x.innerHTML = imgAlt;
  }
}

function ShowImage(imgName, imgAlt, imgWidth, imgHeight, blnShow)   // show picture "imgName" with title "imgAlt" in a window with a width of "imgWidth"
{
var imgAWidth = imgWidth;
var imgAHeight = imgHeight;
var imgWFactor = 4;
var imgHFactor = 3;

  if (blnShow)   // request to show
  {
    if (intWidth == 0) Init();
    if (divContainer == null) return false;

    if (imgAWidth > (intWidth - 120))   // image needs to be re-sized
    {
      if (imgWidth < imgHeight)   // if picture width is less than height format, must be 3:4
      {
        imgWFactor = 3;
        imgHFactor = 4;
      }
      imgAWidth = intWidth - 120;
      while (imgAWidth % imgWFactor) imgAWidth--;
      if (imgAWidth < 300) imgAWidth = 300;
      imgAHeight = imgAWidth / imgWFactor * imgHFactor;
    }

    ReplaceTitle(imgAlt);
    divContainer.style.top = 50 + intScrollY + "px";
    divPictureContainer.style.top = divContainer.style.top;
    divFrame.style.width = imgAWidth + 60 + "px";
    divPictureFrame.style.width = imgAWidth + 60 + "px";
    divPictureWindow.style.height = imgAHeight + 60 + "px";
    divPicture.style.width = imgAWidth + "px";
    divPicture.style.height = imgAHeight + "px";

    divContainer.style.zIndex = 100;
    divLoading.style.visibility = "visible";
    divContainer.style.display = "block";
    divPictureContainer.style.display = "block";

    window.setTimeout("FadeInOut('" + imgName + "', '" + imgAlt + "', 5, true)", 50);
  }
  else   // request to hide
  {
    divCloseText.style.display = "none";
    window.setTimeout("FadeInOut('" + imgName + "', '" + imgAlt + "', 100, false)", 50);
  }
}

function FadeInOut(imgName, imgAlt, intOpacity, blnShow)
{
  // set new opacity values for all browsers
  if (divTitleWindow.style.MozOpacity != null)
  {
    if (intOpacity <= 80) divTitleWindow.style.MozOpacity = (intOpacity / 100) - .001;
    if (!blnShow) divPicture.style.MozOpacity = (intOpacity / 100) - .001;
    if (intOpacity <= 50) divPictureWindow.style.MozOpacity = (intOpacity / 100) - .001;
  }
  else if (divTitleWindow.style.filter != null)
  {
    if (intOpacity <= 80) divTitleWindow.style.filter = "alpha(opacity = " + intOpacity + ")";
    if (!blnShow) divPicture.style.filter = "alpha(opacity = " + intOpacity + ")";
    if (intOpacity <= 50) divPictureWindow.style.filter = "alpha(opacity = " + intOpacity + ")";
  }
  else if (divTitleWindow.style.opacity != null)
  {
    if (intOpacity <= 80) divTitleWindow.style.opacity = (intOpacity / 100) - .001;
    if (!blnShow) divPicture.style.opacity = (intOpacity / 100) - .001;
    if (intOpacity <= 50) divPictureWindow.style.opacity = (intOpacity / 100) - .001;
  }

  if (blnShow)   // fade in and load picture
  {
    if (intOpacity < 100)
    {
      intOpacity += 5;
      window.setTimeout("FadeInOut('" + imgName + "', '" + imgAlt + "', " + intOpacity + ", " + blnShow + ")", 50);
    }
    else LoadPicture(imgName, imgAlt);
  }
  else   // fade out and unload picture
  {
    if (intOpacity > 0)
    {
      intOpacity -= 10;
      window.setTimeout("FadeInOut('" + imgName + "', '" + imgAlt + "', " + intOpacity + ", " + blnShow + ")", 50);
    }
    else UnloadPicture();
  }
}

function LoadPicture(imgName, imgAlt)
{
  divPicture.alt = imgAlt;
  divPicture.src = imgName;
  CheckPictureStatus(0);
}

function CheckPictureStatus(intIndex)
{
  if ((divPicture.complete) || (intIndex == 10))
  {
    divPicture.style.border = "3px solid #000000";
    divPictureContainer.style.zIndex = 100;
    window.setTimeout("FadeInPicture(0)", 500);
  }
  else window.setTimeout("CheckPictureStatus(" + (intIndex + 1) + ")", 1000);
}

function FadeInPicture(intOpacity)
{
  // set new opacity values for all browsers
  if (divPicture.style.MozOpacity != null) divPicture.style.MozOpacity = (intOpacity / 100) - .001;
  else if (divPicture.style.filter != null) divPicture.style.filter = "alpha(opacity = " + intOpacity + ")";
  else if (divPicture.style.opacity != null) divPicture.style.opacity = (intOpacity / 100) - .001;

  // if showing fade in and load picture
  intOpacity += 5;
  if (intOpacity <= 100) window.setTimeout("FadeInPicture(" + intOpacity + ")", 50);
  else divCloseText.style.display = "block";
}

function UnloadPicture()
{
  divPictureContainer.style.zIndex = 1;
  divLoading.style.visibility = "hidden";
  divContainer.style.display = "none";
  divPictureContainer.style.display = "none";

  if (divPicture.style.MozOpacity != null) divPicture.style.MozOpacity = 0.0;
  else if (divPicture.style.filter != null) divPicture.style.filter = "alpha(opacity = 0)";
  else if (divPicture.style.opacity != null) divPicture.style.opacity = 0.0;

  divPicture.src = "";
  divContainer.style.zIndex = 1;
}