var ipwindow = null;
var imageAlreadyLoaded = false;

function displayImage2(url)
      {
      if(ipwindow)
	ipwindow.close();
      ipwindow = open("popup.html?image=" + url,"_blank","scrollbars=no,resizable=no,toolbar=no");
      return false;
      }

function deleteElement(elementname)
{
  var varElement = document.getElementById(elementname);
  if (varElement) {
    varElement.parentNode.removeChild(varElement);
    }
}

function closeImage()
{
  var varElement = document.getElementById('imagedisplay-container');
  if (varElement) {
    ss_removeEvent(window,"scroll",ResizeFade,false);
    ss_removeEvent(window,"resize",ResizeFade,false);
    deleteElement('imagedisplay-container');
    }
}

function ss_addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
{
 if (elm.addEventListener){
   elm.addEventListener(evType, fn, useCapture);
   return true;
 } else if (elm.attachEvent){
   var r = elm.attachEvent("on"+evType, fn);
   return r;
 }
}

function ss_removeEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
{
 if (elm.removeEventListener){
   elm.removeEventListener(evType, fn, useCapture);
   return true;
 } else if (elm.detachEvent){
   var r = elm.detachEvent("on"+evType, fn);
   return r;
 }
}

function imageLoaded()
{
	  if (imageAlreadyLoaded) return;
	  imageAlreadyLoaded = true;
	  //writeDebug('imageLoaded');
          deleteElement('imagedisplay-waittext');
          var varElement = document.getElementById('imagedisplay-imagebox');
          if (varElement) {
            var varTheImage = document.getElementById('imagedisplay-theimage');
            varElement.style.width = '200px';
            varElement.style.visibility = "visible";
          }
          PositionImageDisplay();
          ShowImage();
}

function getScrollPos()
{
                // IE6 & strict is stupid
                var iedocele = document.documentElement ? document.documentElement : document.body;
                var xscrollpos = window.pageXOffset ? window.pageXOffset : iedocele.scrollLeft;
                var yscrollpos = window.pageYOffset ? window.pageYOffset : iedocele.scrollTop;
                return [xscrollpos,yscrollpos];
}

function getWindowSize()
{
                // IE6 & strict is stupid
                var iedocele = document.documentElement ? document.documentElement : document.body;
                var xwindow = window.innerWidth ? document.body.offsetWidth : iedocele.clientWidth;
                var ywindow = window.innerHeight ? window.innerHeight : iedocele.clientHeight;
                return [xwindow,ywindow];
}

function PositionImageDisplay()
{
          var varElement = document.getElementById('imagedisplay-main');
          if (varElement) {
                var scrollpos = getScrollPos();
                var windowsize = getWindowSize();
                varElement.style.left = scrollpos[0] + Math.round(((windowsize[0]) - varElement.offsetWidth) / 2) + 'px';
                varElement.style.top = scrollpos[1] + Math.round(((windowsize[1]) - varElement.offsetHeight) / 2) + 'px';
          }
}

function ShowImage()
{
        var changeval = 20;
        var interval = 10;         
        //enableDebug();
	//writeDebug('ShowImage');
		
        varElement = document.getElementById('imagedisplay-imagebox');
        var varTheImage = document.getElementById('imagedisplay-theimage');
        if (varElement && varTheImage) {
          maxwidth = parseInt(varTheImage.width);
          curwidth = parseInt(varElement.style.width);
          maxheight = parseInt(varTheImage.height);
          curheight = parseInt(varElement.style.height);
          if (curwidth < maxwidth) {
                curwidth += changeval;
                if (curwidth > maxwidth)
                  {                     
                    curwidth = maxwidth;
                  }
		//writeDebug(curwidth);
		varElement.style.width = curwidth + 'px';
            }
            else {
             if (curheight < maxheight) {
                curheight += changeval;
                if (curheight > maxheight)
                  {
                    curheight = maxheight;
                  }
		varElement.style.height = curheight + 'px';
              }
            }
          PositionImageDisplay();
          if ((curwidth < maxwidth) || (curheight < maxheight)) {
           	window.setTimeout('ShowImage()',interval);
            }
        }
}

function ResizeFade()
{
   varElement = document.getElementById('imagedisplay-darkfade');
   if (varElement) {
     var windowsize = getWindowSize();
     var scrollpos = getScrollPos();
     varElement.style.width = windowsize[0] + 'px';
     varElement.style.height = windowsize[1] + 'px';
     varElement.style.left = scrollpos[0] + 'px';
     varElement.style.top = scrollpos[1] + 'px';
   }
   return true;
}

function displayImage(url)
      {
      closeImage();
      imageAlreadyLoaded = false;
      var ele = document.getElementById('body');
      var buf = '';
      buf += '<div id="imagedisplay-darkfade" STYLE="position: absolute; z-index: 4000; margin: 0; border: 0; padding: 0; left: 0; top: 0; width: 10px; height: 10px; filter:alpha(opacity=60); -moz-opacity:.60; opacity:.60; background-color: #000000;" ></div>';
      buf += '<div STYLE="position: absolute; z-index: 4001; font-family: Arial; top:40px; font-size: 12px; left:40px; text-align: right; background-color:#DDDDDD; color:black; border: 1px solid; padding: 10px;" id="imagedisplay-main">'
      buf += '<div STYLE="visibility: visible; width: 200px; padding: 20px; text-align: center;" id="imagedisplay-waittext">Loading image, please wait...<br/></div>';
      buf += '<div STYLE="visibility: hidden; overflow: hidden; width:0; height: 0; text-align: center;" id="imagedisplay-imagebox"><img id="imagedisplay-theimage" onload="imageLoaded();" src="'+url+'"></div>';
      buf += '<div style="visibility: visible; margin-right: 0px; margin-left: auto; _margin-left: 0; width: 50px; background-color: #CCCCCC; text-align: center; cursor: pointer; border: 1px solid; padding: 2px; margin-top: 5px;" onClick="javascript:closeImage();">Close</div>';
      buf += '</div>';
      var newDiv = document.createElement('div');
      newDiv.setAttribute('id','imagedisplay-container');
      newDiv.innerHTML = buf;
      document.body.insertBefore(newDiv, document.body.firstChild);
      PositionImageDisplay();
      ResizeFade();
      ss_addEvent(window,"scroll",ResizeFade,false);
      ss_addEvent(window,"resize",ResizeFade,false);
      return false;
      }