RollOverText = Class.create();
RollOverText.prototype = {
  initialize: function(className) {
    this.className = className;
    
    $$('.' + className).each(function(el) {
      Event.observe(el, 'mouseover', this.onMouseOver.bindAsEventListener(this));
      Event.observe(el, 'mouseout', this.onMouseOut.bindAsEventListener(this));
    }.bind(this));
  },

  onMouseOver: function(event) {
    var el = Event.element(event);
    while(el.className != this.className)
        el = el.parentNode;
    
    if(!el.isOpen) {
        el.isOpen = true;
        
        // get old value and save
        var marginTop = parseInt(el.getStyle('margin-top'));
        el.oldMargin = marginTop;
        
        var offset = $(el.parentNode).getHeight() - el.getHeight();
        el.setStyle({marginTop: offset + 'px'});
        writeTrace('open ');
    }
  },
  
  onMouseOut: function(event) {
    var el = Event.element(event);
    while(el.className != this.className)
        el = el.parentNode;
    
    //var el = this.childElements()[0];
    
    var oX = el.cumulativeOffset().left;
    var oY = el.cumulativeOffset().top;
    var wX = el.getDimensions().width;
    var wY = el.getDimensions().height;
    var pX = Event.pointerX(event);
    var pY = Event.pointerY(event);
    
    var inside = true;
    
    if(pX < oX || pX > oX + wX)
        inside = false;
    if(pY < oY || pY > oY + wY)
        inside = false;
        
    //writeTrace('close ' + Event.pointerX(event) + ', ' + off + ', ' + dim);
    
    if(el.isOpen && !inside)
    {
        el.isOpen = false;
        el.setStyle({marginTop: el.oldMargin + 'px'});
        
        
    }
  }
};

Event.observe(window, 'load', function() { new RollOverText('transparent-bg') });


function clearTrace() {
    $('trace').innerHTML = "";
}
function writeTrace(msg) {
    //$('trace').innerHTML += msg;
}