/* Подсказка, всплывающая при клике (tooltip) */

/* Пример использования:

<link rel='stylesheet' href='/css/tooltip.css' type='text/css'>
<script type='text/javascript' src='/jscript/tooltip.js'></script>

<p>Вот на этой строчке будем проверять работу тултипа: <script>new tooltip('Это коментарий-подсказка к объекту.');</script></p>

*/

var cur_tooltip_id = -1;

function tooltip(str, ht_str)
{
  this.text = str;
  this.rnd = Math.floor(Math.random() * 1000000);
  if (ht_str)  
    this.img = '<div id="tooltipImg' + this.rnd + '" onclick="tooltipShow(this, ' + this.rnd + ')" title="Кликните для получения дополнительной информации" class="tooltip_img" style="display: inline;" >'+ht_str+'</div>';
  else
    this.img = '<img src="/images/v2_info.gif" id="tooltipImg' + this.rnd + '" onclick="tooltipShow(this, ' + this.rnd + ')" title="Кликните для получения дополнительной информации" class="tooltip_img" />';
  window['tooltipObj' + this.rnd] = this;
  
  this.tooltipUpdate = tooltipUpdate;
   
  var div = document.getElementById('tooltip_div');
  if (!div)
  {
    var div = document.createElement('div');
    div.id = 'tooltip_div';
    div.className = 'tooltip_div';
    div.style.visibility = 'hidden';
    var body = document.body
    body.insertBefore(div, body.firstChild);
    addEvent(div, 'click', tooltip_click);
  }

  this.div = div;
    
  document.write('<span class="tooltip_a">' + this.img + '</span>');
  var img = document.getElementById('tooltipImg' + this.rnd);
  addEvent(img, 'click', tooltip_click);
}
 
function tooltipUpdate()
{
   var tt_body = this.div;
   var el      = document.getElementById('tooltipImg'+this.rnd);
   var pos     = tooltip_getPosition(el);
   tt_body.innerHTML     = '<div class="tooltip_close" onclick="tooltip_hide();"><img src="/images/v2_tooltip_close.gif"></div>' + this.text;
   tt_body.style.left    = pos.x + 10 - tt_body.offsetWidth;
   tt_body.style.top     = pos.y;
}

function tooltipShow(o, id)
{
  var ttp = window['tooltipObj' + id];
  ttp.tooltipUpdate();
  
  if (id == cur_tooltip_id && tooltip_visible() )
  {
    cur_tooltip_id = -1;
    tooltip_hide();
  }
  else 
  {
    cur_tooltip_id = id;
    tooltip_show();
  }
}

function tooltip_show()
{
  var tt_body = document.getElementById('tooltip_div');
  tt_body.style.visibility = 'visible';
}
 
function tooltip_hide()
{
  var tt_body = document.getElementById('tooltip_div');
  if (tt_body != null)
    tt_body.style.visibility = 'hidden';
}

function tooltip_visible()
{
  var el = document.getElementById('tooltip_div');
  if (el) 
    return (el.style.visibility == 'visible');
  return false;
}

function tooltip_getPosition(o)
{
  var x = o.offsetLeft;
  var y = o.offsetTop + o.offsetHeight;
  while (o.offsetParent != null)
  {
    o = o.offsetParent;
    x += o.offsetLeft;
    y += o.offsetTop;
  }
  var pos = new Object();
  pos.x = x;
  pos.y = y;
  return pos;
} 

function addEvent(element, event, func)
{
  if (element.addEventListener)
  {
    element.addEventListener(event, func, false);
  }
  else if (element.attachEvent)
  {
    element.attachEvent('on' + event, func);
  } else {
        //
  }
}
 
function tooltip_click(e)
{
  var event = (e) ? e : window.event;
  event.cancelBubble = true;
}

addEvent(window, 'resize', tooltip_hide);
addEvent(document, 'click', tooltip_hide);