/*
www.unterzweig.de
unterzweig design
by Michael Hartmann
*/

// Klappnavigation
// scripted by: Michael Hartmann

/*
Allgemeiner Aufbau:

- Optionspunkt
	_ Optionspunkt - Container _
	|        Unterpunkt1       |
	|        Unterpunkt2       |
	|        Unterpunkt3       |
	|        Unterpunkt4       |
	|        usw........       |
	----------------------------

Im aktiven Dokument muss angegeben werden welcher Optionspunkt und falls vorhanden,
welcher Unterpunkt aktiv ist. Am Ende des Dokuments wird also folgendes eingefügt:

<script language="javascript" type="text/javascript">
	aktive_seite = 'id des Optionspunkt - Containers';
	stylechange(aktive_seite, 'id des aktiven Unterpunkts');
</script>

Beispiel:

	Bei folgendem Aufbau der Navigation:
	
	<a href="#" id="option1_click" onclick="change_visibility('option1'); return false;">Option 1</a>  <!-- Optionspunkt -->
	<div id="option1">  <!-- Optionspunkt - Container -->
		<a href="#" id="unterpunkt1">Unterpunkt 1</a>  <!--  Unterpunkt -->
		<a href="#" id="unterpunkt2">Unterpunkt 2</a>  <!--  Unterpunkt -->
		<a href="#" id="unterpunkt3">Unterpunkt 3</a>  <!--  Unterpunkt -->
	</div>
	
	Ergibt sich beispielsweise folgender Ausdruck (als Unterpunkt wurde unterpunkt1 gewählt):
	
	<script language="javascript" type="text/javascript">
		aktive_seite = 'option1';
		stylechange(aktive_seite, 'unterpunkt1');
	</script>

Erläuterung von: <a href="#" id="option1_click" onclick="change_visibility('option1'); return false;">Option 1</a>  <!-- Optionspunkt -->
	
	onclick="change_visibility('option1'); return false;"
		
		Zum Auf-/Zuklappen der Menüpunkte wird im Optionspunkt der onclick - Event benutzt.
		In diesem wird die Funktion change_visibility() aufgerufen.
		Hierbei wird die id des zum Optionspunkt gehörenden Optionspunkt - Containers übergeben.
		In diesem Fall also change_visibility('option1').
		Desweiteren wird im onclick - Event zusätzlich return false benutzt.
		Dies dient dazu den faux-Charakter # im href zu ignorieren und somit nicht an den Seitenanfang zu springen.
		
	id="option1_click"
	
		Die id des Optionspunkts musst der des Optionspunkt - Containers + _click entsprechen.
		Bei alleinstehenden Optionspunkten, also ohne Optionspunkt - Container ist der Name der id beliebig.
		
		Beispiel:
		
			Dieser Ausdruck enthält keinen Optionspunkt - Container mit Unterpunkten:
			<a href="index.php" id="willkommen">Willkommen</a>
			
			Dieser Ausdruck enthält einen Optionspunkt - Container mit Unterpunkten:
			<a href="#" id="option1_click" onclick="change_visibility('option1'); return false;">Option 1</a>  <!-- Optionspunkt -->
			<div id="option1">  <!-- Optionspunkt - Container -->
				<a href="#" id="unterpunkt1">Unterpunkt 1</a>  <!--  Unterpunkt -->
			</div>
*/


// Container einblenden
function div_hide(change_id) {
	window.document.getElementById(change_id).style.display='none';
}


// Container ausblenden
function div_show(change_id) {
	window.document.getElementById(change_id).style.display='block';
}


// Funktion zum Einblenden und Ausblenden
function change_visibility(change_id) {	
	// Verstecke Elemente werden eingeblendet (Beim drücken auf den Optionspunkt)
	if (window.document.getElementById(change_id).style.display == 'none') {
		div_show(change_id);
	}
	// Sichtbare Elemente werden ausgeblendet (Beim drücken auf den Optionspunkt)
	else {
		// Nur wenn es sich NICHT um die aktive Seite handelt, da die aktive Seite in der Navigation nicht ausgeblendet werden soll
		if (change_id != aktive_seite)
		{
			div_hide(change_id);
		}
	}
}


// Übergebene Optionspunkt - Container ausblenden
function ausblenden() {
	for (var i=0; i<arguments.length; i++)
	{
		window.document.getElementById(arguments[i]).style.display="none";
	}
}


// Übergebene Optionspunkt - Container einblenden
function einblenden() {
		window.document.getElementById(arguments[0]).style.display="block";
}


// Beim laden der Seite ausgeführte Funktion welche die aktiven Elemente anzeigt und formatiert
function stylechange() {
	/* Standardmässig alle Elemente deaktivieren
	   Hier sollten sie all ihre Optionspunkt - Container eintragen */
	ausblenden('option1','option2');  // Sollten sie alle Punkte immer angezeigt haben wollten können sie diese Zeile löschen
	// Die aktive Seite anzeigen
	einblenden(aktive_seite);
	
	// Wenn es sich um einen Optionspunkt mit Unterpunkten, also einem Optionspunkt - Container handelt
	if (arguments.length > 1)
	{
		// Formatierung des aktiven Optionspunkts
		window.document.getElementById(arguments[0] + "_click").style.background='#0033CC';
		window.document.getElementById(arguments[0] + "_click").style.color='#FFFFFF';
		// Formatierung des aktiven Unterpunkts
		window.document.getElementById(arguments[1]).style.backgroundImage='url(img/javascript/navi.gif)';	
		window.document.getElementById(arguments[1]).style.backgroundRepeat='repeat-y';
		window.document.getElementById(arguments[1]).style.fontWeight='bold';	
	}
	// Wenn der Optionspunkt keine Unterpunkte, also keinen Optionspunkt - Container enthält
	else
	{
		// Formatierung des aktiven Optionspunkts
		window.document.getElementById(arguments[0]).style.background='none';  // none kann durch einen Farbcode in HEX ersetzt werden, z.B. #CCCCCC
	}
}