/*
  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.slides[i].visibility='hidden'; 
	    }
	    
	  }
    
	  this.timeout = timeout;
	  this.current = 0;
	
	  for (var i = 0; i < this.slides.length; i++) {
	    this.slides[i].style.zIndex = this.slides.length - i;
	    this.slides[i].style.visibility = 'visible';
	  }
	
	  Element.setOpacity(slideshow, 1);
	  Element.show(slideshow);
	  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;
      slide.style.visibility = 'visible';
    }

    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;
    setTimeout((function(){this.next();}).bind(this), this.timeout + 850);
  }
}

var imgLoader={
	counter:0,
	throbber: null
}

function cargaSlide(slideshow) {
  this.slides = [];
  this.containers = [];
  var container = document.getElementById('slideshow');
  for(var i = 0; i < container.childNodes.length; i++) {
  	var childNode = container.childNodes[i];
  	if(childNode.nodeName != '#text') {
      var anchor = childNode.childNodes[0];
      var url = anchor.innerHTML;
      this.containers.push(anchor);
      this.slides.push(url);
  	}
  }
  imgLoader.counter = this.slides.length - 1;
  for(var i = 0; i < this.slides.length; i++) { 
    var image=new Image();
    image._container = this.containers[i];
    image.src=this.slides[i];
    image.onload=function(){
      --imgLoader.counter;
    	this._container.innerHTML = '';
      this._container.appendChild(this);
      if(!imgLoader.counter){
      	imgLoader.throbber.style.display='none'; //removeChild();
        new Slideshow('slideshow', 3000);
      }       
    }
  }      
}

function preload() {

  var img = new Image();
  img.src='img/throbber.gif';
  img.style.width = '32px';
  img.style.height = '32px';
  img.style.right = '50%';
  img.style.marginLeft = '430px';   
  img.style.marginTop  = '110px';

  var div = document.createElement('DIV');
  div.style.width = '898px';
  div.style.height = '244px';
  div.style.backgroundColor = '#ffffff';
  div.style.left = '50%';
  div.style.marginLeft = '-449px';
  div.style.zIndex = 10000000;
  document.body.appendChild(div);

  imgLoader.throbber = div;
  
  div.appendChild(img);

  document.getElementById('slideshow').appendChild(div);
  img.onload=function(){   
     cargaSlide('slideshow');
  }       
}