<?php
if (!isset($_SESSION['nazwa'])) {
		header('Location: login.php');
		exit();
	}
	$id = $_SESSION['id'];
   	$tstatus[0]='Uczestnik';
	$tstatus[1]='Wolontariusz';
	$tstatus[2]='Asystent';
	$tstatus[3]='Administrator';	
	

	//---- Upload pliki do udostepnienia ------------
	$dir = 'pliki/upload/'.$_SESSION['nazwa'].'/pliki/';
	$i=0;
	foreach (new DirectoryIterator($dir) as $fileInfo) {
		if ($fileInfo->isFile()) {
			$tab_upload[$i][0]=$fileInfo->getFilename();
			$tab_upload[$i][1]=round(($fileInfo->getSize()/1048576), 2);
			$i++;
		};
	}
	if ($i>0) $lup = count($tab_upload);
		else $lup=0;
	
	//---- Upload foto strona ------------
	$dir = 'pliki/upload/'.$_SESSION['nazwa'].'/foto/';
	$i=0;
	$troz = [];
	foreach (new DirectoryIterator($dir) as $fileInfo) {
		$plik = $fileInfo->getFilename();
		if ($fileInfo->isFile()) {
			$tab_plik[$i]=$plik;
			$tr = getimagesize($dir.$plik);
			$troz[$i][0]=$tr[0];
			$troz[$i][1]=$tr[1];
			$i++;
		};
	}
	if ($i>0) $lp = count($tab_plik);
		else $lp=0;
	//------------------------------------------------------------
		
?>
	<link rel="stylesheet" href="css/strona.css" />
	
	<div id="content_user_wizytowka">
	<div id="taby2">

    <a class="tab_link2 tab_link_wybrany" title="#tab1" href="#">Strony</a>
    <a class="tab_link2" title="#tab2" href="#">Edycja strony</a>
    <a class="tab_link2" title="#tab3" href="#">Przykłady HTML</a>
	<a class="tab_link2" title="#tab4" href="#">Pomoc</a>
 
	<div class="clear">
    </div>
 
	<div id="tab1" class="tab_text tab_wybrany">
        <h1 id="h3_tytul">Strony</h1>
	
	<div style="width: 830px; overflow: auto; background: #24A; margin: 5px auto; border: 1px ridge #027; padding: 0 0 5px 0">

<?php
		echo '<div id="strona_info_status">';
			echo '- Uczestnicy -';
		echo '</div>';
		echo '<div style="overflow: auto; border: 1px ridge #13A">';
		$strona = $_SESSION['strona'];
		$lus = count($_SESSION['userss']);
		for ($i=0; $i<$lus; $i++) {
			if ($_SESSION['userss'][$i]==0) {
			echo '<div style="float: left; width: 90px; height: 90px; background: #005; margin: 5px 10px; border-radius: 12px 12px 10px 10px; border: 3px ridge #008">';
			$fot = 'img/avatar/male/'.$_SESSION['usersn'][$i].'.jpg';
					if (file_exists ( $fot )) {
						echo '<div id="strona_avatar" style=\'background: url("'.$strona.'img/avatar/male/'.$_SESSION['usersn'][$i].'.jpg")\'>';
					} else {
						echo '<div id="strona_avatar" style=\'background: url("'.$strona.'img/avatar/male/fwa.jpg")\'>';
					}
					echo '<br><br><br><input type="button" id="'.$_SESSION['usersid'][$i].'@'.$_SESSION['usersn'][$i].'" class="button_www" value="'.$_SESSION['usersn'][$i].'">';
					echo '</div>';
				echo '</div>';	
			}
		}
		echo '</div>';	
		//---------------------------------------------------
		
		echo '<div id="strona_info_status" style="margin: 10px auto 5px auto">';
			echo '- Wolontariusze / Asystenci -';
		echo '</div>';
		echo '<div style="overflow: auto; border: 1px ridge #13A">';
		for ($i=0; $i<$lus; $i++) {
			if ($_SESSION['userss'][$i]>0) {
			echo '<div style="float: left; width: 90px; height: 90px; background: #005; margin: 5px 10px; border-radius: 12px 12px 10px 10px; border: 3px ridge #008">';
			$fot = 'img/avatar/male/'.$_SESSION['usersn'][$i].'.jpg';
					if (file_exists ( $fot )) {
						echo '<div id="strona_avatar" style=\'background: url("'.$strona.'img/avatar/male/'.$_SESSION['usersn'][$i].'.jpg")\'>';
					} else {
						echo '<div id="strona_avatar" style=\'background: url("'.$strona.'img/avatar/male/fwa.jpg")\'>';
					}
					echo '<br><br><br><input type="button" id="'.$_SESSION['usersid'][$i].'@'.$_SESSION['usersn'][$i].'" class="button_www" value="'.$_SESSION['usersn'][$i].'">';
					echo '</div>';
				echo '</div>';	
			}
		}
		echo '</div>';
?>
			
		
	</div>									
	</div>
	
	<div id="tab2" class="tab_text">
		<h1 id="h3_tytul">Utwórz własną stronę</h1>

		 <div id="strona_menu">
			<span id="lab5">Menu strona</span>
			<input type="button" id="button_menu4" class="str_tresc" value="Treść"><br /><br />
			<input type="button" id="button_menu4" class="str_pliki" value="Pliki"><br /><br />
			<input type="button" id="button_menu4" class="str_ustaw" value="Ustawienia"><br /><br />
			<input type="button" id="button_menu4" class="str_szablon" value="Szablony"><br /><br />
			<input type="button" id="button_menu4" class="str_zapisz" value="Zapisz stronę">
		</div>
		
		<div id="strona_menu_pliki">
			<div id="strona_menu_pliki_l">
			<span id="lab5">Zdjęcia</span>
				<div style="width: 280px; margin: 5px auto; background: #278; border: 2px ridge #145; padding: 0 2px 3px 2px">
				<p id="lab4">Dodaj zdjęcie</p>
				<div style="width: 250px; height: 5px;"></div>
					<form action="" method="POST" id="form_img"> 			
						<input name="foto" id="foto" type="file" accept="file" /> 
						<div style="width: 250px; height: 5px;"></div>
						<input id="button_menu" type="submit" class="submit_img" value="Wyślij zdjęcie" /> 
						<div style="width: 250px; height: 15px;"></div>
					</form> 	
					<p id="strona_foto_kom"></p>
				</div>
			
				<div id="foto_info" style="width: 280px; margin: 5px auto 0 auto; background: #278; border: 2px ridge #145; border-bottom: none; padding: 0 2px 3px 2px">
<?php
				echo '<p id="lab4">Liczba zdjęć na serwerze: '.$lp.'</p>';
				echo '<select  id="strona_info_foto" style="font-size: 0.8em;">';
				if ($lp>0) {
					for ($i=0; $i<$lp; $i++) {
						echo '<option value="'.$tab_plik[$i].'">'.$tab_plik[$i].' ('.$troz[$i][0].'x'.$troz[$i][1].')</option>';
					}
				} else echo '<option value="fot0">Brak zdjęć</option>';
				echo '</select><br />';

?>
				</div>
				<div id="foto_button_usun" style="width: 284px; margin: 0 auto; background: #278; border: 2px ridge #145; border-top: none; padding: 5px 2px -5px 2px">
				<p id="lab6">Usuń wybrane zdjęcie</p>
				<input type="button" id="button_menu" class="strona_usun_foto" value="Usuń foto"><br /><br />
				</div>
			</div>
			<div id="strona_menu_pliki_p">
				<span id="lab5">Pliki</span>
				<div style="width: 280px; margin: 5px auto; background: #278; border: 2px ridge #145; padding: 0 2px 3px 2px">
				<p id="lab4">Dodaj plik do udostępnienia</p>
				<div style="width: 250px; height: 5px;"></div>
					<form action="" method="POST" id="form_plik"> 			
						<input name="plik" id="file" type="file" accept="file" /> 
						<div style="width: 250px; height: 8px;"></div>
						<input id="button_menu" class="but_dodaj_plik" type="submit" value="Wyślij plik" /> 
						<div style="width: 250px; height: 15px;"></div>
					</form> 	
					<p id="strona_plik_kom"></p>
				</div>
				<div id="plik_info" style="width: 280px; margin: 5px auto 0 auto; background: #278; border: 2px ridge #145; border-bottom: none; padding: 0 2px 3px 2px">
<?php					
				echo '<p id="lab4">Liczba plików na serwerze: '.$lup.'</p>';
				echo '<select  id="strona_info_pliki">';
				if ($lup>0) {
					for ($i=0; $i<$lup; $i++) {
						echo '<option value="'.$tab_upload[$i][0].'">'.$tab_upload[$i][0].' - '.$tab_upload[$i][1].' MiB</option>';
					}
				} else {
					//echo '<option value="bp">Brak plików</option>';
				}
				echo '</select><br />';
?>
				</div>
				<div id="plik_button_usun" style="width: 284px; margin: 0 auto; background: #278; border: 2px ridge #145; border-top: none; padding: 5px 2px -5px 2px">
				<p id="lab6">Usuń wybrany plik</p>
				<input type="button" id="button_menu" class="strona_usun_plik" value="Usuń plik"><br /><br />
				</div>
			</div>
		</div>
		
		<div id="strona_menu_tekst">
			<p id="lab4">Wpisz tytuł strony</p>
			<input type="text" id="strona_text_tytul">
			<p id="lab4">Wpisz treść strony</p>
			<textarea id="strona_text_tresc" name="tresc" rows="8" cols="120" wrap="soft" style="width: 550px; height: 190px; margin: 2px 5px 5px 5px;"></textarea><br />
		</div>
		
		
		<div id="strona_menu_szablon">
			<span id="lab5">Wybierz szablon dla Twojej strony</span>
			<div style="width: 500px; height: 2px; margin: 2px auto 0px auto; background: #004;"></div>
			
			<div id="strona_menu_szablon1">
				<span id="lab4">Szablon - 1</span>
				<div style="width: 180px; height: 110px; margin: 2px auto; background: #03050a; float: left">
					<div style="width: 160px; height: 20px; margin: 5px auto 0 auto; background: #050520; border-radius: 5px 5px 3px 3px">
						<span id="szablontxt_1" style="color: #FF3014; font-family: 'New Rocker', cursive;">Tytuł strony</span>
					</div>
					<div style="width: 140px; height: 70px; margin: 0 auto 2px auto; background: #171717; border: 2px ridge #484848; border-top: none; padding: 3px 2px 5px 2px">
						<span id="szablontxt_2" style="color: #FFF829; font-family: 'Alegreya', cursive;">To jest przykładowa treść Twojej strony...</span>
					</div>
				</div>
				<input type="button" id="button_menu2" style="width: 90px; padding: 3px 5px;" class="str_szablon1" value="Ustaw"><br />
			</div>
			
			<div id="strona_menu_szablon1">
				<span id="lab4">Szablon - 2</span>
				<div style="width: 180px; height: 110px; margin: 2px auto; background: #B39D8D; float: left">
					<div style="width: 160px; height: 20px; margin: 5px auto 0 auto; background: #ACE6ED; border-radius: 5px 5px 3px 3px">
						<span id="szablontxt_1" style="color: #051340; font-family: 'Pangolin', cursive;">Tytuł strony</span>
					</div>
					<div style="width: 140px; height: 70px; margin: 0 auto 2px auto; background: #D0B7A4; padding: 3px 2px 5px 2px">
						<span id="szablontxt_2" style="color: #070942; font-family: 'Righteous', cursive;">To jest przykładowa treść Twojej strony...</span>
					</div>
				</div>
				<input type="button" id="button_menu2" style="width: 90px; padding: 3px 5px;" class="str_szablon2" value="Ustaw"><br />
			</div>
			
			<div id="strona_menu_szablon1">
				<span id="lab4">Szablon - 3</span>
				<div style="width: 180px; height: 110px; margin: 2px auto; background: #E76597; float: left">
					<div style="width: 160px; height: 20px; margin: 5px auto 0 auto; background: #EDE8B7; border-radius: 5px 5px 3px 3px">
						<span id="szablontxt_1" style="color: #853A57; font-family: 'Arima madurai', cursive;">Tytuł strony</span>
					</div>
					<div style="width: 140px; height: 70px; margin: 0 auto 2px auto; background: #FDA7BC; border: 2px ridge #F7E4D4; border-top: none; padding: 3px 2px 5px 2px">
						<span id="szablontxt_2" style="color: #000; font-family: 'Eagle Lake', cursive;">To jest przykładowa treść Twojej strony...</span>
					</div>
				</div>
				<input type="button" id="button_menu2" style="width: 90px; padding: 3px 5px;" class="str_szablon3" value="Ustaw"><br />
			</div>
			
			<div id="strona_menu_szablon1">
				<span id="lab4">Szablon - 4</span>
				<div style="width: 180px; height: 110px; margin: 2px auto; background: #AFC4BD; float: left">
					<div style="width: 160px; height: 20px; margin: 5px auto 0 auto; background: #4A523B; border-radius: 5px 5px 3px 3px">
						<span id="szablontxt_1" style="color: #F39F8B; font-family: 'Comic Sans MS', cursive, sans-serif;">Tytuł strony</span>
					</div>
					<div style="width: 140px; height: 70px; margin: 0 auto 2px auto; background: #D9E2E6; border: 2px ridge #Ff2b00; border-top: none; padding: 3px 2px 5px 2px">
						<span id="szablontxt_2" style="color: #3C4230; font-family: 'Patrick Hands', cursive;">To jest przykładowa treść Twojej strony...</span>
					</div>
				</div>
				<input type="button" id="button_menu2" style="width: 90px; padding: 3px 5px;" class="str_szablon4" value="Ustaw"><br />
			</div>
			
			
		</div>
		
		<div id="strona_menu_ustawienia">
			<div id="strona_ustawienia">
			<p id="strona_kt">Ramka</p>
			Rozmiar ramki
				<select  id="strona_ramka">
					<option value="r0">Brak ramki</option>
					<option value="r1">Ramka 1px</option>
					<option value="r2">Ramka 2px</option>
					<option value="r3">Ramka 3px</option>
					<option value="r5">Ramka 5px</option>
					<option value="r7">Ramka 7px</option>
					<option value="r10">Ramka 10px</option>
				<select>
				<input type="text" id="strona_cp" class="jscolor {closable:true,closeText:'Zamknij'}" value="#484848"/><br />
				Wybierz kolor ramki
			</div>
			<div id="strona_ustawienia">
				<p id="strona_kt">Ustawienia kolorów</p>
					Tło tytułu &nbsp;<input type="text" id="strona_cp1" class="jscolor" value="#CCC"/><br />
					Tło treści &nbsp;<input type="text" id="strona_cp2" class="jscolor" value="#AAA"/><br />
					Tło strony &nbsp;<input type="text" id="strona_cp3" class="jscolor" value="#777"/>
			</div>
			
			
			<div id="strona_ustawienia_img">
			<p id="strona_kt">Wybierz zdjęcie</p>
			<?php
				echo '<select  id="strona_info_img">';
				echo '<option value="0000bf">Brak fotografii</option>';
				if ($lp>0) {
					for ($i=0; $i<$lp; $i++) {
						$d = str_pad($troz[$i][0], 4, 0, STR_PAD_LEFT);
						echo '<option value="'.$d.$tab_plik[$i].'">'.$tab_plik[$i].' ('.$troz[$i][0].'x'.$troz[$i][1].')</option>';
					}
				}
				echo '</select><br />';

?>
			</div>
			
			<div style="width: 140px; border: 2px ridge #aaa; float: right; margin: 20px 55px 0 0; padding: 2px 2px;">
			<p id="strona_kt">Ustawienia dla ramki, kolorów oraz czcionek dla strony</p>
			</div>
			
			<div id="strona_ustawienia">
				<p id="strona_kt">Czcionka - tytuł</p>
				Rodzaj czcionki
				<select  id="strona_font_tytul">
					<option style="font-family: 'Alegreya', serif;" value="fn1">Alegreya</option>
					<option style="font-family: 'Righteous', cursive;" value="fn2">Righteous</option>
					<option style="font-family: 'Eagle Lake', cursive;" value="fn3">Eagle Lake</option>
					<option style="font-family: 'Shadows Into Light Two', cursive;" value="fn4">Shadows Into</option>
					<option style="font-family: 'Pangolin', cursive;" value="fn5">Pangolin</option>				
					<option style="font-family: Mogra, cursive;" value="fn6">Mogra</option>
					<option style="font-family: 'Merriweather', serif;" value="fn7">Merriweather</option>
					<option style="font-family: 'Patrick Hand', cursive;" value="fn8">Patrick Hand</option>
					<option style="font-family: 'Arima Madurai', cursive;" value="fn9">Arima Madurai</option>
					<option style="font-family: 'New Rocker', cursive;" value="fn10">New Rocker</option>	
					<option style="font-family: 'Comic Sans MS', cursive, sans-serif;" value="fn11">Comic Sans MS</option>
					<option style="font-family: 'Times New Roman', Georgia, Serif;" value="fn12">Times New Roman</option>
					<option style="font-family: Arial, Helvetica, sans-serif;" value="fn13">Arial</option>
					<option style="font-family: Verdana, sans-serif;" value="fn14">Verdana</option>
					<option style="font-family: Courier, 'Courier New', monospace;" value="fn15">Courier</option>
					<option style="font-family: 'Trebuchet MS', Helvetica, sans-serif;" value="fn16">Trebuchet MS</option>
				<select>
				<input type="text" id="strona_cp4" class="jscolor" value="#000"/><br />
				Kolor tekstu tytułu
			</div>
			<div id="strona_ustawienia">
				<p id="strona_kt">Czcionka - treść</p>
				Rodzaj czcionki
				<select  id="strona_font_tresc">
					<option style="font-family: 'Alegreya', serif;" value="fn1">Alegreya</option>
					<option style="font-family: 'Righteous', cursive;" value="fn2">Righteous</option>
					<option style="font-family: 'Eagle Lake', cursive;" value="fn3">Eagle Lake</option>
					<option style="font-family: 'Shadows Into Light Two', cursive;" value="fn4">Shadows Into</option>
					<option style="font-family: 'Pangolin', cursive;" value="fn5">Pangolin</option>				
					<option style="font-family: Mogra, cursive;" value="fn6">Mogra</option>
					<option style="font-family: 'Merriweather', serif;" value="fn7">Merriweather</option>
					<option style="font-family: 'Patrick Hand', cursive;" value="fn8">Patrick Hand</option>
					<option style="font-family: 'Arima Madurai', cursive;" value="fn9">Arima Madurai</option>
					<option style="font-family: 'New Rocker', cursive;" value="fn10">New Rocker</option>	
					<option style="font-family: 'Comic Sans MS', cursive, sans-serif;" value="fn11">Comic Sans MS</option>
					<option style="font-family: 'Times New Roman', Georgia, Serif;" value="fn12">Times New Roman</option>
					<option style="font-family: Arial, Helvetica, sans-serif;" value="fn13">Arial</option>
					<option style="font-family: Verdana, sans-serif;" value="fn14">Verdana</option>
					<option style="font-family: Courier, 'Courier New', monospace;" value="fn15">Courier</option>
					<option style="font-family: 'Trebuchet MS', Helvetica, sans-serif;" value="fn16">Trebuchet MS</option>
				<select>
				<input type="text" id="strona_cp5" class="jscolor" value="#000"/><br />
				Kolor tekstu treści
			</div>
		</div>
		
		<div style="width: 750px; clear: both;"></div>
		
		<div id="strona_content">
			<div id="strona_tytul">
			
			</div>
			<div id="strona_tresc">

				<div id="strona_img">
					
				</div>
			</div>
		</div>
    </div>
	
	
	
	
	
	
	<div id="tab3" class="tab_text">
		<div id="strona_przyklad_tlo">
		<p style="font-size: 1em; color: #EFD; margin: 0px 20px; padding: 10px;">
		Przykłady kodu HTML do wykorzystania na swojej stronie.
		</p>
			<div id="strona_przyklad_opisl">Tekst z kodem HTML do skopiowania na swoją stronę</div>
			<div id="strona_przyklad_opisp">Podgląd wyglądu kodu na stronie WWW</div>
			<div id="strona_przyklad_tresc">
				<div id="sp_l1"></div>
				<div id="sp_l2"></div>
				<div id="sp_l3"></div>
				<div id="sp_l4"></div>
				<div id="sp_l5"></div>
			</div>
			<div id="strona_przyklad_wyglad">
				<div id="sp_p1"></div>
				<div id="sp_p2"></div>
				<div id="sp_p3"></div>
				<div id="sp_p4"></div>
				<div id="sp_p5"></div>
			</div>
			<div id="strona_przyklad_opis">
			Kliknij na jeden z poniższych przycisków, aby wybrać przykład kodu HTML:
			1) Pogrubienie, pochylenie, podkreślenie tekstu<br /> 
			2) Kolor, rozmiar tekstu&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3) Zmiana kroju czcionki&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			4) Nagłówek tekstu - h1 do h6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 5) Wstawianie kolorowego tła na stronę
			
			</div>
			<div id="strona_przyklad_button"></div>
			<div id="strona_przyklad_button1">
				<input id="button_menu" type="submit" class="submit_przyk1" value="Przykład - 1" /> 
			</div>
			<div id="strona_przyklad_button2">
				<input id="button_menu" type="submit" class="submit_przyk2" value="Przykład - 2" />
			</div>	
			<div id="strona_przyklad_button3">	
				<input id="button_menu" type="submit" class="submit_przyk3" value="Przykład - 3" />
			</div>	
			<div id="strona_przyklad_button4">	
				<input id="button_menu" type="submit" class="submit_przyk4" value="Przykład - 4" /> 
			</div>
			<div id="strona_przyklad_button5">	
				<input id="button_menu" type="submit" class="submit_przyk5" value="Przykład - 5" />
			</div>
			<div id="strona_przyklad_test">
				<div style="width: 300px; height: 15px; float: left; text-align: center">
					Pole edycji - ćwiczenia z kodem HTML
				</div>
				<div style="width: 290px; height: 15px; float: left;">
					Podgląd wyglądu kodu HTML na stronie WWW
				</div>
				<div style="width: 170px; height: 15px; float: left;"></div>
				<textarea id="strona_text_test" name="tresc" rows="8" cols="120" wrap="soft" style="width: 290px; height: 129px; float: left; margin: 2px 10px 5px 0px;"></textarea>
				<div id="strona_przyklad_test_podglad"></div>
				<div style="width: 152px; float: left; margin: 0; text-align: center;">
					Skopiuj kolor<br />
					<input type="text" id="strona_przyklad_kolor" class="jscolor {hash:true}" value="#E07070"/>
					<select  id="strona_przyklad_font">
						<option style="font-family: 'Alegreya', serif;" value="fn1">Alegreya</option>
						<option style="font-family: 'Righteous', cursive;" value="fn2">Righteous</option>
						<option style="font-family: 'Eagle Lake', cursive;" value="fn3">Eagle Lake</option>
						<option style="font-family: 'Shadows Into Light Two', cursive;" value="fn4">Shadows Into</option>
						<option style="font-family: 'Pangolin', cursive;" value="fn5">Pangolin</option>				
						<option style="font-family: Mogra, cursive;" value="fn6">Mogra</option>
						<option style="font-family: 'Merriweather', serif;" value="fn7">Merriweather</option>
						<option style="font-family: 'Patrick Hand', cursive;" value="fn8">Patrick Hand</option>
						<option style="font-family: 'Arima Madurai', cursive;" value="fn9">Arima Madurai</option>
						<option style="font-family: 'New Rocker', cursive;" value="fn10">New Rocker</option>	
						<option style="font-family: 'Comic Sans MS', cursive, sans-serif;" value="fn11">Comic Sans MS</option>
						<option style="font-family: 'Times New Roman', Georgia, Serif;" value="fn12">Times New Roman</option>
						<option style="font-family: Arial, Helvetica, sans-serif;" value="fn13">Arial</option>
						<option style="font-family: Verdana, sans-serif;" value="fn14">Verdana</option>
						<option style="font-family: Courier, 'Courier New', monospace;" value="fn15">Courier</option>
						<option style="font-family: 'Trebuchet MS', Helvetica, sans-serif;" value="fn16">Trebuchet MS</option>
					<select>
					<input type="text" id="strona_przyklad_font_wzor" style="width: 175px; height: 18px; font-size: 0.8em; margin: 2px 0 0 2px;" value="font-family: 'Alegreya', serif;">
					<span style="margin: 0; padding: 0;">&nbsp;&nbsp;&nbsp;&nbsp;Skopiuj nazwę czcionki</span>
				</div>
			</div>
		</div>
		
	</div>
	<div id="tab4" class="tab_text">
        <div id="strona_pomoc_text">
		<h3 style="text-align: center; margin: 0 0 10px 0">--- Pomoc ---</h3>
		Tutaj będziesz mógł stworzyć swoją własną stronę. Dodać informacje o sobie np.
		wstawić swoje zdjęcie, napisać coś o swoim hobby, jakie są Twoje ulubione programy telewizyjne, gry komputerowe,
		jak lubisz i jak chciałbyś spędzać wolny czas, co ciałbyś zobaczyć, zwiedzić...<br /><br />
		"Wizytówka", czyli twoja strona, umożliwia także dodawanie własnych plików oraz materiałów dźwiękowych.
		Jednak należy pamiętać, że materiał wstawiany na stronę nie może być kopiowany z innych stron WWW.
		Musi on być Twoją własnością, lub udostępniany za zgodą autora.
		Dzięki wymianie takich informacji oraz plików, wszyscy będziemy mieli możliwość nie tylko lepszego poznania siebie,
		ale też zaprezentowania swoich umiejętności.<br /><br />
		Na swojej stronie każdy będzie mógł dodać 5 fotografii oraz 5 plików do udostępnienia.<br />		
		<b>Fotografie</b> mogą być w następujących formatach: *.jpg, *.jpeg, *.gif, *.bmp, *.png Rozmiar fotografi nie może przekraczać
		1,5 MB. Szerokość oraz wysokość zdjęcia może być dowolna, jednak fotki o rodzielczości większej niż 600x500 pikseli zostaną 
		automatycznie zmniejszone do podanej rozdzielczości.<br />
		<b>Pliki</b> mogą być dodawane w wielu formatach, jednak ze względu m.in. na niebezpieczeństwo przenoszenia programów 
		wirusowych część rozszerzeń została zablokowana: *.exe, *.html, *.css, *.xhtml, *.php, *.js, *.rar, *.jar, *.zip, *.7z, *.tar, 
		*.cab, *.ini, *.bzip2, *.arj, *.apk Rozmiar pliku nie może przekraczać 5 MB.<br /><br />
		<b>Zakładka Strony</b> - przeglądanie stron utworzonych przez użytkowników Platformy.<br />
		<b>Zakładka Edycja strony</b> - Tworzenie strony, dodawanie zdjęć i plików, dodawanie treści strony, ustawianie kolorów poszczególnych
		elementów strony, wybór szablonu...<br />
		<b>Zakładka Przykłady HTML</b> - Przykłady kodu HTML do wykorzystania na swojej stronie oraz pole umożliwiające
		na wykonywanie ćwiczeń z kodem HTML.<br /><br />
		Szczegółowych informacji na temat tworzenia własnej strony będą udzielać Wolontariusze oraz Asystenci.<br />
		</div>
    </div>
</div>
</div>


<script type="text/javascript">
	 var txt_upload = '';
	 var kolor = '#000';
	 var foto_img='';
	 var foto_name='';
	 var foto_x = 0;
	 var liczba_plikow = 0;
<?php
	echo "var sciezka_img='".$_SESSION['strona'].$dir."'; ";
	echo "var liczba_foto = ".$lp.";";
	
?>

$(document).ready(function(){

	init();
	
	function init() {
		var t = 'test';
		$.ajax({
			type:"POST",
			url:"pliki/strona_start.php", 
			dataType: 'json',
			data: {k1: t},
			async: false,
			success: function(json) {					
				$('#strona_ramka').val('r'+json[0]);
				$('#strona_tresc').css('border', json[0]+'px ridge '+json[1]);
				$('#strona_tytul').css('background-color', json[2]);
				$('#strona_content').css('background-color', json[3]);
				$('#strona_tresc').css('background-color', json[4]);
				
				var kol0 = json[1].slice(1, json[1].length);
				var kol1 = json[2].slice(1, json[2].length);
				var kol2 = json[3].slice(1, json[3].length);
				var kol3 = json[4].slice(1, json[4].length);
				var kol4 = json[5].slice(1, json[5].length);
				var kol5 = json[7].slice(1, json[7].length);
				$('#strona_cp').val(kol0);
				$('#strona_cp0').css('background-color', json[1]);
				$('#strona_cp1').val(kol1);
				$('#strona_cp1').css('background-color', json[2]);
				$('#strona_cp3').val(kol2);
				$('#strona_cp3').css('background-color', json[3]);
				$('#strona_cp2').val(kol3);
				$('#strona_cp2').css('background-color', json[4]);
				$('#strona_cp4').val(kol4);
				$('#strona_cp4').css('background-color', json[5]);
				$('#strona_cp5').val(kol5);
				$('#strona_cp5').css('background-color', json[7]);
				$('#strona_font_tytul').val('fn'+json[6]);
				$('#strona_font_tresc').val('fn'+json[8]);
				$('#strona_tytul').css('color', json[5]);
				$('#strona_tresc').css('color', json[7]);
				$('#strona_tytul').css('font-family', czcionka('fn'+json[6]));
				$('#strona_tresc').css('font-family', czcionka('fn'+json[8]));
				$('#strona_text_tytul').val(json[11]);
				$('#strona_tytul').html(json[11]);
				$('#strona_text_tresc').val(json[12]);
				
				liczba_plikow = json[15];
				sprawdz_liczbe_plikow(liczba_plikow);
				sprawdz_liczbe_foto(liczba_foto);
				txt_upload = json[14];
				var t = $('#strona_text_tresc').val().replace(/\n/g, '<br/>');
				foto_name = json[9];
				foto_x = json[10];
				$('#strona_info_img').val(dodaj_zero(foto_x).toString()+foto_name);
				if (foto_name!='0000bf') {
					foto_img='<div id="strona_img"><img src="'+sciezka_img+foto_name+'"></div>';
					text_img();	
				}	else {
					$('#strona_tresc').html(t+txt_upload);
				}
			},
				error: function(blad) {
				console.log(blad); 
			}
		});
	};
		
		function dodaj_zero(num){
			var str = ("" + num);
			return (Array(Math.max(5-str.length, 0)).join("0") + str);
		}
		
		
		function sprawdz_liczbe_plikow(lp) {
			if (lp>4) {
				$('#file').attr("disabled", true);
			} else {
				$('#file').attr("disabled", false);
			}
		}
		
		function sprawdz_liczbe_foto(lp) {
			if (lp>4) {
				$('#foto').attr("disabled", true);
			} else {
				$('#foto').attr("disabled", false);
			}
		}
		
		
		$('#strona_ramka').change(function() { 
			ustaw_ramke();
		});
		
		$('#strona_cp').change(function() { 
			ustaw_ramke();
		});
	
		function ustaw_ramke() {
			var opcja = $('#strona_ramka').val();
			var szer = opcja.slice(1, opcja.length);
			var kolor = $('#strona_cp').css('background-color');
			$('#strona_tresc').css('border', szer+'px ridge '+kolor);
		}
		
		$('#strona_cp1').change(function() { 
			var kolor = $('#strona_cp1').css('background-color');
			$('#strona_tytul').css('background-color', kolor);
		});
		
		$('#strona_cp2').change(function() { 
			var kolor = $('#strona_cp2').css('background-color');
			$('#strona_tresc').css('background-color', kolor);
		});
		
		$('#strona_cp3').change(function() { 
			var kolor = $('#strona_cp3').css('background-color');
			$('#strona_content').css('background-color', kolor);
		});
		
		//-----font tytul------------------------------------------
		$('#strona_font_tytul').change(function() { 
			ustaw_font_tytul();
		});
		
		$('#strona_cp4').change(function() { 
			ustaw_font_tytul();
		});
		
		function ustaw_font_tytul() {
			var opcja = $('#strona_font_tytul').val();
			var kolor = $('#strona_cp4').css('background-color');
			var fn = czcionka(opcja);
			$('#strona_font_tytul').css('font-family', fn);
			$('#strona_tytul').css('font-family', fn);
			$('#strona_tytul').css('color', kolor);
		};
		//------------------------------------------------------------
		
		//---------font tresc--------------------------------------------------
		$('#strona_font_tresc').change(function() { 
			ustaw_font_tresc();
		});
		
		$('#strona_cp5').change(function() { 
			ustaw_font_tresc();
		});
		function ustaw_font_tresc() {
			var opcja = $('#strona_font_tresc').val();
			var kolor = $('#strona_cp5').css('background-color');
			var fn = czcionka(opcja);
			$('#strona_font_tresc').css('font-family', fn);
			$('#strona_tresc').css('font-family', fn);
			$('#strona_tresc').css('color', kolor);
		};
		
		function czcionka(opcja) {
			var fn = '';
			switch (opcja) {
				case 'fn1':
					fn='"Alegreya", serif';
					break;
				case 'fn2':
					fn='Righteous, cursive';
					break;
				case 'fn3':
					fn='"Eagle Lake", cursive';
					break;
				case 'fn4':
					fn='"Shadows Into Light Two", cursive';
					break;
				case 'fn5':
					fn='Pangolin, cursive';
					break;
				case 'fn6':
					fn='Mogra, cursive';
					break;
				case 'fn7':
					fn='"Merriweather", serif';
					break;
				case 'fn8':
					fn='"Patrick Hand", cursive';
					break;
				case 'fn9':
					fn='"Arima Madurai", cursive';
					break;
				case 'fn10':
					fn='"New Rocker", cursive';
					break;
				case 'fn11':
					fn='"Comic Sans MS", cursive, sans-serif';
					break;
				case 'fn12':
					fn='"Times New Roman", Georgia, Serif';
					break;
				case 'fn13':
					fn='Arial, Helvetica, sans-serif';
					break;
				case 'fn14':
					fn='Verdana, sans-serif';
					break;
				case 'fn15':
					fn='Courier, "Courier New", monospace';
					break;
				case 'fn16':
					fn='"Trebuchet MS", Helvetica, sans-serif';
					break;
				}
				return fn;
		}
		//-------------------------------------------------------------
		
		$('#strona_ustawienia_img').on("change", function(e){
			e.preventDefault();
			$(this).parent().next('#strona_info_img').click();
			var fn = $('#strona_info_img').val();
			var roz = fn.slice(0, 4);
			var nazwa = fn.slice(4, fn.length);
			foto_name = nazwa;
			foto_x = roz;
			if ((nazwa!='bf') && (foto_x>0)) {
				foto_img='<div id="strona_img"><img src="'+sciezka_img+nazwa+'"></div>';
				text_img();	
			}	else {
				var t = $('#strona_text_tresc').val().replace(/\n/g, '<br/>');
				$('#strona_tresc').html(t+txt_upload);
			}
		});
		
		function text_img() {		
			var t = $('#strona_text_tresc').val().replace(/\n/g, '<br/>');
			if ((foto_x>1) && (foto_x<450)) {
				$('#strona_tresc').html(foto_img+t+txt_upload);
				$('#strona_img').css({"marginRight": "0px", "marginLeft": "10px", "marginTop": "0px"});
			} else {
				$('#strona_tresc').html(t+foto_img+txt_upload);
				var mar = (730-foto_x)/2;
				$('#strona_img').css({"marginRight": mar+"px", "marginLeft": "0px", "marginTop": "10px"});
			}
		}
		
		//-------------------------------------------------------------
		$('#strona_text_tytul').keyup(function() {
			var t = $('#strona_text_tytul').val();
			$('#strona_tytul').html(t);
			$('#strona_text_tytul').focus();
		});
		
		$('#strona_text_tresc').keyup(function() {
			text_img();	
			$('#strona_text_tresc').focus();
		});
		
		//-----------------------------------
		function insertAtCaret(areaId, text) {
		var txtarea = document.getElementById(areaId);
		if (!txtarea) { return; }

		var scrollPos = txtarea.scrollTop;
		var strPos = 0;
		var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
			"ff" : (document.selection ? "ie" : false ) );
		if (br == "ie") {
			txtarea.focus();
			var range = document.selection.createRange();
			range.moveStart ('character', -txtarea.value.length);
			strPos = range.text.length;
		} else if (br == "ff") {
			strPos = txtarea.selectionStart;
		}

		var front = (txtarea.value).substring(0, strPos);
		var back = (txtarea.value).substring(strPos, txtarea.value.length);
		txtarea.value = front + text + back;
		strPos = strPos + text.length;
		if (br == "ie") {
			txtarea.focus();
			var ieRange = document.selection.createRange();
			ieRange.moveStart ('character', -txtarea.value.length);
			ieRange.moveStart ('character', strPos);
			ieRange.moveEnd ('character', 0);
			ieRange.select();
		} else if (br == "ff") {
			txtarea.selectionStart = strPos;
			txtarea.selectionEnd = strPos;
			txtarea.focus();
		}
		txtarea.scrollTop = scrollPos;
	}
	//--------------------------------------
		
		//---- Zapisz strone
		$('.str_zapisz').on("click", function(){
			var vrr = $('#strona_ramka').val();
			var rr = vrr.slice(1, vrr.length);
			var rk = '#'+$('#strona_cp').val();
			var ttyt = '#'+$('#strona_cp1').val();
			var ttre = '#'+$('#strona_cp2').val();
			var tcon = '#'+$('#strona_cp3').val();
			var vctyt = $('#strona_font_tytul').val();
			var ctyt = vctyt.slice(2, vctyt.length);
			var vctre = $('#strona_font_tresc').val();
			var ctre = vctre.slice(2, vctre.length);
			var kctyt = '#'+$('#strona_cp4').val();
			var kctre = '#'+$('#strona_cp5').val();
			var txttyt = $('#strona_text_tytul').val();
			var txttre = $('#strona_text_tresc').val().replace(/\n/g, '<br/>');
			  $.ajax({
				type:"POST",
				url:"pliki/strona_zapisz.php", 
				dataType: 'json',
				data: {k1: rr, k2: rk, k3: ttyt, k4: ttre, k5: tcon, k6: ctyt, k7: ctre, k8: kctyt, k9: kctre, k10: foto_name, k11: foto_x, k12: txttyt, k13: txttre},
				async: false,
                success: function(json) {
                },
					error: function(blad) {
                    console.log(blad); 
                }
			});
		 });
		
		
		//---- Menu  otworz / zamknij
		function zamknij_menu() {
			$("#strona_menu_tekst").hide();
			$("#strona_menu_ustawienia").hide();
			$("#strona_menu_pliki").hide();
			$("#strona_menu_szablon").hide();
		}
		
		$('.str_szablon').on("click", function(){
			 zamknij_menu();
			 $("#strona_menu_szablon").slideToggle(350);
		 });
		 
		$('.str_tresc').on("click", function(){
			 zamknij_menu();
			 $("#strona_menu_tekst").slideToggle(350);
		 });
		 
		 $('.str_ustaw').on("click", function(){
			 zamknij_menu();
			 $("#strona_menu_ustawienia").slideToggle(350);
		 });
		 
		 $('.str_pliki').on("click", function(){
			 zamknij_menu();
			 $("#strona_menu_pliki").slideToggle(350);
		 });
		//---------------------------------------------------------
		
		//---- Przesylanie i walidacja pliku
		$("#form_plik").submit(function(evt){	 
			evt.preventDefault();
			var formData = new FormData($(this)[0]);
			var file_size = $('#file')[0].files[0].size;
			if (file_size < 5242880) {
			   $.ajax({
				   url: 'pliki/dodaj_plik.php',
				   type: 'POST',
				   data: formData,
				   dataType:'json',
				   async: false,
				   cache: false,
				   contentType: false,
				   enctype: 'multipart/form-data',
				   processData: false,
				   success: function (json) {   
					   var k = json[0];
					   var s = json[1];
					   liczba_plikow = json[3];
					   sprawdz_liczbe_plikow(liczba_plikow);
					   if (json[2]!='n') txt_upload = json[2];
					    $('#strona_plik_kom').html(k);
					    $('#plik_info').html(s);	
						text_img();
				   }
			   });
			} else { 
				$('#strona_plik_kom').html('Plik przekracza dozwolony rozmiar (5 MB)');			
			}
		   return false;
		 });
		 
		  $('.strona_usun_plik').on("click", function(){
			 var t = $('#strona_info_pliki').val();
			 if (t!='bp') {
			 $.ajax({
				type:"POST",
				url:"pliki/usun_plik.php", 
				dataType: 'json',
				data: {k1: t},
				async: false,
                success: function(json) {					
					var k = json[0];
					var s = json[1];
					liczba_plikow = json[3];
					sprawdz_liczbe_plikow(liczba_plikow);
					txt_upload = json[2];
					$('#strona_plik_kom').html(k);
					$('#plik_info').html(s);
					text_img();
                },
					error: function(blad) {
                    console.log(blad); 
                }
			});
			 } else alert('Brak plików do usunięcia');
		 });
		 //--------------------------------------------------------
		 
		 //---- Przesylanie i walidacja foto
		$("#form_img").submit(function(evt){
			evt.preventDefault();
			var formData = new FormData($(this)[0]);
			var file_size = $('#foto')[0].files[0].size;
			
			if (file_size < 1572864) {
			   $.ajax({
				   url: 'pliki/dodaj_foto.php',
				   type: 'POST',
				   data: formData,
				   dataType:'json',
				   async: false,
				   cache: false,
				   contentType: false,
				   enctype: 'multipart/form-data',
				   processData: false,
				   success: function (json) {   
					   var k = json[0];
					   var s = json[1];
					   var l = json[2];
					   liczba_foto = json[3];
					   sprawdz_liczbe_foto(liczba_foto);
					   $('#strona_foto_kom').html(k);
					   $('#foto_info').html(s);
					   $('#strona_ustawienia_img').html(l);
				   }
			   });
			} else { 
				$('#strona_foto_kom').html('Plik przekracza dozwolony rozmiar (1.5 MB)');			
			}
		   return false;
		 });
		 
		 $('.strona_usun_foto').on("click", function(){
			 var t = $('#strona_info_foto').val();
			 if (t!='fot0') {
			 $.ajax({
				type:"POST",
				url:"pliki/usun_foto.php", 
				dataType: 'json',
				data: {k1: t},
				async: false,
                success: function(json) {					
					var k = json[0];
					var s = json[1];
					var l = json[2];
					liczba_foto = json[3];
					sprawdz_liczbe_foto(liczba_foto);
					$('#strona_foto_kom').html(k);
					$('#foto_info').html(s);
					$('#strona_ustawienia_img').html(l);
                },
					error: function(blad) {
                    console.log(blad); 
                }
			});
			 } else alert('Brak zdjęć do usunięcia');
		 });
		 //--------------------------------------------------------
		
		
		$('.str_szablon1').on("click", function(){	
			szablon('484848', 10, '050520', '03051a', '171717', 'ff3014', 'fff829', 10, 1);
		});
		
		$('.str_szablon2').on("click", function(){	
			szablon('000000', 0, 'ACE6ED', 'B39D8D', 'D0B7A4', '051340', '070942', 5, 2);
		});
		
		$('.str_szablon3').on("click", function(){	
			szablon('F7E4D4', 5, 'EDE8B7', 'E76597', 'FDA7BC', '853A57', '000000', 9, 3);
		});
		
		$('.str_szablon4').on("click", function(){	
			szablon('ff2b00', 7, '4A523B', 'AFC4BD', 'D9E2E6', 'F39F8B', '3C4230', 11, 8);
		});
		
		function szablon(rk, rr, tytk, tlok, trek, ftytk, ftrek, ftytr, ftrer) {
			$('#strona_ramka').val('r'+rr);
			$('#strona_tresc').css('border', rr+'px ridge '+'#'+rk);
			$('#strona_tytul').css('background-color', '#'+tytk);
			$('#strona_content').css('background-color', '#'+tlok);
			$('#strona_tresc').css('background-color', '#'+trek);
			
			$('#strona_tytul').css('color', '#'+ftytk);
			$('#strona_tresc').css('color', '#'+ftrek);
			
			$('#strona_cp').val(rk);
			$('#strona_cp').css('background-color', '#'+rk);
			$('#strona_cp1').val(tytk);
			$('#strona_cp1').css('background-color', '#'+tytk);
			$('#strona_cp2').val(trek);
			$('#strona_cp2').css('background-color', '#'+trek);
			$('#strona_cp3').val(tlok);
			$('#strona_cp3').css('background-color', '#'+tlok);
			$('#strona_cp4').val(ftytk);
			$('#strona_cp4').css('background-color', '#'+ftytk);
			$('#strona_cp5').val(ftrek);
			$('#strona_cp5').css('background-color', '#'+ftrek);
			
			$('#strona_font_tytul').val('fn'+ftytr);
			$('#strona_font_tresc').val('fn'+ftrer);
			$('#strona_tytul').css('font-family', czcionka('fn'+ftytr));
			$('#strona_tresc').css('font-family', czcionka('fn'+ftrer));
			
		}
		
		
		$('.button_www').on("click", function(){
			var tid = $(this).attr('id');
			var idn = tid.split('@');
			var id = idn[0];
			var nazwa = idn[1];
			$.ajax({
				type:"POST",
				url:"pliki/strona.php",
				data: {k1: id, k2: nazwa},
					success:function(s) {	
					$('body').animate({
					opacity: '0.0'}, 
					{
					duration: 800,
					easing: 'easeOutBounce',
					complete: function() {
						$('body').html(s); 
						$('body').animate({
						opacity: '1'}, 
						{
							duration: 1200,
							easing: 'easeInBounce'
						});
					}});						 
							$('body').show(1500);
					},
					error: function(blad) {
						console.log(blad); 
					}
			});		
		});
		
		
		
		$(".tab_wybrany").fadeIn();

        $(".tab_link2").on("click", function(event){
            event.preventDefault();
            $(".tab_link_wybrany").removeClass("tab_link_wybrany");
            $(this).addClass("tab_link_wybrany");
            var container_id = $(this).attr("title");
			$('.tab_wybrany').animate({
					height: "toggle",
					opacity: "toggle"}, 
					{
					duration: 500,
					easing: 'easeOutBack',
					complete: function() {
						$(this).removeClass("tab_wybrany");
						$(container_id).addClass("tab_wybrany");
						$(".tab_wybrany").animate({
							height : "toggle", 
							opacity : "toggle"},
							{duration: 1000,
							easing: 'easeOutBounce',}
							);
					}});
        });
		
		$('.submit_przyk1').on("click", function(){
			t1 = '<b>Pogrubienie tekstu</b>';
			t2 = '<span style="font-style: italic">Pochylenie tekstu</span>';
			t3 = '<span style="text-decoration: underline">Podkreślenie tekstu</span>';
			t4 = '<span style="text-decoration: underline; font-style: italic">Podkreślenie + pochylenie tekstu</span>';
			t5 = '<b><span style="text-decoration: underline; font-style: italic">Pogrubienie + podkreślenie + pochylenie tekstu</span></b>';
			h4 = '<span style="text-decoration: underline; font-style: italic">Podkreślenie + pochylenie tekstu</span><br /><br />';
			h5 = '<b><span style="text-decoration: underline; font-style: italic">Pogrubienie + podkreślenie + pochylenie tekstu</span></b><br /><br />';
			kolor_button();
			$('#strona_przyklad_button1').css('background-color', '#0A0');
			wizytowka_tekst_przyklad(t1, t2, t3, t4, t5, t1, t2, t3, h4, h5);
		});
		
		$('.submit_przyk2').on("click", function(){
			t1 = '<span style="color: #FF8000">Przykład 1</span>';
			t2 = '<span style="font-size: 10px">Przykład 2</span>';
			t3 = '<span style="color: #00FFFF; font-size: 15px">Przykład 3</span>';
			t4 = '<span style="color: #00FF00; font-size: 12px">Przykład 4</span>';
			t5 = '<span style="color: #FF00FF; font-size: 24px">Przykład 5</span>';
			h1 = '<span style="color: #FF8000">Zmiana koloru tekstu</span>';
			h2 = '<span style="Font-size: 10px">Zmiana rozmiaru tekstu</span>';
			h3 = '<span style="color: #00FFFF; font-size: 15px">Zmiana koloru i rozmiaru czcionki - 1</span>';
			h4 = '<span style="color: #00FF00; font-size: 12px">Zmiana koloru i rozmiaru czcionki - 2</span>';
			h5 = '<span style="color: #FF00FF; font-size: 24px">Zmiana koloru i rozmiaru czcionki - 3</span>';
			kolor_button();
			$('#strona_przyklad_button2').css('background-color', '#0A0');
			wizytowka_tekst_przyklad(t1, t2, t3, t4, t5, h1, h2, h3, h4, h5);
		});
		
		$('.submit_przyk3').on("click", function(){
			t1 = '<span style="font-family: \'Eagle Lake\', cursive">Przykład 1</span>';
			t2 = '<span style="font-family: \'New Rocker\', cursive">Przykład 2</span>';
			t3 = '<span style="font-family: \'Patrick Hand\', cursive">Przykład 3</span>';
			t4 = '<span style="font-family: \'Pangolin\', cursive">Przykład 4</span>';
			t5 = '<span style="color: #00FF00; font-family: \'Trebuchet MS\', Helvetica, sans-serif">Przykład 5</span>';
			h1 = '<span style="font-family: \'Eagle Lake\', cursive">Zmiana kroju czcionki - przykład 1</span>';
			h2 = '<span style="font-family: \'New Rocker\', cursive">Zmiana kroju czcionki - przykład 2</span>';
			h3 = '<span style="font-family: \'Patrick Hand\', cursive">Zmiana kroju czcionki - przykład 3</span>';
			h4 = '<span style="font-family: \'Pangolin\', cursive">Zmiana kroju czcionki - przykład 4</span>';
			h5 = '<span style="color: #00FF00; font-family: \'Trebuchet MS\', Helvetica, sans-serif">Zmiana koloru oraz kroju czcionki - przykład 5</span>';
			kolor_button();
			$('#strona_przyklad_button3').css('background-color', '#0A0');
			wizytowka_tekst_przyklad(t1, t2, t3, t4, t5, h1, h2, h3, h4, h5);
		});
		
		$('.submit_przyk4').on("click", function(){
			t1 = '<h1>Przykład 1</h1><h2>Przykład 1</h2><h3>Przykład 1</h3>';
			t2 = '<h4>Przykład 2</h4><h5>Przykład 2</h5><h6>Przykład 2</h6>';
			t3 = '<h3 style="color: #F00">Przykład 3</h3>';
			t4 = '<h5 style="color: #FE8; font-family: \'Pangolin\', cursive">Przykład 4</h5>';
			t5 = '';
			h1 = '<h1>Nagłówek 1</h1><h2>Nagłówek 2</h2><h3>Nagłówek - 3</h3>';
			h2 = '<h4>Nagłówek 4</h4><h5>Nagłówek 5</h5><h6>Nagłówek - 6</h6>';
			h3 = '<h3 style="color: #F00">Nagłówek 3 + kolor czcionki</h3>';
			h4 = '<h5 style="color: #FE8; font-family: \'Pangolin\', cursive">Nagłówek 5, kolor oraz zmiana kroju czcionki</h5>';
			h5 = '';
			kolor_button();
			$('#strona_przyklad_button4').css('background-color', '#0A0');
			wizytowka_tekst_przyklad(t1, t2, t3, t4, t5, h1, h2, h3, h4, h5);
		});
		
		$('.submit_przyk5').on("click", function(){
			t1 = '<div style="background: #0B0; width: 250px; height: 50px">Przykład 1</div>';
			t2 = '<div style="background: #C00; width: 220px; height: 90px; padding: 5px 10px; margin: 5px auto">Przykład 2</div>';
			t3 = '';
			t4 = '';
			t5 = '';
			h1 = '<div style="background: #0B0; width: 250px; height: 50px;">Przykład tła w kolorze zielonym o szerokości 250px i wysokości 50px</div>';
			h2 = '<div style="background: #C00; width: 220px; height: 90px; padding: 5px 10px; margin: 5px auto">Przykład tła z ustawionym kolorem czerwonym, szerokości 220px, wysokości 90px oraz marginesem wewnętrznym i zewnętrznym</div>';
			h3 = '';
			h4 = '';
			h5 = '';
			kolor_button();
			$('#strona_przyklad_button5').css('background-color', '#0A0');
			wizytowka_tekst_przyklad(t1, t2, t3, t4, t5, h1, h2, h3, h4, h5);
		});
		
		function kolor_button() {
			$('#strona_przyklad_button1').css('background-color', '#004');
			$('#strona_przyklad_button2').css('background-color', '#004');
			$('#strona_przyklad_button3').css('background-color', '#004');
			$('#strona_przyklad_button4').css('background-color', '#004');
			$('#strona_przyklad_button5').css('background-color', '#004');
		}
		
		function wizytowka_tekst_przyklad(t1, t2, t3, t4, t5, h1, h2, h3, h4, h5) {
			$('#sp_l1').text(t1);
			$('#sp_l2').text(t2);
			$('#sp_l3').text(t3);
			$('#sp_l4').text(t4);
			$('#sp_l5').text(t5);
			$('#sp_p1').html(h1);
			$('#sp_p2').html(h2);
			$('#sp_p3').html(h3);
			$('#sp_p4').html(h4);
			$('#sp_p5').html(h5);
		}
		
		$('#strona_przyklad_font').change(function() { 
			var opcja = $('#strona_przyklad_font').val();
			var fn = '';
			switch (opcja) {
				case 'fn1':
					fn='\'Alegreya\', serif';
					break;
				case 'fn2':
					fn='Righteous, cursive';
					break;
				case 'fn3':
					fn='\'Eagle Lake\', cursive';
					break;
				case 'fn4':
					fn='\'Shadows Into Light Two\', cursive';
					break;
				case 'fn5':
					fn='Pangolin, cursive';
					break;
				case 'fn6':
					fn='Mogra, cursive';
					break;
				case 'fn7':
					fn='\'Merriweather\', serif';
					break;
				case 'fn8':
					fn='"Patrick Hand", cursive';
					break;
				case 'fn9':
					fn='\'Arima Madurai\', cursive';
					break;
				case 'fn10':
					fn='\'New Rocker\', cursive';
					break;
				case 'fn11':
					fn='\'Comic Sans MS\', cursive, sans-serif';
					break;
				case 'fn12':
					fn='\'Times New Roman\', Georgia, Serif';
					break;
				case 'fn13':
					fn='Arial, Helvetica, sans-serif';
					break;
				case 'fn14':
					fn='Verdana, sans-serif';
					break;
				case 'fn15':
					fn='Courier, \'Courier New\', monospace';
					break;
				case 'fn16':
					fn='\'Trebuchet MS\', Helvetica, sans-serif';
					break;
				}
			$('#strona_przyklad_font_wzor').val('font-family: '+fn+';');
		});
		
		$('#strona_text_test').keyup(function() {
			var t = $('#strona_text_test').val();
			$('#strona_przyklad_test_podglad').html(t);
			$('#strona_text_test').focus();
		});
		
});
</script>


