/*
  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
*/

function Slideshow(slideshow, 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 = 0;
  this.pauzed = false;
  this.pauzed_zindex = 0;
  this.pauzed_slide = 0;
  
   for (var i = 0; i < this.slides.length; i++) {
    this.slides[i].style.zIndex = this.slides.length - i;
  }  

  Element.show(slideshow);
  
     
  //if (!document.getElementById('imgslideshowbox_'+this.current)) return;
 // var imgcolor = document.getElementById('imgslideshowbox_'+this.current).getAttribute('imgcolor');
  //document.getElementById('imgslideshowbox_'+this.current).src = imgcolor;  
  if (this.slides.length > 1)
   this.timerid = setTimeout((function(){this.next();}).bind(this), this.timeout + 850);
   
   
   Slideshow.prototype.reset = function()
   {
   	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 = 0;
	  this.pauzed = false;
	  this.pauzed_zindex = 0;
	  this.pauzed_slide = 0;
	  
	   for (var i = 0; i < this.slides.length; i++) {
	    this.slides[i].style.zIndex = this.slides.length - i;
	  }  

  Element.show(slideshow);
   }     
   
    
   Slideshow.prototype.unpauze = function(buttonnr)
   {    
       this.slides[this.pauzed_slide].style.zIndex = this.pauzed_zindex;
       
       //var org = document.getElementById('imgslideshowbox_'+buttonnr).getAttribute('org');
       //document.getElementById('imgslideshowbox_'+buttonnr).src = org;
       
       //var colorimg = document.getElementById('imgslideshowbox_'+this.current).getAttribute('imgcolor');
       //document.getElementById('imgslideshowbox_'+this.current).src = colorimg;
       
       this.pauzed = false;
       this.timerid = setTimeout((function(){this.next();}).bind(this), this.timeout + 850);
   }
  
  Slideshow.prototype.pauze = function(buttonnr)
   {
   
      for (var i = 0; i < this.slides.length; i++) {
         var slide = this.slides[(this.current + i) % this.slides.length];     
         //var org = document.getElementById('imgslideshowbox_'+i).getAttribute('org');
         //document.getElementById('imgslideshowbox_'+i).src = org;
      }
      
      //alert(buttonnr);
       clearTimeout(this.timerid);
       this.pauzed = true;
       this.pauzed_slide = buttonnr;
       this.pauzed_zindex = this.slides[buttonnr].style.zIndex;
       this.slides[buttonnr].style.zIndex = 100;
   }
  
}




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;
      //document.getElementById('imgslideshowbox_'+i).src = '/images/sli_but_0' + (i+1) + '.gif';
      
        //var org = document.getElementById('imgslideshowbox_'+i).getAttribute('org');
        //document.getElementById('imgslideshowbox_'+i).src = org;
    }

    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;
    //document.getElementById('imgslideshowbox_'+this.current).src = '/images/sli_but_0' + (this.current+1) + '_on.gif';
    //var imgcolor = document.getElementById('imgslideshowbox_'+this.current).getAttribute('imgcolor');
      //document.getElementById('imgslideshowbox_'+this.current).src = imgcolor;
    
    if (!this.pauzed)
    {
      this.timerid = setTimeout((function(){this.next();}).bind(this), this.timeout + 850); 
    }
    
  }
}