var GlobalHint = new function() {
   
    var me = this;
    this.hint = null;
   
    this.createHint = function()
    {
        if( this.hint != null ) return;
        var div = window.document.createElement( 'DIV' ) ;
        div.style.position = 'absolute';
        div.style.display = 'none';
        div.className = 'hint_div';
        me.hint = document.body.appendChild( div );
    }

    this.showHint = function( event, html )
    {
       this.createHint();
       if(  this.hint.style.display == 'block' ) return;
      
       if( html == null ) {
          html = (event.target) ? event.target.getAttribute('hint') : event.srcElement.getAttribute('hint');  
       }
       
       var xy = this.getXY( event );
       this.hint.style.left = xy.x + 10 + 'px';
       this.hint.style.top = xy.y + 15 + 'px';
       this.hint.innerHTML = html;
       this.hint.style.display = 'block';
    }

    this.hideHint = function()
    {
       this.createHint();
       this.hint.style.display = 'none';
    }

    this.getXY = function ( event )
    {
      var xy = { 'x':0, 'y':0 };
      if( event.pageX || event.pageY ) {
         xy.x = event.pageX;
         xy.y = event.pageY;
      } else if (event.clientX || event.clientY) {
         xy.x = event.clientX +
             (document.documentElement.scrollLeft || document.body.scrollLeft) -
             document.documentElement.clientLeft;
         xy.y = event.clientY +
             (document.documentElement.scrollTop || document.body.scrollTop) -
             document.documentElement.clientTop;
      }
      return xy;
    }
}