/*
  Simple slideshow using prototype and scriptaculous.
  
  Usage:
  
    <script src="prototype.js"></script>
    <script src="effects.js"></script>
    <script src="slideshow.js"></script>
    <style type="text/css">
      #slideshow { position: relative; width: 100px; height: 100px; }
      #slideshow div { position: absolute; left: 0; top: 0; }
    </style>
    <div class="slideshow" id="slideshow">
      <div class="slide"><img src="slide1.jpg"></div>
      <div class="slide"><img src="slide2.jpg"></div>
      <div class="slide"><img src="slide3.jpg"></div>
    </div>
    <script type="text/javascript">new Slideshow('slideshow', 3000);</script>
  
  See also: http://blog.remvee.net/post/17
  
  Copyright (c) 2006 - R.W. van 't Veer
*/
var holder;

function Slideshow(slideshow, num, timeout) {
  this.slides = [];
  var nl = $(slideshow).getElementsByTagName('div');
  for (var i = 0; i < nl.length; i++) {
    if (Element.hasClassName(nl[i], 'slide')) {
      this.slides.push(nl[i]);
    }
  }
  this.timeout = timeout;
  this.current = num;
  holder = this.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;
	}

  Element.show(slideshow);
  t = setTimeout((function(){this.next();}).bind(this), this.timeout + 850);
}
Slideshow.prototype = {
  next: function() {
    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], {
      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;
	holder = this.current;
    t = setTimeout((function(){this.next();}).bind(this), this.timeout + 850);
	}
}

function freeze() {
	clearTimeout(t); 
	for (var i = 1; i < 3; i++) {
		var play = "play"+i;
		var stop = "stop"+i;
		$(play).className = "playStopped";
		$(stop).className = "stopStopped";		
	}
}
function resume() {
	new Slideshow('slideshow', holder, 5000);
	for (var i = 1; i < 3; i++) {
		var play = "play"+i;
		var stop = "stop"+i;
		$(play).className = "playStarted";
		$(stop).className = "stopStarted";		
	}
}

function jump(num) {
	freeze();
	this.current = num;
	holder = num;
	
	this.slides = [];
	var nl = $("slideshow").getElementsByTagName('div');
	for (var i = 0; i < nl.length; i++) {
	  if (Element.hasClassName(nl[i], 'slide')) {
	    this.slides.push(nl[i]);
	  }
	}

	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;
	}
	
}