/******************************************

  Webuddha Modified Version
    (c)2009 Webuddha, Holodyn Corporation

    Version:  1.1.1
    Modified: 020609

  Original Code provided by CoolTips
    (c)2008 WildBit
    http://www.wildbit.com/labs/cooltips/

******************************************/

Event.observe(window,'load',function(){
  // $$('imgToolTip,wbToolTip').each(function(e){ wbToolTip(e); });
  // $$('a.wbToolTip').each(function(e){ wbToolTip(e); });
  var elms = document.getElementsByTagName('area');
  for(var i=0;i<elms.length;i++)
    wbToolTip( elms[i] );
  });

function wbToolTip(e,theme){
  new Tooltip(e, {
    mouseFollow: true,
    opacity:  1,
    maxWidth: 320,
    xOffset:  35,
    yOffset:  -54,
    template: '<table class="wbtooltip" border="0" cellpadding="0" cellspacing="0"><tr class="trow"><td colspan="2" class="topleft">&nbsp;</td><td class="top"><div class="title">#{title}</div></td><td class="topright"></td></tr><tr class="crow"><td class="pointer">&nbsp;</td><td class="cleft">&nbsp</td><td class="content"><div class="content">#{content}</div></td><td class="right">&nbsp;</td></tr><tr class="brow"><td colspan="2" class="botleft">&nbsp;</td><td class="bot">&nbsp;</td><td class="botright">&nbsp;</td></tr></table>'
  });
}

// Tooltip Object
var Tooltip = Class.create();
Tooltip.prototype = {
  initialize: function(el, options) {
    this.el = $(el);
    // Collect ToolTip Attribute
    if( Object.isUndefined(options) )
      options = {};
    options = $H( options );
    if( options.get('title') ){
      alert( 'Need to Finish Feature: '+options.get('title') );
    }
    if( this.el.getAttribute('tooltip') ){
      this.title = this.el.getAttribute('title');
      this.content = this.el.getAttribute('tooltip');
    }
    // Else if Image to Enlarge
    else if( this.el.nodeName=='IMG' && this.el.hasClassName('imgToolTip') ){
      this.title = this.el.alt;
      this.content = '<img border="10" src="'+this.el.src+'" />';
      options.set('template','#{content}');
      options.set('mouseFollow',false);
    }
    // Else use the Title
    else {
      var tS = String(this.el.title).split('::');
      if(tS.length==2){
        this.title = tS[0]; this.content = tS[1];
      } else {
        this.title = null; this.content = this.el.title;
      }
    }
    // Check is Tooltip
    if( !this.title && !this.content )
      return;
    // Prepare Tooltip
    this.initialized = false;
    this.setOptions(options);
    // Event handlers
    this.showEvent = this.show.bindAsEventListener(this);
    this.hideEvent = this.hide.bindAsEventListener(this);
    this.updateEvent = this.update.bindAsEventListener(this);
    Event.observe(this.el, "mouseover", this.showEvent );
    Event.observe(this.el, "mouseout", this.hideEvent );
    // Clear Children Alt & Title Attributes
    if( this.el.alt ) this.el.alt = '';
    if( this.el.title ) this.el.title = '';
    if( typeof(this.el.descendants)!='undefined' && this.el.descendants() )
      this.el.descendants().each(function(el){
        if(Element.readAttribute(el, 'alt')) el.alt = "";
        if(Element.readAttribute(el, 'title')) el.title = '';
      });
    // Check Extended
    if( options.get('extend') ){
      var opt = options;
        opt.set('extend',null);
        opt.set('title',this.title);
        opt.set('tooltip',this.tooltip);
      var ext = options.get('extend');
      if(!Object.isArray(ext)) ext = [ ext ];
      for(var i=0;i<ext.length;i++)
        this.initialize(ext[i], opt);
    }
  },
  setOptions: function(options) {
    this.options = $H({
      backgroundColor: '#999',    // Default background color
      borderColor: '#666',        // Default border color
      textColor: '',              // Default text color (use CSS value)
      textShadowColor: '',        // Default text shadow color (use CSS value)
      maxWidth: 250,              // Default tooltip width
      align: 'left',              // Default align
      delay: 250,                 // Default delay before tooltip appears in ms
      mouseFollow: true,          // Tooltips follows the mouse moving
      opacity: .75,               // Default tooltips opacity
      appearDuration: .25,        // Default appear duration in sec
      hideDuration: .25,          // Default disappear duration in sec
      xOffset: 0,
      yOffset: 0,
      template: ''
    }).merge( options );
  },
  show: function(e) {
    this.xCord = Event.pointerX(e);
    this.yCord = Event.pointerY(e);
    if(!this.initialized)
      this.timeout = window.setTimeout(this.appear.bind(this),this.options.get('delay'));
  },
  hide: function(e) {
    if(this.initialized) {
      this.appearingFX.cancel();
      if(this.options.get('mouseFollow'))
        Event.stopObserving(this.el, "mousemove", this.updateEvent);
      new Effect.Fade(this.tooltip, {duration: this.options.get('hideDuration'), afterFinish: function() { Element.remove(this.tooltip) }.bind(this) });
    }
    this._clearTimeout(this.timeout);
    this.initialized = false;
  },
  update: function(e){
    this.xCord = Event.pointerX(e);
    this.yCord = Event.pointerY(e);
    this.setup();
  },
  appear: function() {
    // Building tooltip container
    if( this.options.get('template') ){
      this.tooltip = new Element('div', {className: "wbttwx", style: "display: none;" });
      this.tooltip.update( this.options.get('template').interpolate({'title':this.title,'content':this.content}) );
    } else {
      this.tooltip = Builder.node("div", {className: "wbttwx", style: "display: none;" }, [
        Builder.node("div", {className:"xtop"}, [
          Builder.node("div", {className:"xb1", style: "background-color:" + this.options.get('borderColor') + ";"}),
          Builder.node("div", {className:"xb2", style: "background-color:" + this.options.get('backgroundColor') + "; border-color:" + this.options.get('borderColor') + ";"}),
          Builder.node("div", {className:"xb3", style: "background-color:" + this.options.get('backgroundColor') + "; border-color:" + this.options.get('borderColor') + ";"}),
          Builder.node("div", {className:"xb4", style: "background-color:" + this.options.get('backgroundColor') + "; border-color:" + this.options.get('borderColor') + ";"})
        ]),
        Builder.node("div", {className: "xboxcontent", style: "background-color:" + this.options.get('backgroundColor')
          + "; border-color:" + this.options.get('borderColor') + ((this.options.get('textColor') != '') ? "; color:" + this.options.get('textColor') : "")
          + ((this.options.get('textShadowColor') != '') ? "; text-shadow:2px 2px 0" + this.options.get('textShadowColor') + ";" : "")}, '{content}'),
        Builder.node("div", {className:"xbottom"}, [
          Builder.node("div", {className:"xb4", style: "background-color:" + this.options.get('backgroundColor') + "; border-color:" + this.options.get('borderColor') + ";"}),
          Builder.node("div", {className:"xb3", style: "background-color:" + this.options.get('backgroundColor') + "; border-color:" + this.options.get('borderColor') + ";"}),
          Builder.node("div", {className:"xb2", style: "background-color:" + this.options.get('backgroundColor') + "; border-color:" + this.options.get('borderColor') + ";"}),
          Builder.node("div", {className:"xb1", style: "background-color:" + this.options.get('borderColor') + ";"})
        ]),
      ]);
    }
    // We replace in order to retain HTML
    // alert( this.tooltip.innerHTML );
    this.tooltip.innerHTML = String(this.tooltip.innerHTML).replace(/{content}/,this.content);
    document.body.insertBefore(this.tooltip, document.body.childNodes[0]);
    Element.extend(this.tooltip); // IE needs element to be manually extended
    this.options.set('width', this.tooltip.getWidth());
    this.tooltip.style.width = this.options.get('width') + 'px'; // IE7 needs width to be defined
    this.setup();
    if(this.options.get('mouseFollow'))
      Event.observe(this.el, "mousemove", this.updateEvent);
    this.initialized = true;
    this.appearingFX = new Effect.Appear(this.tooltip, {duration:this.options.get('appearDuration'),to:this.options.get('opacity')});
  },
  setup: function(){
    // If content width is more then allowed max width, set width to max
    if(this.options.get('width') > this.options.get('maxWidth') ) {
      this.options.set('width', this.options.get('maxWidth'));
      this.tooltip.style.width = this.options.get('width') + 'px';
    }
    // Tooltip doesn't fit the current document dimensions
    if(this.xCord + this.options.get('width') >= Element.getWidth(document.body)) {
      this.options.set('align', 'right');
      this.xCord = this.xCord - this.options.get('width') + 20;
    }
    this.tooltip.style.left = this.options.get('xOffset') + this.xCord - 7 + "px";
    this.tooltip.style.top  = this.options.get('yOffset') + this.yCord + 12 + "px";
  },
  _clearTimeout: function(timer) {
    clearTimeout(timer);
    clearInterval(timer);
    return null;
  }
};