$(document).ready(function() {

// start animation
	
		$('#navi').css('display','none');
		$('.content_container').css('display','none');
		$("#feedback_button_box").hide();
		$("#feedback_button_box_done").hide();
		$("#loading").fadeIn(0);
		$("#loading_slow").delay(5000).fadeIn(300);
   
	$(window).load( function() {
   		
   		$("#loading").delay(100).fadeOut(100);
   		$("#loading_slow").fadeOut(0);
		$('#navi').delay(500).slideDown(300);
		$('.content_container').fadeIn(500);
		
		$("#feedback_button_box").delay(1000).show("slide", { direction: "left" }, 400);
		$("#feedback_button_box_done").delay(1000).show("slide", { direction: "left" }, 400);
      
		setTimeout(function() { 
		$('.arrow').css('background-image','url("/images/arrow.png")');
		$('.arrow').css('background-repeat','no-repeat');
		$('.arrow').css('background-position','center bottom');

		}, 700);
      
   });
});

$(function() {
	
	var clicked = false;
	
//einfuegen des bewegbaren pfiels
	
	if($("#me").attr("class") == "arrow") {			
		$("<div id='arrow_img' class='arrow'></div>").insertBefore("#me"); 		
		$("#arrow_img").css("left",0);
	}
	if ($("#about").attr("class") == "arrow") {		
		$("<div id='arrow_img' class='arrow'></div>").insertBefore("#about"); 	
		$("#arrow_img").css("left","250px");
		}
	if ($("#projects_2").attr("class") == "arrow") {	
		$("<div id='arrow_img' class='arrow'></div>").insertBefore("#projects_2");
		$("#arrow_img").css("left","501px");
	}
	if ($("#contact").attr("class") == "arrow") {	
		$("<div id='arrow_img' class='arrow'></div>").insertBefore("#contact");	
		$("#arrow_img").css("left","750px");
	}
	
	$("#navi").children().mouseover(function() {
		if(!clicked) {
			if($(this).attr("id") == "url_1") {
				$("#arrow_img").animate({"left":0});
			} 
			else if($(this).attr("id") == "url_2") {
				$("#arrow_img").animate({"left":"250px"});
			}
			else if($(this).attr("id") == "url_3") {
				$("#arrow_img").animate({"left":"501px"});
				
			}
			else if($(this).attr("id") == "url_4") {
				$("#arrow_img").animate({"left":"751px"});
			}		
		}
   	});

// pfeil aendern bei klick

	$("#navi").children().click(function() {
		clicked = true;
		
		$(this).parent().find('#me').removeClass("arrow");
		$(this).parent().find('#me').css('background-image','none');
		$(this).parent().find('#about').removeClass("arrow");
		$(this).parent().find('#about').css('background-image','none');
		$(this).parent().find('#projects_2').removeClass("arrow");
		$(this).parent().find('#projects_2').css('background-image','none');
		$(this).parent().find('#contact').removeClass("arrow");
		$(this).parent().find('#contact').css('background-image','none');
		
		$(this).addClass("arrow");	
		$(this).css('background-image','url("/images/arrow.png")');
		$(this).css('background-repeat','no-repeat');
		$(this).css('background-position','center bottom');
		
   	});

// pfeil animation

	$("#navi").hover(function() {  		 
	}, function() {
		if(!clicked) {
			if($("#me").attr("class") == "arrow") {			
				$("#arrow_img").animate({"left":0});
			}
			if ($("#about").attr("class") == "arrow") {	
				$("#arrow_img").animate({"left":"250px"});	
			}
			if ($("#projects_2").attr("class") == "arrow") {	
				$("#arrow_img").animate({"left":"501px"});
			}
			if ($("#contact").attr("class") == "arrow") {
				$("#arrow_img").animate({"left":"750px"});
			}
		}				
	});
	
	
	
	
	
	
});