/*
 * Ablauf Grafik
 */
jQuery(document).pngFix();
jQuery(document).ready(function() {
	jQuery('li#step1').hover(function(){
		jQuery("div#arrow").stop(true, true);
		jQuery("div#arrow").animate( { marginLeft: "0px" }, 250, "swing");

		jQuery("div#schritt1").animate( { marginLeft: "0px" }, 250, "swing");
		jQuery("div#schritt2").animate( { marginLeft: "620px" }, 250, "swing");
		jQuery("div#schritt3").animate( { marginLeft: "1216px" }, 250, "swing");
	});
	jQuery('li#step1').click(function(){
		jQuery("div#schritt1").animate( { marginLeft: "0px" }, 250, "swing");
		jQuery("div#schritt2").animate( { marginLeft: "620px" }, 250, "swing");
		jQuery("div#schritt3").animate( { marginLeft: "1216px" }, 250, "swing");
	});
	jQuery('li#step2').hover(function(){
		jQuery("div#arrow").stop(true, true);
		jQuery("div#arrow").animate( { marginLeft: "201px" }, 250, "swing");

		jQuery("div#schritt1").animate( { marginLeft: "-620px" }, 250, "swing");
		jQuery("div#schritt2").animate( { marginLeft: "0px" }, 250, "swing");
		jQuery("div#schritt3").animate( { marginLeft: "620px" }, 250, "swing");
	});
	jQuery('li#step2').click(function(){
		jQuery("div#schritt1").animate( { marginLeft: "-620px" }, 250, "swing");
		jQuery("div#schritt2").animate( { marginLeft: "0px" }, 250, "swing");
		jQuery("div#schritt3").animate( { marginLeft: "620px" }, 250, "swing");
	});
	jQuery('li#step3').hover(function(){
		jQuery("div#arrow").stop(true, true);
		jQuery("div#arrow").animate( { marginLeft: "402px" }, 250, "swing");

		jQuery("div#schritt1").animate( { marginLeft: "-1216px" }, 250, "swing");
		jQuery("div#schritt2").animate( { marginLeft: "-620px" }, 250, "swing");
		jQuery("div#schritt3").animate( { marginLeft: "0px" }, 250, "swing");
	});
	jQuery('li#step3').click(function(){
		jQuery("div#schritt1").animate( { marginLeft: "-1216px" }, 250, "swing");
		jQuery("div#schritt2").animate( { marginLeft: "-620px" }, 250, "swing");
		jQuery("div#schritt3").animate( { marginLeft: "0px" }, 250, "swing");
	});
});