$(document).ready(function() {

      
	// EINFÜHRUNG
	// mit $.NAME = { ... } definiert man Javascript-Objekte, die man später
	// einfach im Code aufrufen kann. Innerhalb der Objekte kann man mit
	// machWas:function(){ ... } Funktionen definieren, die sich dann ansprechen lassen
	// in HTML könnte ein Aufruf dann so aussehen:
	// <a href="javascript:$.NAME.machWas();"> ... </a>
	
	
		$.Slider = {
			
			// lastActive ist eine Variable die nur in $.Slider
			// ferfügbar ist und über this.lastActive
			// abgefragt oder gesetzt werden kann
			// sie soll als Merker dienen, um festzuhalten, welches Element
			// zuletzt bewegt wurde.
			// Beim Laden der Seite ist der Wert false, da noch keine Aktion stattfand
			lastActive:false,

			slideUp:function( id ){
				$("#" + id).slideUp(500);
			},
			
			slideDown:function( id ){
				$("#" + id).slideDown(500);
			},
			
			slideToggle:function( id ){
				$("#" + id).slideToggle(500);
			},
 		 	
 			show:function( id ){

 				if( this.lastActive != false){
 					this.slideUp( this.lastActive );
 				}
 				
 				this.slideDown( id );
 				this.lastActive = id;
 			}

 		} // $.Slider
 		
 		$.Fader = {
			
			lastActive:false,

			fadeOut:function( id ){
				$("#" + id).fadeOut(500);
			},
			
			fadeIn:function( id ){
				$("#" + id).fadeIn(500);
			},
			
			fadeToggle:function( id ){
				$("#" + id).fadeToggle(500);
			},
 		 	
 			show:function( id ){

 				if( this.lastActive != false){
 					this.fadeOut( this.lastActive );
 				}
 				
 				this.fadeIn( id );
 				this.lastActive = id;
 			}

 		} // $.Fader


	}); // $(document).ready(function)