function BubbleTip(obj, text) {

  this.obj = obj;
  this.text = text;
  this.path = 'js/BubbleTips/images/';
  this.ratio = 7/6;
  
  this.show = function () {
  
    // remove old tips
    if ($('BubbleTip') != null)  $('BubbleTip').parentNode.removeChild($('BubbleTip'));
  
    // build HTML
    var html = '';
    html += '<table width="100%" height="100%" id="BubbleTip-table" cellspacing="0" cellpadding="0" border="0">';
    html += '<tr><td id="BubbleTip-top-left"></td><td id="BubbleTip-top-center"></td><td id="BubbleTip-top-right"></td></tr>';
    html += '<tr><td id="BubbleTip-middle-left"></td><td id="BubbleTip-middle-center" align="left" valign="top"></td><td id="BubbleTip-middle-right"></td></tr>';
    html += '<tr><td id="BubbleTip-bottom-left"></td><td id="BubbleTip-bottom-center"></td><td id="BubbleTip-bottom-right"></td></tr>';
    html += '</table>';
  
    // create div
    var div = document.createElement('div');
    div.setAttribute('id', 'BubbleTip');
    div.style.width = '50px';
    div.style.height = 'auto';
    div.style.display = 'none';
    // add table to div
    div.innerHTML = html;
    
    // insert div
    document.body.appendChild(div);
        
    // style table (except for background images)
    $('BubbleTip-top-left').style.width = '20px';
    $('BubbleTip-top-left').style.height = '20px';
    $('BubbleTip-top-center').style.width = 'auto';
    $('BubbleTip-top-center').style.height = '20px';
    $('BubbleTip-top-center').style.backgroundRepeat = 'repeat-x';
    $('BubbleTip-top-right').style.width = '20px';
    $('BubbleTip-top-right').style.height = '20px';
    $('BubbleTip-top-right').style.backgroundPosition = 'top right';
    $('BubbleTip-middle-left').style.width = '20px';
    $('BubbleTip-middle-left').style.height = 'auto';
    $('BubbleTip-middle-left').style.backgroundRepeat = 'repeat-y';
    $('BubbleTip-middle-center').style.width = 'auto';
    $('BubbleTip-middle-center').style.height = 'auto';
    $('BubbleTip-middle-center').style.backgroundColor = '#fff';
    $('BubbleTip-middle-right').style.width = '20px';
    $('BubbleTip-middle-right').style.height = 'auto';
    $('BubbleTip-middle-right').style.backgroundPosition = 'top right';
    $('BubbleTip-middle-right').style.backgroundRepeat = 'repeat-y';
    $('BubbleTip-bottom-left').style.width = '20px';
    $('BubbleTip-bottom-left').style.height = '24px';
    $('BubbleTip-bottom-center').style.width = 'auto';
    $('BubbleTip-bottom-center').style.height = '24px';
    $('BubbleTip-bottom-center').style.backgroundPosition = 'top center';
    $('BubbleTip-bottom-right').style.width = '20px';
    $('BubbleTip-bottom-right').style.height = '24px';
    $('BubbleTip-bottom-right').style.backgroundPosition = 'top right';
    
    if (window.ActiveXObject) {
      // hide shadow before effect (IE rendering prob workaround)
      $('BubbleTip-top-left').style.backgroundImage = 'url(' + this.path + 'BubbleTip-top-left-noshadow.gif)';
      $('BubbleTip-top-center').style.backgroundImage = 'url(' + this.path + 'BubbleTip-top-center-noshadow.gif)';
      $('BubbleTip-top-right').style.backgroundImage = 'url(' + this.path + 'BubbleTip-top-right-noshadow.gif)';
      $('BubbleTip-middle-left').style.backgroundImage = 'url(' + this.path + 'BubbleTip-middle-left-noshadow.gif)';
      $('BubbleTip-middle-right').style.backgroundImage = 'url(' + this.path + 'BubbleTip-middle-right-noshadow.gif)';
      $('BubbleTip-bottom-left').style.backgroundImage = 'url(' + this.path + 'BubbleTip-bottom-left-noshadow.gif)';
      $('BubbleTip-bottom-center').style.backgroundImage = 'url(' + this.path + 'BubbleTip-bottom-center-noshadow.gif)';
      $('BubbleTip-bottom-right').style.backgroundImage = 'url(' + this.path + 'BubbleTip-bottom-right-noshadow.gif)';
    } else {
      // if non-IE, show shadow
      $('BubbleTip-top-left').style.backgroundImage = 'url(' + this.path + 'BubbleTip-top-left.png)';
      $('BubbleTip-top-center').style.backgroundImage = 'url(' + this.path + 'BubbleTip-top-center.png)';
      $('BubbleTip-top-right').style.backgroundImage = 'url(' + this.path + 'BubbleTip-top-right.png)';
      $('BubbleTip-middle-left').style.backgroundImage = 'url(' + this.path + 'BubbleTip-middle-left.png)';
      $('BubbleTip-middle-right').style.backgroundImage = 'url(' + this.path + 'BubbleTip-middle-right.png)';
      $('BubbleTip-bottom-left').style.backgroundImage = 'url(' + this.path + 'BubbleTip-bottom-left.png)';
      $('BubbleTip-bottom-center').style.backgroundImage = 'url(' + this.path + 'BubbleTip-bottom-center.png)';
      $('BubbleTip-bottom-right').style.backgroundImage = 'url(' + this.path + 'BubbleTip-bottom-right.png)';
    }
    
    // add content
    $('BubbleTip-middle-center').innerHTML = this.text;
    
    // adjust dimensions
    while ($('BubbleTip').getWidth()/$('BubbleTip').getHeight() <= this.ratio) {
      $('BubbleTip').style.width = parseInt($('BubbleTip').style.width) + 10 + 'px';
    }
    
    // position BubbleTip
    var pos = Element.extend(this.obj).cumulativeOffset();
    var posX = pos[0];
    var posY = pos[1];
    $('BubbleTip').style.position = 'absolute';
    $('BubbleTip').style.zIndex = '9999';
    $('BubbleTip').style.left = posX - (parseInt($('BubbleTip').style.width)/2) + (this.obj.getWidth()/2) + 'px';  
    $('BubbleTip').style.top = posY - $('BubbleTip').getHeight() - 2 + 'px'; 
    
    // show BubbleTip
    new Effect.Appear('BubbleTip', {duration: 0.3});
    
    // show shadow right after effect (IE rendering prob workaround)
    if (window.ActiveXObject) {
       window.setTimeout("" + 
                         "$('BubbleTip-top-left').style.backgroundImage = 'url(" + this.path + "BubbleTip-top-left.png)';" + 
                         "$('BubbleTip-top-center').style.backgroundImage = 'url(" + this.path + "BubbleTip-top-center.png)';" + 
                         "$('BubbleTip-top-right').style.backgroundImage = 'url(" + this.path + "BubbleTip-top-right.png)';" + 
                         "$('BubbleTip-middle-left').style.backgroundImage = 'url(" + this.path + "BubbleTip-middle-left.png)';" + 
                         "$('BubbleTip-middle-right').style.backgroundImage = 'url(" + this.path + "BubbleTip-middle-right.png)';" + 
                         "$('BubbleTip-bottom-left').style.backgroundImage = 'url(" + this.path + "BubbleTip-bottom-left.png)';" + 
                         "$('BubbleTip-bottom-center').style.backgroundImage = 'url(" + this.path + "BubbleTip-bottom-center.png)';" + 
                         "$('BubbleTip-bottom-right').style.backgroundImage = 'url(" + this.path + "BubbleTip-bottom-right.png)';" +
                         "", 300);
    }
  }
  
  this.hide = function() {
    if ($('BubbleTip') != null) {
      // hide shadow before effect (IE rendering prob workaround)
      if (window.ActiveXObject) {
        $('BubbleTip-top-left').style.backgroundImage = 'url(' + this.path + 'BubbleTip-top-left-noshadow.gif)';
        $('BubbleTip-top-center').style.backgroundImage = 'url(' + this.path + 'BubbleTip-top-center-noshadow.gif)';
        $('BubbleTip-top-right').style.backgroundImage = 'url(' + this.path + 'BubbleTip-top-right-noshadow.gif)';
        $('BubbleTip-middle-left').style.backgroundImage = 'url(' + this.path + 'BubbleTip-middle-left-noshadow.gif)';
        $('BubbleTip-middle-right').style.backgroundImage = 'url(' + this.path + 'BubbleTip-middle-right-noshadow.gif)';
        $('BubbleTip-bottom-left').style.backgroundImage = 'url(' + this.path + 'BubbleTip-bottom-left-noshadow.gif)';
        $('BubbleTip-bottom-center').style.backgroundImage = 'url(' + this.path + 'BubbleTip-bottom-center-noshadow.gif)';
        $('BubbleTip-bottom-right').style.backgroundImage = 'url(' + this.path + 'BubbleTip-bottom-right-noshadow.gif)';
      }
        new Effect.Parallel([
          new Effect.Move($('BubbleTip'), {sync: true, x: 0, y: -45, mode: 'relative'}), 
          new Effect.Opacity($('BubbleTip'), { sync: true, from: 1, to: 0 }) 
        ], { 
          duration: 0.7,
          delay: 0
        });
        window.setTimeout("$('BubbleTip').parentNode.removeChild($('BubbleTip'));", 800);
    }
    return;
  }
}