$(document).ready(function() {

	window.scrollTo(0, 1);
	
	$(document).delay(400).changeColorToRed();	
	
	$(document).delay(8000).fadeIn(500, function() {
		$(this).changeColorToBlue();	
	});
	
	/************** Menu ******************/
	
	$('ul#mainNav li a').click(function() {
				
		var clickedItem = $(this).attr('title');
		
		/************** Active Effekt ******************/
		$('ul#mainNav li').each(function() {
			$(this).removeClass('activeItem');
		});
		
		$('#impressum').hide();
		$(this).parent('li').addClass('activeItem');
		
		/**************  ******************/
		if (clickedItem=='portfolio') {
			
			$('#header').slideUp(500, 'easeInOutQuint' , function() {
				$('.page').each(function() {
					$(this).fadeOut(0);
				});
				$('#portfolio').fadeIn(500 , function() {
					$('#agentur').hide();
					$('window').scrollTop(1);

				});
				$('#headlineVerzierung').height(0);
			});
			
		
		} else if (clickedItem=='blog') {
			
			/* $('#header').slideUp(500, 'easeInOutQuint', function() {
				$('.page').each(function() {
					$(this).fadeOut(0);
				});
				$('#blog').fadeIn(500, function() {
					$('#agentur').hide();
					$(window).scrollTop(0);
				});
				$('#headlineVerzierung').height(0);
			}); */
			
		
		} else if (clickedItem=='contact') {
			$('#agentur').slideUp(500, 'easeInOutQuint');
			$('.page').each(function() {
					$(this).fadeOut(0);
				});
			$('#contact').fadeIn(500);
		
		} else if (clickedItem=='agentur') {
		
		$('#header').slideDown(500, 'easeInOutQuint', function() {
			$('.page').each(function() {
					$(this).fadeOut(0);
				});
				
				$('#agentur').slideDown(500, 'easeInOutQuint');
			
			});
		
		} else if(clickedItem=='home') {
		
			$('#header').slideDown(500, 'easeInOutQuint', function() {
				$('#home').fadeIn(500);
				
				/* Hier muss noch eine Browserweiche davor */
				$('#agentur').slideUp(0);
				$('#portfolio').fadeOut(500);
				$('#contact').fadeOut(0);
				$('#blog').fadeOut(500);
				$('#agentur').fadeOut(500);
				$('#formSended').fadeOut(500);
				$('#headlineVerzierung').height(4);
			});
		};
		
	});
	
	/************** Impressum ******************/
	
	$('#impressumsLink').click(function() {
		$('#agbs').hide(300);
		$('#impressum').toggle(300);
	});
	
	$('#agbsLink').click(function() {
		$('#impressum').hide(300);
		$('#agbs').toggle(300);
	});
	
	/************** Portfolio Navigation ******************/
		
		
		
			$('.web').hide();
			$('.app').hide();
			

	
	$('#headline a').click(function() {
		
		var title = $(this).attr('title');
		var newClass = "." + title;
		
		$('.portfolioFullContainer').each(function() {
			$(this).hide();
		});
		
		$('#headline a').each(function() {
			$(this).removeClass('active');
		});
		
		$(this).addClass('active');

			$('.portfolioItemContainer').each(function() {
				$(this).fadeOut(0 , function() {
					$(newClass).each(function() {
						$(this).fadeIn(200);
					});
				});
			});
		
				
		return(false);
	});
	
	/************** Portfolio Web ******************/
	$('.web').click(function() {
		var whichItem = $(this).attr('alt');
		var newHref = "http://www.stinformatik.eu/img/pf/web/" + whichItem + ".jpg";
		
		$('#portfolioFullImage').attr('src' , newHref);
		
		$('.portfolioItemContainer').each(function() {
			$(this).hide();
		});
		
		$('#portfolioFullContainer').fadeIn(400);
		
	});
	
	$('#back').click(function() {
	
		$('#portfolioFullContainer').hide();
		
		$('.web').each(function() {
			$(this).fadeIn(400);
		});
	});
	
	/************** Portfolio CI ******************/
	$('.ci').click(function() {
		var whichItem = $(this).attr('alt');
		var newHref = "http://www.stinformatik.eu/img/pf/ci/" + whichItem + ".jpg";
		
		$('#portfolioFullImageCI').attr('src' , newHref);
		
		$('.portfolioItemContainer').each(function() {
			$(this).hide();
		});
		
		$('#portfolioFullContainerCI').fadeIn(400);
		
	});
	
	$('#backCI').click(function() {
	
		$('#portfolioFullContainerCI').hide();
		
		$('.ci').each(function() {
			$(this).fadeIn(400);
		});
	});
	
	/************** Formularfeldleerung ******************/
                    
        var wert = $("input[name=name]").val();
                    
        $("input[name=name]").focus(function(){
                                             
            if($(this).val() == wert){
                $(this).val("");
            }
        });
                    
        $("input[name=name]").blur(function(){
                                            
            if($(this).val() == ""){
                $(this).val(wert);
            }
        });
        
        var wert1 = $("input[name=email]").val();
                    
        $("input[name=email]").focus(function(){
                                             
            if($(this).val() == wert1){
                $(this).val("");
            }
        });
                    
        $("input[name=email]").blur(function(){
                                            
            if($(this).val() == ""){
                $(this).val(wert1);
            }
        });
        
        var wertMessage = $("textarea[name=kommentar]").html();
                    
        $("textarea[name=kommentar]").focus(function(){
                                                 
            if($(this).html() == wertMessage){
                $(this).html("");
            }
        });
                    
        $("textarea[name=kommentar]").blur(function(){
                                                
            if($(this).html() == ""){
                $(this).html(wertMessage);
            }
        });
        
        /************** Kontakt mit Ajax absenden ******************/
                    
        $('#sendButton').click(function(event) {
               event.preventDefault();
               
               var name = $('#name').val();
               var email = $('#email').val();
               var kommentar = $('#kommentar').val(); 
                           
               $.post("http://www.stinformatik.eu/stiAppContact.php", { name: name, email: email, kommentar: kommentar } );            
            	
            	//verstecken des Formulars
            	$('.form').fadeOut('slow');
            	//anzeigen der Erfolgsmeldung
           		$('#formSended').fadeIn('slow');
           
           $(window).scrollTop(0);
               
        });
                    
        $('#neueNachricht').click(function() {
                                  
          $('.form').fadeIn('slow');
          //anzeigen der Erfolgsmeldung
          $('#formSended').fadeOut('slow')                
                                  
        });
        
        	/************** !Changing Color ******************/
		$('#logoBlue').click(function() {
			$(this).changeColorToRed();
		});
		
		$('#logoRed').click(function() {
			$(this).changeColorToBlue();
		});
		
		/************** !General ******************/
		
		$('#moreInformationButton').click(function() {
			$('#moreInformation').toggle(300);
		});	
		
});

jQuery.fn.changeColorToRed = function() {

	$('#logoRed').css('z-index','2').fadeIn(400);
	
	$('#logoBlue').css('z-index','1').fadeOut(800);
	
	$('#navigation').delay(5).animate({
		borderBottomColor: "#de2834"
	}, 800);
	
	$('#headlineVerzierung').delay(5).animate({
		backgroundColor: "#de2834"
	}, 800);
	
	$('#headlineVerzierung2').delay(5).animate({
		backgroundColor: "#de2834"
	}, 800);
	
	$('.blue').each(function() {
		$(this).delay(5).fadeIn(500, function() {
			$(this).addClass('red');
		});
	});
	
	$('#contact a').each(function() {
		$(this).delay(5).fadeIn(500, function() {
			$(this).css('color','#de2834');
		});
	});	
};


jQuery.fn.changeColorToBlue = function() {

	$('#logoBlue').css('z-index','1').fadeIn(800);
	
	$('#logoRed').css('z-index','-5').fadeOut(300, function() {
		$('#logoRed').hide();
	});
	
	$('#navigation').delay(5).animate({
		borderBottomColor: "#009fe3"
	}, 800);
	
	$('#headlineVerzierung').delay(5).animate({
		backgroundColor: "#009fe3"
	}, 800);
	
	$('#headlineVerzierung2').delay(5).animate({
		backgroundColor: "#009fe3"
	}, 800);
	
	$('.blue').each(function() {
		$(this).delay(5).fadeIn(500, function() {
			$(this).removeClass('red');
		});
	});
	
	$('#contact a').each(function() {
		$(this).delay(5).fadeIn(500, function() {
			$(this).css('color','#009fe3');
		});
	});	
};