/*
  Slideshow usage
  See also: http://blog.remvee.net/post/17
    <style type="text/css">
      #<slideshow container div> { position: relative; width: 100px; height: 100px; }
      #<slideshow container div> div { position: absolute; left: 0; top: 0; }
    </style>
    <div class="slideshow" id="<slideshow container div>">
      <div class="pageimage-slide"><img src="slide1.jpg"></div>
      <div class="pageimage-slide"><img src="slide2.jpg"></div>
      <div class="pageimage-slide"><img src="slide3.jpg"></div>
    </div>
*/

Event.observe(window, 'load', init);

var mySlideshow = null;

function init(){
	var container = "hero";
  	var timeout = "5";
	mySlideshow = new slideshow(container,timeout);
}

function slideshow(container,timeout) {
  this.slides = [];
  var nl = $(container).getElementsByTagName('div');
  for (var i = 0; i < nl.length; i++) {
    if (Element.hasClassName(nl[i], 'pageimage-slide')) {
      this.slides.push(nl[i]);  
    }
  }
  this.timeout = timeout;
  this.current = 0;
  for (var i = 0; i < this.slides.length; i++) {
    this.slides[i].style.zIndex = this.slides.length - i;
	this.slides[i].style.display = 'block';
  }  
  Element.show(container);
  this.timer = setTimeout((function(){this.next();}).bind(this), this.timeout + '999');
}

slideshow.prototype = {
	
	show: function($current){
	
		clearTimeout( this.timer );
		this.current = $current;
		
		for (var i = 0; i < this.slides.length; i++) {
			var slide = this.slides[(this.current + i) % this.slides.length];
			slide.style.zIndex = this.slides.length - i;
		}
		
		var $delay = (parseFloat(this.timeout) + 4) + '999'; //add 4 secs to the timeout
		this.timer = setTimeout((function(){this.next();}).bind(this), $delay);
	},

	next: function($current) { 
	
		for (var i = 0; i < this.slides.length; i++) {
			var slide = this.slides[(this.current + i) % this.slides.length];
			slide.style.zIndex = this.slides.length - i;
		}
		
		Effect.Fade(this.slides[this.current], {
			duration:1,
			afterFinish: function(effect) {
				effect.element.style.zIndex = 0;
				Element.show(effect.element);
				Element.setOpacity(effect.element, 1);
			}
		});

		this.current = (this.current + 1) % this.slides.length;
		this.timer = setTimeout((function(){this.next();}).bind(this), this.timeout + '999');
	}
};