/*
Simple class that allow popup some div - useful for inline help. 
use as:
<a id="ICalendarLink" class="icalendar-link" href="#">iCalendar</a>
<span id="ICalendarLinkHelp" class="icalendar-help-sign" title="Click to view help">?</span>
<div id="ICalendarLinkHelpPopUp" class="icalendar-help-popup" style="display: none">
  	<div align="right"><img src="help-close.gif" alt="x" class="close-button"/></div>
  	<p>Text Text Text</p>
</div>
<script type="text/javascript">//<![CDATA[
  Event.observe(window, "load",  function(){
    new SimplePopup("ICalendarLinkHelpPopUp", {
      owner: "ICalendarLink", 
      showOnHover: "ICalendarLink",
      showOnClick: "ICalendarLinkHelp", 
      align: "left-top", 
      offset: [-40, 0],
      width: 300});
})
//]]></script>

*/


/** Inner Html Popup.
 * @param id string id of popup element
 * @param options object {autoHide,align}
 */
var SimplePopup = Class.create();
Object.extend(SimplePopup.prototype, {
  doNotHideOnMouseOut: false,
  /**
   * @param element element to popup
   * @param options object
   *   - owner: element that will own by this popup
   *   - align: relative to 'owner' one of 'left-top'
   *   - offset: [left,top] - additional offset that will be added after align positioning
   *   - width, height: of popup
   *   - showEffect: by default Element.show
   *   - hideEffect: by default Element.hide
   *   - showOnClick: 'element' - show popup if element clicked
   *   - showOnHover: 'element' - show if cursor over element and hide if out
   */
  initialize:  function(element, options){
    this.element = $(element);
    this.options = options || {};
    this.owner = options.owner ? $(options.owner) : null;
    this.showEffect = options.showEffect || Element.show;
    this.hideEffect = options.hideEffect || Element.hide;
    this.offset = options.offset || [0, 0];

    this.element.style.position = 'absolute';
    if( options.showOnClick ){
      Event.observe(options.showOnClick, 'click',  function(){
        this.doNotHideOnMouseOut = true;
        this.show();
       }.bind(this));
    }
    if( options.showOnHover ){
      Event.observe(options.showOnHover, 'mouseover',  function(event){ 
          if( !this.isVisible() ){ this.show();  }
      }.bind(this));
      Event.observe(options.showOnHover, 'mouseout',  function(event){ 
          if( !this.doNotHideOnMouseOut ){ this.hide();  }
      }.bind(this));
    }
    var closeButton = document.getElementsByClassName('close-button').first();
    if( closeButton ){
      Event.observe(closeButton, 'click', this.hide.bind(this));
    }
  },
  show:  function(){
    if( this.options.width ) this.element.style.width = this.options.width+'px';
    if( this.options.height ) this.element.style.height = this.options.height+'px';
    if( this.owner && this.options.align ){
      var ownerPos = Position.cumulativeOffset(this.owner);
      var left = ownerPos[0], top = ownerPos[1]; 
      if( this.options.align == 'left-top' ){
        //top is same as owner
        //right side of popup match with owner left side
        left = ownerPos[0] - this.options.width;
      }
      this.element.style.left = left + this.offset[0] + 'px';
      this.element.style.top = top + this.offset[1] + 'px';
    }
    this.showEffect(this.element);  
  },
  hide:  function(){
    this.doNotHideOnMouseOut = false;
    this.hideEffect(this.element);
  },
  isVisible:  function(){
    return Element.visible(this.element);
  }
})