var Tooltip =
  {
  init: function()
  {
    $$('.tooltipped').each(function(element)
    {      
      element.tooltiptitledata = element.readAttribute('tooltiptitle');
      element.tooltiptextdata = element.readAttribute('tooltiptext');      
      if (element.tooltiptitledata || element.tooltiptextdata)
      {
        Event.observe(element, 'mouseover', this.mouseover.bindAsEventListener(this), true);
        Event.observe(element, 'mouseout', this.mouseout.bindAsEventListener(this), true);
        element.removeAttribute('title');
        element.removeAttribute('tooltiptitle');				
        element.removeAttribute('tooltiptext');				
      }
    }.bind(this));
  },

  mouseover: function(event)
  {    
    while ($('tooltip'))
      Element.remove('tooltip');
    var element = Event.element(event);
    while (element.parentNode && !Element.hasClassName(element, 'tooltipped'))
      element = element.parentNode;

    var content = '<div id="tooltip" style="position:absolute;display:none;">';
    if(element.tooltiptitledata)
      content += '<div class="title" >' + element.tooltiptitledata + '</div>';
    content += '<div>' + element.tooltiptextdata + '</div>';
    content += '</div>'
    
    new Insertion.Top($$('body')[0], content);
    //Event.observe(element, 'mousemove', this.mousemove.bindAsEventListener(this), true);
    //this.mousemove(event, true);
    var tooltip = $('tooltip');
    //tooltip.style.top = ( element.viewportOffset().top  - 10 ) + 'px';
    //tooltip.style.left = ( element.viewportOffset().left + element.getWidth() + 10 ) + 'px';
    tooltip.style.top = ( element.cumulativeOffset().top  - 5 ) + 'px';
    tooltip.style.left = ( element.cumulativeOffset().left + element.getWidth() + 10 ) + 'px';
    if(( element.cumulativeOffset().left + element.getWidth() + tooltip.getWidth() + 10 ) > document.viewport.getWidth())
    {
    	//move tooltip on the left
    	tooltip.style.left = ( element.cumulativeOffset().left - tooltip.getWidth()  - 10 ) + 'px';
   	}

    Effect.BlindDown(tooltip, {duration: 0.3});
  },

  mousemove: function(event, appear)
  {
  	/*
    var tooltip = $('tooltip');
    if (tooltip)
    {
      tooltip.style.top = (Event.pointerY(event)) + 'px';
      tooltip.style.left = (Event.pointerX(event)) + 'px';
      if(appear)
        Element.show(tooltip);
    }
    */
  },

  mouseout: function(event)
  {
    var tooltip = $('tooltip');
    if (tooltip)
      setTimeout('Effect.BlindUp(\'tooltip\', {duration: 0.3})', 150);
  }
}

/**
 * tooltipPopup(title, url)
 */
function tooltipPopup(thisObj, title, contentUrl, offsetTop, offsetLeft) 
{    
  var POPUP_WIDTH = 430; // width cannot calcolute here because depend from content (ajax)
    while ($('tooltippopup'))
      Element.remove('tooltippopup');
    var content = '<div id="tooltippopup" style="position:absolute;display:none;">';
    content += '<div class="title" >' + title + '<span onclick="Effect.BlindUp(\'tooltippopup\', {duration: 0.5})">X</span></div>';
    content += '<div id="tooltippopupcontent">';
    content += '<div id="tooltippopuploading"></div>';
    content += '</div>';
    content += '</div>';

    new Insertion.Top($$('body')[0], content);
    var tooltippopup = $('tooltippopup');
    tooltippopup.style.top = ( thisObj.cumulativeOffset().top  - 5 + offsetTop) + 'px';
    tooltippopup.style.left = ( thisObj.cumulativeOffset().left + thisObj.getWidth() + 10 + offsetLeft ) + 'px';
    if(( thisObj.cumulativeOffset().left + thisObj.getWidth() + POPUP_WIDTH + 10 ) > document.viewport.getWidth())
    {
      //move tooltippopup on the left
      tooltippopup.style.left = ( thisObj.cumulativeOffset().left - POPUP_WIDTH  - 10 ) + 'px';
    }
    Effect.BlindDown(tooltippopup, {duration: 0.5});  
    var options = {
      asynchronous:true
    };
    new Ajax.Updater( 'tooltippopupcontent', contentUrl, options);  
}