var balloon, balloonContent, currEl, currTitle;

//lavy balon
document.write('<table border="0" cellspacing="0" cellpadding="0" id="balloonLeft" style="position: absolute; display: none; z-index: 1"><tr> <td> <td class="balloon-left-tick" valign="bottom"> <img src=".\/web\/img\/balloon_down_left.gif" border="0" align="top"> <td class="balloon-top-line">&nbsp; <td><tr> <td width="10" height="10" class="balloon-left-top-corner"> <td colspan="2" style="font-size: 1px; background-color: white">&nbsp; <td width="10" height="10" class="balloon-right-top-corner"><tr> <td class="balloon-left-line">&nbsp; <td colspan="2" width="1" style="width: 1px; background-color: white"><div id="balloonContentLeft" class="balloonContent"><\/div> <td height="7" class="balloon-right-line">&nbsp;<tr> <td width="10" height="28" class="balloon-left-bottom-corner"> <td colspan="2" height="28" class="balloon-bottom-line"> <td width="10" height="28" class="balloon-right-bottom-corner"><\/table>');
//pravy balon
document.write('<table border="0" cellspacing="0" cellpadding="0" id="balloonRight" style="position: absolute; display: none; z-index: 1"><tr> <td> <td class="balloon-top-line">&nbsp; <td class="balloon-left-tick" valign="bottom"> <img src=".\/web\/img\/balloon_down_right.gif" border="0" align="top"> <td><tr> <td width="10" height="10" class="balloon-left-top-corner"> <td colspan="2" style="font-size: 1px; background-color: white">&nbsp; <td width="10" height="10" class="balloon-right-top-corner"><tr> <td class="balloon-left-line">&nbsp; <td colspan="2" width="1" style="width: 1px; background-color: white"><div id="balloonContentRight" class="balloonContent"><\/div> <td height="7" class="balloon-right-line">&nbsp;<tr> <td width="10" height="28" class="balloon-left-bottom-corner"> <td colspan="2" height="28" class="balloon-bottom-line"> <td width="10" height="28" class="balloon-right-bottom-corner"><\/table>');

//vypocita horny okraj sepkara
function getBalloonTop(el)
{
 var wt = el.offsetTop;
 var ci = el;
 while (ci.offsetParent)
 {
  wt += ci.offsetParent.offsetTop;
  ci = ci.offsetParent;
 }
 return wt;
}

//vypocita lavy okraj sepkara
function getBalloonLeft(el)
{
 var wl = el.offsetLeft;
 var ci = el;
 while (ci.offsetParent)
 {
  wl += ci.offsetParent.offsetLeft;
  ci = ci.offsetParent;
 }
 return wl;
}

//vypocita pravy okraj sepkara
function getBalloonRight(el)
{
 var wl = el.offsetRight;
 alert(wl);
 var ci = el;
 while (ci.offsetParent)
 {
  wl += ci.offsetParent.offsetRight;
  ci = ci.offsetParent;
 }
 return wl;
}

function hideBalloon()
{
 if (balloon && currEl)
 {
  balloon.style.display = 'none';
  currEl.title = currTitle;//balloonContent.innerHTML;
  currEl.style.cursor = 'default';
 }
}

function initBalloon()
{
 /*balloon = document.getElementById('balloon');
 balloonContent = document.getElementById('balloonContent');*/
}

function showBalloon(el,position,offsetLeft)
{
 position = !position ? 'left' : position;
 balloon = position == 'left'
  ? document.getElementById('balloonLeft')
  : document.getElementById('balloonRight');
 balloonContent = position == 'left'
  ? document.getElementById('balloonContentLeft')
  : document.getElementById('balloonContentRight');
 if (!offsetLeft)
  offsetLeft = 0;
 if (balloon.style.display != 'block')
 {
  el.style.cursor = (el.tagName.toLowerCase() == 'a') || (el.parentNode.tagName.toLowerCase() == 'a')
   ? (window.clientInformation ? 'hand' : 'pointer')
   : 'help';
  currEl = el;
  balloon.style.top = getBalloonTop(currEl) + currEl.offsetHeight + 'px';
  currTitle = el.title;
  balloonContent.innerHTML = el.title;
  el.title = '';
  //el.setAttribute("title","");
  balloon.style.display = 'block';
  var balloonWidth = balloon.offsetWidth;
  balloon.style.display = 'none';
  switch (position)
  {
   case 'left' :
    balloon.style.left = getBalloonLeft(currEl) - 30 + offsetLeft + 'px';
    break;
   case 'right' :
    //balloon.removeAttribute('style.left');
    balloon.style.left = getBalloonLeft(currEl) + 30 + offsetLeft - balloonWidth + currEl.offsetWidth + 'px';
    break;
  }
  //alert(balloon.style.left);
  balloon.style.display = 'block';
 }
  //alert(currTitle);
}