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

  Changes:
  20.12.06 by Murat Purc (murat@purc.de), Added handling of Elements having display none styles.
*/
var weiter=true;

function toggleweiter() {
	weiter=!weiter;
}

function Slideshow(slideshow, textfeld, loading_id) {
  this.slides = [];
  this.textslides = [];
  this.images = [];
  var nl = $(slideshow).getElementsByTagName('div');
  var tl = $(textfeld).getElementsByTagName('div');
  var bild;
  for (var i = 0; i < nl.length; i++) {
		if (Element.hasClassName(nl[i], 'slide')) {
		  this.slides.push(nl[i]);
		}
		
		this.images[i]=new Image();
		bild=nl[i].getElementsByTagName('img');
		if (bild.length>=1) {
			this.images[i].src=bild[0].src;
		}
  }
  
  for (var i=0;i<tl.length;i++) {
	  if (Element.hasClassName(tl[i], 'slide')) {
			this.textslides.push(tl[i]);
		}
  }
  this.current = 0;
  this.loading_id=loading_id;

  for (var i = 0; i < this.slides.length; i++) {
		this.slides[i].style.zIndex = this.slides.length - i;
		this.textslides[i].style.zIndex = this.textslides.length - i;
		Element.hide(this.slides[i]);
		//alert(this.textslides[i].innerHTML);
		//Element.setStyle(this.textslides[i], {display: 'inline'});
		Element.hide(this.textslides[i]);
  }

  Element.show(slideshow);
  Element.show(textfeld);
  Element.setStyle(this.slides[this.current], {display: 'inline'});
  Element.setStyle(this.textslides[this.current], {display: 'inline'});
}
Slideshow.prototype = {
  start: function(aktpos) {
		for (var i = 0; i < this.slides.length; i++) {
			this.slides[i].style.zIndex = this.slides.length - i;
			this.textslides[i].style.zIndex = this.textslides.length - i;
			Element.hide(this.slides[i]);
			Element.hide(this.textslides[i]);
  		} 
		Element.setStyle(this.textslides[aktpos], {display: 'inline'});
		Element.setStyle(this.slides[aktpos], {display: 'inline'});
		this.current=aktpos;
  },
  
  next: function() {
	  var aktpos=this.current;
	if(this.slides.length>1) 
		{ 
		  var nextpos=(this.current+1) % this.slides.length;
		  if(this.images[nextpos].complete == true && weiter) {
				var disappear = this.slides[aktpos];
				var disappear_text = this.textslides[aktpos];
				var appear = this.slides[nextpos];
				var appear_text = this.textslides[nextpos];
				disappear.style.zIndex=4;
				disappear_text.style.zIndex=3;
				appear.style.zIndex=2;
				appear_text.style.zIndex=1;
				Element.setStyle(appear, {display: 'inline'});
				Element.setStyle(appear_text, {display: 'inline'});
				Effect.Fade(this.slides[aktpos], {
					afterFinish: function(effect) {
						effect.element.style.zIndex = 0;
						Element.show(effect.element);
						Element.setOpacity(effect.element, 1);
						
					}
				});
				Effect.Fade(this.textslides[aktpos], {
					afterFinish: function(effect) {
						effect.element.style.zIndex = 0;
						Element.show(effect.element);
						Element.setOpacity(effect.element, 1);
					}
				});
				Element.setStyle($(this.loading_id), {display: 'none'});
				this.current = nextpos;
		  } else { //noch nicht geladen
				$(this.loading_id).style.zIndex=100;
				//Element.toggle($(this.loading_id));
				Element.setStyle($(this.loading_id), {display: 'inline'});
				setTimeout((function(){this.next();}).bind(this), 100);
		  }
		}
  },
  
  prev: function() {
	  var aktpos=this.current;
	  if(this.slides.length>1) 
	  	{
		  var prevpos=(this.slides.length+this.current-1) % this.slides.length
		  if(this.images[prevpos].complete == true && weiter) {
				var disappear = this.slides[aktpos];
				var disappear_text = this.textslides[aktpos];
				var appear = this.slides[prevpos];
				var appear_text = this.textslides[prevpos];
				
				disappear.style.zIndex=4;
				disappear_text.style.zIndex=3;
				appear.style.zIndex=2;
				appear_text.style.zIndex=1;
				Element.setStyle(appear, {display: 'inline'});
				Element.setStyle(appear_text, {display: 'inline'});
				Effect.Fade(this.slides[aktpos], {
					afterFinish: function(effect) {
						effect.element.style.zIndex = 0;
						Element.show(effect.element);
						Element.setOpacity(effect.element, 1);
						
					}
				});
				Effect.Fade(this.textslides[aktpos], {
					afterFinish: function(effect) {
						effect.element.style.zIndex = 0;
						Element.show(effect.element);
						Element.setOpacity(effect.element, 1);
					}
				});
				Element.setStyle($(this.loading_id), {display: 'none'});
				this.current = prevpos;
		  } else { //noch nicht geladen
				$(this.loading_id).style.zIndex=100;
				//Element.toggle($(this.loading_id));
				Element.setStyle($(this.loading_id), {display: 'inline'});
				setTimeout((function(){this.prev();}).bind(this), 100);
		  }
		}
  }
	  
  
}