Fader = {
	//Paths to the pictures -> the html Div structure has to fit the number of pictures (e.g. 5 pictures in the array = 5 div containers)
	
	MLE: [{'pfad':'','link':'','title':''},{'pfad':'','link':'','title':''},{'pfad':'','link':'','title':''},{'pfad':'','link':'','title':''}],
	//Paths to the bullet point images
	Bullet: ["bannercenter_btns active_btn", "bannercenter_btns inactive_btn"],
	//changePicTime sets the time between picture changing (in milliseconds)
	changePicTime: 4000,
	//lazyTime sets the time for every fade step (in milliseconds).
	lazyTime: 50,

	fadeCounter: 1,
	fadeFirstElement:1,
	opacityIE:100,
	thfade:null,
	thChangePic:null,
	divs:[],
	pics:[],
	picswidth:[],
	picsheight:[],
	bullets:[],
	newsName:[],
	newsLinks:[],
	widthBullet: 10,
	loaded:false,

	init: function () {		
		var that, i, imax, width, height, divPic, divBtn, divHead, divTmp = "", aTmp = "", imgTmp = "", divTmpBtn = "", tmpHead = "";
		that = this;
		this.setNamesAndImages();
		divPic = document.getElementById("bannercenter_fader");
		divBtn = document.getElementById("bannercenter_buttons");
		divHead = document.getElementById("bannercenter_header");
		//Build strings containing the elements, ids, classes ... and insert them via innerHTML
		for(i=Fader.fadeFirstElement,imax = (this.MLE.length + Fader.fadeFirstElement);i < imax;i++){
			width = 614;
			height = 150;
			//Math.round(this.picsheight[i] * (width / this.picswidth[i]));
			imgTmp = '<img id="fader-pic' + i + '" width="' + width + '" height="' + height + '" title="' + this.MLE[(i - Fader.fadeFirstElement)]['title'] + '" alt="' + this.MLE[(i - Fader.fadeFirstElement)]['title'] + '" src="" style="-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;" />';
			aTmp = '<a href="' + this.MLE[(i - Fader.fadeFirstElement)]['link'] + '">' + imgTmp + '</a>';
			//Hide the pictures and buttons except the first one
			if(i !== Fader.fadeFirstElement){				
				divTmp = divTmp + '<div id="fader-div'+i+'" class="fader-pics" style="display:none;">' + aTmp + '</div>';	
				divTmpBtn = divTmpBtn + '<div id="bannercenter_btns' + i + '" class="bannercenter_btns inactive_btn"></div>'
			}
			else{
				divTmp = divTmp + '<div id="fader-div'+i+'" class="fader-pics">' + aTmp + '</div>';				
				divTmpBtn = divTmpBtn + '<div id="bannercenter_btns' + i + '" class="bannercenter_btns active_btn"></div>'
			}
		}
		for(i = 0, imax=this.newsName.length; i < imax; i++){
			//If the news name is too long shorten it and insert ...
			if(this.newsName[i].length > 48){
				this.newsName[i] = this.newsName[i].slice(0,48);
				this.newsName[i] = this.newsName[i].slice(0,this.newsName[i].lastIndexOf(" ")) + " ...";
			}
			if(i !== 0){
				tmpHead = tmpHead + '<a class="headline_fader" id="headline_fader_' + i + '" href="' + this.MLE[i]['link'] + '" + style="display:none;">' + this.newsName[i] + '</a>';
			}
			else{
				tmpHead = tmpHead + '<a class="headline_fader" id="headline_fader_' + i + '" href="' + this.MLE[i]['link'] + '">' + this.newsName[i] + '</a>';
			}
			
		}
		divPic.innerHTML = divTmp;
		divBtn.innerHTML = divTmpBtn;
		divHead.innerHTML = tmpHead;
		this.pics[0] = document.getElementById("fader-pic" + Fader.fadeFirstElement);
		this.divs[0] = document.getElementById("fader-div" + Fader.fadeFirstElement);
		this.newsLinks[0] = document.getElementById("headline_fader_0");	
		//Set the first picture
		if(this.pics[0]){
			this.pics[0].src = this.MLE[0]['pfad'];
		}
		this.thChangePic = setTimeout(function () {that.changePic(that.lazyTime);}, this.changePicTime);
		setTimeout(function () {that.lazyPictureLoading();}, 500);
		this.buttonEvents();
	},
	
	setNamesAndImages: function(){
		var tags, imgs = document.getElementsByTagName("img"), i, imax, j = 0, flag = false;
		tags = document.getElementsByTagName("div");
		for(i = 0, imax = tags.length; i < imax; i++){
			if(tags[i].className === "nb_top_middle"){
				if(!flag){
					flag = true;
				}
				else{
					this.newsName[j] = tags[i].childNodes[0].firstChild.nodeValue;
					this.MLE[j]['title'] = tags[i].childNodes[0].firstChild.nodeValue;
					this.MLE[j]['link'] = tags[i].childNodes[0].getAttribute("href");
					j = j + 1;
				}
			}
		}		
		flag = false;
		for(i = 0, j=0, imax = imgs.length; i < imax; i++){
			if(imgs[i].className === "resizeImage" && j < 4){
				if(!flag){
					flag = true;
				}
				else{
					this.MLE[j]['pfad'] = imgs[i].getAttribute("src");
					this.picswidth[j] = imgs[i].width;
					this.picsheight[j] = imgs[i].height;
					j = j + 1;
				}
			}
		}
	},
	
	lazyPictureLoading: function(){
	if(!this.loaded){
		var i, paths;
		paths = this.Paths;
		//Set the other pictures; i=1 because i=0 is already set above
		for (i = 1; i < 4;i++){
			if(this.pics[i] = document.getElementById("fader-pic" + (i+ Fader.fadeFirstElement))){
				this.divs[i] = document.getElementById("fader-div" + (i+ Fader.fadeFirstElement));
				this.newsLinks[i] = document.getElementById("headline_fader_" + i);
				this.pics[i].src = this.MLE[i]['pfad'];				
			}
		}
		this.loaded = true;
	}
},
	changePic: function(lazyTime) {
	var divs, bullets, i, j, k, that;
	that = this;
	divs = this.divs;
	bullets = this.bullets;
	k = 0;
	for (i =0; i < this.MLE.length; i++) {
		if(this.thfade){
			clearInterval(this.thfade);
		}
		//Search the current div node which is shown -> display is not "none"
		if(divs[i].style.display !== "none") {
			//Set the z-Index and opacity so it lays above the new picture
			divs[i].style.zIndex = 10;
			divs[i].style.opacity = 1;
			divs[i].style.filter = "alpha(opacity=100);";
			//Set the next picture active (if it is the last picture you have to set the first active) and call the fade function
			if (i !== this.MLE.length-1) {				
				//Set the active bullet point
				bullets[i+1].className = this.Bullet[0];
				bullets[i].className = this.Bullet[1];
				
				this.thfade = setInterval( function() {					
					that.fade(divs[i], divs[i+1]);
				},this.lazyTime);
				this.newsLinks[i].style.display = "none";
				this.newsLinks[i+1].style.display = "block";
				break;
			} else {
				divs[0].style.display = "block";
				this.thfade = setInterval( function() {					
					bullets[0].className = that.Bullet[0];
					bullets[i].className = that.Bullet[1];
					that.fade(divs[i], divs[0]);
				},this.lazyTime);
				this.newsLinks[i].style.display = "none";
				this.newsLinks[0].style.display = "block";
				break;
			}
		}
	}
	//Recall of the whole function
	this.thChangePic = setTimeout(function(){that.changePic(that.lazyTime);}, this.changePicTime);
},

fade: function(picalt, picneu) {
	picneu.style.display = "block";
	//Reduce the opacity by 0.1
	this.opacityIE -= 10;
	picalt.style.opacity -= 0.1;
	picalt.style.filter = "alpha(opacity=" + this.opacityIE + ");";
	this.fadeCounter -= 0.1;	
	// If the fadeCounter reaches 0 or is below you have to set z-Index, display and opacity back to standard
	if(this.fadeCounter <= 0) {
			if(this.thfade){
				clearInterval(this.thfade);
			}
			picalt.style.zIndex = 1;
			picalt.style.display = "none";
			picalt.style.opacity = 1;
			picalt.style.filter = "alpha(opacity=100);";
			this.fadeCounter = 1;
			this.opacityIE = 100;
	}
},

changeByClick: function(that, btn){
	var index, divs, picsmax, j;
	if(!that.loaded){
		that.lazyPictureLoading ();
	}
	//Stop the current threads
	if(that.thChangePic){
		clearTimeout(that.thChangePic);
	}
	if(that.thfade){
		clearInterval(that.thfade);
	}
	divs = that.divs;		
	//Read the number of the pressed button and convert it to the index of the picture
	index = (btn.id.slice(btn.id.length-1, btn.id.length)) - Fader.fadeFirstElement;	
	//Reset all pictures and display the one that fits the clicked button
	for (j=0; j<that.MLE.length; j++){
		//Reset all z-Index, displays and opacities
		if(j != index){
			divs[j].style.zIndex = 1;
			divs[j].style.display = "none";
			this.newsLinks[j].style.display = "none";			
			that.bullets[j].className = that.Bullet[1];
		}
		//Show the picture of the pressed button
		else{
			divs[j].style.display = "block";
			this.newsLinks[j].style.display = "block";
			that.bullets[j].className = that.Bullet[0];			
		}
		divs[j].style.opacity = 1;
		divs[j].style.filter = "alpha(opacity=100);";
	}
	that.thChangePic = setTimeout(function(){that.changePic(that.lazyTime);}, 4000);
},

buttonEvents: function(){
	var btn, k, that;
	that = this;
	//Set the button events
	for(k = Fader.fadeFirstElement; k < (this.MLE.length + Fader.fadeFirstElement); k++){
		if(btn = document.getElementById("bannercenter_btns" + k)){
			btn.onclick = function(){that.changeByClick(that, this);};
			//Fill up the object bullets
			this.bullets[(k - Fader.fadeFirstElement)] = document.getElementById("bannercenter_btns" + k);
		}
	}
	this.widthBullet = parseInt(this.bullets.length,10) * (5 + this.widthBullet) + 5 + "px";
	document.getElementById("bannercenter_buttons").style.width = this.widthBullet;
	document.getElementById("bannercenter_background").style.width = this.widthBullet;
}
};