$(document).ready(function() {
	
	slides = new Array(
						"start",
						"service",
						"reifen",
						"bremsen",
						"fahrwerk",
						"klimaanlage",
						"auspuff",
						"batterie",
						"weitere"
						);
	url = './images/animation/';
	filetype = '.png';
	
	$('#aniMenu').after("<img id='aniImg' />")
	$("#aniImg").attr('src','images/animation/'+slides[0]+'.png');
	$('#aniImg').wrap("<div id='aniLayer' />");
	$('aniLayer').css('width','467px')
				 .css('height','192px')
				 .css('background-image','url(./images/animation/base.png)')
				 .css('margin','auto')
				 .css('margin-top','10px');



	$("#aniMenu").children('ul').children('li').children('a').bind('mouseenter', function() {		
			var curSlide = $(this).attr('href');
			curSlideId = curSlide.split('ani-');
			curSlideId = curSlideId[1]; 
			curUL = $(this).next('ul').attr('id','cont'+curSlideId);
			interval = window.setInterval("animate("+curSlideId+")",500);
	});
	
	$('#aniMenu ul li a').bind('mouseleave', function() {
		window.clearInterval(interval);
	});
	
	$("#aniMenu").children('ul').children('li').bind('mouseleave', function() {

		$(this).children("a.active").next('ul').slideUp('fast');
	});	
			
}); 

function animate(slideId) {
	window.clearInterval(interval);
	$("#aniMenu ul li ul").slideUp('fast');
	$("#cont"+slideId).slideDown().css('opacity','0.8');
	if(!$("#cont"+slideId).parent('li').children('a').hasClass('active')) {
		$("#aniMenu ul li a").removeClass('active').css('color','#FFF');
		slideImg = slideId;
		// alert(url+slides[slideImg]+filetype);
		$('#aniImg').hide().attr('src',url+slides[slideImg]+filetype);
		$('#aniImg').fadeIn('slow');
		$("#cont"+slideId).parent('li').children('a').addClass('active');
	} 
}