Prototype and scriptaculous slideshow

function mran(ma,mi)
   {return(Math.round(Math.random()*(ma-mi))+mi)}
 
	var Slideshow = Class.create({
		 initialize: function(delay, totalElmt, elmtName) {
			this.delay = delay;
			this.totalElmt = totalElmt;
			this.paused = 0;
			this.arrSlideElmt = [totalElmt];
			this.curElmtNum = mran(totalElmt, 1); //randomize first element
		 	//preload all elements into array and preload all images within element
			for (i = 1; i <= totalElmt; i++) {
				this.arrSlideElmt[i] = $(elmtName + i);
				this.arrSlideElmt[i].observe('mouseover', function() { this.paused = 1; }.bind(this));  //pause on mouseover
				this.arrSlideElmt[i].observe('mouseout', function() { this.paused = 0; }.bind(this));  //resume on mouseout
				$$(this.arrSlideElmt[i].img).each(function(img) {	
					img = new Image();
				});
			}
			$$('img.arrow').each(function(node) {  //looks for all arrows (pointing right) and handles click event
				node.observe('click', function(s){
					this.arrSlideElmt[this.curElmtNum].setStyle({
					  display: 'none'
					});
					this.checkSlide();
					this.arrSlideElmt[this.curElmtNum].setStyle({
					  display: 'block'
					});
					s.stop();
				}.bind(this));
			}.bind(this));			
		 },
		start: function() {
			//show first element without effect
			this.arrSlideElmt[this.curElmtNum].setStyle({
			  display: 'block'
			});
			this.executor = new PeriodicalExecuter(function() { 
				this.next(); //start slidehow
			}.bind(this), this.delay);		
		},
 
		next: function(){
			if (!this.paused) {
				this.update();
			}
		},
		update: function() {
			new Effect.Fade(this.arrSlideElmt[this.curElmtNum],{afterFinish:function(){
				this.checkSlide();
				new Effect.Appear(this.arrSlideElmt[this.curElmtNum]);
			}.bind(this)});
		},
		checkSlide: function() {
			if (this.curElmtNum == this.totalElmt) { this.curElmtNum = 1; }
			else { this.curElmtNum ++; }		
		}
	});
 
	window.onload = function() {
		// setTimeout("fadeOut(" + random + ")", 10000);
		totalFeatures = $('rotateFeature').childElements().size();
		var slideshow = new Slideshow(6, totalFeatures, "rotate");
		slideshow.start();
	}
<!--
For this example, a sample slide element looks like this every element id is labled rotate plus #.  should have set this up to not be dependent on the div id #//-->
<div id="rotate2" style="display: none;">
	<div>
		<a href="http://blog.uwgb.edu/inside/index.php/featured/leading-learning/09/17/jackie_nitschke_center/">
			<img src="/univcomm/includes/images/feature/feature4.jpg" alt="Nitschke fans" />
		</a>
		<h5>
			<a href="http://blog.uwgb.edu/inside/index.php/featured/leading-learning/09/17/jackie_nitschke_center/">Nitschke fans</a>
		</h5>
		<p>Marketing students lend hand to AODA center</p>
	</div>
	<a href="http://blog.uwgb.edu/inside/">
		<img src="/files/images/icons/arrow.gif" class="arrow" alt="arrow" />
	</a>
	<p class="featuredConnections"><a href="http://blog.uwgb.edu/inside/">featured connections</a></p>
</div>