/*
Includes: 

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
*/


/* Die Klasse für ein Image und eine bewegungsrichtungsanweisung(String) */
var MotionImage = Class.create({
	
	initialize: function(imageURL, direction)
	{
		this.image=new Image();
		this.image.src=imageURL;
		
		this.direction = direction; // Direction kann sein: "left" oder "right"
	},
	
	getImage: function()
	{
		return this.image;
	},
	
	getDirection: function()
	{
		return this.direction;
	}

});



/*
Die Klasse für MotionViewer */

var MotionViewer = Class.create({
	
		initialize: function(width, height, mymotionImageArray, animationDelay)
		{
			this.width = width;
			this.height = height;
			this.motionImageArray = mymotionImageArray;
			this.index = -1;
			this.animationDelay = animationDelay; // Die milisekunden die gewartet werden beim moveLeft() oder moveRight() bis das Bild ein Schritt weiter animiert wird
			
			this.animationIsRunning = false;
			
			var loadingPictureHeight = 50; // Höhe des Laden-Bildes BITTE ÄNDERN FALLS ANDERES BILD AUSGEWÄHLT WIRD
			var marginTop = Math.floor((height/2)- (loadingPictureHeight/2)); // Oberer abstand zum zentrieren
			
			
			document.writeln('<table cellpadding="0" cellspacing="0">');
			document.writeln('<tr>');
			document.writeln('	<td id="MotionViewer" valign="middle" align="center" style="width:'+width+'px;height:'+height+'px;">');
					
			document.writeln('		<div id="MotionViewerContainer" style="display:none;"></div>');
			document.writeln('		<div id="MotionViewerLoader" style="display:none;"><img src="images/MotionViewer/loading.gif" alt="Loading" /><div>');
					
			document.writeln('	</td>');
			document.writeln('</tr>');
			document.writeln('</table>');
		
		},
		
		loadImage: function()
		{
			//if (i>this.index || i<0) throw "Index out of Bounds";
			if (this.motionImageArray[this.index].getImage().complete==true)
			{
				return true;
				
			}
			else
			{
				setTimeout(this.loadImage, 200);
			}
		},
		
		
		setStartRight: function()
		{
			this.animationIsRunning = true;
			document.getElementById('MotionViewerContainer').style.backgroundPosition=""+(this.width - this.motionImageArray[this.index].getImage().width)+"px 0px";
		},
		
		setStartLeft: function()
		{
			this.animationIsRunning = true;
			document.getElementById('MotionViewerContainer').style.backgroundPosition="0px 0px";
		},
		
		stop: function()
		{
			this.animationIsRunning=false;
			setTimeout("",150);
		},
		
		
		moveRight: function()
		{
				if (this.animationIsRunning)
			{
					
				// Background Position muss nach Links, also mehr ins Negative!
				var mv = (document.getElementById('MotionViewerContainer').style);
				
				var temp = new Array();
				temp= (mv.backgroundPosition).split('px');
				
				var x=(temp[0]);
				
				
				var moveUntil = 0;
				
				if(x<moveUntil)
				{
					// Wenn x noch kleiner als moveUntil (0), dann muss noch bewegt werden
					x++; // einen Pixel nach rechts bewegen
					mv.backgroundPosition=""+x+"px 0px";
					
					// Trick mit self um den richtigen referenz aufzurufen
					var self = this;
					setTimeout(function(){self.moveRight();}, this.animationDelay);
				}
				else
				if(x==moveUntil) // Wenn x = until, dann ist die Animation beendet und das nächste Bild ist dran
					this.next(); // nächste Bild animieren
				
			} // Ende animation is Running
		
		},
		
		
		
		moveLeft: function()
		{
			
			if (this.animationIsRunning)
			{
					
				// Background Position muss nach Links, also mehr ins Negative!
				var mv = (document.getElementById('MotionViewerContainer').style);
				
				var temp = new Array();
				temp= (mv.backgroundPosition).split('px');
				
				var x=(temp[0]);
				
				//var posLeft= motionViewer.
			
				var moveUntil = this.width - this.motionImageArray[this.index].getImage().width;
				
				if(x>moveUntil)
				{
					// Wenn x noch gößer als moveUntil, dann muss noch bewegt werden
					x--; // einen Pixel nach links bewegen
					mv.backgroundPosition=""+x+"px 0px";
					
					// Trick mit self um den richtigen referenz aufzurufen
					var self = this;
					setTimeout(function(){self.moveLeft();}, this.animationDelay);
				}
				else
				if(x==moveUntil) // Wenn x = until, dann ist die Animation beendet und das nächste Bild ist dran
					this.next(); // nächste Bild animieren
				
			} // Ende animation is Running
		},
		
		
		switchImage: function(i)
		{
			
				this.index = i;
				this.stop();
				
				// Laden anzeigen
				if(this.motionImageArray[this.index].getImage().complete==false)
				{
					// Falls bild noch nicht geladen ist
					
					// Loading anzeigen
					Effect.Appear('MotionViewerLoader', {MotionViewer:this, afterFinish:function()
						{
							this.MotionViewer.loadImage();
						}
						});
					
				// Loading verstecken und Bild anzeigen
					Effect.Fade('MotionViewerLoader', { myMotionViewer:this, afterFinish: function()
							{
						Effect.Fade('MotionViewerContainer',{duration:0.5, MotionViewer: this.myMotionViewer, afterFinish: function()
								{
									
									document.getElementById('MotionViewerContainer').style.backgroundImage="url("+
									this.MotionViewer.motionImageArray[this.MotionViewer.index].getImage().src+")"; // Bild einsetzen
									
									// Animation vorbereiten
									if (this.MotionViewer.motionImageArray[this.MotionViewer.index].getDirection()
														== "left")
													{
														this.MotionViewer.setStartLeft();
														this.MotionViewer.moveLeft();
													}
													else
													if (this.MotionViewer.motionImageArray[this.MotionViewer.index].getDirection()
														== "right")
													{
														this.MotionViewer.setStartRight();
														this.MotionViewer.moveRight();
													}
												
											
											
									Effect.Appear('MotionViewerContainer',{duration:0.5	}); // Bild erscheinen lassen
								}
								});

					    	}
					});
				} // Ende if
				else
				{
						// falls bild bereits geladen
						
						// Das alte Bild ausblenden, das neue Einblenden
						Effect.Fade('MotionViewerContainer',{duration:0.5, MotionViewer: this, afterFinish: function()
								{
									
									document.getElementById('MotionViewerContainer').style.backgroundImage="url("+
									this.MotionViewer.motionImageArray[this.MotionViewer.index].getImage().src+")"; // Bild einsetzen
											
									// Animation vorbereiten
									if (this.MotionViewer.motionImageArray[this.MotionViewer.index].getDirection()
														== "left")
													{
														this.MotionViewer.setStartLeft();
														this.MotionViewer.moveLeft();
													}
													else
													if (this.MotionViewer.motionImageArray[this.MotionViewer.index].getDirection()
														== "right")
													{
														this.MotionViewer.setStartRight();
														this.MotionViewer.moveRight();
													}
												
											
									Effect.Appear('MotionViewerContainer',{duration:0.5}); // Bild erscheinen lassen
								}
						});
						
						
				}
				
			
		},
		
		next: function()
		{
			if (this.motionImageArray.length<=0)
				alert("No MotionImages set!");
			else
				this.switchImage((this.index +1) % this.motionImageArray.length);
		},
		
		previous: function()
		{
			if (this.motionImageArray.length<=0)
				alert("No MotionImages set!");
			else
				this.switchImage((this.index-1)<0? this.motionImageArray.length-1 : this.index-1);
		},
		
		start: function()
		{
			if (this.motionImageArray.length<=0)
				alert("No MotionImages set!");
			else
				this.switchImage(0);
		},
		
		resume: function()
		{
			if (this.motionImageArray.length<=0)
				alert("No MotionImages set!");
			else
				this.switchImage(this.index);
		}
		
		
	
});