/*
 * Usage: 
 *   <div id='tooltip' style="display:none; margin: 5px; background-color: red;">
 *     Detail infos on product 1....<br />
 *   </div>
 *
 *   <div id='product_1'>
 *     This is product 1
 *   </div>
 *
 *   <script type="text/javascript">
 *     var my_tooltip = new Dropdown('product_1', 'tooltip')
 *   </script>
 */

var Dropdown = Class.create();
Dropdown.prototype = {
  initialize: function(element, flyout) {
    var options = Object.extend({
       default_css: false,
       margin: "0px",
       padding: "5px",
       backgroundColor: "#d6d6fc",
       delta_x: 5,
       delta_y: 5,
       zindex: 1000
    }, arguments[1] || {});

    this.element = $(element);
    this.flyout  = $(flyout);

    this.options = options;

    this.flyout.hide();

     // The effective area denotes the x1,y1,x2,y2 coordinates that the open menu covers
     // all mouseout events will look at this before deciding to continue
     this.effectiveArea = [];

    this.eventMouseOver = this.showDropdown.bindAsEventListener(this);
    this.eventMouseOut  = this.hideDropdown.bindAsEventListener(this);

    this.registerEvents();
  },
   
  registerEvents: function() {
    Event.observe(this.element, "mouseover", this.eventMouseOver);

    Event.observe(this.element, "mouseout", this.eventMouseOut);
    Event.observe(this.flyout, "mouseout", this.eventMouseOut);
  },


   // process: hideDropdown is called, which starts a timer.  if no
   // events happen which cause the dropdown to stay open, it will
   // close when the timer fires.
   hideDropdown: function(event)
   {
      mouse_x = Event.pointerX(event);
      mouse_y = Event.pointerY(event);
      if(((mouse_x > this.effectiveArea[0]) && (mouse_x < this.effectiveArea[2])) &&
	 ((mouse_y > this.effectiveArea[1]) && (mouse_y < this.effectiveArea[3]))) return;
      new Effect.SlideUp(this.flyout, {duration: 0.2});
   },

  showDropdown: function(event)
   {
      ele = $(Event.findElement(event, 'li'));
      Event.stop(event);

      bottomLeft = this.getBottomLeft(ele);
      this.setStyleAndPosition(bottomLeft[0], bottomLeft[1]);

      this.flyout.show();
      this.setEffectiveArea();
      
      // new Effect.SlideDown(this.flyout, {duration: 0.2});
      
   },
  
  setStyleAndPosition: function(x, y)
   {
      // set the right styles to position the tool tip
      Element.setStyle(this.flyout, { position:'absolute',
	 			      top:y + "px",
	 			      left:x + "px",
				      zIndex:this.options.zindex
	 			    });
	
      // apply default theme if wanted
      if (this.options.default_css)
      {
	 Element.setStyle(this.flyout, { margin:this.options.margin,
		 			 padding:this.options.padding,
		                         backgroundColor:this.options.backgroundColor,
					 zIndex:this.options.zindex
		 		       });	
      }	
  },

   setEffectiveArea: function()
   {
      this.effectiveArea = [this.findPos(this.element), this.getBottomRight(this.flyout)].flatten();
   },

   findPos: function(obj)
   {
      var curleft = curtop = 0;
      if (obj.offsetParent)
      {
	 do
	 {
	    curleft += obj.offsetLeft;
	    curtop += obj.offsetTop;
	 }
	 while (obj = obj.offsetParent);
      }
      return [curleft,curtop];
   },

   getBottomRight: function(ele)
   {
      pos = this.getBottomLeft(ele);
      return [pos[0] + ele.getWidth(), pos[1]];
   },

   getBottomLeft: function(ele)
   {
      topleft = this.findPos(ele);
      bottomleft = [topleft[0], topleft[1] + $(ele).getHeight()];
      return bottomleft;
   }
}