Recommendations for a Slide Show

<?php
/**
 * Snippet for MODx to show rotating images.
 *
 * Copyright (c) 2008 - 2009 TOLRA Micro Systems Limited. All rights reserved.
 *
 * THIS SOFTWARE IS PROVIDED "AS IS" AND WITHOUT ANY EXPRESS OR IMPLIED
 * WARRANTIES, INCLUDING, WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.
 */

if(isset($id)) {
	echo "<div id=\"{$id}_out\"><div id=\"{$id}_in\"></div></div>\n";
	if(!isset($notext))
		echo "<div id=\"{$id}_txt\"></div>\n";

	$xml = @simplexml_load_file($modx->config['base_path'] . 'assets/files/' . $id . '.xml', 'SimpleXMLElement', LIBXML_NOCDATA);
	if($xml !== false && isset($xml->pic)) {
		echo "<script type=\"text/javascript\" src=\"assets/js/imagefade.js\"></script>\n";
		echo "<script type=\"text/javascript\">\n//<![CDATA[\nvar {$id}_images = [\n";
		$first = true;
		foreach($xml->pic as $p) {
			if(isset($p->img)) {
				if(!$first) echo ",\n";
				echo "['$p->img', '" . (isset($p->url) ? $p->url : '') . "', '" . (isset($p->text) ? str_replace("</", "<' + '/", str_replace("'", "\'", $p->text)) : '') . "']";
				$first = false;
			}
		}
		echo "\n];\nvar $id = new imageFade({$id}_images, 5000, '{$id}_out', '{$id}_in', '{$id}_txt', " . (isset($withClicks) ? 'true' : 'false') . ");\n//]]>\n</script>\n";
	}
}

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rotatepics>
	<pic>
		<img>http://jbmaudio.com/Gallery/Sanders/thumbnails/sanders_and_hawk_s_head_015.jpg</img>
		<url>http://jbmaudio.com/Portfolio/</url>
		<text><![CDATA[<p>"...JBM Audio did an excellent job designing a Home Theater and Nuvo Whole House Audio System for our home. The installation was professional and on time..."</p>]]></text>
	</pic>
	<pic>
		<img>http://jbmaudio.com/Gallery/Doughtry/thumbnails/dsc00162.jpg</img>
		<url>http://jbmaudio.com/Portfolio/</url>
		<text><![CDATA[<p>"...I indeed make Tim Allen look like a genius! We do appreciate you letting us interrupt valuable time with your son to get our Cary (Cinema 11a) unit back on track..."</p>]]></text>
	</pic>
<pic>
		<img>"http://jbmaudio.com/Gallery/Doughtry/thumbnails/dsc00162.jpg"</img>
		<url>http://jbmaudio.com/Portfolio/</url>
		<text><![CDATA[<p>"...JBM Audio did a great job of designing and installing a home theatre and audio system perfect for our family's needs..."</p>]]></text>
	</pic>
<pic>
		<img>"http://jbmaudio.com/Gallery/Doughtry/thumbnails/dsc00162.jpg"</img>
		<url>http://jbmaudio.com/Portfolio/</url>
		<text><![CDATA[<p>"...JBM Audio did an amazing job with my home theater/presentation room! Not only did they give me an awesome home theater but they integrated the system to work with my Mac computers..."</p>]]></text>
	</pic>
</rotatepics>

/**
 * Client side code for image fading
 *
 * Copyright (c) 2008 - 2009 TOLRA Micro Systems Limited. All rights reserved.
 *
 * THIS SOFTWARE IS PROVIDED "AS IS" AND WITHOUT ANY EXPRESS OR IMPLIED
 * WARRANTIES, INCLUDING, WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.
 */

function imageFade(images, delay, i1name, i2name, txtname, withclick) {
	var self = this;

	this.handlers = new Array();
	this.images = images;
	this.liveimg = 0;
	this.opacity = 100;
	this.opacityd = -10;
	this.delay = delay;
	this.i1name = i1name;
	this.i2name = i2name;
	this.txtname = txtname;

	this._findHandler = function(target, eventName, fnHandler) {
		for(i in this.handlers) {
			if(this.handlers[i].target == target && this.handlers[i].eventName == eventName && this.handlers[i].fnHandler == fnHandler)
				return i;
		}

		return -1;
	};

	// Attach to an event
	this.observe = function(target, eventName, fnHandler) {
		// if given a string look up the object
		if(typeof target == "string") target = document.getElementById(target);

		// Look for an existing handler
		if(this._findHandler(target, eventName, fnHandler) != -1) return;

		// create wrapper event function to fix browser differences
		var fn = function(evt) {
			evt = evt ? evt : (window.event ? window.event : null);
			if(evt) {
				// For IE convert srcElement to target
				if(!evt.target) evt.target = evt.srcElement;

				// if handler returns false don't run default
				if(!fnHandler(evt)) {
					if(evt.stopPropagation) {
						evt.stopPropagation();
						evt.preventDefault();
					}
					else if(evt.cancelBubble) {
						evt.cancelBubble = true;
						evt.returnValue = false;
					}
					return false;
				}
			}
		};

		// Remember handler
		this.handlers.push({target: target, eventName: eventName, fnHandler: fnHandler, fn: fn});

		// Attach event to object
		if(target.addEventListener)
			target.addEventListener(eventName, fn, false);
		else {
			target.attachEvent("on" + eventName, fn);

			// For IE add unloader to remove all handlers
			if(!window._fusionLibEventUnload) {
				window._fusionLibEventUnload = true;
				this._removeAllEvents = function() {
					for(i in this.handlers) {
						this.handlers[i].target.detachEvent("on" + this.handlers[i].eventName, this.handlers[i].fn);
					}
				}

				var _oldOnUnload = window.onunload;
				if(typeof window.onunload != 'function') window.onunload = this._removeAllEvents;
				else window.onunload = function() { this._removeAllEvents(); _oldOnUnload(); };
			}
		}
	};

	this.onClickImage = function(e) {
		window.location = self.images[self.liveimg][1];
		return false;
	}

	this.animateFade = function() {
		var image2 = document.getElementById(self.i2name);
		image2.style.opacity = self.opacity / 100;
		image2.style.MozOpacity = self.opacity / 100;
		image2.style.filter = "alpha(opacity=" + self.opacity + ")";

		self.opacity += self.opacityd;
		if(self.opacity >= 0)
			setTimeout(self.animateFade, 100);
		else {
			// Faded so make old bg image fade image
			self.opacity = 100;
			image2.style.opacity = self.opacity / 100;
			image2.style.MozOpacity = self.opacity / 100;
			image2.style.filter = "alpha(opacity=" + self.opacity + ")";

			self.liveimg = (self.liveimg + 1) % self.images.length;
			image2.style.backgroundImage = 'url(' + self.images[self.liveimg][0] + ')';

			// Set next as fade
			document.getElementById(self.i1name).style.backgroundImage = 'url(' +self.images[(self.liveimg+1) % self.images.length][0] + ')';

			var e = document.getElementById(self.txtname);
			if(e)
				e.innerHTML = self.images[self.liveimg][2];

			// Wait and start animating
			setTimeout(self.animateFade, self.delay);
		}
	}

	if(withclick) {
		this.observe(typeof withclick == 'string' ? withclick : this.i2name, 'click', this.onClickImage);
	}

	document.getElementById(this.i2name).style.backgroundImage = 'url(' + this.images[this.liveimg][0] + ')';
	document.getElementById(this.i1name).style.backgroundImage = 'url(' + this.images[this.liveimg+1][0] + ')';
	var e = document.getElementById(this.txtname);
	if(e)
		e.innerHTML = this.images[this.liveimg][2];

	setTimeout(this.animateFade, this.delay);
}