/*
  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, period,  fadeDuration) {
  this.slides = []; 
  var nl = $(slideshow).getElementsByTagName('*');
  for (var i = 0; i < nl.length; i++) {
    if (Element.hasClassName(nl[i], 'slide')) {
      this.slides.push(nl[i]);
    }
  }
  this.period = period * 1000;
  this.duration = fadeDuration ? fadeDuration : 5;
  this.current = 0;

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

  Element.show(slideshow);
  this.timeout = setTimeout((function(){this.next();}).bind(this), this.period + 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;
    }

    var currentSlide = this.slides[this.current];

    //todo: http://wiki.script.aculo.us/scriptaculous/show/GivingElementsLayout
    if(!currentSlide.getInlineOpacity)
    {
      currentSlide.style.zIndex = 0;
    }
    else
    {
      Effect.Fade(this.slides[this.current], {
        duration: this.duration,
        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.timeout = setTimeout((function(){this.next();}).bind(this), this.period + 850);
  },
  forceNext: function()
  {
    clearTimeout(this.timeout);
    this.next();
  },
  previous: function() {

    var previous = this.current == 0 ? this.slides.length - 1 : this.current - 1;
    var prevSlide = this.slides[previous];
    Element.hide(prevSlide);
    prevSlide.style.zIndex = this.slides.length;

    //todo: http://wiki.script.aculo.us/scriptaculous/show/GivingElementsLayout
    var slides = this.slides;
    var current = this.current;
    if(!prevSlide.getInlineOpacity)
    {
      Element.show(prevSlide);
      for (var i = slides.length - 1; i >= 0; i--) {
        var slide = slides[(current + i) % slides.length];
        slide.style.zIndex = i;
      }
    }
    else
    {
      Effect.Appear(prevSlide, {
        duration: this.duration,
        afterFinish: function(effect) {
          for (var i = slides.length - 1; i >= 0; i--) {
            var slide = slides[(current + i) % slides.length];
            slide.style.zIndex = i;
          }
        }
      });
    }

    this.current = previous;

    this.timeout = setTimeout((function(){this.next();}).bind(this), this.period + 850);
  },
  forcePrevious: function()
  {
    clearTimeout(this.timeout);
    this.previous();
  }
}

function sizeToFit()
{
  var NS = (navigator.appName=="Netscape")?true:false;
  iWidth = (NS)?window.innerWidth:document.body.clientWidth;
  iHeight = (NS)?window.innerHeight:document.body.clientHeight;
  iWidth = document.images[0].width - iWidth;
  iHeight = document.images[0].height - iHeight;
  window.resizeBy(iWidth, iHeight);
  self.focus();
}

function openScreenshot(URL)
{
  window.open(URL, "", "resizable=1,width=500,height=700");
} 

function setup()
{
	var features = document.getElementsByClassName('feature');
	for (var i = 0; i < features.length; i++)
	{
		features[i].style.position = 'absolute';
	}
}