JavaScript Step Carousel + jScrollPane = Problem mit dynamischem Inhalt

[RemoteC]

Servus!

Ich verwende auf einer Seite folgende zwei Skripte:
- stepcarousel
- JScrollPane

Nun soll sich der Content in einem bestimmten DIV mit jedem Bild ändern. Das geht noch mit Status Variablen vom Carousel.

...
onslide:function(){
		 if(statusA=='1') {
		 	document.getElementById('right').innerHTML = '<p>It works!</p>';
		 }
		 else if(statusA=='2') {
		 	document.getElementById('right').innerHTML = '<p>You see the text to the 2nd picture</p>';
		 }
                 ...
                 ...
		 else {
		 	document.getElementById('right').innerHTML = '<p>default Text to be applied here!</p>';
		 }
   		}

Dem <div id="right" class="scroll-pane"> habe ich einen JScrollPane zugeordnet. Ohne dynamische Änderung des Content funktioniert das auch. Leider lässt sich der JScrollPane nicht neu initialisieren sobald sich der Content ändert. Folgendes habe ich probiert:

function refreshNav() {
    var pane = jQuery('.scroll-pane').jScrollPane({});		
    var api = pane.data('jsp');
    api.reinitialise();
}

Oben habe ich im if jeweils noch ein refreshNav(); nach der Änderung von innerHTML eingefügt.
Der ScrollPane wird aber nicht angezeigt. Nur eine Ausnahme: Wenn ich die Seite aktualisiere wenn gerade ein Bild mit längerem Text angezeigt wird, dann lädt auch der Scrollbalken. Sobald dann aber das nächste Bild kommt und ich wieder zurück gehe, ist der Text abgeschnitten.

Ich habe auch schon ein autoReinitialise probiert, wäre zwar von der Performance schlechter aber Hauptsache es funktioniert irgendwie. Leider ohne Erfolg.

Was muss ich machen damit jScrollPane neu initialisiert wird wenn sich das Bild (und damit der Content) ändert?

Hier noch einmal der komplette JS Code auf der Seite:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/stepcarousel.js">
    /***********************************************
    * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/   
    </script>   
    <script type="text/javascript">
    stepcarousel.setup({
        galleryid: 'mygallery', //id of carousel DIV
        beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
        panelclass: 'panel', //class of panel DIVs each holding content
        autostep: {enable:true, moveby:1, pause:6000},
        panelbehavior: {speed:1000, wraparound:true, wrapbehavior:'slide', persist:true},
        defaultbuttons: {enable: false, moveby: 1, leftnav: ['images/1329924344_monotone_arrow_left_small.png', -35, 80], rightnav: ['images/1329924326_monotone_arrow_right.png', -85, 80]},
        statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
        contenttype: ['inline'], //content setting ['inline'] or ['ajax', 'path_to_external_file']
		onslide:function(){
		 if(statusA=='1') {
		 	document.getElementById('right').innerHTML = '<p>It works!</p>';
		 }
		 else if(statusA=='2') {
		 	document.getElementById('right').innerHTML = '<p>You see the text to the 2nd picture</p>';
		 }
		 else if(statusA=='5') {
		 	document.getElementById('right').innerHTML = '<h3>Utah Teapot</h3><p>Lieber Kunde und Leser, falls Sie keine Probleme haben, diesen Blindtext schnell und zügig zu lesen, können Sie sich glücklich schätzen. Der verantwortliche Art Director, der Ihnen höchstwahrscheinlich gerade diesen Entwurf präsentiert, versteht sein typografisches Handwerk par excellence.</p><p>Er hat diesen Copyblock weder gestaucht, gezerrt, noch in Versalien oder gar in 6 Punkt Eurostile Outline gesetzt. Er hat ihn ganz einfach lesbar gemacht. Offenbar sogar ziemlich gut, sonst hätten Sie wohl schon einige Zeilen zuvor die Leselust verloren.</p>';
			refreshNav();
		 }
		 else {
		 	document.getElementById('right').innerHTML = '<p>default Text to be applied here!</p>';
		 }
   		}
	
	})
    </script>
    <!--ENDE jQuery + Carousel Gallery --> 
    <!--START jScrollPane Scrollbalken -->
    	<!-- the mousewheel plugin - optional to provide mousewheel support -->
		<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    	<!-- the jScrollPane script -->
    	<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
        <script type="text/javascript" id="sourcecode">
			jQuery.noConflict();
			jQuery(function()
			{
				jQuery('.scroll-pane').jScrollPane(
					{
					verticalDragMinHeight: 40,
					verticalDragMaxHeight: 40,
					horizontalDragMinWidth: 10,
					horizontalDragMaxWidth: 10,
					contentWidth:220, /*Breite von #right*/
					maintainPosition: false
					}
				);
			});
			function refreshNav() {
	var pane = jQuery('.scroll-pane').jScrollPane({});		
    var api = pane.data('jsp');
    api.reinitialise();
}

		</script>
    <!--ENDE jScrollPane Scrollbalken -->