<?php
	if (!isset($_SESSION['nazwa'])) {
			header('Location: ../login.php');
			exit();
	}
	require_once('wiras_php/wa_baza/wa_polacz.php');
	$id = $_SESSION['id'];
	//pobranie nazw animacji dla aktualnego uczestnika
	$zap = "SELECT tytul FROM animacja WHERE id_user=$id ORDER BY data ASC";
	$wynik_pobierz = mysqli_query($db, $zap);
	$la = $wynik_pobierz->num_rows;
	$wynik = array();
		while ($wiersz = mysqli_fetch_row($wynik_pobierz)) 
		{
			$wynik[] = $wiersz;
		}
	//----------------------------------------------
	//pobranie nazw animacji dla wszystkich uczestnikow
	$zap = "SELECT id_user, tytul FROM animacja ORDER BY data ASC";
	$wynik_pobierz = mysqli_query($db, $zap);
	$lwa = $wynik_pobierz->num_rows;
	$wynik_w = array();
		while ($wiersz = mysqli_fetch_row($wynik_pobierz)) 
		{
			$wynik_w[] = $wiersz;
		}
	//----------------------------------------------
	
	$strona = $_SESSION['strona'];
	$lus = count($_SESSION['userss']);
	$animacje = array();
	$z=0;
	for ($i=0; $i<$lus; $i++) {
		for ($j=0; $j<$lwa; $j++) {
			if ($wynik_w[$j][0]==$_SESSION['usersid'][$i]) {
				$animacje[$i][$z]=$wynik_w[$j][1];
				$z++;
			}
		}
		$z=0;
	}
	
	
	if (isset($_GET['gry'])) {
			if ($_GET['gry']==0) {
				echo '<div style="width: 870px; height: 500px; margin: 5px auto;">';
					echo '<p style="font-size: 2em; text-align: center">Gry</p>';
					
					echo '<div style="width: 870px; float: left; margin: 0;">';
						echo '<div style="width: 338px; border: 2px ridge #a00; float: left; margin: 25px 0;"></div>';
						echo '<div id="nav_tablica">';
							echo '<a id="button_menu" href="?m=10&gry=1">Kolormania</a>';
						echo '</div>';
						echo '<div style="width: 338px; border: 2px ridge #a00; float: left; margin: 25px 0;"></div>';
					echo '</div>';	
					
					echo '<div style="width: 870px; float: left; margin: 0;">';
						echo '<div style="width: 338px; border: 2px ridge #a00; float: left; margin: 25px 0;"></div>';
						echo '<div id="nav_tablica">';
							echo '<a id="button_menu" href="?m=10&gry=2">Piętnastka</a>';
						echo '</div>';
						echo '<div style="width: 338px; border: 2px ridge #a00; float: left; margin: 25px 0;"></div>';
					echo '</div>';
					
					echo '<div style="width: 870px; float: left; margin: 0;">';
						echo '<div style="width: 338px; border: 2px ridge #a00; float: left; margin: 25px 0;"></div>';
						echo '<div id="nav_tablica">';
							echo '<a id="button_menu" href="?m=10&gry=3">Refklik</a>';
						echo '</div>';
						echo '<div style="width: 338px; border: 2px ridge #a00; float: left; margin: 25px 0;"></div>';
					
					echo '<div style="width: 870px; float: left; margin: 0;">';
						echo '<div style="width: 338px; border: 2px ridge #a00; float: left; margin: 25px 0;"></div>';
						echo '<div id="nav_tablica">';
							echo '<a id="button_menu" href="?m=10&gry=4">Reflit</a>';
						echo '</div>';
						echo '<div style="width: 338px; border: 2px ridge #a00; float: left; margin: 25px 0;"></div>';
					echo '</div>';	
					
					echo '<div style="width: 870px; float: left; margin: 0;">';
						echo '<div style="width: 338px; border: 2px ridge #a00; float: left; margin: 25px 0;"></div>';
						echo '<div id="nav_tablica">';
							echo '<a id="button_menu" href="?m=10&gry=5">Formularz - Ankieta</a>';
						echo '</div>';
						echo '<div style="width: 338px; border: 2px ridge #a00; float: left; margin: 25px 0;"></div>';
					echo '</div>';	
					
					echo '<div style="width: 870px; float: left; margin: 0;">';
						echo '<div style="width: 338px; border: 2px ridge #a00; float: left; margin: 25px 0;"></div>';
						echo '<div id="nav_tablica">';
							echo '<a id="button_menu" href="?m=10&gry=6">Animacja</a>';
						echo '</div>';
						echo '<div style="width: 338px; border: 2px ridge #a00; float: left; margin: 25px 0;"></div>';
					echo '</div>';	
					
				echo '</div></div>';
			}
	}
	
	
	
?>
<link rel="stylesheet" href="gry/animacja/css/animacja.css" />
<div id="anim_kontener">	
		<div id="anim_zaslon">
			<br>
			<span id="animo_odtwarzanie">Trwa odtwarzanie<br> animacji</span>
			
			<div style="width: 125px; background: #006; margin: 25px auto; border: 2px ridge #037; padding: 10px 10px;">
				<input type="button" id="anim_button" class="anim_stop" value="Stop" style="margin: 0">
			</div>
		</div>
		<div id="anim_sciezka">
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Klatki animacji
<?php
	for ($i=0; $i<100; $i++) {
		if ($i<9) {
			$napis = 'Klatka: 0'.($i+1);
		} else $napis = 'Klatka: '.($i+1);
		echo '<div id="anim_menu_ramka"><p id="anim_napis_klatka">'.$napis.'</p><input type="checkbox" id="anim_checkbox" class="ac'.$i.'"/><br />';
		echo '<p id="anim_napis_ra">Kierunek&nbsp;&nbsp;</p><select  id="anim_kierunek'.$i.'" class="anim_select_kierunek">';
			echo '<option value="al">Lewo</option>';
			echo '<option value="ap">Prawo</option>';
			echo '<option value="ad">Dół</option>';
			echo '<option value="ag">Góra</option>';
		echo '</select><br />';
		echo '<p id="anim_napis_ra">Odległość&nbsp;</p><select  id="anim_odleglosc'.$i.'" class="anim_select_odleglosc">';
			echo '<option value="10">10</option>';
			echo '<option value="20">20</option>';
			echo '<option value="30">30</option>';
			echo '<option value="40">40</option>';
			echo '<option value="50">50</option>';
			echo '<option value="75">75</option>';
			echo '<option value="80">80</option>';
			echo '<option value="100">100</option>';
			echo '<option value="120">120</option>';
			echo '<option value="125">125</option>';
			echo '<option value="150">150</option>';
			echo '<option value="160">160</option>';
			echo '<option value="175">175</option>';
			echo '<option value="200">200</option>';
			echo '<option value="225">225</option>';
			echo '<option value="240">240</option>';
			echo '<option value="250">250</option>';
			echo '<option value="280">280</option>';
			echo '<option value="320">320</option>';
			echo '<option value="360">360</option>';
			echo '<option value="400">400</option>';
			echo '<option value="450">450</option>';
			echo '<option value="500">500</option>';
			echo '<option value="550">550</option>';
			echo '<option value="600">600</option>';
			echo '<option value="650">650</option>';
			echo '<option value="700">700</option>';
			echo '<option value="750">750</option>';
			echo '<option value="800">800</option>';
		echo '</select><br />';
		echo '<p id="anim_napis_ra">Prędkość&nbsp;&nbsp;</p><select  id="anim_predkosc'.$i.'" class="anim_select_predkosc">';
			echo '<option value=100>100</option>';
			echo '<option value=200>200</option>';
			echo '<option value=250>250</option>';
			echo '<option value=300>300</option>';
			echo '<option value=400>400</option>';
			echo '<option value=500>500</option>';
			echo '<option value=750>750</option>';
			echo '<option value=1000>1000</option>';
			echo '<option value=1500>1500</option>';
			echo '<option value=2000>2000</option>';
			echo '<option value=2500>2500</option>';
			echo '<option value=3000>3000</option>';
			echo '<option value=4000>4000</option>';
			echo '<option value=5000>5000</option>';
		echo '</select><br />';
		echo '<p id="anim_napis_ra">Efekt&nbsp;</p><select  id="anim_efekt'.$i.'" class="anim_select_efekt" style="width: 92px;">';
			echo '<option value=0>Bez efektu</option>';
			echo '<option value=1>1-easeInBounce</option>';
			echo '<option value=2>2-easeOutBounce</option>';
			echo '<option value=4>3-easeInElastic</option>';
			echo '<option value=5>4-easeOutElastic</option>';
			echo '<option value=6>5-easeInOutElastic</option>';
			echo '<option value=7>6-easeInCirc</option>';
			echo '<option value=8>7-easeOutCirc</option>';
			echo '<option value=9>8-easeInOutCirc</option>';
			echo '<option value=10>9-easeInBack</option>';
			echo '<option value=11>10-easeOutBack</option>';
		echo '</select>';
		echo '</div>';
	}
?>
		</div>
		
		<div id="anim_menu">
			
			<span style="margin: 3px 0 0 10px;">&nbsp;&nbsp;&nbsp;&nbsp;Ustawienia</span>
			<input type="button" id="anim_button" class="anim_otworz_menu" value="Zamknij Menu">	
			<input type="button" id="anim_button" class="anim_otworz_osoby" value="Otwórz Pokazy">	
			
			<span style="margin: 3px 0 0 17px;">-----------------</span>
			<input type="button" id="anim_button" class="anim_start" value="Start animacji" style="border-radius: 9px">
			
			<div id="anim_menu_ramka" style="width: 110px; height: 45px; margin: 2px 0 5px 3px">
				<p id="anim_napis_klatka">&nbsp;Miejsce startu</p><br />
				
				<select  id="anim_kieruneks" class="anim_select_start" style="width: 100px; margin: 2px 0 5px 5px;">
				<option value="1">Lewy górny</option>
				<option value="2">Góra środek</option>
				<option value="3">Prawy górny</option>
				<option value="4">Prawy środek</option>
				<option value="5">Prawy dolny</option>
				<option value="6">Dół środek</option>
				<option value="7">Lewy dolny</option>
				<option value="8">Lewy środek</option>
				<option value="9">Środek ekranu</option>
				</select>
			</div>
			<div id="anim_menu_ramka" style="width: 110px; height: 45px; margin: 2px 0 5px 3px">
				<p id="anim_napis_klatka">&nbsp;Wybór obrazka</p><br />
				
				<select  id="anim_obrazek" class="anim_selectp" style="width: 100px; margin: 2px 0 5px 5px;">
				<option value="1">Kot</option>
				<option value="2">Buźka - 1</option>
				<option value="3">Buźka - 2</option>
				<option value="4">Motyl</option>
				<option value="5">Miś</option>
				<option value="6">Pies</option>
				<option value="7">Piłkarz</option>
				<option value="8">Kula - 1</option>
				<option value="9">Kula - 2</option>
				<option value="10">Kula - 3</option>
				</select>
			</div>
			
			<div id="anim_menu_ramka" style="width: 110px; height: 45px; margin: 2px 0 5px 3px">
				<p id="anim_napis_klatka">&nbsp;Wybór tapety</p><br />
				
				<select  id="anim_tapeta" class="anim_selectp" style="width: 100px; margin: 2px 0 5px 5px;">
				<option value="1">Brak</option>
				<option value="2">Kratka-1</option>
				<option value="3">Kratka-2</option>
				<option value="4">Kratka-3</option>
				<option value="5">Kratka-4</option>
				<option value="6">Kratka-5</option>
				<option value="7">Kratka-6</option>
				<option value="8">Kulki</option>
				<option value="9">Tapeta-1</option>
				<option value="10">Tapeta-2</option>
				<option value="11">Tapeta-3</option>
				<option value="12">Tapeta-4</option>
				<option value="13">Tapeta-5</option>
				<option value="14">Zadanie-1</option>
				<option value="15">Zadanie-2</option>
				<option value="16">Zadanie-3</option>
				</select>
			</div>
			
			<div id="anim_menu_ramka" style="width: 110px; height: 45px; margin: 2px 0 5px 3px">
				<p id="anim_napis_klatka">&nbsp;Wybór muzyki</p><br />
				
				<select  id="anim_muzyka" class="anim_selectp" style="width: 100px; margin: 2px 0 5px 5px;">
				<option value="1">Brak muzyki</option>
				<option value="2">Podmoskiewski zmierzch</option>
				<option value="3">Prząśniczka</option>
				<option value="4">Gdybym miał gitarę</option>
				<option value="5">Hej sokoły</option>
				<option value="6">Szła dzieweczka</option>
				<option value="7">Dla Elizy</option>
				<option value="8">Love story</option>
				<option value="9">Demo-1</option>
				</select>
			</div>
			
			<div id="anim_menu_ramka" style="width: 110px; height: 45px; margin: 2px 0 5px 3px">
				<p id="anim_napis_klatka">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Kolor tła</p><br />
				
				<input type="text" id="anim_cp" class="jscolor {closable:true,closeText:'Zamknij'}" value="#000000" /><br />
			</div>
			
			<div id="anim_menu_ramka" style="width: 110px; height: 45px; margin: 2px 0 5px 3px">
				<p id="anim_napis_klatka">&nbsp;&nbsp;&nbsp;&nbsp;Kolor tekstu</p><br />
				
				<input type="text" id="anim_cpt" class="jscolor {closable:true,closeText:'Zamknij'}" value="#FFFFFF" /><br />
			</div>
			
			<div id="anim_menu_ramka" style="width: 110px; height: 45px; margin: 2px 0 5px 3px">
				<p id="anim_napis_klatka">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Demo</p><br />			
				<select  id="anim_przyklad" class="anim_selectp" style="width: 100px; margin: 2px 0 5px 5px;">
				<option value="1">Demo - 1</option>
				<option value="2">Demo - 2</option>
				<option value="3">Demo - 3</option>
				</select>
			</div>
			
			<a id="anim_button" href="?m=10&gry=0" style="width: 85px; text-align: center; border-radius: 8px">Wyjście</a>
			
		</div>	
				
		<div id="clear">
		</div>
		

		<div id="anim_plansza">
			<div id="anim_box">
			<img style="width:80px" src="img/gif/kot1.gif" alt="gif" />
			</div>
			<div id="anim_tekst_div">
			</div>
			
			<div id="animo_tlo">
			<div style="width: 810px; background: #028; border: 2px ridge #039; margin: 3px 0 0 8px; font-size: 1.1em; padding: 5px 5px;">
			Wybierz dostępną animację jednego z uczestników, a następnie naciśnij przycisk z jego nazwą
			</div>
<?php
for ($i=0; $i<$lus; $i++) {
	echo '<div style="float: left; width: 124px; height: 125px; background: #005; margin: 5px 5px; border-radius: 12px 12px 10px 10px; border: 3px ridge #028">';
	$fot = 'img/avatar/male/'.$_SESSION['usersn'][$i].'.jpg';
	if (file_exists ( $fot )) {
		echo '<div id="animo_avatar" style=\'background: url("'.$strona.'img/avatar/male/'.$_SESSION['usersn'][$i].'.jpg"); background-repeat: no-repeat;\'>';
	} else {
		echo '<div id="animo_avatar" style=\'background: url("'.$strona.'img/avatar/male/fwa.jpg"); background-repeat: no-repeat;\'>';
	}
		echo '</div>';
		//--
		if (isset($animacje[$i])) {
			$lau = count($animacje[$i]);
			echo '<select  class="animo_animsel" id="as'.$_SESSION['usersid'][$i].'">';
			for ($j=0; $j<$lau; $j++) {
				echo '<option value="'.$animacje[$i][$j].'">'.$animacje[$i][$j].'</option>';
			}
			echo '</select>';
			echo '<br><input type="button" id="oa'.$_SESSION['usersid'][$i].'" class="anim_button2" value="'.$_SESSION['usersn'][$i].'">';
		} else echo '<span id="animo_napis">Brak animacji</span>';
			//---

		echo '</div>';	
}
?>
			</div>
			
			
			
			<div id="anim_menug">		
				<div id="anim_tytul_animacji">&nbsp;&nbsp;MENU&nbsp;&nbsp;-&nbsp;&nbsp;Nazwa projektu: Nowa animacja</div>
				<div style="width: 750px; height: 28px;"></div>
				<div id="anim_menu_okno">
				<span style="font-size: 1.1em; color: #8EF;">Utwórz nową animację</span><br />
				<input type="button" id="anim_button" class="anim_nowa" value="Utwórz nową" style="width: 100px">
				</div>
				
				<div id="anim_menu_okno_otworz">
				<span style="font-size: 1.1em; color: #8EF;">Otwórz zapisaną animację</span><br />
<?php
	
	if ($la>0) {
		echo 'Twoje zapisane animacje';
		echo '<select  id="anim_sotworz" class="anim_selectp" style="width: 250px; margin: 2px 0 5px 5px;">';
		for ($i=0; $i<$la; $i++) {
			echo '<option value="'.$wynik[$i][0].'">'.$wynik[$i][0].'</option>';
		}
		echo '</select>';
		echo '<input type="button" id="anim_button" class="anim_otworz" value="Otwórz" style="width: 100px">';
	} else {
		echo '<br />Brak zapisanych animacji<br />';
	}	
	
?>	
				</div>
				
				<div id="anim_menu_okno">
				<span style="font-size: 1.1em; color: #8EF;">Zapisz animację</span><br />
				Wpisz nazwę animacji
				<input type="text" id="anim_tytul" style="width: 250px; margin: 2px 0 5px 0;" />
				<input type="button" id="anim_button" class="anim_zapisz" value="Zapisz" style="width: 100px; margin: 0px 0 5px 15px;">
				</div>
				
				<div id="anim_menu_okno" style="width: 565px">
				<span style="font-size: 1.1em; color: #8EF;">Wpisz tekst animacji</span><br />
				<textarea id="anim_tekst" rows="4" cols="110" placeholder="Wpisz tekst, lub pozostaw to pole puste, jeżeli nie chcesz, aby tekst animacji pojawił się na ekranie"></textarea>
				</div>
				
				<div id="anim_menu_okno_usun">
				<span style="font-size: 1.1em; color: #8EF;">Usuń wybraną animację</span><br />
<?php
	
	if ($la>0) {
		echo 'Wybierz animację do usunięcia';
		echo '<select  id="anim_uotworz" class="anim_selectp" style="width: 250px; margin: 2px 0 5px 5px;">';
		for ($i=0; $i<$la; $i++) {
			echo '<option value="'.$wynik[$i][0].'">'.$wynik[$i][0].'</option>';
		}
		echo '</select>';
		echo '<input type="button" id="anim_button" class="anim_usun" value="Usuń" style="width: 100px">';
	} else {
		echo '<br />Brak zapisanych animacji<br />';
	}	
	
?>	
				</div>
				
				
				
				<div style="width: 810px; background: #FAA; height: 1px; border: 2px ridge #E40; float: left; margin: 10px 0 10px 20px;"></div>
				<div style="width: 822px; text-align: center; float: left; margin: 0 0 0 10px;">
				<span style="font-size: 1.3em; color: #8FA; font-weight: bold; text-align: center">P O M O C</span><br />
				</div>
				<div id="anim_pomoc">
		Oprogramowanie ma na celu zapoznanie się z podstawami animacji komputerowej oraz poruszaniem się w wirtualnej przestrzeni 
		przez określanie odpowiednich kierunków przemieszczania się. Program pozwoli zobaczyć jak poruszają się obiekty na ekranie 
		komputera, zapozna z kierunkami oraz nauczy kreatywnego myślenia. Ruchy obiektu można dopasować do wybranej wcześniej melodii, 
		która może być odtwarzana z animacją. Każda animacja może zawierać własny kolor tła, tapetę, płynnie przesuwający się tekst, 
		oraz do wyboru jeden z animowanych obiektów.<br />
		------------------------------------------------------------<br />
		<b>Klatki animacji</b><br />
		Zaczynając od lewej strony ekranu, mamy najpierw pasek z kolejnymi klatkami animacji. Każda ze stu klatek pozwala na 
		zaprojektowanie jednego ruchu obiektu. Do określenia ruchu służą cztery parametry: Kierunek, Odległość, Prędkość oraz Efekt.<br />
				
		<b>Kierunek</b> – z rozwijanej listy możemy wybrać jeden z czterech kierunków: Lewo, Prawo, Góra lub Dół. Należy jednak pamiętać, 
		że jeżeli określimy kierunek obiektu na Lewo, a obiekt będzie położony w tym czasie przy lewej krawędzi ekranu, to wyjeżdżając 
		poza ekran animacji stanie się on niewidoczny.<br /><br />
		
		<b>Odległość</b> - Ustawienie odległości o jaką ma przesunąć się obiekt. Rozwijana lista pozwala na wybór jeden z kilkunastu parametrów. 
		Liczby znajdujące się na tej liście oznaczają ile pikseli przesunie się obiekt w kierunku, który został ustalony w poprzednim kroku.<br /><br />
		
		<b>Prędkość</b> – Ustalenie prędkości a dokładnie czasu, w którym wykona się ruch obiektu. Wartości na rozwijanej liście podane są w milisekundach. 
		Tak więc liczba 1000 oznacza 1000 milisekund, czyli 1 sekundę, liczba 100 oznacza 1/10 sekundy, liczba 500 to połowa sekundy, a wybranie 
		liczby 3000 sprawi, że jeden ruch będzie odbywał się w ciągu 3 sekund. Należy przede wszystkim pamiętać, że im mniejszą liczbę wybierzemy, 
		tym czas wykonania ruchu będzie krótszy a przez to też szybszy.<br /><br />
		
		<b>Efekt</b> – Ostatni parametr pozwala na wybranie z rozwijanej listy jednego z 10 efektów poruszania się obiektu. Wybranie pierwszego 
		parametru – Brak efektu, spowoduje że ruch będzie odbywał się płynnie, bez żadnych przyspieszeń, spowolnień. Wybranie jednego 
		z dostępnych efektów doda sprawi, że obiekt będzie poruszał się np. jak spadający przedmiot. Działanie poszczególnych efektów 
		należy przetestować indywidualnie, wybierając jedną klatkę animacji, a w niej: kierunek dół, długość 600, prędkość 5000 i jeden 
		z dostępnych efektów.<br />
		------------------------------------------------------------<br />
		<b>Ustawienia</b><br />
		Panel służący do wyboru dodatkowych opcji, których opis znajduje się poniżej. <br />
		
		<b>Otwórz/Zamknij Menu</b> – Przycisk służący do zamykania lub otwierania okna Menu, które zostanie opisane niżej.<br /><br /> 
		
		<b>Otwórz/Zamknij Pokazy</b> - Przycisk służący do zamykania lub otwierania okna Pokazy, gdzie można zobaczyć animacje innych użytkowników Platformy.<br /><br /> 
		
		<b>Start animacji</b> – Kliknięcie na ten przycisk uruchomi naszą animację. Okna Menu oraz Pokazy zostaną automatycznie zamknięte, a po lewej stronie 
		wyświetli się panel z przyciskiem Stop, pozwalający na zatrzymanie animacji. Po zakończeniu animacji panel ten zostaje automatycznie zamknięty.<br /><br /> 
		

		<b>Miejsce startu</b> – Lista rozwijana, w której do wyboru jest 9 opcji, określające położenie początkowe animowanego obrazka w postaci gif-a.<br /><br />
		
		<b>Wybór obrazka</b> – Umożliwia wybór z listy obrazka, który będzie poruszał się po ekranie animacji. Do wyboru jest 10 animowanych gif-ów.<br /><br />
		
		<b>Wybór tapety</b> – Umożliwia wybór tapety dla ekranu animacji. Tapety o nazwie: Kratka-6 oraz Kulki są przeźroczyste, w tym przypadku znaczenie 
		będzie miał także wybór koloru tła planszy. Dodatkowo 3 ostatnie tapety z listy są także zadaniem do wykonania dla użytkowników Platformy. 
		Po wybraniu nazw: Zadanie-1, Zadanie-2 lub Zadanie-3 zostanie wyświetlona plansza z naniesioną trasą animacji. Każda trasa posiada punkt 
		Start oraz Meta i naniesione ponumerowane strzałki, które określają kierunek oraz długość ruchu, który należy zaprogramować. Zadanie-1 
		jest najłatwiejsze, posiada tylko 5 ruchów do zaprojektowania. Zadanie-2 to poziom średni (10 ruchów), a Zadanie-3 poziom trudny (15 ruchów).<br /><br /> 
		
		<b>Wybór muzyki</b> – Każda animacja pozwala na równoczesne odtwarzanie muzyki, do wyboru której służy ta lista. Standardowe ustawienie to pozycja 
		pierwsza na liście, czyli brak muzyki. Pozostawienie tej opcji bez zmian oznacza, że podczas animacji nie będzie odtwarzany dźwięk. 
		Jeżeli chcemy, aby naszej animacji towarzyszyła muzyka należy wybrać jeden z utworów dostępnych na liście.<br /><br />
		
		<b>Kolor tła</b> – Pozwala na ustalenie koloru tła ekranu animacji.<br /><br />
		
		<b>Kolor tekstu</b> – Jeżeli do naszej animacji dodamy teksy opcja ta pozwali na ustalenie jego koloru.<br /><br />
		
		<b>Demo</b> – Lista rozwijana, z której można wybrać jedną z trzech dostępnych demonstracyjnych animacji. Po wybraniu z listy jednej z opcji 
		wystarczy nacisnąć przycisk Start animacji. Zostaną ustawione odpowiednie parametry, takie jak dźwięk, obrazek, tapeta i automatycznie zostanie 
		uruchomiony pokaz animacji. Po zakończeniu odtwarzania można podpatrzeć jak została ona stworzona oglądając poszczególne 
		klatki na pasku: Klatki animacji. Po zakończeniu odtwarzania Demo-2 i Demo-3 dodatkowo możemy zobaczyć tekst użyty do tych demonstracji.<br /><br />
		
		<b>Wyjście</b> – Kliknięcie tego przycisku zamyka program Animacja. Użytkownik zostanie przeniesiony do Menu wyboru Gier.<br />
		------------------------------------------------------------<br />
		<b>Menu</b><br />
		<b>Utwórz nową animację</b> – Przywraca ustawienia domyślne programu to znaczy usuwa wszystkie wprowadzone wcześniej zmiany lub wczytaną wcześniej z bazy
		danych animację.<br /><br />
		<b>Otwórz zapisaną animację</b> – Jeżeli wcześniej zostały zapisane jakieś animacje, pozwala na pobranie wybranej animacji z bazy danych.<br /><br /> 
		<b>Zapisz animację</b> – Pozwala na zapis stworzonej animacji w bazie danych. Zapis możliwy pod warunkiem, że zostanie wpisana nazwa animacji 
		oraz zaznaczona przynajmniej jedna klatka.<br /><br />
		<b>Wpisz tekst animacji</b> – Pozwala na dodanie tekstu lub dodatkowych obrazków do animacji. Jeżeli do pola tekstowego nie zostanie wpisany 
		tekst, animacja tekstu zostanie pominięta. Animacja tekstu może zawierać dodatkowo animowany Gif, w takim przypadku do pola tekstowego należy 
		należy skopiować jeden z poniższych przykładów:<br />
1)&nbsp;&nbsp;&nbsp;&nbsp;	  &ltimg src="img/gif/kot1.gif" style="width: 40px; height: 70px"/&gt <br />
2)&nbsp;&nbsp;&nbsp;&nbsp;    &ltimg src="img/gif/buzka1.gif" style="width: 60px; height: 70px"/&gt <br />
3)&nbsp;&nbsp;&nbsp;&nbsp;	  &ltimg src="img/gif/buzka2.gif" style="width: 40px; height: 70px"/&gt <br />
4)&nbsp;&nbsp;&nbsp;&nbsp;	  &ltimg src="img/gif/kula1.gif" style="width: 50px; height: 70px"/&gt <br />
5)&nbsp;&nbsp;&nbsp;&nbsp;	  &ltimg src="img/gif/kula2.gif" style="width: 50px; height: 70px"/&gt <br />
6)&nbsp;&nbsp;&nbsp;&nbsp;	  &ltimg src="img/gif/kula3.gif" style="width: 50px; height: 70px"/&gt <br />
7)&nbsp;&nbsp;&nbsp;&nbsp;	  &ltimg src="img/gif/kula1.gif" style="width: 50px; height: 70px"/&gt <br />
8)&nbsp;&nbsp;&nbsp;&nbsp;	  &ltimg src="img/gif/mis1.gif" style="width: 50px; height: 70px"/&gt <br />
9)&nbsp;&nbsp;&nbsp;&nbsp;	  &ltimg src="img/gif/motyl.gif" style="width: 50px; height: 70px"/&gt <br />
10)&nbsp;&nbsp;&nbsp;&nbsp;	   &ltimg src="img/gif/pies1.gif" style="width: 50px; height: 70px"/&gt <br />
11)&nbsp;&nbsp;&nbsp;&nbsp;	   &ltimg src="img/gif/pilkarz1.gif" style="width: 50px; height: 70px"/&gt <br /><br />

<b>Usuń wybraną animację</b> – Możliwość usunięcia z bazy danych wybranej  z listy animacji.<br />
------------------------------------------------------------<br />
<b>Menu</b><br />
<b>Otwórz/Zamknij Pokazy</b> – Zależnie od aktualnego stanu zamyka lub otwiera okno pokazu animacji wszystkich uczestników
Platformy. W przypadku, gdy dany użytkownik nie zapisał jeszcze żadnej animacji w bazie, pojawi się napis: 
Brak animacji.<br /> 
<b>Uruchomienie animacji użytkownika</b> – wybierz z listy nazwę animacji a następnie kliknij na przycisk
 z nazwą uczestnika. Okno Pokazy zostanie zamknięte i rozpocznie się pokaz animacji. <b>Uwaga!</b>
 Uruchomienie animacji użytkownika powoduje kasowanie wszystkich ustawień po jej zakończeniu, lub naciśnięciu
 przycisku Stop. Celem tego działania jest uniemożliwienie kopiowania animacji.<br /><br />
 
<b>Pierwsze kroki</b> – Na początek proponuję obejrzenie jednej z trzech demonstracji. Przyjrzenie się jak są ustawione
 poszczególne klatki animacji, jakie są zastosowane efekty. Jeżeli już zapoznamy się z obsługą oprogramowania, 
 poznamy do czego służą poszczególne przyciski oraz przyjrzymy się jak zbudowane są klatki animacji w Demo, 
 możemy pokusić się na stworzenie pierwszej animacji. Na początek wystarczy zaznaczyć kilka klatek i ustawić 
 w nich odpowiednio pierwsze 3 parametry, pozostawiając bez zmian funkcję: Efekt. Kolejnym krokiem może być 
 ustawienie tapety Zadanie-1, Zadanie-2 lub nieco później, najtrudniejszej wersji Zadanie-3. Jeżeli uda się 
 przejść przez te pierwsze kroki to wierzę w to, że kolejnym będzie stworzenie fantastycznej animacji która, 
 mam nadzieję przyniesie wiele radości.<br /><br />
Pozdrawiam serdecznie i życzę wiele sukcesów w kreatywnym tworzeniu,&nbsp;&nbsp;<img src="img/emoty/chatownik.gif"/><br />
<span style="color: #D00; font-size: 1.2em;">Admin.</span>&nbsp;&nbsp;<img src="img/emoty/usmiech.gif" />

				</div>
		</div>
			
			
		</div>	

</div>

<script type="text/javascript">

<?php
	echo 'var iduser = '.$_SESSION['id'].';';
?>
	var id_uczestnik = false;
	var muz1 = new buzz.sound("audio/piano-demo/06_podmoskiewski zmierzch.mp3");
	var muzyka=false;
	var tekst_anim = false;
	var ta = [];
	ta[0]='linear';
	ta[1]='easeInBounce';	ta[2]='easeOutBounce';	ta[3]='easeInOutBounce';
	ta[4]='easeInElastic';	ta[5]='easeOutElastic';	ta[6]='easeInOutElastic';
	ta[7]='easeInCirc';		ta[8]='easeOutCirc';	ta[9]='easeInOutCirc';
	ta[10]='easeInBack';	ta[11]='easeOutBack';	ta[12]='easeInOutBack';
	ta[13]='easeInQuint';	ta[14]='easeOutQuint';	ta[15]='easeInOutQuint';
	ta[16]='easeInExpo';	ta[17]='easeOutExpo';	ta[18]='easeInOutExpo';
	ta[19]='easeInSine';	ta[20]='easeOutSine';	ta[21]='easeInOutSine';
	ta[22]='easeInQuad';	ta[23]='easeOutQuad';	ta[24]='easeInOutQuad';
	ta[25]='easeInCubic';	ta[26]='easeOutCubic';	ta[27]='easeInOutCubic';
	ta[28]='easeInQuart';	ta[29]='easeOutQuart';	ta[30]='easeInOutQuart';
	var anim_x = [];
	var anim_y = [];
	var anim_predkosc = [];
	var anim_efekt = [];
	var animx = 0;
	var animy = 0;
	var startx = 0;
	var starty = 0;
	var anim_lp = 0;
	var anim_szer = 80;
	var anim_wys = 100;
	
	$(document).ready(function(){		
		var szer = window.innerWidth;
		var wys = window.innerHeight;

	$('#anim_kontener').width(szer-5);
	$('#anim_kontener').height(wys);
	var ods = szer-1180;
	
	if (ods>=0) {
		$('#anim_plansza').css({right: ((ods)/2)});
	} else {
		$('#anim_plansza').css({right: 0});
	}
	
	if (((wys-760)/2)>=5) {
		$('#anim_plansza').css({top: (wys-740)/2});
	} else {
		$('#anim_plansza').css({top: 5});
	}
		
		function zapiszKlatki() {
			anim_x.splice(0, anim_x.length);
			anim_y.splice(0, anim_y.length);
			anim_predkosc.splice(0, anim_predkosc.length);
			anim_efekt.splice(0, anim_efekt.length);
			animx = startx;
			animy = starty;
			$("#anim_checkbox:checked").each(function() {
				var id = $(this).attr('class');
				var nid = id.slice(2, id.length);
				odczyt_klatki(nid);	
			});
		}
		
		$('.anim_zapisz').click(function() {
			zapiszKlatki();
		});
		
		function odczyt_klatki(id) {
			var anim_kierunek = $('#anim_kierunek'+id).val();
			var a_odleglosc = $('#anim_odleglosc'+id).val();
			var a_p = $('#anim_predkosc'+id).val();
			var a_e = $('#anim_efekt'+id).val();
			var anim_odleglosc = parseInt(a_odleglosc);
			var a_predkosc = parseInt(a_p);
			var a_efekt =  parseInt(a_e);
			
			if (anim_kierunek=='al') animx-=anim_odleglosc;
			if (anim_kierunek=='ap') animx+=anim_odleglosc;
			if (anim_kierunek=='ag') animy-=anim_odleglosc;
			if (anim_kierunek=='ad') animy+=anim_odleglosc;
			anim_x.push(animx);
			anim_y.push(animy);
			anim_predkosc.push(a_predkosc);
			anim_efekt.push(ta[a_efekt]);

		}
		
		
		$('.anim_stop').click(function() {
			if (id_uczestnik) {
				id_uczestnik=false;
				nowaAnimacja();
			} 
			$('#anim_zaslon').toggle(300);
			muz1.stop();
			$("#anim_box").stop();
			$("#anim_tekst_div").stop();
		});	

		$('.anim_start').click(function() {
			startAnimacji();
		});	

		function startAnimacji() {
			$('#anim_zaslon').toggle(300);
			zamknijOkna();
			anim_lp=0;
			$('#anim_box').css({top: starty, left: startx});
			if (muzyka) {
				muz1.stop();
				muz1.play();
			}
			start_animacji();
			$('#anim_tekst_div').css({top: 720});
			
			if (tekst_anim)	{
				animacjaTekstu();
			}
		}
		
		
		//-------------------------------------------------------------------
		//WYBIERZ MIEJSCE STARTU
		$('#anim_kieruneks').change(function() {
			wybierzStart($('#anim_kieruneks').val());
		});	
		
		function wybierzStart(nr) {
			switch(nr) {
				case '1':
					animx = 0;
					animy = 0;
					startx = animx;
					starty = animy;
					break;
				case '2':
					animx = 440-(anim_szer/2);
					animy = 0;
					startx = animx;
					starty = animy;
					break;
				case '3':
					animx = 880-anim_szer;
					animy = 0;
					startx = animx;
					starty = animy;
					break;
				case '4':
					animx = 880-anim_szer;
					animy = 360-(anim_wys/2);;
					startx = animx;
					starty = animy;
					break;
				case '5':
					animx = 880-anim_szer;
					animy = 750-anim_wys;
					startx = animx;
					starty = animy;
					break;
				case '6':
					animx = 440-(anim_szer/2);
					animy = 750-anim_wys;
					startx = animx;
					starty = animy;
					break;	
				case '7':
					animx = 0;
					animy = 750-anim_wys;
					startx = animx;
					starty = animy;
					break;
				case '8':
					animx = 0;
					animy = 360-(anim_wys/2);
					startx = animx;
					starty = animy;
					break;
				case '9':
					animx = 440-(anim_szer/2);
					animy = 360-(anim_wys/2);
					startx = animx;
					starty = animy;
					break;
			}
			$('#anim_box').css({top: 0, left: 0});
			$('#anim_box').css({top: animy, left: animx});
			zapiszKlatki();
		}
		//-------------------------------------------------------------------
		
		
		$('#anim_przyklad').change(function() {
			var anim_ps = $('#anim_przyklad').val();
			switch(anim_ps) {
				case '1':
					ustaw_1();
					break;
				case '2':
					ustaw_2();
					break;
				case '3':
					ustaw_3();
					break;
			}
			zapiszKlatki();
		});	
		
		
		//-------------------------------------------------------------------
		//WYBIERZ MUZYKE
		$('#anim_muzyka').change(function() {
			wybierzMuzyke($('#anim_muzyka').val())
		});	
		
		function wybierzMuzyke(nr) {
			switch(nr) {
				case '2':
					muz1 = new buzz.sound("audio/piano-demo/06_podmoskiewski zmierzch.mp3");
					break;
				case '3':
					muz1 = new buzz.sound("audio/piano-demo/05_przasniczka.mp3");
					break;
				case '4':
					muz1 = new buzz.sound("audio/piano-demo/07_gdybym mial gitare.mp3");
					break;
				case '5':
					muz1 = new buzz.sound("audio/piano-demo/08_hej sokoly.mp3");
					break;
				case '6':
					muz1 = new buzz.sound("audio/piano-demo/09_szla dzieweczka.mp3");
					break;
				case '7':
					muz1 = new buzz.sound("audio/piano-demo/10_dla elizy.mp3");
					break;
				case '8':
					muz1 = new buzz.sound("audio/piano-demo/11_love story.mp3");
					break;
				case '9':
					muz1 = new buzz.sound("audio/piano-demo/12_demo1.mp3");
					break;
			}
			if (nr=='1') {
				muzyka=false;
			} else muzyka=true;
		}		
		//-------------------------------------------------------------------
		
		
		//-------------------------------------------------------------------
		//WYBIERZ OBRAZEK
		$('#anim_obrazek').change(function() {
			wybierzObrazek($('#anim_obrazek').val());
		});	
		
		function wybierzObrazek(nr) {
			var s = '';
			switch(nr) {
				case '1':
					s='<img style="width:80px" src="img/gif/kot1.gif" alt="gif" />';
					break;
				case '2':
					s='<img style="width:80px" src="img/gif/buzka1.gif" alt="gif" />';
					break;
				case '3':
					s='<img style="width:80px" src="img/gif/buzka2.gif" alt="gif" />';
					break;
				case '4':
					s='<img style="width:80px" src="img/gif/motyl.gif" alt="gif" />';
					break;
				case '5':
					s='<img style="width:80px" src="img/gif/mis1.gif" alt="gif" />';
					break;
				case '6':
					s='<img style="width:80px" src="img/gif/pies1.gif" alt="gif" />';
					break;
				case '7':
					s='<img style="width:80px" src="img/gif/pilkarz1.gif" alt="gif" />';
					break;
				case '8':
					s='<img style="width:80px" src="img/gif/kula1.gif" alt="gif" />';
					break;
				case '9':
					s='<img style="width:80px" src="img/gif/kula2.gif" alt="gif" />';
					break;
				case '10':
					s='<img style="width:80px" src="img/gif/kula3.gif" alt="gif" />';
					break;
			}
			$('#anim_box').html(s);
		}
		//-------------------------------------------------------------------
		
		
		//-------------------------------------------------------------------
		//WYBIERZ TAPETE
		$('#anim_tapeta').change(function() {
			wybierzTapete($('#anim_tapeta').val());
		});
		
		function wybierzTapete(nr) {
			switch(nr) {
				case '1':
					$('#anim_plansza').css('background-image', 'none');
					break;
				case '2':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_tlo1.jpg")');
					break;	
				case '3':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_tlo2.png")');
					break;	
				case '4':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_tlo3.jpg")');
					break;	
				case '5':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_tlo4.jpg")');
					break;
				case '6':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_tlo5.jpg")');
					break;
				case '7':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_tlo6.png")');
					break;
				case '8':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_tlo7.png")');
					break;
				case '9':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_tlo8.jpg")');
					break;	
				case '10':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_tlo9.jpg")');
					break;
				case '11':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_tlo10.jpg")');
					break;	
				case '12':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_tlo11.jpg")');
					break;	
				case '13':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_tlo12.jpg")');
					break;
				case '14':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_zad1.png")');
					break;	
				case '15':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_zad2.png")');
					break;	
				case '16':
					$('#anim_plansza').css('background-image', 'url("gry/animacja/img/anim_zad3.png")');
					break;		
			}
		}
		//-------------------------------------------------------------------
		
		function start_animacji() {
			var l=anim_x[anim_lp];
			var g=anim_y[anim_lp];
			var v=anim_predkosc[anim_lp];
			var ra=anim_efekt[anim_lp];
			if (anim_lp<anim_x.length) {
				animacja(l, g, v, ra);
			} else {
				muz1.stop();
				$("#anim_tekst_div").stop();
				if (id_uczestnik) {
					id_uczestnik=false;
					nowaAnimacja();
				} 
				$('#anim_zaslon').toggle(300);
				alert('Koniec animacji');
			}
			anim_lp++;
		}		
		
		function animacjaTekstu() {
			var ob = $("#anim_tekst_div");
			 var wys = ob.height()+730;
			ob.animate({
				top: '-='+wys+'px'
			  }, 75000, function() {
					$('#anim_tekst_div').css({top: 720});
					animacjaTekstu();
			  });
		}
		
		function animacja(l, g, v, ra) {
			$('#anim_box').animate({
				left: l,
				top: g
				 }, 
				{
				duration: v,
				easing: ra,
				complete: function() {
                     start_animacji();
				}});
		}
		
		
		//ROTACJA
		/*
		function AnimateRotate(d) {
        $("#anim_box").animate({
          '-moz-transform':'rotate('+d+'deg)',
          '-webkit-transform':'rotate('+d+'deg)',
          '-o-transform':'rotate('+d+'deg)',
          '-ms-transform':'rotate('+d+'deg)',
          'transform':'rotate('+d+'deg)'
			}, 1000); 
		}
		
		function ar(angle) {
			var $elem = $('#anim_box');
			$({deg: 0}).animate({deg: angle}, {
				duration: 4000,
				step: function(now) {
					$elem.css({
						transform: 'translateX(' + now + 'deg)'
						});
				}
			});
		}
		*/
		
		
		$(document).on("change", "#anim_checkbox", function () {
			zapiszKlatki();
		});
		
		$(document).on("change", ".anim_select_kierunek", function () {
			zapiszKlatki();
		});
		
		$(document).on("change", ".anim_select_odleglosc", function () {
			zapiszKlatki();
		});
		
		$(document).on("change", ".anim_select_predkosc", function () {
			zapiszKlatki();
		});
		
		$(document).on("change", ".anim_select_efekt", function () {
			zapiszKlatki();
		});
		
		//Stworz nowa animacje
		$('.anim_nowa').on("click", function(){
			nowaAnimacja();
		});
		
		function nowaAnimacja() {
			for (i=0; i<100; i++) {
				$('#anim_kierunek'+i).val('al');
				$('#anim_odleglosc'+i).val('10');
				$('#anim_predkosc'+i).val('100');
				$('#anim_efekt'+i).val('0');
				$('.ac'+i).prop('checked', false);
			}
			$('#anim_kieruneks').val('1');
			$('#anim_obrazek').val('1');
			$('#anim_przyklad').val('1');
			$('#anim_muzyka').val('1');
			$('#anim_cp').val('000000');
			$('#anim_cp').css('background-color', '#000000');
			$('#anim_cp').css('color', '#fff');
			$('#anim_cpt').val('FFFFFF');
			$('#anim_cpt').css('background-color', '#FFFFFF');
			$('#anim_cpt').css('color', '#000');
			$('#anim_tekst').css('background-color', '#000');
			$('#anim_tekst').css('color', '#FFF');
			$('#anim_tekst_div').css('color', '#FFF');		
			$('#anim_tapeta').val('1');
			animx = 0;
			animy = 0;
			startx = animx;
			starty = animy;
			$('#anim_box').css({top: 0, left: 0});
			$('#anim_box').css({top: animy, left: animx});
			zapiszKlatki();
			$('#anim_box').html('<img style="width:80px" src="img/gif/kot1.gif" alt="gif" />');
			$('#anim_plansza').css('background-image', 'none');
			$('#anim_plansza').css('background-color', '#000000');
			$('#anim_tytul').val('');
			$('#anim_tekst').val('');
			$('#anim_tekst_div').html('');
			tekst_anim = false;
			muzyka=false;
		}
		//-------------------------------------------------------------------
				
		//Otworz animacje zapisana w bazie danych
		$(document).on("click", ".anim_otworz", function () {
			var tytul = $('#anim_sotworz').val();
			$.ajax({
				type:"POST",
				url:"gry/animacja/ajax_otworz.php", 
				dataType: 'json',
				data: {k1: iduser, k2: tytul},
				async: false,
                success: function(json) {					
					var kierunek = json[0].split(';');
					var odleglosc = json[1].split(';');
					var predkosc = json[2].split(';');
					var efekt = json[3].split(';');
					var start = json[4];
					var obrazek = json[5];
					var tekst = json[6];
					var muzyka = json[7];
					var kolor = json[8];
					var kolort = json[9];
					var tapeta = json[10];
					var tytul = json[11];
					var data = json[12];
					var lr = odleglosc.length;
					
					for (i=0; i<100; i++) {
						$('#anim_kierunek'+i).val('al');
						$('#anim_odleglosc'+i).val('10');
						$('#anim_predkosc'+i).val('100');
						$('#anim_efekt'+i).val('0');
						$('.ac'+i).prop('checked', false);
					}
					for (i=0; i<lr; i++) {
						$('#anim_kierunek'+i).val(kierunek[i]);
						$('#anim_odleglosc'+i).val(odleglosc[i]);
						$('#anim_predkosc'+i).val(predkosc[i]);
						$('#anim_efekt'+i).val(efekt[i]);
						$('.ac'+i).prop('checked', true);
					}
					$('#anim_kieruneks').val(start);
					$('#anim_obrazek').val(obrazek);
					$('#anim_tekst').val(tekst);
					$('#anim_tekst_div').html(tekst);
					$('#anim_muzyka').val(muzyka);
					$('#anim_cp').val(kolor);
					$('#anim_cp').css('background-color', '#'+kolor);
					$('#anim_cp').css('color', '#ccc');
					$('#anim_cpt').val(kolort);
					$('#anim_cpt').css('background-color', '#'+kolort);
					$('#anim_cpt').css('color', '#ccc');
					$('#anim_tekst').css('background-color', '#'+kolor);
					$('#anim_tekst').css('color', '#'+kolort);
					$('#anim_tekst_div').css('color', '#'+kolort);
					$('#anim_plansza').css('background-color', '#'+kolor);
					$('#anim_tapeta').val(tapeta);
					$('#anim_tytul_animacji').html(tytul);
					if (tekst!='') {
						tekst_anim = true;
					} else tekst_anim = false;
					
					wybierzStart(start);
					wybierzObrazek(obrazek);
					wybierzMuzyke(muzyka);
					wybierzTapete(tapeta);
					
					zapiszKlatki();
					//otworzzamknijMenu();
                },
				error: function(blad) {
                console.log('Wystąpił problem z pobraniem danych animacji'); 
                }
			});
		});
		//-------------------------------------------------------------------
		
		//Zapisz animacje do bazy danych
		$('.anim_zapisz').on("click", function(){
			var i=0;
			$("#anim_checkbox:checked").each(function() {
				i++;
			})
			if (i>0) {
			if ($('#anim_tytul').val()!='') {
			$('#anim_otworz').hide(500);
			$('#anim_zapisz').show(500);
			var nid=0;
			var id=0;
			var kierunek = '';
			var odleglosc = '';
			var predkosc = '';
			var efekt = '';
			$("#anim_checkbox:checked").each(function() {
				id = $(this).attr('class');
				nid = id.slice(2, id.length);
				kierunek += $('#anim_kierunek'+nid).val();
				kierunek +=';';
			    odleglosc += $('#anim_odleglosc'+nid).val();	
				odleglosc +=';';
				predkosc += $('#anim_predkosc'+nid).val();
				predkosc +=';';
				efekt += $('#anim_efekt'+nid).val();
				efekt +=';';
			});

			var kierunek2 = kierunek.slice(0, kierunek.length-1);
			var odleglosc2 = odleglosc.slice(0, odleglosc.length-1);
			var predkosc2 = predkosc.slice(0, predkosc.length-1);
			var efekt2 = efekt.slice(0, efekt.length-1);
			var start = $('#anim_kieruneks').val();
			var obrazek = $('#anim_obrazek').val();
			var muzyka = $('#anim_muzyka').val();
			var kolor = $('#anim_cp').val();
			var kolort = $('#anim_cpt').val();
			var tapeta = $('#anim_tapeta').val();
			var tytul = $('#anim_tytul').val();
			var tekst = $('#anim_tekst').val();
			$.ajax({
				type:"POST", 
				url:"gry/animacja/ajax_zapisz.php", 
				dataType: 'json',
				data: {k1:iduser, k2:kierunek2, k3:odleglosc2, k4:predkosc2, k5:efekt2, k6:start, k7:obrazek, k8:muzyka, k9:kolor, k10:kolort, k11:tapeta, k12:tytul, k13: tekst},
				async: false,		
					success:function(json) {
						$("#as"+iduser).append('<option value="'+$('#anim_tytul').val()+'">'+$('#anim_tytul').val()+'</option>');
						$('#anim_menu_okno_otworz').html(json[0]);
						$('#anim_menu_okno_usun').html(json[1]);
						$('#anim_tytul').val('');
						$('#anim_tekst').val('');
						alert('Twoja animacja została zapisana w bazie danych');
					},
				error: function(blad) {
				console.log("Błąd: wysyłanie wyników - Animacja"); 
				}
			});
			
			} else alert('Wpisz tytuł animacji');
			} else alert('Zaznacz przynajmniej jedną klatkę animacji');
		});	
		//-------------------------------------------------------------------

		//USUN ANIMACJE
		$(document).on("click", ".anim_usun", function () {
			var tytul = $('#anim_uotworz').val();
			$.ajax({
				type:"POST", 
				url:"gry/animacja/ajax_usun.php", 
				dataType: 'json',
				data: {k1:iduser, k2:tytul},
				async: false,
					success:function(json) {
						$('#anim_menu_okno_otworz').html(json[0]);
						$('#anim_menu_okno_usun').html(json[1]);
						$("#as"+iduser+" option[value="+tytul+"]").remove();
						alert('Animacja została usunięta z bazy danych');
					},
				error: function(blad) {
				console.log("Błąd: usuwanie Animacji"); 
				}
			});
		});
		//-----------------------------------------------------------------------------
		
		//OTWORZ ANIMACJE UZYTKOWNIKA
		$(document).on("click", ".anim_button2", function () {
			var id = $(this).attr('id');
			var nid = id.slice(2, id.length);
			var tytul = $('#as'+nid).val();
			if (nid!=iduser) {
				id_uczestnik = true;
			}
			$.ajax({
				type:"POST",
				url:"gry/animacja/ajax_otworz_wszystkie.php", 
				dataType: 'json',
				data: {k1: nid, k2: tytul},
				async: false,
                success: function(json) {					
					var kierunek = json[0].split(';');
					var odleglosc = json[1].split(';');
					var predkosc = json[2].split(';');
					var efekt = json[3].split(';');
					var start = json[4];
					var obrazek = json[5];
					var tekst = json[6];
					var muzyka = json[7];
					var kolor = json[8];
					var kolort = json[9];
					var tapeta = json[10];
					var tytul = json[11];
					var data = json[12];
					var lr = odleglosc.length;
					
					for (i=0; i<100; i++) {
						$('#anim_kierunek'+i).val('al');
						$('#anim_odleglosc'+i).val('10');
						$('#anim_predkosc'+i).val('100');
						$('#anim_efekt'+i).val('0');
						$('.ac'+i).prop('checked', false);
					}
					for (i=0; i<lr; i++) {
						$('#anim_kierunek'+i).val(kierunek[i]);
						$('#anim_odleglosc'+i).val(odleglosc[i]);
						$('#anim_predkosc'+i).val(predkosc[i]);
						$('#anim_efekt'+i).val(efekt[i]);
						$('.ac'+i).prop('checked', true);
					}
					$('#anim_kieruneks').val(start);
					$('#anim_obrazek').val(obrazek);
					$('#anim_tekst').val(tekst);
					$('#anim_tekst_div').html(tekst);
					$('#anim_muzyka').val(muzyka);
					$('#anim_cp').val(kolor);
					$('#anim_cp').css('background-color', '#'+kolor);
					$('#anim_cp').css('color', '#ccc');
					$('#anim_cpt').val(kolort);
					$('#anim_cpt').css('background-color', '#'+kolort);
					$('#anim_cpt').css('color', '#ccc');
					$('#anim_tekst').css('background-color', '#'+kolor);
					$('#anim_tekst').css('color', '#'+kolort);
					$('#anim_tekst_div').css('color', '#'+kolort);
					$('#anim_plansza').css('background-color', '#'+kolor);
					$('#anim_tapeta').val(tapeta);
					$('#anim_tytul_animacji').html(tytul);
					if (tekst!='') {
						tekst_anim = true;
					} else tekst_anim = false;
					wybierzStart(start);
					wybierzObrazek(obrazek);
					wybierzMuzyke(muzyka);
					wybierzTapete(tapeta);
					zapiszKlatki();
					startAnimacji();
                },
				error: function(blad) {
                console.log('Wystąpił problem z pobraniem danych animacji'); 
                }
			});
		})
		
		
		$('.anim_otworz_menu').on("click", function(){
			otworzzamknijMenu();
		});
		
		$('.anim_otworz_osoby').on("click", function(){
			otworzzamknijPokazy();
		});		
		
		function otworzzamknijMenu() {
			if ($('.anim_otworz_osoby').val()=='Zamknij Pokazy') {
				$('.anim_otworz_osoby').val('Otwórz Pokazy');
				$('#anim_box').toggle(0);
				$('#animo_tlo').toggle(300);
			}
			if ($('.anim_otworz_menu').val()=='Otwórz Menu') {
				$('.anim_otworz_menu').val('Zamknij Menu');
			} else $('.anim_otworz_menu').val('Otwórz Menu');
			$('#anim_box').toggle(0);
			$('#anim_menug').toggle(300);
		}
		
		function otworzzamknijPokazy() {	
			if ($('.anim_otworz_menu').val()=='Zamknij Menu') {
				$('.anim_otworz_menu').val('Otwórz Menu');
				$('#anim_menug').toggle(300);
				$('#anim_box').toggle(0);
			}
			if ($('.anim_otworz_osoby').val()=='Otwórz Pokazy') {
				$('.anim_otworz_osoby').val('Zamknij Pokazy');
			} else $('.anim_otworz_osoby').val('Otwórz Pokazy');
			$('#anim_box').toggle(0);
			$('#animo_tlo').toggle(300);
		}
		
		function zamknijOkna() {
			if ($('.anim_otworz_osoby').val()=='Zamknij Pokazy') {
				$('.anim_otworz_osoby').val('Otwórz Pokazy');
				$('#anim_box').toggle(0);
				$('#animo_tlo').toggle(150);
			}
			if ($('.anim_otworz_menu').val()=='Zamknij Menu') {
				$('.anim_otworz_menu').val('Otwórz Menu');
				$('#anim_menug').toggle(150);
				$('#anim_box').toggle(0);
			}
		}
		
		$('#anim_cp').change(function() { 
			var kolor = $('#anim_cp').css('background-color');
			$('#anim_plansza').css('background-color', kolor);
			$('#anim_tekst').css('background-color', kolor);
		});
		
		$('#anim_cpt').change(function() { 
			var kolor = $('#anim_cpt').css('background-color');
			$('#anim_tekst').css('color', kolor);
			$('#anim_tekst_div').css('color', kolor);
		});
		
		$('#anim_tekst').change(function() { 
			var tekst = $('#anim_tekst').val();
			if (tekst!='') {
				tekst_anim = true;
			} else tekst_anim = false;
			$('#anim_tekst_div').html(tekst);
		});
		
		
		//------------------------------------------------------------------
		//USTAWIENIA 
		//------------------------------------------------------------------
		function ustawKlatke(kierunek, odleglosc, predkosc, efekt, nr) {
			$('#anim_kierunek'+nr).val(kierunek);
			$('#anim_odleglosc'+nr).val(odleglosc);
			$('#anim_predkosc'+nr).val(predkosc);
			$('#anim_efekt'+nr).val(efekt);
			$('.ac'+nr).prop('checked', true);
		}
		//Nr efekty: 0 1 2 4 5 6 7 8 9 10 11
		
		function ustaw_1() {
			nowaAnimacja();
			var nre = '10';
			var pr = '500';
			ustawKlatke('ap', '400', '1500', '8', 0);
			ustawKlatke('ad', '550', '1000', '2', 1);
			ustawKlatke('ag', '150', '1500', '9', 2);
			ustawKlatke('ad', '100', '750', '9', 3);
			ustawKlatke('ap', '100', '750', '9', 4);
			ustawKlatke('al', '200', '750', '10', 5);
			ustawKlatke('ad', '50', '750', '9', 6);
			ustawKlatke('ap', '400', '1000', '9', 7);
			ustawKlatke('ag', '500', '1000', '10', 8);
			ustawKlatke('al', '550', '1000', '9', 9);
			//ustawKlatke('a', '', '', '', 10);
			
			var i=10;
			do {
				ustawKlatke('ap', '30', pr, nre, i);
				ustawKlatke('ad', '50', pr, nre, (i+1));
				i+=2;
			} while (i<32);
			ustawKlatke('ap', '200', '1000', '10', 32);
			ustawKlatke('ag', '550', '1000', '9', 33);
			i=34
			do {
				ustawKlatke('al', '30', pr, nre, i);
				ustawKlatke('ad', '50', pr, nre, (i+1));
				i+=2;
			} while (i<54);
			
			ustawKlatke('al', '320', '2500', 10, 54);
			ustawKlatke('ag', '500', '2500', 9, 55);
			ustawKlatke('ap', '600', '2500', 10, 56);
			ustawKlatke('ad', '500', '2500', 2, 57);
			ustawKlatke('al', '600', '3000', 10, 58);
			ustawKlatke('ap', '320', '3000', 10, 59);
			ustawKlatke('ag', '500', '4000', 10, 60);
			ustawKlatke('ad', '500', '5000', 2, 61);
			ustawKlatke('ad', '200', '5000', 0, 62);
			ustawKlatke('ad', '100', '5000', 0, 63);
			
			var tekst = 'Okno sumienia<br><br>';

tekst +='Pod parasolem z gwiazd<br>';
tekst +='zapadła cisza nocna.<br>';
tekst +='Do szyby przyklejona twarz<br>';
tekst +='tej nocy nie chce spać.<br><br>'; 

tekst +='Na parapecie wspomnień<br>';
tekst +='plecami do mnie, księżyc siadł.<br>';
tekst +='Spod sennych powiek, grzechem w dół,<br>';
tekst +='na ziemię jedna z gwiazd upadła.<br><br>';

tekst +='Pokory wzrokiem spojrzałem w blask<br>';
tekst +='złotowonnego nocy rodzica.<br>';
tekst +='Dotknąłem chwili, złapałem czas<br>';
tekst +='będąc po drugiej stronie księżyca.<br><br>';

tekst +='Z pozdrowieniami dla wszystkich użytkowników Platformy,<br>';
tekst +='<span style="color: #EB00AB">Admin</span><br>';
tekst +='<img src="img/avatar/male/Admin.jpg" />';

			var kolort = '55FF00';
			
			//$('#anim_tekst').val(tekst);
			$('#anim_tekst_div').html(tekst);
			$('#anim_cpt').val(kolort);
			$('#anim_cpt').css('background-color', '#'+kolort);
			$('#anim_cpt').css('color', '#000');
			$('#anim_tekst').css('color', '#'+kolort);
			$('#anim_tekst_div').css('color', '#'+kolort);
			$('#anim_tytul_animacji').html('Demo - 1');
			tekst_anim = true;
			muzyka=true;		
			
			$('#anim_obrazek').val('4');
			$('#anim_muzyka').val('9');
			$('#anim_tapeta').val('9');
			$('#anim_przyklad').val('1');
			wybierzObrazek('4');
			wybierzMuzyke('9');
			wybierzTapete('9');
			zapiszKlatki();
		}
		
		function ustaw_2() {
			nowaAnimacja();
			var nre = '5';
			var pr = '1000';
			ustawKlatke('ap', '800', pr, nre, 0);
			ustawKlatke('ad', '650', pr, nre, 1);
			ustawKlatke('al', '800', pr, nre, 2);
			ustawKlatke('ag', '600', pr, nre, 3);
			ustawKlatke('ap', '750', pr, nre, 4);
			ustawKlatke('ad', '550', pr, nre, 5);
			ustawKlatke('al', '700', pr, nre, 6);
			ustawKlatke('ag', '500', pr, nre, 7);
			ustawKlatke('ap', '650', pr, nre, 8);
			ustawKlatke('ad', '500', pr, nre, 9);
			ustawKlatke('al', '600', pr, nre, 10);
			ustawKlatke('ag', '450', pr, nre, 11);
			ustawKlatke('ap', '600', pr, nre, 12);
			ustawKlatke('ad', '400', pr, nre, 13);
			ustawKlatke('al', '550', pr, nre, 14);
			ustawKlatke('ag', '450', pr, nre, 15);
			ustawKlatke('ap', '500', pr, nre, 16);
			ustawKlatke('ad', '360', pr, nre, 17);
			ustawKlatke('al', '450', pr, nre, 18);
			ustawKlatke('ag', '320', pr, nre, 19);
			ustawKlatke('ap', '400', pr, nre, 20);
			ustawKlatke('ad', '250', pr, nre, 21);
			ustawKlatke('al', '360', pr, nre, 22);
			ustawKlatke('ag', '200', pr, nre, 23);
			ustawKlatke('ap', '320', pr, nre, 24);
			ustawKlatke('ad', '150', pr, nre, 25);
			ustawKlatke('al', '250', pr, nre, 26);
			ustawKlatke('ag', '100', pr, nre, 27);
			ustawKlatke('ap', '200', pr, nre, 28);
			ustawKlatke('ad', '100', pr, nre, 29);
			ustawKlatke('al', '100', pr, nre, 30);
			ustawKlatke('ag', '50', pr, nre, 31);
			var tekst = '<img src="img/gif/pies1.gif" />';
			
			$('#anim_tekst').val(tekst);
			$('#anim_tekst_div').html(tekst);
			$('#anim_obrazek').val('3');
			$('#anim_muzyka').val('7');
			$('#anim_tapeta').val('10');
			$('#anim_przyklad').val('2');
			
			$('#anim_tytul_animacji').html('Demo - 2');
			tekst_anim = true;
			muzyka=true;	
			wybierzObrazek('3');
			wybierzMuzyke('7');
			wybierzTapete('10');
			zapiszKlatki();
		}
		
		function ustaw_3() {
			nowaAnimacja();
			var nre = '8';
			var pr = '500';
			var i=0;
			do {
				ustawKlatke('al', '30', pr, nre, i);
				ustawKlatke('ad', '50', pr, nre, (i+1));
				i+=2;
			} while (i<24);
			nre = '7';
			do {
				ustawKlatke('al', '30', pr, nre, i);
				ustawKlatke('ag', '50', pr, nre, (i+1));
				i+=2;
			} while (i<48);
			ustawKlatke('ad', '600', '2000', '1', i);
			ustawKlatke('ap', '400', '500', '0', 49);
			ustawKlatke('ag', '600', '500', '0', 50);
			ustawKlatke('al', '400', '3000', '1', 51);
			ustawKlatke('ad', '600', '500', '1', 52);
			ustawKlatke('ap', '320', '250', '0', 53);
			ustawKlatke('ap', '320', '250', '0', 54);
			i=55;
			nre=10;
			do {
				ustawKlatke('al', '30', pr, nre, i);
				ustawKlatke('ag', '50', pr, nre, (i+1));
				i+=2;
			} while (i<78);
			ustawKlatke('al', '280', '1000', nre, i);
			ustawKlatke('ad', '280', '1000', nre, 79);
			ustawKlatke('ap', '280', '500', nre, 80);
			ustawKlatke('ag', '280', '500', nre, 81);
			ustawKlatke('ad', '500', '500', nre, 82);
			ustawKlatke('al', '500', '500', nre, 83);
			ustawKlatke('ag', '500', '500', nre, 84);
			ustawKlatke('ap', '500', '250', nre, 85);
			ustawKlatke('ad', '500', '250', nre, 86);
			ustawKlatke('al', '50', '250', nre, 87);
			ustawKlatke('ag', '500', '500', nre, 88);
			ustawKlatke('al', '600', '2000', nre, 89);
			
			var tekst = '<img src="img/gif/kula2.gif" />';
			
			$('#anim_tekst').val(tekst);
			$('#anim_tekst_div').html(tekst);
			$('#anim_kieruneks').val(3);
			$('#anim_obrazek').val('10');
			$('#anim_muzyka').val('5');
			$('#anim_tapeta').val('1');
			$('#anim_przyklad').val('1');
			$('#anim_tytul_animacji').html('Demo - 3');
			tekst_anim = true;
			muzyka=true;	
			wybierzStart('3');
			wybierzObrazek('10');
			wybierzMuzyke('5');
			wybierzTapete('1');
			zapiszKlatki();
		}
});
</script>