/* Basic Javascript Slideshow
	Author:	Paul Sayre
	Date:	2007-01-11

Prototype.js and Scriptaculous.js are both required frameworks

Notes:
	- You can only have one slideshow on a page.
	- And image larger then the specified w/h is cropped
	- This slideshow.js also supports the deprecated fadeshow

Required:
	- Height: (Number)
		Height (in pixels) of the images
		If none set, will use first images height 
	- Width: (Number)
		Width (in pixels) of the images 
		If none set, will use first images width
		Any image larger is cropped 
	
Options:
	- CSS: (JSON)
		CSS to apply to the wrapper div
		Example of CSS JSON ==> http://prototypejs.org/api/element/setStyle
	- Delay: (Number)
		Time (in seconds) between slide transitions
	- Duration: (Number)
		Time (in seconds) length of transition
	- Effect: (Function)
		The function executed as transition
		Do not include '()'
		Any image larger is cropped
	- Pause: (Boolean)
		Determines if the images rotate
	- Random: (Boolean)
		Determines if the images are in random order

Avalible Stable Effects: (As of Script.aculo.us v1.8.1)
- Effect.BlindUp
- Effect.Fade
- Effect.DropOut
- Effect.Squish
- Effect.Shrink

Examples: (All do the same)
	var ssi = new Array();
	ssi[ssi.length] = "images/image1.jpg";
	ssi[ssi.length] = "images/image2.jpg";
	ssi[ssi.length] = "images/image3.jpg";
	new Slideshow(ssi, 559, 195, {css: {opacity: 1, border: '0px'}, duration: .5, delay: 5});
				OR
	var ssi = new Array();
	ssi[0] = "images/image1.jpg";
	ssi[1] = "images/image2.jpg";
	ssi[2] = "images/image3.jpg";
	new Slideshow(ssi, 559, 195, {effect: Effect.Fade});
				OR
	new Slideshow(["images/image1.jpg", "images/image2.jpg", "images/image3.jpg"], 559, 195);
				OR (Old)
	var fsi = new Array();
	fsi[0] = ["images/image1.jpg", "", ""];
	fsi[1] = ["images/image2.jpg", "", ""];
	fsi[2] = ["images/image3.jpg", "", ""];
	new fadeshow(fsi, 559, 195, 0, 5000);
*/
function Slideshow(imgs, width, height, options) {
	// Defaults
	var delay = 5;
	var duration = .5;
	var effect = Effect.Fade;
	var random = false;
	var pause = imgs.length < 2;
	
	// Custom Options
	if(options) {
		if(Object.isNumber(options.delay)) delay = options.delay;
		if(Object.isNumber(options.duration)) duration = options.duration;
		if(Object.isFunction(options.effect)) effect = options.effect;
		random = options.random;
		pause = options.pause;
	}
	
	// Display Images
	document.writeln('<div id="slideshowframe" style="height: '+height+'px; width: '+width+'px; overflow: hidden; background: url('+imgs[0]+') no-repeat;">');
	document.writeln('	<img id="slideshowimg" src="'+imgs[0]+'" />');
	for(var i=1; i<imgs.length; i++)
		document.writeln('	<img src="'+imgs[i]+'" style="display: none;" />');
	document.writeln('</div>');
	
	var div = $('slideshowframe');
	var img = $('slideshowimg');
	var cur = 0;
	if(options && options.css)
		div.setStyle(options.css);
	
	// Slide Transition
	if(!pause) new PeriodicalExecuter(function(){
		img.setStyle({display: 'block'});
		img.src = imgs[cur++ % imgs.length];
		if(random) cur = parseInt(Math.random() * imgs.length);
		div.setStyle({background: 'url('+imgs[cur % imgs.length]+') no-repeat'});
		effect(img, {duration: duration});
	}, delay);
}

// Old API
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
function fadeshow(images, width, height, border, delay, pause, optionalRandomOrder) {
	for(var i=0; i<images.length; i++)
		images[i] = images[i][0];
	delay /= 1000 // Convert from milliseconds to seconds
	pause = pause == 1;
	new Slideshow(images, width, height, {delay: delay, pause: pause, random: optionalRandomOrder, css: {border: border+'px solid #000000'}});
}