window.addEvent('domready', function(){
  // XXX rewrite on clear js to use with both mootools and jquery?
  function set_coords(e){
      e = e.event;
      var height = $('ttt').getCoordinates().height;
      $("ttt").setStyles({"top": (e.pageY - 7-height) + "px",
                          "left": (e.pageX -148) + "px"});
    
  }
  $$("a.tooltip").addEvents({
    'mouseover': function(e){
      this.addClass('tooltipped');
      var ttt = new Element('div', {'id': 'ttt'}).inject(document.body);
      var title = this.getElement('span').get('title');
      if(this.hasClass('spravka')){
        ttt.set('html', "<div class='t-top'></div><div class='t-content' id='ttt-spravka'>"
                        +title+"</div><div class='t-bot'></div>");   
      } else if ($(this).hasClass('sociallinks')) {
        ttt.set('html', "<div class='t-top'></div><div class='t-content' id='ttt-spravka'>"
                        +title+"</div><div class='t-bot'></div>");
        ttt.addClass('sociallinks');
      } else {
        ttt.set('html', "<div class='t-top'></div><div class='t-content'>"+
                        title+"</div><div class='t-bot'></div>");
      }
      set_coords(e);
      ttt.setStyle('display', 'block');

      //  .fadeIn("fast"); - XXX make by CSS, to be cross-framework?
      return false;                                           
    },
    'mouseout': function(){
      $('ttt').destroy();
      this.removeClass('tooltipped');
    },
    'mousemove': set_coords
  });
});