var Thumbnail = {
 timerId: undefined,
 
 show: function(obj, id, url) {
   var thumbnail = this._ensureThumb();
   var thumbdiv  = document.getElementById("thumbdiv");

   var imageLoadedHandler = function() {
       thumbnail.onload = null;
       
       obj.onmouseout = rol.createDelegate(this, this.delayedHide);
       thumbdiv.onmouseover = rol.createDelegate(this, this.cancelHide);
       thumbdiv.onmouseout = rol.createDelegate(this, this.hide1);
       thumbdiv.onclick = function() {
          thumbdiv.style.display = "none";
          if (document.images) (new Image).src = "../scripts/sitehit.ashx?id=" + id;
          window.open(url, "_blank",
                      "location=yes,status=yes,menubar=yes,status=yes,scrollbars=yes,toolbar=yes,resizable=yes");
       };
       
       // Иначе IE8 не знает размеров картинки и неправильно устанавливает высоту DIV
       // Но Mozilla и это не спасает.
       window.setTimeout(function() {
         thumbdiv.style.height = "auto";
         thumbdiv.style.width = "auto";
         thumbdiv.style.display = "block";

         var left = rol.leftOffset(obj) + obj.width + 3;
         var top  = rol.topOffset(obj) - 8;
         var bottom = top + thumbdiv.offsetHeight;

         var extent = bottom - (rol.scrollTop() + rol.winHeight() - 2);
         if (extent > 0) top -= extent;
         if (top < rol.scrollTop()) top = rol.scrollTop();
         thumbdiv.style.left = left + "px";
         thumbdiv.style.top = top + "px";
       }, 0);
   };
   
   if (thumbdiv != null && thumbnail != null && thumbnail.tagName == "IMG") {
      this.cancelHide1();
      thumbdiv.style.display = "none";
      thumbnail.src = "thumbnail.ashx?id=" + id;
      
      // Все эти сложности необходимы по двум причинам:
      // - Firefox и Chrome узнают размеры картинки только после загрузки
      // - Chrome не генерирует событие onload для картинки, загруженной из кэша
      if (thumbnail.height == 0 && ! rol.isOpera())    // только что из сети
         thumbnail.onload = rol.createDelegate(this, imageLoadedHandler);
      else {                        // из кэша
         imageLoadedHandler.apply(this);
      }
   }
 },

 _ensureThumb: function() {
   var thumbnail = document.getElementById("thumbnail");
   if (thumbnail == null) {
      var thumbdiv = document.createElement("div");
      thumbdiv.id = "thumbdiv";
      thumbdiv.className = "thumbnail";
      document.body.appendChild(thumbdiv);
      thumbnail = document.createElement("img");
      thumbnail.id = "thumbnail";
      thumbdiv.appendChild(thumbnail);
   }
   return thumbnail;
 },
 
 delayedHide: function() {
   var _this = this;
   this.timerId = window.setTimeout(function() { _this.hide(); }, 500);
 },

 cancelHide: function(e) {
   var evt = e || window.event;
   var reltg = evt.relatedTarget || evt.fromElement;
   if (reltg == null || reltg.tagName == 'IMG') return;
   this.cancelHide1();
 },

 cancelHide1: function(e) {
   if (this.timerId != undefined) {
      window.clearTimeout(this.timerId);
      this.timerId = undefined;
   }
 },

 hide: function() {
   var thumbdiv = document.getElementById("thumbdiv");
   thumbdiv.style.display = "none";
 },
 
 hide1: function(e) {
   var evt = e || window.event;
   var tg = evt.target || evt.srcElement;
   var reltg = evt.relatedTarget || evt.toElement;

   // IE raises mouseout after window.open, but toElement is not set.
   if (tg == null) return;
   if ( reltg == null ||                // за пределы окна браузера
        (tg.tagName == 'DIV' && reltg.id != 'thumbnail') ||  // за пределы рамки, но не внутрь IMG
        (tg.tagName == 'IMG' && reltg.id != 'thumbdiv') ) {  // из рамки в IMG
      var thumbdiv = document.getElementById("thumbdiv");
      thumbdiv.onmouseout = null;
      thumbdiv.style.display = "none";
   }
 }
}