function zoomIn(event){
  return false;
  try{
    var srcEl = event.srcElement || event.target;
  }
  catch(e) { return false; }
  if(srcEl.isClone) return false;
  if(srcEl.tagName.toLowerCase() != 'img') return false;
  var zoomWidth = srcEl.getAttribute('zoomWidth');
  //if(!zoomWidth) return false;
  if(!zoomWidth) zoomWidth = '600';
  el = srcEl.cloneNode(true);
  el.srcEl = srcEl;
  el.isClone = true;
  el.style.position = 'absolute';
  el.onmouseout = zoomOut;
  el.style.visibility = 'hidden';
  document.appendChild(el);
  animateZoom(el, zoomWidth);
}

function animateZoom(el, targetWidth){
  var pos = getPosition(el.srcEl);
  var origDim = getDimension(el.srcEl);
  var dim = getDimension(el);
  el.width = (dim['width'] + 2);
  el.style.top = (pos['top'] - Math.round((dim['height']-origDim['height'])/2)) + 'px';
  el.style.left = (pos['left'] - Math.round((dim['width']-origDim['width'])/2)) + 'px';
  el.style.visibility = 'visible';
  if(dim['width'] < targetWidth) setTimeout(function(){ animateZoom(el, targetWidth); }, 10);
}

function getBorderDimension(el){
  var width = parseInt(el.style.borderRightWidth) + parseInt(el.style.borderLeftWidth);
  var height = parseInt(el.style.borderTopWidth) + parseInt(el.style.borderBottomWidth);
  return {'width' : width, 'height' : height};
}

function getDimension(el){
  return {'width' : el.offsetWidth, 'height' : el.offsetHeight};
}

function zoomOut(event){
  this.style.visibility = 'hidden';
  document.removeChild(this);
}

function getPosition(el){
  var pos = {'left' : el.offsetLeft, 'top' : el.offsetTop};
  par = el;
  while(par = par.offsetParent){
    pos['left'] += par.offsetLeft;
    pos['top'] += par.offsetTop;
  }
  var borderWidth = getBorderDimension(el);
  pos['left'] -= borderWidth['width'];
  pos['top'] -= borderWidth['height'];
  return pos;
}

document.onmouseover = zoomIn;