/* Inspired by:
   Bubble Tooltips by Alessandro Fulciniti
   http://pro.html.it - http://web-graphics.com  */

var Tooltips = new function() {

  var elements = $A([]);

  this.pinned = null;

  var Tooltip = function(el) {
    this.e = el;
    this.pinned = false;
    el.observe('mouseover', Tooltips.mouseover.bindAsEventListener(this));
    el.observe('mouseout', Tooltips.mouseout.bindAsEventListener(this));
    el.observe('click', Tooltips.click.bindAsEventListener(this));
    this.destroy = function() { this.e.stopObserving(); };
    this.close = function(ev) { $('tooltipClose').stopObserving(); Tooltips.pinned = null; $("tipcontainer").hide(); if (ev) { ev.stop(); } };
  };

  this.setup = function() {
    $$("body").first().insert({bottom: "<span id='tipcontainer' style='display: none;'></span>" });
    $("tipcontainer").update("<div><span id='tooltipClose' style='display: none;'>[<a href='#'>x</a>]</span></div><div id='tooltipMiddle'></div>");
  };

  this.loadAll = function(selector) {
    $$(selector).each(function(e) { elements.push(new Tooltip(e)); });
  };

  this.unloadAll = function() {
    elements.each(function(e) { e.destroy(); });
    elements.clear();
  };

  this.mouseover = function() {
    if (Tooltips.pinned != this) {
      Tooltips.fillContent(this.e);
      $("tipcontainer").show();
      $("tipcontainer").setStyle(Tooltips.locate(this.e));
      $('tooltipClose').hide();
    }
  };

  this.mouseout = function(ev) {
    if (Tooltips.pinned != this) { this.close(); }
  };

  this.click = function(ev) {
    Tooltips.pinned = this;
    $('tooltipClose').show();
    $('tooltipClose').observe('click', this.close.bindAsEventListener(this));
    ev.stop();
  };

  this.locate = function(e) {
    var offset = $(e).cumulativeOffset();
    var dimensions = $(e).getDimensions();
    var boxDimensions = $("tipcontainer").getDimensions();
    var location = {left: offset[0] + dimensions['width'] - 5, top: offset[1] + dimensions['height'] - 5};
    if (location['left'] + boxDimensions['width'] > document.viewport.getWidth() + document.viewport.getScrollOffsets()[0]) {
      location['left'] = offset[0] - boxDimensions['width'] + 5;
    }
    if (location['top'] + boxDimensions['height'] > document.viewport.getHeight() + document.viewport.getScrollOffsets()[1]) {
      location['top'] = offset[1] - boxDimensions['height'] + 5;
    }
    return {left: location['left'] + 'px', top: location['top'] + 'px'};
  };

  this.fillContent = function(e) {
    var rel = e.readAttribute('rel');
    var contentContainer = $("tooltipMiddle");
    contentContainer.update("");
    if (!rel) { return; }
    if (rel == "(next)") {
      contentContainer.update(e.next().innerHTML);
    } else if (rel == "(alt)") {
      contentContainer.update(e.readAttribute('alt'));
    } else if (rel[0] == "#") {
      contentContainer.update($(rel.substring(1)).innerHTML);
    } else {
      contentContainer.update(rel);
    }
  };

};