// JavaScript Document
/*
Represents the Data of a single Slide for a NewsSlider
*/
var NewsSlide = Class.create({
	
	initialize: function(title, shortText, text, image, linkTo)
	{
		this.title = title;
		this.text = text;
		this.image = new Image();
		this.image.src=image;
		this.linkTo = linkTo;
		this.shortText = shortText;
	},
	
	getTitle: function()
	{
		return this.title;
	},
	
	getText: function()
	{
		return this.text;
	},
	
	getImage: function()
	{
		return this.image;
	},
	
	isLoaded: function()
	{
		return this.image.complete;
	},
	
	getLinkTo: function()
	{
		return this.linkTo;
	},
	
	getShortText: function()
	{
		return this.shortText;
	}
	
});


/*

The Class NewsSlider represents a NewsSlider.


PARAMETER:
- newsSlideArray: the data width the NewsSlide
- bigImageWidth: the width of the big Image
- bigImageHeigt: the height of the big image
- chooserWidth: the width of a single newsChooserElement
- chooserHeight: the height of a single newsChooserElement
- chooserImageWidth: the width of the image in a newsChooserElement
- newsSlideTextHeight: the height of the transparent textelement for each slider
- playTime: every NewsSlide will be displayed for this time (ms).



*/

var newsSliderReferenz = null;

var NewsSlider = Class.create({
							  
	initialize: function(newsSlideArray, bigImageWidth, bigImageHeight, chooserWidth, chooserHeight, chooserImageWidth, newsSlideTextHeight, playTime )
	{
		this.newsSlideArray = newsSlideArray;
		this.bigImageWidth = bigImageWidth;
		this.bigImageHeight = bigImageHeight;
		this.newsSlideTextHeight = newsSlideTextHeight;
		this.isRunning = false;
		this.index = newsSlideArray.length-1;
		this.imagesLoaded = 0;
		this.playTime = playTime;
		this.animatinRun = false;
		
		newsSliderReferenz = this;
		
		

		
		// setIntervall to change the NewsSlides automaticly after playTime
	//	this.intervalId = setInterval(this.next, this.playTime);



	
// GENERATE HTML
		
		
document.writeln('<div style="height:'+(bigImageHeight+10)+'px">');

document.writeln('<div id="newsSliderLoader" style="width:'+(bigImageWidth+chooserWidth)+'px; height:'+bigImageHeight+'px;">');
document.writeln('	<img src="images/NewsSlider/loader.gif" style="margin-top:'+((bigImageHeight/2)-8)+'px;" alt="Loading" />');
document.writeln('</div>');

document.writeln('<div id="newsSliderContainer" style="display:none">');
document.writeln('<table cellpadding="0" cellspacing="0">');
document.writeln('<tr>');
document.writeln('	<td>');
	
document.writeln('	<div id="newsSlider" style="width:'+bigImageWidth+'px; height:'+bigImageHeight+'px;">');

// the NewsSlides

for (i =0; i<newsSlideArray.length; i++)
{

document.writeln('		<div id="newsSlide'+i+'" class="newsSlide" style="display:block; width:'+bigImageWidth+'px; height:'+bigImageHeight+'px; background-image: url('+newsSlideArray[i].getImage().src+');">');
document.writeln('			<div class="newsSlideTextElementHorizontal" style="margin-top:'+(bigImageHeight-newsSlideTextHeight)+'px;">');
document.writeln('				<p class="newsSlideTextElementTitle"><a href="'+newsSlideArray[i].getLinkTo()+'" title="read more">'+newsSlideArray[i].getTitle()+'</a></p>');
document.writeln('				<p class="newsSlideTextElementText">'+newsSlideArray[i].getText()+' <a href="'+newsSlideArray[i].getLinkTo()+'" title="read more">&raquo;</a></p>');
document.writeln('			</div>');
document.writeln('		</div>');
} // END for

document.writeln('	</div>');
	
document.writeln('	</td>');
	
// NewsChooser
document.writeln('	<td class="newsChooser" valign="top">');
for (j=0; j<newsSlideArray.length; j++)
{
document.writeln('		<div id="newsChooserElement'+j+'" class="newsChooserElement" style="width: '+chooserWidth+'px; height:'+chooserHeight+'px;" onclick="javascript: newsSliderReferenz.showSlide('+j+');" onMouseOver="javascript: newsSliderReferenz.newsChooserElementOnMouseOver(this, '+j+');"  onMouseOut="javascript: newsSliderReferenz.newsChooserElementOnMouseOut(this,'+ j+');">');
document.writeln('		<div class="newsChooserElementTitle">'+newsSlideArray[j].getTitle()+'</div>');
document.writeln('		<span class="newsChooserElementText">');
document.writeln('			<div class="newsChooserElementImage" style="width:'+chooserImageWidth+'px;"><img src="'+newsSlideArray[j].getImage().src+'" alt="Klick"  style="width:'+chooserImageWidth+'px;" /></div>');
document.writeln('			'+newsSlideArray[j].getShortText());
document.writeln('		</span>');
document.writeln('		</div>');
} // Ende for


// Controller

document.writeln('		<div class="controllElements" align="center">');
document.writeln('			<center>');
document.writeln('			<table cellspacing="0" cellpadding="5">');
document.writeln('			<tr>');
document.writeln('				<td style="vertical-align:middle;"><div onclick="javascript: newsSliderReferenz.previous();" onMouseOver="this.className=\'controllElementHover\';" onMouseOut="this.className=\'controllElement\';" style="vertical-align:middle;"><img src="images/NewsSlider/links.gif" alt="previous" /></div></td>');
document.writeln('				<td style="vertical-align:middle;"><div id="playController" onclick="javascript:newsSlider.switchPlayPause();"  onMouseOver="this.className=\'controllElementHover\';" onMouseOut="this.className=\'controllElement\';" style="vertical-align:middle;">Play</div></td>');
document.writeln('				<td style="vertical-align:middle;"><div onclick="javascript: newsSliderReferenz.next();"  onMouseOver="this.className=\'controllElementHover\';" onMouseOut="this.className=\'controllElement\';" style="vertical-align:middle;"><img src="images/NewsSlider/rechts.gif" alt="previous" /></div></td>');
document.writeln('			</tr>');
document.writeln('			</table>');
document.writeln('			</center>');
document.writeln('		</div>');
	
document.writeln('	</td>');
document.writeln('</tr>');
document.writeln('</table>');
document.writeln('</div><!-- ENDE newsSliderContainer -->');
document.writeln('</div>');

		
// END HTML

			// install onLoad Handlers for Preloading
		var i;
		for (i =0; i<this.newsSlideArray.length; i++)
			this.newsSlideArray[i].getImage().onLoad=this.imageLoadedHandler();
		
		
		
	},
	
	/* Shows the NewsSlide according to parameter i */
	showSlide: function(i)
	{
		if (!this.animationRun && this.index != i)
		{
			this.animationRun = true;
			
			var newSlide = document.getElementById('newsSlide'+i);
			var oldSlide = document.getElementById('newsSlide'+this.index);

			oldSlide.style.zIndex=1;
			newSlide.style.zIndex=2;
			
			// set the newsChooserElements
			document.getElementById('newsChooserElement'+this.index).className='newsChooserElement';
			document.getElementById('newsChooserElement'+i).className='newsChooserElementHover';
			
			
			Effect.Appear('newsSlide'+i);
			Effect.Fade('newsSlide'+this.index,{afterFinish: function()
				{
					newsSliderReferenz.animationRun = false;
				}
			});
			
			
			this.index = i;
		}
	},
	
	next: function()
	{
		newsSliderReferenz.showSlide( (newsSliderReferenz.index+1) % newsSliderReferenz.newsSlideArray.length);
	},
	
	previous: function()
	{
			var i = this.index -1;
			if (i<0)
				i=this.newsSlideArray.length -1;
				
			this.showSlide(i);
	},
	
	
	imageLoadedHandler: function()
	{
		this.imagesLoaded++;
		
		if (this.imagesLoaded==this.newsSlideArray.length)
		{
			// All pictures Loaded
			
			//remove Pre-Loading animation and show normal NewsSlider
			Effect.Fade('newsSliderLoader',{afterFinish: function()
				  {
					Effect.Appear('newsSliderContainer');
				  }
			});
			
		} // End IF
		
	},
	
	switchPlayPause: function()
	{
		if (this.isRunning) 
		{
			this.isRunning = false;
			document.getElementById('playController').innerHTML = "Play";
			window.clearInterval(this.intervalId);
		}
		else 
		{
			this.isRunning=true; 
			document.getElementById('playController').innerHTML = "Pause";
			this.next();
			this.intervalId = window.setInterval(this.next, this.playTime);
		}
		
	},
	
	newsChooserElementOnMouseOver: function(element, id)
	{
		if (this.index != id)
			element.className='newsChooserElementHover';
	},
	
	newsChooserElementOnMouseOut: function(element, id)
	{
		if (this.index != id)
			element.className='newsChooserElement';
	},
	
	start: function()
	{
			document.getElementById('playController').innerHTML = 'Pause';
			this.isRunning=true;
			this.intervalId = window.setInterval(this.next, this.playTime);
			this.showSlide(0);
			
	}
	
						  
}); // End Class