SlideShow Class

*****************************************************************

SlideShow javascript class by Peter Bailey - Copyright (c) 2003
Contact: me@peterbailey.net
Website: http://www.peterbailey.net/slideshow/

Main Features:
- OO design means low namespace consumption and allows for
multiple SlideShow instances per page
- Auto-creation of SELECT navigation widget
- Can preload images (but doesn't have to)
- Toggle start/end looping
- Slideshow data can be used between shows

Compatibility:
- Tested on IE6 and Mozilla 1.1
- DOM compliant browsers only

Note: This document was created with a tab-spacing of four (4)

******************************************************************/

function SlideShow( imgId, capId, stsId, root, data, pre, loop )
{
this.img = document.images[imgId];
this.cap = ( capId != '' );
this.sts = ( stsId != '' );
this.root = root;
this.slide = 0;
this.data = window[data];
this.pre = pre;
this.loop = loop;

if ( this.cap ) this.capObj = document.getElementById( capId );
if ( this.sts ) this.stsObj = document.getElementById( stsId );
if ( this.pre ) this.preload();
else this.imgsDone = true;

this.img.src = "/images/blank.gif";
if ( this.capObj ) this.capObj.firstChild.nodeValue = "Loading";
this.go(1);
}

SlideShow.prototype.preload = function()
{
var o = this;
this.img.setAttribute( "alt", "Preloading Images...Please Wait" );
this.imgs = new Array();
for ( var i = 0, l = this.data.length; i < l; i++ )
{
this.imgs[i] = new Image();
this.imgs[i].src = this.root + this.data[i][0];
}
this.imgs[--i].onload = function ()
{
o.img.setAttribute( "alt", o.data[o.slide][1] );
o.imgsDone = true;
}
}

SlideShow.prototype.next = function()
{
this.go('next');
}

SlideShow.prototype.prev = function()
{
this.go('prev');
}

SlideShow.prototype.go = function( v )
{
switch ( v )
{
case 'prev':
case 'back':
this.slide--; break;
case 'next':
case 'foward':
this.slide++; break;
default:
this.slide = v - 1;
}
if ( this.slide == -1 ) // Loop from beginning to end
this.slide = ( this.loop ) ? parseInt( this.data.length - 1 ) : 0;
if ( this.slide == this.data.length ) // Loop from end to beginning
this.slide = ( this.loop ) ? 0 : this.slide = this.data.length - 1;

this.img.src = ( this.pre ) ? this.imgs[this.slide].src : this.root + this.data[this.slide][0];
if (this.imgsDone) this.img.setAttribute( "alt", this.data[this.slide][1] );
if (this.cap) this.capObj.firstChild.nodeValue = this.data[this.slide][1];
if (this.sts) this.stsObj.firstChild.nodeValue = "Slide " + ( this.slide + 1 ) + " of " + this.data.length;
if (this.sel) this.sel.selectedIndex = this.slide;
}

SlideShow.prototype.makeSelect = function( containerId, useCaps )
{
var ssObj = this;
var s = document.createElement( "select" );
this.sel = document.getElementById( containerId ).appendChild( s );
if ( document.all )
this.sel.attachEvent( "onchange", function () { changeHandler( event.srcElement, ssObj ) } );
else
this.sel.addEventListener( "change", function ( e ) { changeHandler( e.target, ssObj ) }, false );
this.addOptions( useCaps );

function changeHandler( sel, ss )
{
ss.go( parseInt( sel.options[sel.selectedIndex].value ) + 1 );
}
}

SlideShow.prototype.addOptions = function( useCaps )
{
var o;
for ( var i = 0, len = this.data.length; i < len; i++ )
{
o = document.createElement( "option" );
t = document.createTextNode( ( useCaps ) ? this.data[i][1] : "Picture " + ( i + 1 ) );
o.setAttribute( "value", i );
o.appendChild( t );
this.sel.appendChild( o );
}
}