var div = document.createElement('div');
div.id = "preview";
var dv = document.createElement('div');
dv.id = "prev";
dv.style.height = "100%";

var xcoord;
var ycoord;
var ibody = document.documentElement;
var docwidth = document.all?ibody.scrollLeft+ibody.clientWidth : pageXOffset+window.innerWidth-15;
var docheight = document.all?Math.max(ibody.scrollHeight, ibody.clientHeight) : Math.max(ibody.offsetHeight, window.innerHeight);
var w, h;
var load = new Image(16, 16);
load.src="img/loading.gif";
var myLoad = "<table style=\"width: 100%; height: 100%;\"><tr><td style=\"text-align: center; vertical-align: middle;\"><img style=\"border: none;\" src=\"img/loading.gif\" alt=\"loading...\" /></td></tr></table>";
var removed = false;
var shiftX = 2;
var shiftY = 26;
var ev;
var src;
var Hsize = 200;
var lastId =  null;

document.onmouseout = function(e) {
  ev = e || window.event;
  src = ev.target || ev.srcElement;
  if (src.className == "lbOn" && !removed) {
    removed = true;
    close_hint(src);
  } else if (src.className == "buttons") {
    src.style.color="#202020";
  }
}

document.onmouseover = function(e) {
  ev = e || window.event;
  src = ev.target || ev.srcElement;
  if (src.className == "lbOn") {
    lastId = src.id;
    removed = false;
    show_hint(src, ev);
    get_content(src, ev, src.id);
  } else if (src.className == "buttons") { 
    src.style.color="#A3050A";
  }
}

document.onmousemove = function(e) {
  ev = e || window.event;
  src = ev.target || ev.srcElement;
  xcoord = (ev.pageX || (ev.clientX+ibody.scrollLeft));
  ycoord = (ev.pageY || (ev.clientY+ibody.scrollTop));
  if (src.className == "lbOn" && !removed) {
    move(div, xcoord, ycoord, Hsize);
  }
}

function move(elem, x, y, Fsize) {
  x += shiftX;
  y -= shiftY;
  y -= Fsize;
  
  elem.style.position = "absolute";
  elem.style.left = x+"px";
  elem.style.top = y+"px";
}

function get_content(src, event, id) {
    var url = 'offer.php';
    var parm = 'action=read&subject='+id;
    var http_request = false;

    if (window.XMLHttpRequest) {
        http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {
            http_request.overrideMimeType('text/plain');
        }
    } else if (window.ActiveXObject) {
        try {
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {}
        }
    }
    
    http_request.open('POST', url, true);
    //http_request.onprogress = onProgress;
    //http_request.onload = onLoad;
    //http_request.onerror = onError;
    http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=iso-8859-2");
    http_request.setRequestHeader("Content-length", parm.length);
    http_request.setRequestHeader("Connection", "close");
    http_request.send(parm);

    http_request.onreadystatechange = function() {
        if (http_request.readyState == 4) {
            if (http_request.status == 200 && !removed && lastId == id)	{
              div.removeChild(div.firstChild);
              dv.innerHTML = http_request.responseText;
              div.appendChild(dv);
            }
        }
    }
}

function show_hint(src, event) {
  xcoord = (event.pageX || (event.clientX+ibody.scrollLeft));
  ycoord = (event.pageY || (event.clientY+ibody.scrollTop));
  
  div.style.border = "1px solid #A3050A";
  div.style.backgroundColor = "#ffffff";
  div.style.fontWeight = "normal";
  div.style.color = "#404040";
  div.style.textDecoration = "none";
  div.style.padding = "10px";
  div.style.width = "300px";
  
  if (src.id == "s1") {
    Hsize = 114;
  } else if (src.id == "s2") {
    Hsize = 80;
  } else if (src.id == "s3") {
    Hsize = 150;
  } else if (src.id == "s4") {
    Hsize = 170;
  } else if (src.id == "s5") {
    Hsize = 310;
  } else if (src.id == "s6") {
    Hsize = 100;
  } else if (src.id == "s7") {
    Hsize = 110;
  } else if (src.id == "s8") {
    Hsize = 100;
  } else if (src.id == "s100") {
    Hsize = 270;
  } else if (src.id == "s101") {
    Hsize = 286;
  }
  
  div.style.height = Hsize+"px";
  move(div, xcoord, ycoord, Hsize);
  
  dv.innerHTML = myLoad;
  div.appendChild(dv);
  src.appendChild(div);
}

function close_hint(src) {
  dv.innerHTML = '';
  src.removeChild(div);
}

function onProgress(e) {
  //var percentComplete = (e.position / e.totalSize)*100;
}

function onError(e) {
  div.removeChild(div.firstChild);
  dv.innerHTML = "<p>Podczas pobierania elementu wystąpił błąd " + e.target.status + ".</p>";
  div.appendChild(dv);
}

function onLoad(e) {

}

// pageXOffset - przesunięie; większe od zera jesli zmienimy polozenie suwakow NN i Gecko
// innerHeight - wys/szer document area; NN i Gecko                                      
// outerHeight - wys/szer przeglądarki; NN i Gecko                                       
// compatMode  - czy zgodny z CSS1                                                       
// documentElement - glówny element dokumentu, korzeń (root) czyli <html>