function getElementPosition(elemid) {
  var offsetTrail = elemid;
  var offsetLeft  = 0;
  var offsetTop   = 0;
  if( typeof(document.body.leftMargin) != 'undefined' ) {    
    offsetTop  = offsetTrail.offsetTop + 204;
    while(offsetTrail) {
      offsetLeft += offsetTrail.offsetLeft;
      offsetTrail = offsetTrail.offsetParent;
    }
  } else {
    while(offsetTrail) {
      offsetLeft += offsetTrail.offsetLeft;
      offsetTop  += offsetTrail.offsetTop;
      offsetTrail = offsetTrail.offsetParent;
    }    
  }
  if( navigator.userAgent.indexOf("Mac") != -1 &&
      typeof(document.body.leftMargin) != 'undefined' ) {
    offsetLeft += document.body.leftMargin;
    offsetTop  += document.body.topMargin;
  }
  return {left:offsetLeft, top:offsetTop};
}

function openImage(id, url, width, height) {
  var container = document.getElementById(id);
  var elem = document.createElement('img');
  elem.setAttribute('src', url);
  elem.setAttribute('width', width);
  elem.setAttribute('height', height);
  while(container.childNodes.length>0) {
    container.removeChild(container.firstChild);
  }
  container.appendChild(elem);
}

function ShowImagePreview(src, width, height, elem) {
  height = height*100/width;
  var width  = 100;
  var imgpreview = document.getElementById('imgpreview');
  var position  = getElementPosition(elem);
  imgpreview.style.display = '';
  imgpreview.style.left = position['left']+elem.offsetWidth;
  imgpreview.style.top  = position['top'];
  var img = document.createElement('img');
  img.setAttribute('src', src);
  img.setAttribute('width', width);
  img.setAttribute('height', height);
  imgpreview.appendChild(img);
}

function HideDiv() {
  var imgpreview = document.getElementById('imgpreview');
  imgpreview.style.display = 'none';
  while(imgpreview.childNodes.length>0) {
    imgpreview.removeChild(imgpreview.firstChild);
  }
}