/*
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++ Bilderreihenfolge beachten!
+++++ Im Scriptteil fader.images = [: 
	  An erster Stelle in der Liste Bild#2,
	  dann beliebige Reihenfolge, 
	  an letzter Stelle in der Liste Bild#1.
+++++ Im <div id="divimage" style="background-image:url(../swfs/images/gastrorest2.jpg); 
	  das Bild#2 einbinden.
+++++ Im <img id="image" src="../swfs/images/gastrorest1.jpg" 
	  Das Bild#1 einbinden. 
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


<script type="text/javascript" src="../JS/Fader.js" language="javascript"> </script>
<script type="text/javascript" language="javascript">
<!--
var fader = new Fader('divimage','image');
fader.images = [  '../swfs/images/gastrorest2.jpg', '../swfs/images/gastrorest3.jpg', '../swfs/images/gastrorest4.jpg', '../swfs/images/gastrorest5.jpg', '../swfs/images/gastrorest6.jpg', '../swfs/images/gastrorest7.jpg', '../swfs/images/gastrorest8.jpg', '../swfs/images/gastrorest1.jpg', ];
fader.timeout = 4000;
fader.transition = 'BLEND';
fader.preload = true;
fader.transition_timeout = 20;
-->
</script>

<div id="divimage" style="background-image:url(../swfs/images/gastrorest2.jpg);width:401px;height:224px;background-repeat:no-repeat;" ><img id="image" src="../swfs/images/gastrorest1.jpg" style="-moz-opacity:1.0;filter:alpha(opacity=100);" /></div>
	 


fader.timeout = 4000;
fader.transition = 'BLEND';
fader.preload = true;
fader.transition_timeout = 100;
*/

function Fader( div_id, elem_id )
{
	this.elem_id = elem_id;
	this.div_id = div_id;
	this.images = new Array();
	this.timeout = 4000;
	this.transition = 'BLEND';
	this.preload = true;

	this.image_ct = 0;
	this.images_cnt = 0;
	this.timer = false;
	this.imgs = new Array();
	this.current_transition = 100;
	this.transition_timeout = 100;
	this.transition_dir = -1;

	this.Start = function()
	{
		this.images_cnt = this.images.length;
		if( this.preload )
			this.Preload();

		var self = this;
		this.timer = setTimeout( function(){self.TransitionBlend();}, this.timeout );
	}

	this.Preload = function()
	{
		for( i=0; i<this.images_cnt; i++ )
		{
			this.imgs[ i ] = new Image();
			this.imgs[ i ].src = this.images[ i ];
		}
	}

	this.Next = function()
	{
		var elem = document.getElementById( this.elem_id );
		elem.src = this.imgs[ this.image_ct ].src;
	}

	this.NextBg = function()
	{
		this.image_ct++;
		if( this.image_ct >= this.images_cnt )
			this.image_ct = 0;

		if( !this.imgs[ this.image_ct ] )
		{
			this.imgs[ this.image_ct ] = new Image();
			this.imgs[ this.image_ct ].src = this.images[ this.image_ct ];
		}

		var elem = document.getElementById( this.div_id );
		elem.style.backgroundImage = 'url('+this.imgs[ this.image_ct ].src+')';
	}

	this.TransitionBlend = function()
	{
		var step = 15;
		var max_transition = 100;

		var min_transition = 0;

		this.current_transition += step * this.transition_dir;

		if( this.transition_dir == 1 )
		{
			if( this.current_transition >= max_transition )
				this.current_transition = max_transition;
		}
		else
		{
			if( this.current_transition <= min_transition )
				this.current_transition = min_transition;
		}
		if( this.current_transition == max_transition )
			this.NextBg();

		var elem = document.getElementById( this.elem_id );
		if( elem.filters )
			elem.filters.alpha.opacity = this.current_transition;
		elem.style.MozOpacity = this.current_transition / 100;

		if( this.transition_dir == 1 && this.current_transition >= max_transition )
		{
			this.transition_dir = -1;
			var self = this;
			this.timer = setTimeout( function(){self.TransitionBlend();}, this.timeout );
			return;
		}
		else if( this.transition_dir == -1 && this.current_transition <= min_transition )
		{
			this.Next();
			this.transition_dir = 1;
		}

		var self = this;
		this.timer = setTimeout( function(){self.TransitionBlend();}, this.transition_timeout );
	}
}