/*
  Simple slideshow using prototype and scriptaculous.
  
  Usage:
  
    <script src="prototype.js"></script>
    <script src="effects.js"></script>
    <script src="../../js/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="../../js/slide1.jpg"></div>
      <div class="slide"><img src="../../js/slide2.jpg"></div>
      <div class="slide"><img src="../../js/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
*/

function Slideshow(slideshow, timeout, play) {
  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.slideshow = slideshow;
  this.timeout = timeout;
  this.current = 0;
  this.play = play;
  this.lastSlide = new Date().getTime();

  for (var i = 0; i < this.slides.length; i++) {
    this.slides[i].style.zIndex = this.slides.length - i;
  }

  Element.show(slideshow);
  setTimeout((function(){this.playNext();}).bind(this), this.timeout + 850);
  setTimeout((function(){this.check();}).bind(this), this.timeout + 850);

}

Slideshow.prototype = {
  playNext: function( ) {
    
    if( new Date().getTime() - this.lastSlide < ( this.timeout + 400 ) ) return; 
	
    if( this.play ) {
      previous = this.current;

      Effect.Fade( this.slides[this.current] );
      this.current = (this.current + 1) % this.slides.length;
 
      Effect.Appear( this.slides[this.current] ); 

      this.updateIndex(previous, this.current);

      this.lastSlide = new Date().getTime();
      setTimeout((function(){this.playNext();}).bind(this), this.timeout + 850);	    	
    }
  
  },

  setPlay: function(flag) {
    this.play = flag;
    if(flag) this.next();
  },
  
  next: function() {

      previous = this.current;
      Effect.Fade( this.slides[this.current] );
      this.current = (this.current + 1) % this.slides.length;
      Effect.Appear( this.slides[this.current] ); 

      this.updateIndex(previous, this.current);

      this.lastSlide = new Date().getTime();
      if( this.play ) setTimeout((function(){this.playNext();}).bind(this), this.timeout + 850);		

  }, 
 
  previous: function() {

    previous = this.current;
    Effect.Fade( this.slides[this.current] );
    this.current = ( this.current == 0 ) ? this.slides.length - 1 : this.current - 1;
    Effect.Appear( this.slides[this.current] ); 

    this.updateIndex(previous, this.current);

    this.lastSlide = new Date().getTime();
    if( this.play ) setTimeout((function(){this.playNext();}).bind(this), this.timeout + 850);	
   
  },

  check: function() {
    
    if( this.play && ( new Date().getTime() - this.lastSlide ) > (this.timeout * 3 ) ) {
	this.playNext();
    }
    
    setTimeout((function(){this.check();}).bind(this), this.timeout + 850);	
   
  },

  go: function(index) {

    previous = this.current;
    Effect.Fade( this.slides[this.current] );
    this.current = index - 1; 
    Effect.Appear( this.slides[this.current] ); 

    this.updateIndex(previous, this.current);

    this.lastSlide = new Date().getTime();

  },

  updateIndex: function(previous, current){

    currentId =  this.slideshow + "_" + ( current + 1 );
    previousId = this.slideshow + "_" + ( previous + 1 ); 

    previous = document.getElementById( previousId ); 
    current = document.getElementById( currentId ); 

    if( previous == null ) alert( "can not find div " + previousId );
    if( previous == null ) alert( "can not find div " + currentId );
 
    current.className="selected";
    previous.className="unselected";
  
  }

}