function navi_open(nav) {
  nav.addClass('nav1-hover');

  /* kinder einblenden */
  var subNav = nav.children('div.nav2');
  subNav.css('display','block');
      
  if (subNav.children('span').size() > 0) {
    //das span hat die Breite des längsten punktens in der nav2 ohne paddings 
    var expandWidth = Math.max(subNav.children('span').width(), widths[nav.attr('id')]);
    nav.css('width',expandWidth);

    var opacLayer = $(document.createElement('div'));
    opacLayer.attr('id','opac-layer-'+nav.attr('id'));
    opacLayer.css('position','absolute');
    opacLayer.css('top',nav.css('top'));
    opacLayer.css('left',nav.css('left'));
    opacLayer.css('background-color','#ffffff');

    if ($('body').attr('id') == 'start' && nav.hasClass('more-opac')) {
      opacLayer.css('opacity','0.85'); // für start-kontakt
    } else {
      opacLayer.css('opacity','0.85');
    }
    opacLayer.width(expandWidth+14+2); // 14 sind padding links und rechts + 2 rahmen
    opacLayer.height(nav.height()+5);
    opacLayer.css('z-index',nav.css('z-index')-1);

    $('div#navigation').append(opacLayer);
  } else {
    //wir haben keine subnavigation
  }
}

function navi_close(navId) {
  /* wir übergeben hier die id, damit wir nicht die falschen (oder gar mehrere) subnavs / highlights cshließen */

  var nav = $('#'+navId);
  if (nav.size() > 0) {
    closeTimers[nav.attr('id')] = false;

    nav.removeClass('nav1-hover');

    // kinder ausblenden
    var subNav = nav.children('div.nav2');
    subNav.css('display','none');
    
    // breite wiederherrstellen 
    nav.width(widths[nav.attr('id')]);
      
    // weiß transparenter entfernen
    $('#opac-layer-'+nav.attr('id')).remove();
  }
}


$(document).ready(function (){
  var absTop = 48;
  var menuDelay = 40;
  closeTimers = new Object();
  widths = new Object(); // wir speichern die breite der Navigationsbegriffe um sie beim close() zurückzusetzen zu können 
  var zindex = 50; // anfangs z-index, desto weiter rechts desto weniger zindex nehmen wir, also links ist höher als rechts

  /* wir machen die ganze navigation in absolute */
  var positions = new Array(); // zuerst speichern wir die positionen, wie sie inline vom browser gesetzt werden
    
  $('div#navigation div.nav1').each(function (i) {
      positions[i] = $(this).position();
      $(this).attr('id','nav1-item-'+i);
      widths[$(this).attr('id')] = $(this).width(); // die breite ohne die paddings (support your local browser here)
    });
    
  // wir setzen die gespeicherten funktionen und tricksen bei safari rum */
    
  $('div#navigation div.nav1').each(function (i) {
      $(this).css('position','absolute');
      $(this).css('top',(absTop)+'px');
      $(this).css('left',positions[i].left);
      
      $(this).css('z-index',zindex);
      zindex = zindex - 5;

      $(this).css('display','block');
      $(this).css('width',widths[$(this).attr('id')]);
    });


  var mOver = function () {
    if (typeof closeTimers[$(this).attr('id')] != 'undefined' && typeof closeTimers[$(this).attr('id')] == 'number') { 
      // der close time existiert, dass heißt das fenster sollte nur geschlossen werden, das brechen wir einfach ab
      window.clearTimeout(closeTimers[$(this).attr('id')]);
    } else {
      navi_open($(this));
    }

    $(this).unbind('mouseover');
    $(this).bind('mouseleave',mLeave);
  };

  var mLeave = function (e) {
    var nav = $(this);

    if (nav.children('div.nav2').size() > 0) {
      closeTimers[nav.attr('id')] = window.setTimeout("navi_close('"+nav.attr('id')+"');", menuDelay);
    } else {
      navi_close(nav.attr('id'));
    }
    
    nav.unbind('mouseleave');
    nav.bind('mouseover',mOver);
  };
  
  /* initial */
  $('div#navigation div.nav1').bind('mouseover',mOver);

});