//Ϣʾ
//ʾַ:http://demos.mootools.net/Tips

var Tips = new Class({

 

 //̳EventsOptions,UIص
 Implements: [Events, Options],

 

 options: {
  //ʾ¼

  onShow: function(tip){

   tip.setStyle('visibility', 'visible');

  },

  //¼

  onHide: function(tip){

   tip.setStyle('visibility', 'hidden');

  },
  //ʾʱ

  showDelay: 100,

  //ʱ

  hideDelay: 100,

  //ʾʽ

  className: null,

  //ʾʾʱλõƫ

  offsets: {x: 16, y: 16},
  //ʾʱǷƶ

  fixed: false

 },


 //캯

 initialize: function(){
  //Array.linkԶѡ

  var params = Array.link(arguments, {options: Object.type, elements: $defined});
  //ϲ

  this.setOptions(params.options);

  
  //ʾ

  this.tip = new Element('div').inject(document.body);

  
  //ָCSS,

  if (this.options.className) this.tip.addClass(this.options.className);

  //ʾ㶥

  var top = new Element('div', {'class': 'tip-top'}).inject(this.tip);

  //ʾݵ

  this.container = new Element('div', {'class': 'tip'}).inject(this.tip);

  //ʾײ

  var bottom = new Element('div', {'class': 'tip-bottom'}).inject(this.tip);


  //λ,ɼ

  this.tip.setStyles({position: 'absolute', top: 0, left: 0, visibility: 'hidden'});

  
  //ʹʾĶ

  if (params.elements) this.attach(params.elements);

 },

 

 //ΪʹʾĶ
¼
 attach: function(elements){
  //ÿ

  $$(elements).each(function(element){
   //ȡ

   var title = element.retrieve('tip:title', element.get('title'));

   //ȡ

   var text = element.retrieve('tip:text', element.get('rel') || element.get('href'));

   //¼

   var enter = element.retrieve('tip:enter', this.elementEnter.bindWithEvent(this, element));

   //뿪¼

   var leave = element.retrieve('tip:leave', this.elementLeave.bindWithEvent(this, element));

   //뿪¼

   element.addEvents({mouseenter: enter, mouseleave: leave});
   //

   if (!this.options.fixed){
    //ƶ¼

    var move = element.retrieve('tip:move', this.elementMove.bindWithEvent(this, element));

    //ƶ¼

    element.addEvent('mousemove', move);

   }

   element.store('tip:native', element.get('title'));
   //ȥԭtitle,ʾظʾ

   element.erase('title');

  }, this);

  return this;

 },

 
 //Ƴ¼

 detach: function(elements){

  //ÿ
  $$(elements).each(function(element){
   //Ƴ¼

   element.removeEvent('mouseenter', element.retrieve('tip:enter') || $empty);

   //Ƴ뿪¼

   element.removeEvent('mouseleave', element.retrieve('tip:leave') || $empty);

   //Ƴƶ¼

   element.removeEvent('mousemove', element.retrieve('tip:move') || $empty);

   //Ƴ¼

   element.eliminate('tip:enter').eliminate('tip:leave').eliminate('tip:move');
   //ȡtitleֵ

   var riginal = element.retrieve('tip:native');
   //ڻֵָ

   if (original) element.set('title', original);

  });

  return this;

 },

 
 //뵱ǰʱĴ

 elementEnter: function(event, element){
  //ʾ

  this.container.empty();
  //ȡʾ

  var title = element.retrieve('tip:title');
  //ڱ⻺

  if (title){
   //󲢼ӵ

   this.titleElement = new Element('div', {'class': 'tip-title'}).inject(this.container);

   //Ի

   this.fill(this.titleElement, title);

  }

  //ȡʾ

  var text = element.retrieve('tip:text');

  //ڱ⻺

  if (text){

   //󲢼ӵ

   this.textElement = new Element('div', {'class': 'tip-text'}).inject(this.container);

   //Ի

   this.fill(this.textElement, text);

  }
  //Ϊֹظ,ʱ

  this.timer = $clear(this.timer);
  //ʱʾ

  this.timer = this.show.delay(this.options.showDelay, this);


  //ʾƶ,Ϣ,͵ǰϢ

  this.position((!this.options.fixed) ? event : {page: element.getPosition()});

 },

 
 //뿪ʱĴ

 elementLeave: function(event){
  //ʱ

  $clear(this.timer);
  //ʱʾ

  this.timer = this.hide.delay(this.options.hideDelay, this);

 },

 

 //ƶʱĴ

 elementMove: function(event){
  //¶λʾ

  this.position(event);

 },

 
 //λʾ

 position: function(event){
  //ȡĵڵĳߴ͹Ϣ

  var size = window.getSize(), scroll = window.getScroll();
  //ʾĳߴ

  var tip = {x: this.tip.offsetWidth, y: this.tip.offsetHeight};
  //ڶλҪ

  var props = {x: 'left', y: 'top'};
  //λҪ

  for (var z in props){
   //ǰ귽ϵĿֵ

   var pos = event.page[z] + this.options.offsets[z];
   //ʾ㳬ʱĴ

   if ((pos + tip[z] - scroll[z]) > size[z]) pos = event.page[z] - this.options.offsets[z] - tip[z];
   //õǰ귽ϵֵ

   this.tip.setStyle(props[z], pos);

  }

 },

 
 //ָݻ

 fill: function(element, contents){

  (typeof contents == 'string') ? element.set('html', contents) : element.adopt(contents);

 },


 //ʾʾ

 show: function(){
  //onShow¼

  this.fireEvent('onShow', this.tip);

 },

 

 //ʾʾ

 hide: function(){

  //onShow¼

  this.fireEvent('onHide', this.tip);

 }

 

});

