/**
 * Example usage: 
 *
 * <script type="text/javascript">
 *   var slideshow = new Slideshow('slideshow', 3, 2000);
 *   document.observe("dom:loaded", function() { slideshow.start(); });
 * </script>
 *
 * ...
 *
 * <!-- Container holding three <div> element, layered using z-index and indexed from 0 -->
 *
 * <div id="container">
 *	 <div class="slide" id="slideshow0" style="z-index : 3">
 *     <img src="/image1.jpg" />
 *     <div class="overlay">Text with a <a href="#">link</a>.</div>
 *   </div>
 *   <div class="slide" id="slideshow1" style="display: none; z-index : 2">
 *     <a href="http://www.bbc.co.uk"><img src="/image2.jpg" /></a>
 *	   <div class="overlay">Different text here.</div>
 *   </div>
 *   <div class="slide" id="slideshow2" style="display: none; z-index : 1">
 *     <img src="/image3.jpg" />
 *	   <div class="overlay">Still more text.</div>
 *   </div>
 * </div>
 */
Slideshow = Class.create({

		/**
		 * Constructor
		 *
		 * @param name the name of the prefix for each element in the slideshow
		 * @param noOfSlides the int number of slides
		 * @param delay time in milliseconds
		 */
	initialize: function(name, noOfSlides, delay) {
			this.name     = name;
			this.noOfSlides = noOfSlides;
			this.delay    = delay;

			this._id      = 0

			this._timer;
			this._debug = false;
			this._console = false;

			this._errorLog = new Array();

		},

	start: function() {
			this._log('Starting ('+ this.name + this._id +')');
			this._timer = setTimeout(this._slide().bind(this), this.delay);
			this._startObserving();
		},

	_slide: function() {
			return function() {
				this._stopObserving();
				this._log('Fading     : '+ this.name + this._id);
				this._transition();
				this._id = (this._id + 1) % this.noOfSlides;
				this._log('Displaying : '+ this.name + this._id);
				this._transition();
				this._startObserving();
				this._timer = setTimeout(this._slide().bind(this), this.delay + 800);
				return this._timer;
			}
		},

	_startObserving: function() {
			this.overbael = this.pause.bindAsEventListener(this);
			this._log('_startObserving() '+ this.name + this._id);
			$(this.name + this._id).observe('mouseover',
											this.overbael);

			this.outbael = this.resume.bindAsEventListener(this);
			$(this.name + this._id).observe('mouseout',
											this.outbael);
		},

	_stopObserving: function() {
			this._log('_stopObserving() '+ this.name + this._id);
			$(this.name + this._id).stopObserving('mouseover',
												  this.overbael);

			$(this.name + this._id).stopObserving('mouseout',
												  this.outbael);
		},

	_transition: function() {
			Effect.toggle(this.name + this._id, 'appear');
			$('imageInfo'+ this._id).fade();

			// logging information, displays the ':' delimited list of binary
			// values, indicating whether the image at that position is visible
			// or hidden, i.e. 3 images, 2nd of which is visible - (0:1:0)

			var message = new Array();
			$A(document.getElementsByClassName('slide'))
				.each(function(slide) {
						  var display = 1;
						  if (slide.style.display == 'none') {
							  display = 0;
						  }

						  id = slide.readAttribute('id');
						  message.push(display);
					  });

			this._log('('+ message.join(':') +')');
		},

	pause: function() {
			this._log('Pausing on image '+ this._id);
			clearTimeout(this._timer);
		},

	resume: function() {
			this._log('Resuming on image '+ this._id);
			this._timer = setTimeout(this._slide().bind(this), this.delay + 800);
		},

	debug: function() {
			this._debug = !(this._debug);
			if (this._debug) {
				this._log('Debugging on....');
				this._log('========================================');
			}

		},

	clearLog: function() {
			this._errorLog = new Array();
			$('message').update(this._errorLog);

		},

	_log: function(message) {
			if (this._debug) {
				this._errorLog.push(message);
				$('message').update(this._errorLog.join('<br />'));

				if (this._console) {
					// firebug
					console.log(message);
				}
			}
		}

	})