var XTips = new Class({
    Implements :[Events, Options],
   options: {
       onShow: function(tip){
           tip.Fx.stop();
           var fx = $merge(tip.pos,{'width':[0, 170],height:[0, tip.toolTip.getElements('a').length *20], 'font-size':[0,12], 'color':["#f00","#333"],'opacity':[0,0.8]}) ;
           //tip.wrapper.setStyle('visibility', 'hidden');
           tip.Fx.start( fx ).chain(function(){
               //tip.wrapper.setStyle('visibility', 'visible');
           });
       },
       onHide: function(tip){
           tip.Fx.stop();
           tip.toolTip.setStyles({left:-500, top:-500});
       },
       showDelay: 300,
       hideDelay: 100,
       className: 'tool',
       offsets: {'x': 24, 'y': 8},
       url: '/Moo/Xtips.php',
       transition: Fx.Transitions.Elastic.easeOut,
       duration: 1200,
       fixed: false
   },

   initialize: function(elements, options){
       this.setOptions(options);
       this.toolTip = new Element('div', {
           'class': this.options.className + 'tip',
           'styles': {
               'position': 'absolute',
               'top': '0',
               'left': '0',
               'visibility': 'hidden'
           }
       }).inject(document.body).setStyles("top:-500px;left:-500px;");
       this.wrapper = new Element('div').inject(this.toolTip);
       $$(elements).each(this.build, this);
       this.toolTip.addEvent('mouseleave', function(){
           this.doHide();
       }.bind(this));
       this.toolTip.addEvent('mouseenter', function(){
           $clear(this.timer);
       }.bind(this));
       this.Fx   = new Fx.Styles(this.toolTip, {
           duration: this.options.duration,
           transition:this.options.transition
       });
   },

   build: function(el){
       el.addEvent('mouseenter', function(evt){
           this.position(el);          
           if( el.$tips ){
               this.wrapper.setHTML( el.$tips );
               this.doShow();
           }else{
               el.$tips    = ' ';
               var val = el.href.toString().match(/(\w+)=(\d+)/);
               var key = val [1]; val =val [2];
               this.wrapper.setHTML( el.$tips );
               new Ajax( this.options.url +'?id='+val , {
                   onComplete: function(txt){
                       el.$tips    = txt;
                       this.wrapper.setHTML(txt);
                       this.doShow();
                   }.bind(this)
               }).request();
           }  
       }.bind(this));
       el.addEvent('mouseleave', function(){
           this.doHide();
       }.bind(this));
   },
  
   position: function(el){
       this.el   = el;
       var pos = el.getPosition();
       this.pos   = {left: [pos.x+4 , pos.x + el.offsetWidth - this.options.offsets.x],
           top : [pos.y +el.offsetHeight -4 ,pos.y + el.offsetHeight - this.options.offsets.y]};
   },

   doHide: function(){
       $clear(this.timer);
       this.el = false;
       this.timer = this.hide.delay(this.options.hideDelay, this);
   },

   doShow: function(){
       $clear(this.timer);
       this.timer = this.show.delay(this.options.showDelay, this);
   },

   show: function(){
       this.fireEvent('onShow', [this]);
   },

   hide: function(){
       this.fireEvent('onHide', [this]);
   }

});