//
//  callout.js
//

var CPCallout = Class.create({
  initialize: function (element) {
    this.element = element;
    this.items   = element.select("li.callout").map(function (element) {
      return new CPItem(this, element);
    }.bind(this));
    this.alignBubbles();
  },
  
  alignBubbles: function () {
    this.items.each(function (item) {
      item.alignBubble();
    });
  },
  
  getLeftMargin: function () {
    return this.items.first().element.positionedOffset().first();
  },
  
  getRightMargin: function () {
    return this.getLeftMargin();
  }
});

var CPItem = Class.create({
  initialize: function (callout, element) {
    this.callout = callout;
    this.element = element;
    this.bubble  = element.down("div.bubble");
    this.arrow   = this.bubble.down("span.arrow");
  },
  
  alignBubble: function () {
    var parentWidth   = this.element.getOffsetParent().getWidth();
    var parentHeight  = this.element.getOffsetParent().getHeight();
    
    var elementWidth  = this.element.getWidth();
    var bubbleWidth   = this.bubble.getWidth();
    var elementOffset = this.element.positionedOffset();
    
    var leftMargin    = this.callout.getLeftMargin();
    var rightMargin   = (parentWidth - bubbleWidth) - 
      this.callout.getRightMargin();
    
    var offset = elementOffset.first() +
      (elementWidth / 2.0) - (bubbleWidth / 2.0);
    if (offset < leftMargin)
      offset = leftMargin;
    else if (offset > rightMargin)
      offset = rightMargin;
    
    this.bubble.style.left = offset + "px";
    this.bubble.style.bottom = 
      parentHeight - elementOffset.last() + "px";
    this.arrow.style.left = 
      (elementOffset.first() - offset) + 
      (elementWidth / 2.0) + "px";
  }
});

Event.observe(window, "load", function () {
  $$("ul.callout").each(function (element) {
    new CPCallout(element);
  });
});