<?php
	if (!isset($_SESSION['nazwa'])) {
		header('Location: login.php');
		exit();
	}
?>

<style type="text/css">
#start_wrapper {
	background-image: url("img/tla/tekstura_01.jpg");
	background-repeat: repeat;
}

#start_tlo {
	width: 840px;
	height: 95%;
	margin: 5px auto;
	padding: 10px 10px;
}

#start_litery {
	width: 470px;
	height: 50px;
	margin: 10px auto;
	border: 2px ridge #004;
}

#litery {
	margin: 5px 5px;
	padding: 40px 5px;
	font-family: "Mogra",cursive;
	font-size: 0.5em;
	font-weight: bold;
	text-align: center;
	text-shadow: 4px -8px 8px rgba(200, 20, 0, 0.7);
	line-height: 90px;
	color: #fff070;
	top: 50px;
	left: 300px;
	position: relative;
	display: inline;
	opacity: 0;
}

#litera_odstep {
	width: 38px;
	border-bottom: 1px ridge #000028;
	float: left;
}

#napis_info {
	margin: 25px 5px 10px 5px;
	padding: 0;
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-family: "Reenie Beanie",arial,sans-serif;
	text-shadow: 4px -8px 8px rgba(200, 200, 0, 0.7);
	font-size: 4em;
	font-weight: bold;
	text-align: center;
	line-height: 90px;
	color: #ee3;
}

#but_info {
	width: 190px;
	height: 35px;
	font-size: 1.4em;
	background: #900;
	color: #FED;
	margin: 10px 0 0 335px;
}

</style>
<div id="start_wrapper">	
	<div id="start_tlo">
	<input type="button" id="but_info" value="Pomiń animację">
		<p id="napis_info">
		<?php 
		echo $_SESSION['nazwa'];
		?>
		</p>
		<p id="napis_info">WITAMY NA STRONIE</p>
<?php
				$napis1[0]='W'; $napis1[1]='I'; $napis1[2]='R'; $napis1[3]='T';
				$napis1[4]='U'; $napis1[5]='A'; $napis1[6]='L'; $napis1[7]='N';  $napis1[8]='Y';
				$napis1[9]='<br>'; $napis1[10]='A'; $napis1[11]='S'; $napis1[12]='Y'; $napis1[13]='S';
				$napis1[14]='T'; $napis1[15]='E'; $napis1[16]='N'; $napis1[17]='T';
				
				for ($i=0; $i<count($napis1); $i++) {
					echo '<div id="litery" class="d'.($i+1).'">'.$napis1[$i].'</div>';	
				}
?>
	</div>
</div>

<script type="text/javascript">
	var start;
	var lp=19;
   $(document).ready(function(){		 
		 
		$('#but_info').on("click", function(){
			window.location.href = '?m=0';
		})
		
		animacja();
		setTimeout(function(){
			anim_3();
		}, 4500);
		
		
		setTimeout(function(){
			window.location.href = '?m=0';
		}, 7500);
		

		function animacja() {
			lp--;
			if (lp==0) {
				clearTimeout(start);
			}
			animacja_tekst('d'+lp);
			start = setTimeout(animacja, 100);
		}

		function animacja_tekst(klasa) {
			var m = lp*2;
			$('.'+klasa).animate({
			left: m,
			fontSize: '80px',
			opacity: '1'}, 
			{
			duration: 1200,
			easing: 'easeOutBounce',
			complete: function() {
				$('.'+klasa).css("color", "#e22");	
			}});
		}
		
		function anim_3() {
			$('#start_wrapper').animate({
			height: '0px',
			opacity: '0.0'}, 
			{
			duration: 3000,
			easing: 'easeOutBounce',
			complete: function() {
				$('#litery').animate({
				marginLeft: '-400',
				opacity: '1'}, 
				{
					duration: 1500,
					easing: 'easeInOutCubic'
				});				
			}});
		}

});
</script>
