function changeTab(domElement){
    	var reiter  = getReiter(domElement);

        // Verberge alle Container
        $('.reiternavi_content').hide();
        // Zeige gewaehlten Container
        $('#reitercontainer-' + reiter.rt_nummer).show();

        // style alle reiter einheitlich => lowTab
        $('.reiternavi_reiter').removeClass('highTab');
        $('.reiternavi_reiter').removeClass('noBorder');
        $('.reiternavi_reiter').addClass('lowTab');

        // style aktiven Reiter
        $(domElement).addClass('highTab');
        $(domElement).removeClass('lowTab');
        var SIBLINGS  = $('#' + reiter.rt_nummer + ' ~ .reiternavi_reiter');
        if (typeof(SIBLINGS[0]) != 'undefined') { $(SIBLINGS[0]).addClass('noBorder'); }

        trackCurrentElements(reiter);
    }
    
    /**
     * Diese Funktionen kann auf der Seite aufgerufen werden, um den Switch der Tabs ohne Neuladen durchzuführen.
     * @param number
     */
    function openTabNumber(number){
    	var tabs = $('.reiternavi_reiter');
    	if (typeof(tabs) == 'object') {
    		if (number >= 0 && number < tabs.length ) {
    			changeTab(tabs[number]);	
    		}
    	}
    }
    
/**
 * Fuehre die folgenden Javascript-Funktionen erst aus, wenn das DOM
 * vollstaendig geladen wurde.
 */

$(document).ready(function() {
    /**
     * Implementierung einer Reiterlogik.
     * Bei Klick auf einen Reiter wird dieser gehighlighted und der dazu-
     * gehoerige Content-Container angezeigt. Die anderen Reitercontainer
     * werden ausgeblendet.
     *
     * Folgender Quelltext muss für eine Reiternavigation verwendet werden:
     *
     * <div class="reiternavi">
     *     <table cellspacing="0" cellpadding="0" border="0" class="tabLine">
     *         <tbody>
     *             <tr>
     *                 <td width="TABWIDTH" id="REITER_NAME-ID" class="TABCLASS reiternavi_reiter">
     *                     <div class="tabText">REITER_TITEL</div>
     *                 </td>
     *                 [...]
     *                 <td class="tabFill"> </td>
     *             </tr>
     *         </tbody>
     *     </table>
     * </div>
     *
     * Je nach Anzahl der Reiter müssen entsprechend viele Tabellenzellen
     * eingefuegt sein.
     *
     * Auszerdem muss der Content des Reiters mittels eigenem Container
     * gekennzeichnet sein.
     *
     * <div class="reiternavi_content" id="reitercontainer-ID" style="DISPLAY: block; MARGIN-RIGHT: 0px">
     *     [...]
     * </div>
     *
     * Die Anzahl der Reiter wird gewoehnlich serverseitig dynamisch bestimmt
     * und das HTML-Geruest abhaengig davon aufgebaut.
     *
     * @see axaweb/js/functions.js/getReiter()
     */
    $('.reiternavi_reiter').click(function() {
    	changeTab(this);
    });

	var locationReiter = window.location.search.indexOf("reiter=");
	if(locationReiter != -1){
		locationReiter = locationReiter +7;
		var nextAmp = window.location.search.indexOf("&", locationReiter);
		if (nextAmp != -1){
			reiter = window.location.search.substring(locationReiter ,nextAmp);
		}else{
			reiter = window.location.search.substring(locationReiter);
		}
		
		openTabNumber(reiter);
	}
   

});