var hover = false;
  
  function ce(element) {
    return document.createElement(element);
  }
  
  function ctn(text) {
    return document.createTextNode(text);
  }
  
  function stopHover() {
    if (hover) {
      hover.parentNode.removeChild(hover);
      hover = false;
    }
    document.onmousemove = '';
  }
  
  function startHover(id,width,height,title,description) {
    stopHover();
    var ratio = height/width;
    if (height > width) {
      height = (size > height ? height: size);
      width = Math.floor(height / ratio);
    }
    else {
      width = size > width ? width : size;
      height = Math.floor(width * ratio);
    }

    var img = ce('img');
    img.setAttribute('src','/showimage.php?size=hover&id=' + id);
    img.setAttribute('width',width + 'px');
    img.setAttribute('height',height + 'px');
    img.style.display = 'block';
    
    hover = ce('div');
    hover.className = 'hoverpane';
    hover.style.position = 'absolute'; //fixed would be easier, but *sigh*IE*sigh*
    hover.style.zIndex = 999;
    hover.style.width = width + 'px';
    hover.style.backgroundImage = 'url(/images/img_load.gif)';
    hover.style.backgroundRepeat = 'no-repeat';
    hover.style.visibility = 'hidden'; //hide untill we move mouse and know correct position in moveHover()
    
    hover.appendChild(img);

    td = ce('div');
    td.className = 'hovertitle';
    t = ce('b');
    t.appendChild(ctn(titlestr));
    td.appendChild(t);
    td.appendChild(ctn(title));
    hover.appendChild(td);

    dd = ce('div');
    dd.className = 'hoverdescription';
    d = ce('b');
    d.appendChild(ctn(descstr));
    dd.appendChild(d);
    if (description.length > maxlen)
      description = description.substr(0,maxlen) + '...';
    dd.appendChild(ctn(description));
    hover.appendChild(dd);
    
    document.body.appendChild(hover);
    document.onmousemove = moveHover;
  }
  
  function moveHover(mouse) {
    if (!hover) return;
    if (!mouse) mouse = window.event;
    if (!mouse) return;
    var x = 0; var y = 0;
    if (mouse.pageX || mouse.pageY) {
      x = mouse.pageX;
      y = mouse.pageY;
    }
    else if (mouse.clientX || mouse.clientY) {
      x = mouse.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      y = mouse.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    var sw = 0, sh = 0;//screen width/height
    if( typeof( window.innerWidth ) == 'number' ) {
      //Non-IE
      sw = window.innerWidth;
      sh = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
      //IE 6+ in 'standards compliant mode'
      sw = document.documentElement.clientWidth;
      sh = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
      //IE 4 compatible
      sw = document.body.clientWidth;
      sh = document.body.clientHeight;
    }
    
    var sx = 0, sy = 0;//scrolling
    if( typeof( window.pageYOffset ) == 'number' ) {
      //Netscape compliant
      sy = window.pageYOffset;
      sx = window.pageXOffset;
    } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
      //DOM compliant
      sy = document.body.scrollTop;
      sx = document.body.scrollLeft;
    } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
      //IE6 standards compliant mode
      sy = document.documentElement.scrollTop;
      sx = document.documentElement.scrollLeft;
    }

    var hw = hover.clientWidth; var hh = hover.clientHeight;
    if (x + hw + 15 < sw + sx - 15)
      hover.style.left = x + 15 + 'px';
    else
      hover.style.left = x + sx - hw - 15;
      
    if (y + hh + 15 < sh + sy - 15)
      hover.style.top = y + 15 + 'px';
    else
      hover.style.top = sh + sy - hh - 15;
      
    hover.style.visibility = '';
  }