/**
 * Die Navigation platziert den aktiven Navigationspunkt immer
 * in der Box, behält aber die Reihenfolge der anderen
 * Navigationspunkte bei, schiebt also den Rest der Liste über die
 * Box. 
 */
/* Warten, bis ggf in alten Browsern die Media-queries angewandt wurden.
 * Sonst stehen die zur Berechnung nötigen CSS-Eigenschaften nicht zur Verfügung
 */
cssHelper.addListener('cssMediaQueriesTested', function() { /* aus css3-mediaqueries */
if(kcmBigCSS()) {
  /* inaktive Navigationspunkte sind alle gleich hoch - margin mitzählen! */
  var liOffset = $('#navigation > li.aktiv').index()
                 * $('#navigation > :not(li.aktiv)').outerHeight(true);
  var aktivOffset = $('#navigation > li.aktiv').outerHeight(true);
  
  $('#navigation').css('marginTop', -(liOffset + aktivOffset));
  
  /* generell das hübschere Easing verwenden */
  jQuery.easing.def = 'easeInOutSine';
  
  
  
  /**
   * Wenn ein Navigationspunkt angeklickt wird, soll er animiert
   * in die Klasse .aktiv übergehen.
   * Zusätzlich wird dabei der Rest der Navigation mit verschoben.
   */
  var cssLiAktiv = { /* li.aktiv */
			height: $('#navigation > :not(.aktiv)').height(),
			letterSpacing: '0em',
			paddingTop: '0em'
  };
  var cssLiAktivStrong = { /* li.aktiv > strong */
			fontSize: '110%',
			color: '#797979',
			paddingTop: '0.3em',
			letterSpacing: '0em'
  };
  var cssAActiveParent = { /* li des geklickten Navigationspunktes */
    /* Kopie der Klasse .aktiv */
    height: '10em',
    paddingTop: '3em',
    paddingRight: '1em'
  };
  var cssAActive = { /* der geklickte a */
	/* Kopie von li.aktiv > a */
	fontSize: '170%',
	letterSpacing: '0.05em',
	color: '#ffffff',
	paddingTop: '0em'
  };
  
  var animationDuration = 1000;
  
  $('#navigation > li:not(.aktiv) > a').click(function(event){
	$('#balken').fadeOut('slow');
	
	$('#navigation > li.aktiv').animate(cssLiAktiv, animationDuration);
	$('#navigation > li.aktiv > strong').animate(cssLiAktivStrong, animationDuration);
	$('#navigation > li.aktiv ul').hide(animationDuration);
	
	var liOffset = $(this).parent().index() * $(this).parent().outerHeight(true);
	$('#navigation').animate({
		marginTop: -(liOffset + $('#seitenleiste > span').outerHeight(true)) /* es gibt evtl. keinen aktiven Punkt! */
	}, animationDuration);
	
	$(this).parent().animate(cssAActiveParent, animationDuration);
	$(this).animate(cssAActive, animationDuration, function() { window.location.href = $(this).attr('href'); });
    
    // Die normale Behandlung des klicks nicht zulassen
    event.preventDefault();
  });
  
  
  /**
   * Die Navigation soll auch animiert werden, wenn ein Link auf einen Navigationspunkt
   * außerhalb der Navigation geklickt wird.
   */
  $('a:not(#navigation a)').click(function(event) {
    var navA = $('#navigation > li > a[href=' + $(this).attr('href') + ']');
    
    if(navA.length) {
    	navA.click();
    }
  });
}
}); /* end .ready */