var Layer = new Class({

  initialize: function(trigger, layer) {
    this.trigger = $(trigger);
    this.layer = $(layer);
    this.trigger.addEvent('click', this.handleClick.bindWithEvent(this));
  },
  
  handleClick: function(e) {
    e.stop();
    if (this.layer.getStyle('display') == 'block') {
      this.layer.setStyle('display', 'none');
      this.layer.setOpacity(0);
    } else {
      var tCoords = this.trigger.getCoordinates();
      this.layer.setStyles({
        left: tCoords.right + 'px',
        top: tCoords.top + 'px',
        display: 'block',
        visibility: 'hidden'
      });
      var lSize = this.layer.getSize();
      this.layer.setStyles({
        left: parseInt(tCoords.right - lSize.x / 2) + 'px',
        top: (tCoords.top - lSize.y) + 'px',
        display: 'block',
        visibility: 'visible'
      });
      this.layer.setOpacity(1);
    }
  }

});

window.addEvent('domready', function() {
  $$('.suggerimento').each(function(el) {
    new Layer(el, el.getNext('div'));
  });
});