$(document).ready(function(){
	$('#tagline-main .slogan').css({
		opacity : 0,
		marginLeft : '900px',
	});
	
	$fade = $('#tagline-main .slogan:first .fade');
	
	$fade.css({opacity:0});
	$('#tagline-main .slogan:first')
		.addClass('active-slogan')
		.animate({marginLeft: '50px',opacity : 1}, 700, function (){
			$fade.animate({opacity : 1}, 500);
		});
	

	var int = setInterval(changeText, 5000);

	function changeText(){
		
		var $fade = $('#tagline-main .slogan .fade');

		var $active = $('#tagline-main .active-slogan');

		var $next = $active.next(); 
		
		if($active.next().length == 0) $next = $('#tagline-main .slogan:first'); 

		$active.animate({opacity:0}, 500, function () {
			$active.css({display:'none'}); 
			
			$fade.css({opacity:0});
			
			$next.css({opacity: 0,display:'block'})
				.addClass('active-slogan')
				.animate({opacity:1, marginLeft: '50px'}, 1000, function(){
					$active.removeClass('active-slogan');
					$fade.animate({opacity : 1}, 500);
				});
		});
		$active.animate({marginLeft: '900px',marginTop:'20px'}); 

	}

});