// behelfsvariablen initialisieren

currentPos = 0; // an welcher stelle befindet sich der pfeil grade
animated = false; // ist grade eine text/pfeil animation aktiv?
initNumber = 0; // mit welchem icon / text soll die animation starten
isShown = false; // ist der container angezeigt?

// animation starten 
function startAnimation(initNumber) {
	
	$('#text' + initNumber).css({
		display : "block",
		opacity : ".99"
	});
	
	$('#icon' + initNumber).animate({
		opacity : "1"
	});
	
	$('#container img').css({
		left : "10px"
	});
	
	if(initNumber>0) {
		currentPos = initNumber-1;
		$('#container img').animate({
			left : 	$('#icon' + initNumber).position().left + "px"
		});
	}
	
	$('#container').animate({opacity : ".85" },
		2000,
		function callback() {
			nextPos();
			isShown = true;
	});
	
}

// animation beenden und neu initialisieren
function endAnimation() {
	
	animated = false;
	
		
	$('#container').animate({opacity : "0"},2000,function callback() {
		isShown = false;
	});
	
	$('.keyvisual-icon').animate({
		opacity : ".5"
	})
	
	currentPos = 0;
	animationTimer = window.setTimeout("startAnimation(0)",5000);

}

// texte faden, zeiger bewegen
function slideToFade(newPos) {
	
	if(animated != true) {
		
		animated = true;
		prePos = newPos-1;
		
		if(newPos<$('.keyvisual-icon').length) {
			
			$.each($('.keyvisual-text'), function() {
				$(this).animate({
						opacity : ".01"
					},
					1000,
					function callback() {
						$(this).css("display","none");	
				});
			});
					
			$('#text' + prePos).animate({
				opacity : ".01"
				},
				1000,
				function callback() {
					$('#text' + prePos).css("display","none");	
			});
			
			$('#icon' + prePos).animate({
				opacity : ".5"
			},1000);
			
			$('#container img').animate({
				left : 	$('#icon' + newPos).position().left + "px"
			}, 1500, function callback() {
				$('#icon' + newPos).animate({
					opacity : ".85"
				},1000);
				
				$('#text' + newPos).css("display","block").animate({
					opacity : ".85"
				},1000,function callback() {
					if(jQuery.browser.msie) {
						this.style.removeAttribute('filter');
					}
				});
				
				animated = false;
				nextPos();
			});
			
			
		} else {
			$('#icon' + prePos).animate({
				opacity : ".5"
			},
			1000,
			function callback() {
				$('#text' + prePos).css("opacity","0");
			});		
			endAnimation();
		}
	} else {
		
		pollAnimation(newPos);
	}
	
}

pollAnimation = function(newPos) {
	animationTimer = window.setTimeout("slideToFade(" + newPos + ")",200);	
}

function nextPos() {
	currentPos = currentPos + 1;
	animationTimer = window.setTimeout("slideToFade(" + currentPos + ")",8000);
}


// animation intialisieren
$(document).ready( function() {
	
	$('#icon-container').css({
		display : "block"
	});
	
	$('.keyvisual-icon').css({
		opacity : ".5"
	})
	.attr("href","javascript://")
	.click(function() {
		
		if(typeof(animationTimer) != undefined) {
			window.clearTimeout(animationTimer);
		}
		
		if(isShown) {
			$("li[id^='text']").animate({
				opacity : "0"
			},400);
			
			$(".keyvisual-icon").animate({
				opacity : ".5"
			},400);
			currentPos = $(this).attr("rel")-1;
			slideToFade($(this).attr("rel"));
			 
		} else {
			startAnimation($(this).attr("rel"));
		}
		
	})
	.hover(
	       function() {
			if($(this).css("opacity") == "0.5"){
				$(this).css("opacity","0.6");
			}
		},
		function() {
			if($(this).css("opacity") == "0.7") {
				$(this).css("opacity","0.");
			}
		}
	);

	$("li[id^='text']").css({
		opacity : "0"
	});
	
	// IE : behebt opacity bug des IE bzw. jQuery
	$.each(jQuery.browser, function(i,val) {
		if( i == 'msie' && val == true && $.browser.version.substr(0,1) <= 7) {
			$('#container').css("filter","alpha(opacity=0)");
			$(".keyvisual-text").css("filter","alpha(opacity=0)");
			$('.keyvisual-icon').css("filter","alpha(opacity=50)");
			
		}
	});
	
	animationTimer = window.setTimeout("startAnimation(" + initNumber + ")",3000);
	
});