$j(document).ready(function() {

  $j("#header_menu li").bind("mouseenter", handlerIn);
  $j("#header_menu li").bind("mouseleave", handlerOut);

  function handlerIn() {
    $j(this).css('position', 'relative');
    $j(this).animate({
      top: "-=5px"
    });
  }

  function handlerOut(){
    $j(this).css('position', 'relative');
    $j(this).animate({
      top: "+=5px"
    });
  }

  /**
   * Aangezien selector klassen niet helemaal ok werken (ul > li)
   * om alle top items te selecteren, deze oplossing:
   */
  $j('.menu ul li a').addClass('flirItems');
  $j('.menu ul li ul li a').removeClass('flirItems');
  FLIR.auto(['a.flirItems']);
  FLIR.auto(['h1.flirItems']);
  FLIR.auto(['h2.flirItems']);
  FLIR.auto(['h3.flirItems']);

  $j('#showAnnechien').mouseover(function() {
    $j('#floatKirsten').hide();
    $j('#floatAnnechien').show();
    return false;
  });

  $j('#showKirsten').mouseover(function() {
    $j('#floatAnnechien').hide();
    $j('#floatKirsten').show();
    return false;
  });
});