$(document).ready(function()
{
	//Damit man beim ersten laden keine XHTML Fehler bekommt fügt man dem UL Tag ein LI Element zu und entfernt es sobald die Seite geladen ist!
	$('#changeonload').remove();
	
	//$('.rol_focalpoints_imageOverlay').animate({opacity:0.8,},100);
	//return;
	if (!rol_focalpoints_json || !rol_focalpoints_json['data']) {
		return;
	} 
	else {
		var box = $('.rol-focalpoints-pi1');
		var focalpoints = rol_focalpoints_json['data'];
		
		var firstFocalpoint = focalpoints[0];
		
		// alle Bilder laden, damit im Browser der Ladevorgang nicht ersichtlich ist:
		var images = Array(focalpoints.length);
		$(focalpoints).each(function(i, focalpoint) {
			var img = $('<img />');
			img[0].src = focalpoint.image;
			images[i] = img[0];
		});	
		
		// DIV einblenden:
		document.getElementById('rol_focalpoints').style.display = "block";
		
		// erstes Bild laden:
		box.find('img#rol_focalpoints_img')[0].src = firstFocalpoint['image'];
		
		// Nummern für das Durchblättern der Schwerpunkte generieren aufgrund der Anzahl der Schwerpunkte:
		$(focalpoints).each(function(i, obj) {
			var linkToPage = focalpoints[i]['link'];
			box.find('.rol_focalpoints_numberAlign').append('<li id="rol_focalpoints_li_' + i + '"><a href="' + linkToPage +'" style="display:block;">' + (i + 1) + '</a></li>');
			/*
			$('.rol_focalpoints_numberAlign').pngFix({
				
			}); 
			*/
		});
		
		// Die erste Nummer grün hinterlegen, da diese beim ersten Laden aktiv ist:
		box.find('.rol_focalpoints_numberAlign li:first').addClass('rol_focalpoints_numberGreen');
		
		// Den Text für den ersten Schwerpunkt definieren und verlinken:
		var linkForText = firstFocalpoint.link;
		box.find('.rol_focalpoints_imageOverlayText h1')[0].innerHTML = '<a href="' + linkForText + '">' + firstFocalpoint.text + '</a>';
		
		var isOver = false;
		
		// Funktion zum automatischen Laden des nächsten Bildes nach 6 Sekunden:
		setInterval(function() {
			if (isOver) {	// wenn mit der Maus über eine Zahl gefahren wurde, soll der Intervall unterbrochen werden
				return;
			}
							 
			var id = box.find('.rol_focalpoints_numberAlign li.rol_focalpoints_numberGreen')[0].id.substring(19);
			
			var nextId = parseInt(id) + 1;		// ID des nächsten Elementes auslesen
			if (nextId >= focalpoints.length)	// wenn das letzte Bild angezeigt wird, soll wieder mit dem 1. begonnen werden
			{
				nextId = 0;
			}
			// grüne Farbe für das aktuelle Element entfernen und für das nächste Element anwenden, da dieses dann aktiv sein wird:
			box.find('.rol_focalpoints_numberAlign li').removeClass('rol_focalpoints_numberGreen');
			box.find('.rol_focalpoints_numberAlign li:nth-child('+(nextId + 1)+')').addClass('rol_focalpoints_numberGreen');
			fadeImage(nextId);					// aktuelles Bild aus- und das n�chste Bild einblenden
		}, 6000);
			
		var actualImage = false;
		
		// wenn der Benutzer mit der Maus über eine der Zahlen fährt:
		box.find('.rol_focalpoints_numberAlign li').hover(function() {
			isOver = true;																				// Variable setzen, damit der Intervall unterbrochen wird, wenn mit der Maus �ber eine Zahl gefahren wurde
			box.find('.rol_focalpoints_numberAlign li').removeClass('rol_focalpoints_numberGreen');	// gr�ne Formatierung von allen Nummern entfernen
			$(this).addClass('rol_focalpoints_numberGreen');											// gr�ne Formatierung f�r die ausgew�hlte Nummer anwenden
			var id = this.id.substring(19);
			fadeImage(id);
		}, function() {
			isOver = false;
		});
		
		// Funktion zum Ausblenden des aktuellen Schwerpunktes und Einblenden des n�chsten Schwerpunktes:
		function fadeImage(id) {
			
			if (id == actualImage) {	// wenn bereits das gew�hlte Bild angezeigt wird, soll der Fade-Effekt nicht angewendet werden (sonst schw�cht das Bild kurz ab)
				return;
			}
			actualImage = id;
			var focalpoint = focalpoints[id];
			box.find('.rol_focalpoints_imageOverlayText h1')[0].innerHTML = '<a href="' + focalpoint.link + '">' + focalpoint.text + '</a>';
	
			// n�chstes Bild unter dem aktuellen Bild anzeigen, damit der Fade-Effekt ohne Unterbrechungen erfolgen kann:
			var tmpImg = $('<img class="imageBehind" />');
			tmpImg.hide();
			tmpImg[0].src = focalpoint['image'];
			box.find('img#rol_focalpoints_img').after(tmpImg);
			tmpImg.fadeIn(700, function() {									// Bild darunter einblenden
				if (id != actualImage) {
					return;
				} 
			});
			box.find('img#rol_focalpoints_img').fadeOut(700, function() {	// aktuelles Bild ausblenden
				if (id != actualImage) {
					tmpImg.remove();
					return;
				}
				this.src = focalpoint['image'];
				var actImg = $(this);
				actImg.ready(function() {
					actImg.show();
					tmpImg.fadeOut(100, function() {
						tmpImg.remove();
					});
				});
			});
		}
		
		box.show();	// DIV anzeigen
	}
});