/*Copyright (C) 2006 Paul Mackinlay (info@webotech.co.uk)*/
function showImg(d,imgDiv,img,title,src,relId) {
 var self = this;
 var imgNode = d.getElementById(img);
 var refNode = d.getElementById(imgDiv);
 var titleNode = d.getElementById('showImg.title');
 var relativeNode;
 if (relId) {
  relativeNode = d.getElementById(relId);
 }
 var intervalId;
 var timeoutId;
 var fadeOpacity = 10;
 var fadeFrequency = 50
 var timeToRender = 200;
 var timeToLive = parseInt(((100/fadeOpacity) * (fadeFrequency + timeToRender) * 1.1) + 1);
 _do();
 function _destroy() {
  window.clearInterval(intervalId);
  window.clearTimeout(timeoutId);
  _setOpaque(imgNode, 100);
  jslRemoveEvent(imgNode,'load',_startFade);
 }

 function _do() {
  jslAddEvent(imgNode,'load',_startFade);
  if (title && !titleNode) {
   titleNode = document.createElement("span");
   titleNode.id = 'showImg.title';
  }
  if (title) {
   _delTitle();
  }
  _setOpaque(imgNode, 0);
  imgNode.src = src;
  if (title) {
   _setStyle(titleNode, imgNode);
  }
 }

 function _getTopLeftCoords(node) {
  var topLeft = new Object();
  topLeft.left = jslGetAbsWidth(node);
  topLeft.top = (jslGetAbsHeight(node) - node.offsetHeight);
  if (relativeNode) {
   var xCorrect = jslGetAbsWidth(relativeNode);
   var yCorrect = (jslGetAbsHeight(relativeNode) - relativeNode.offsetHeight);
   topLeft.left -= xCorrect;
   topLeft.top -= yCorrect;
  }
  return topLeft;
 }

 function _startFade(e) {
  if (!intervalId) {
   intervalId = window.setInterval(_fadeIn,fadeFrequency);
   timeoutId = window.setTimeout(_destroy,timeToLive);
  }
 }


 function _setStyle(node, refNode) {
  var topLeft = _getTopLeftCoords(refNode);
  node.style.backgroundColor = "#9bcef9";
  node.style.padding = "1";
  node.style.position = "absolute";
  node.style.left = (topLeft.left+2)+"px";
  node.style.top = (topLeft.top+2)+"px";
  node.style.zIndex = 99;
  node.style.whiteSpace = 'nowrap';
 }

 function _fadeIn(e) {
  var node = imgNode;
  var currentOpacity = node.showImg.opacity;
  if (currentOpacity < 100) {
   currentOpacity += fadeOpacity;
   _setOpaque(node, currentOpacity);
   imgNode.showImg.title = false;
  } else {
   if (!imgNode.showImg.title) {
    if (title) {
     _delTitle();
     _setTitle();
    }
    _destroy();
   }
  }
 }

 function _setOpaque(node, value) {
  if (jslBrowserType()=="IE") {
   node.style.filter="alpha(opacity="+value+")";
  } else {
   node.style.opacity=value/100;
  }
  node.showImg = new Object();
  node.showImg.opacity = value;
 }

 function _setTitle() {
  titleNode.appendChild(document.createTextNode(title));
  _setOpaque(titleNode, 80);
  refNode.appendChild(titleNode)
  imgNode.showImg.title = true;
 }

 function _delTitle() {
  _setOpaque(titleNode, 0);
  while (titleNode.firstChild) {
   titleNode.removeChild(titleNode.firstChild);
  }
 }
function jslRemoveEvent(subj,event,fn) {
 if (jslBrowserType()=="IE") {
  subj.detachEvent("on"+event, fn);
 } else {
  subj.removeEventListener(event,fn,false);
 }
}
function jslAddEvent(subj,event,fn) {
 if (jslBrowserType()=="IE") {
  subj.attachEvent("on"+event, fn);
 } else {
  subj.addEventListener(event,fn,false);
 }
}
function jslGetAbsWidth(el) {
  var w = el.offsetLeft;
  while (el.offsetParent) {
   var elW=el.offsetParent.offsetLeft;
   if (elW > 1) {
    w += elW;
   }
   el = el.offsetParent;
  }
  return w;
}
function jslGetAbsHeight(el) {
  var h = el.offsetHeight + el.offsetTop;
  while (el.offsetParent) {
   var elH=el.offsetParent.offsetTop;
   if (elH > 1) {
    h += elH;
   }
   el = el.offsetParent;
  }
  return h;
}
function jslBrowserType() {
if (window.navigator.userAgent.match(/MSIE/))
        return "IE";
if (window.navigator.userAgent.match(/Gecko\/[0-9]{8}/))
return "Gecko";
 return "unknown";
}

}