/*
  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 = [];
  this.slidelink = [];
  var nl = $(slideshow).getElementsByTagName('div');
  for (var i = 0; i < nl.length; i++) {
    if (Element.hasClassName(nl[i], 'slide')) {
      this.slides.push(nl[i]);
	  // joel added
	  // create slide link
	  try {
	  	  if (!container) var container = document.getElementById(slideshow);
		  if (!linkcontainer) {
			  var linkcontainer = document.createElement("div");
			  linkcontainer.setAttribute('className','linkcontainer'); /* IE hack */
			  linkcontainer.setAttribute('class','linkcontainer');
			  container.appendChild(linkcontainer);
		  }
		  this.slidelink[i] = document.createElement("a");
		  this.slidelink[i].setAttribute('href','#');
		  this.slidelink[i].onclick = function() {
			/*alert("slides" + Slideshow.prototype.slides.length);
			Slideshow.prototype.next(i);*/
			return false;
		  }
		  var linktext = document.createTextNode(i+1);
		  this.slidelink[i].appendChild(linktext);
		  linkcontainer.appendChild(this.slidelink[i]);
	  } catch(e) {
		alert("error: " + e);  
	  }
    }
  }
  
  // set active slidelink
  this.slidelink[this.slides.length-1].setAttribute('className','active'); /* IE hack */
  this.slidelink[this.slides.length-1].setAttribute('class','active');
  
  this.timeout = timeout;
  this.current = 0;

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

  Element.show(slideshow);
  setTimeout((function(){this.next();}).bind(this), this.timeout + 850);
}
Slideshow.prototype = {
  next: function(showslide) {
	  if(!showslide) var showslide = this.current;
    for (var i = 0; i < this.slides.length; i++) {
      var slide = this.slides[(showslide + i) % this.slides.length];
      slide.style.zIndex = this.slides.length - i;
    }
	
	// joel added
	//set slidelink to active/inactive
	try {
		this.slidelink[showslide].setAttribute('className','active'); /* IE hack */
		this.slidelink[showslide].setAttribute('class','active');
		// highlight effect
		if (this.slidelink[showslide-1]) {
			this.slidelink[showslide-1].setAttribute('className','inactive'); /* IE hack */
			this.slidelink[showslide-1].setAttribute('class','inactive');
		} else if(this.slidelink[this.slides.length-1]) {
			this.slidelink[this.slides.length-1].setAttribute('className','inactive'); /* IE hack */
			this.slidelink[this.slides.length-1].setAttribute('class','inactive');
		}
	} catch(e) {
		alert("error: " + e);	
	}

    Effect.Fade(this.slides[showslide], {
      afterFinish: function(effect) {
        effect.element.style.zIndex = 0;
        Element.show(effect.element);
        Element.setOpacity(effect.element, 1);
      }
    });
    
    this.current = (showslide + 1) % this.slides.length;
    setTimeout((function(){this.next();}).bind(this), this.timeout + 850);
  }
}