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

<div id="dfot_panel">
<h3 style="text-align: center; font-family: 'Comic Sans MS', cursive, sans-serif; font-size: 1.2em; color: #0dd;">Nasze fotografie</h3>
	<div id="dfot_tlo">
			<ul id="fot_ul">

			  <li id="fot_li1">
				<img id="fot_i1" src="galeria/cupel/Cupel_01.jpg" />
			  </li>
			  <li id="fot_li2">
				<img id="fot_i2" src="galeria/cupel/Cupel_02.jpg" />
			  </li>

			</ul>
	</div>
	<div id="dfot_menu_info">
	</div>
	<div id="dfot_menu">
		<div id="dfot_menu_l">
			<input type="button" id="fot_t" class="but_fot" value="Poprzedni" />
		</div>
		<div id="dfot_menu_s">
		<select name="katalog" class="foto_katalog" id="fot_katalog" >
<?php
	$k=0;
	$fotdir = 'galeria/';
	if ($handle = opendir($fotdir)) {
		while (false !== ($entry = readdir($handle))) {
			if ($entry != "." && $entry != "..") {
				if (is_dir($fotdir.$entry)) {
					$tabg[$k] = $entry;
					$k++;
					echo '<option>'.$entry.'</option>';
				}
			}
		}
		closedir($handle);
	}
	echo '</select>';
?>
		<input type="button" id="stop" class="but_fot" value="Start" />
		<select  class="foto_katalog2" id="fot_vef">
			<option> 0.5 </option>
			<option> 1 </option>
			<option> 1.5 </option>
			<option> 2 </option>
			<option> 2.5 </option>
			<option> 3 </option>
		</select>
		<select  class="foto_katalog2" id="fot_vsl">
			<option> 3 </option>
			<option> 5 </option>
			<option> 6 </option>
			<option> 7 </option>
			<option> 8 </option>
			<option> 10 </option>
			<option> 12 </option>
			<option> 15 </option>
		</select>
		</div>
		<div id="dfot_menu_r">
			<input type="button" id="fot_p" class="but_fot" value="Następny" />
		</div>
		<p id="fot_p1">Wybierz nazwę fotogalerii</p><p id="fot_p2">Start/Stop</p>
		<p id="fot_p3">Czas efektu</p><p id="fot_p4">Czas slajdu</p>
	</div>

</div>

<script type="text/javascript">
	var lp=1
	var nrs=0;  //numer slajdu
	var nra=0;  //Numer animacji
	var lfot=0;  //liczba fotek w katalogu
	var vanim=1500;  //Czas efektu animacji
	var vsl=5000;  //Czas wyświetlania slajdu
	var iv='';		//Zmienna TimeOut 
	var kat = '';
	var sc = '';
	var foto = [];
	$(document).ready(function(){
		
		$("#fot_p").attr("disabled", true);
		$("#fot_t").attr("disabled", true);
		$("#stop").attr("disabled", true);
		$('#fot_katalog').val('Wybierz katalog');
		 
		$("#fot_vef option").filter(function() { return this.text == '1.5'; 
		}).attr('selected', true);
		$("#fot_vsl option").filter(function() { return this.text == '5'; 
		}).attr('selected', true);

		//-----------------------------------------------------
		
		$('#fot_katalog').change(function() { 
			kat = $('#fot_katalog').val();
			 $.ajax({
				type:"POST",
				url:"galeria/wa_katalog.php", 
				//contentType:"application/json; charset=utf-8", 
				dataType:'json',
				async: false,
				data: {k1:kat},
					success: function(json) {
							foto = json; 
							sc = 'galeria/'+kat+'/';
							lfot = foto.length;
							if (lfot>1) {
								$('#fot_li1').html('<img id="fot_i1" src="' + sc+foto[1] + '"/>');
								$('#fot_li2').html('<img id="fot_i2" src="' + sc+foto[0] + '"/>');
								nrs=0;
								$("#fot_p").attr("disabled", false);
								$("#fot_t").attr("disabled", false);
								$("#stop").attr("disabled", false);
							} else {
								$('#fot_li2').html('<img id="fot_i2" src="' + sc+foto[0] + '"/>');
							}
							lp=0;
							komunikat();
					},
			});
		});
		
		function komunikat() {
			$('#dfot_menu_info').html('<p id="fot_p4">'+(lp+1)+' - '+lfot+'</p><p id="fot_p2">'+foto[lp]+'</p>');
		}
		
		$('#fot_vef').change(function() { 
			var v = $('#fot_vef').val();
			switch(v) {
				case '0.5':
					vanim=500;
					break;
				case '1':
					vanim=1000;
					break;
				case '1.5':
					vanim=1500;
					break;
				case '2':
					vanim=2000;
					break;
				case '2.5':
					vanim=2500;
					break;
				case '3':
					vanim=3000;
					break;
			}
		});
		
		$('#fot_vsl').change(function() { 
			var v = $('#fot_vsl').val();
			switch(v) {
				case '3':
					vsl=3000;
					break;
				case '5':
					vsl=5000;
					break;
				case '6':
					vsl=6000;
					break;
				case '7':
					vsl=7000;
					break;
				case '8':
					vsl=8000;
					break;
				case '10':
					vsl=10000;
					break;
				case '12':
					vsl=12000;
					break;
				case '15':
					vsl=15000;
					break;
			}
		});
		
		
		function slajdy() {
			lp++;
			if (lp>=lfot) {
				lp=0;
			}
			komunikat();
			if (nrs==0) {
				animacja_1();
			} else animacja_2();
			nrs++;
			if (nrs==2) nrs=0;
			iv = setTimeout(slajdy, vsl);
		}
		
		
		$('#stop').click(function() {
			if ($('#stop').val()=='Start') {
				$("#fot_p").attr("disabled", true);
				$("#fot_t").attr("disabled", true);
				clearTimeout(iv);
				slajdy();
				$('#stop').val('Stop');
			} else {
				$("#fot_p").attr("disabled", false);
				$("#fot_t").attr("disabled", false);
				clearTimeout(iv);
				$('#stop').val('Start');
			}
		})		
		
		//Przesuwanie galerii do przodu
		$( "#fot_p" ).on( "click", function() {
			lp++;
			if (lp>=lfot) {
				lp=0;
			}
			komunikat();
			if (nrs==0) {
				animacja_1();
			} else animacja_2();
			nrs++;
			if (nrs==2) nrs=0;
			$("#fot_p").attr("disabled", true);
			setTimeout(function(){
            $("#fot_p").attr("disabled", false); 
            }, vanim);  
		});
		
		//Przesuwanie galerii do tylu
		$( "#fot_t" ).on( "click", function() {
			lp--;
			if (lp<0) {
				lp=(lfot-1);
			}
			komunikat();
			if (nrs==0) {
				animacja_1();
			} else animacja_2();
			nrs++;
			if (nrs==2) nrs=0;
			$("#fot_t").attr("disabled", true);
			setTimeout(function(){
            $("#fot_t").attr("disabled", false); 
            }, vanim);  
		  });
		
		function animacja_1() {
			$('#fot_li1').html('<img id="fot_i1" src="' + sc+foto[lp] + '"/>');
			switch(nra) {
				case 0:
					$('#fot_i2').animate({
					left: '-=300',
					height: '-=500',
					width: '-=600',
					opacity: '0.0'}, 
					{
					duration: vanim,
					easing: 'easeOutBounce',
					complete: function() {
						ustaw_img2()
					}});
					break;
				case 1:
					$('#fot_i2').animate({
					width: '30',
					height: '20',
					left: '750',
					opacity: '0.4'}, 
					{
					duration: vanim,
					easing: 'easeOutBack',
					complete: function() {
						ustaw_img2()
					}});
					break;
				case 2:
					$('#fot_i1').css('zIndex', '1');
					$('#fot_i2').css('zIndex', '0');
					$('#fot_i1').css('width', '0');
					$('#fot_i1').css('opacity', '0');
					$('#fot_i1').animate({
					width: '+=820',
					opacity: '1'}, 
					{
					duration: vanim,
					easing: 'easeOutBounce',
					complete: function() {
						ustaw_img1()
						$('#fot_i1').css('zIndex', '1');
						$('#fot_i2').css('zIndex', '0');
					}});
					break;	
				case 3:
					$('#fot_i1').css('zIndex', '1');
					$('#fot_i2').css('zIndex', '0');
					$('#fot_i1').css('height', '0');
					$('#fot_i1').css('opacity', '0');
					$('#fot_i1').animate({
					height: '+=610',
					opacity: '1'}, 
					{
					duration: vanim,
					easing: 'easeOutBounce',
					complete: function() {
						ustaw_img1()
						$('#fot_i1').css('zIndex', '1');
						$('#fot_i2').css('zIndex', '0');
					}});
					break;
				case 4:
					$('#fot_i2').animate({
					height: '0',
					top: '400',
					opacity: '0.1'}, 
					{
					duration: vanim,
					easing: 'easeOutBack',
					complete: function() {
						$('#fot_i1').css('zIndex', '1');
						$('#fot_i2').css('zIndex', '0');
					}});
					$('#fot_i1').css('height', '0');
					$('#fot_i1').css('opacity', '0');
					$('#fot_i1').animate({
					height: '600',
					top: '0',
					opacity: '1'}, 
					{
					duration: vanim,
					easing: 'easeOutBack',
					complete: function() {
						$('#fot_i1').css('zIndex', '1');
						$('#fot_i2').css('zIndex', '0');
					}});
					break;
				case 5:
					$('#fot_i2').animate({
					height: '0',
					opacity: '0.2'}, 
					{
					duration: vanim,
					easing: 'easeInElastic',
					complete: function() {
						ustaw_img2()
					}});
					break;
				case 6:
					$('#fot_i2').animate({
					width: '100',
					left: '370',
					opacity: '0.0'}, 
					{
					duration: vanim,
					easing: 'easeInOutBounce',
					complete: function() {
						ustaw_img2()
					}});
					break;	
				case 7:	
					$('#fot_i2').animate({
					height: '200',
					top: '400',
					opacity: '0.7'}, 
					{
					duration: (vanim/2),
					easing: 'easeOutElastic',
					complete: function() {
						$('#fot_i2').animate({
					width: '0',
					opacity: '0.0'}, 
					{
					duration: (vanim/2),
					easing: 'easeInOutBounce',
					complete: function() {
						ustaw_img2()
					}});
					}});
					break;	
				case 8:	
					$('#fot_i2').animate({
					width: '400',
					left: '200',
					opacity: '0.7'}, 
					{
					duration: (vanim/2),
					easing: 'easeInOutCubic',
					complete: function() {
						$('#fot_i2').animate({
					width: '0',
					left: '830',
					opacity: '0.2'}, 
					{
					duration: (vanim/2),
					easing: 'easeInOutCubic',
					complete: function() {				
						ustaw_img2()
					}});
					}});
					break;	
				case 9:	
					$('#fot_i2').animate({
					height: '300',
					top: '300',
					opacity: '0.7'}, 
					{
					duration: (vanim/2),
					easing: 'easeOutBounce',
					complete: function() {
						$('#fot_i2').animate({
					width: '0',
					top: '0',
					height: '600',
					left: '420',
					opacity: '0.2'}, 
					{
					duration: (vanim/2),
					easing: 'easeOutBack',
					complete: function() {				
						ustaw_img2()
					}});
					}});
					break;	
			}
			nra++;
			if (nra==10) nra=0;
		}
		
		function animacja_2() {
			$('#fot_li2').html('<img id="fot_i2" src="' + sc+foto[lp] + '"/>');
					
			switch(nra) {
				case 0:
					$('#fot_i1').animate({
					left: '-=300',
					height: '-=500',
					width: '-=600',
					opacity: '0.0'}, 
					{
					duration: vanim,
					easing: 'easeOutBounce',
					complete: function() {
						ustaw_img1()
					}});
					break;
				case 1:
					$('#fot_i1').animate({
					width: '30',
					height: '20',
					left: '750',
					opacity: '0.4'}, 
					{
					duration: vanim,
					easing: 'easeOutBack',
					complete: function() {
						ustaw_img1()
					}});
					break;
				case 2:
					$('#fot_i2').css('zIndex', '1');
					$('#fot_i1').css('zIndex', '0');
					$('#fot_i2').css('width', '0');
					$('#fot_i2').css('opacity', '0');
					$('#fot_i2').animate({
					width: '+=820',
					opacity: '1'}, 
					{
					duration: vanim,
					easing: 'easeOutBounce',
					complete: function() {
						ustaw_img2()
						$('#fot_i2').css('zIndex', '1');
						$('#fot_i1').css('zIndex', '0');
					}});
					break;	
				case 3:
					$('#fot_i2').css('zIndex', '1');
					$('#fot_i1').css('zIndex', '0');
					$('#fot_i2').css('height', '0');
					$('#fot_i2').css('opacity', '0');
					$('#fot_i2').animate({
					height: '+=610',
					opacity: '1'}, 
					{
					duration: vanim,
					easing: 'easeOutBounce',
					complete: function() {
						ustaw_img2()
						$('#fot_i2').css('zIndex', '1');
						$('#fot_i1').css('zIndex', '0');
					}});
					break;
				case 4:
					$('#fot_i1').animate({
					height: '0',
					top: '400',
					opacity: '0.1'}, 
					{
					duration: vanim,
					easing: 'easeOutBack',
					complete: function() {
						$('#fot_i2').css('zIndex', '1');
						$('#fot_i1').css('zIndex', '0');
					}});
					$('#fot_i2').css('height', '0');
					$('#fot_i2').css('opacity', '0');
					$('#fot_i2').animate({
					height: '600',
					top: '0',
					opacity: '1'}, 
					{
					duration: vanim,
					easing: 'easeOutBack',
					complete: function() {
						$('#fot_i2').css('zIndex', '1');
						$('#fot_i1').css('zIndex', '0');
					}});
					break;
				case 5:
					$('#fot_i1').animate({
					height: '0',
					opacity: '0.2'}, 
					{
					duration: vanim,
					easing: 'easeInElastic',
					complete: function() {
						ustaw_img1()
					}});
					break;
				case 6:
					$('#fot_i1').animate({
					width: '100',
					left: '370',
					opacity: '0.0'}, 
					{
					duration: vanim,
					easing: 'easeInOutBounce',
					complete: function() {
						ustaw_img1()
					}});
					break;
				case 7:
					$('#fot_i1').animate({
					height: '200',
					top: '400',
					opacity: '0.7'}, 
					{
					duration: (vanim/2),
					easing: 'easeOutElastic',
					complete: function() {
						$('#fot_i1').animate({
					width: '0',
					opacity: '0.0'}, 
					{
					duration: (vanim/2),
					easing: 'easeInOutBounce',
					complete: function() {
						ustaw_img1()
					}});
					}});
					break;
				case 8:
					$('#fot_i1').animate({
					width: '400',
					left: '200',
					opacity: '0.7'}, 
					{
					duration: (vanim/2),
					easing: 'easeInOutCubic',
					complete: function() {
						$('#fot_i1').animate({
					width: '0',
					left: '830',
					opacity: '0.2'}, 
					{
					duration: (vanim/2),
					easing: 'easeInOutCubic',
					complete: function() {				
						ustaw_img1()
					}});
					}});
					break;
				case 9:
					$('#fot_i1').animate({
					height: '300',
					top: '300',
					opacity: '0.7'}, 
					{
					duration: (vanim/2),
					easing: 'easeOutBounce',
					complete: function() {
						$('#fot_i1').animate({
					width: '0',
					top: '0',
					height: '600',
					left: '420',
					opacity: '0.2'}, 
					{
					duration: (vanim/2),
					easing: 'easeOutBack',
					complete: function() {				
						ustaw_img1()
					}});
					}});
					break;
			}
			nra++;
			if (nra==10) nra=0;
		}
		
		function ustaw_img1() {
			$('#fot_i1').css('zIndex', '0');
			$('#fot_i2').css('zIndex', '1');
			$('#fot_i1').css('width', '830');
			$('#fot_i1').css('height', '600');
			$('#fot_i1').css('opacity', '1');
			$('#fot_i1').css('left', '0');
			$('#fot_i1').css('top', '0');
		}
		
		function ustaw_img2() {
			$('#fot_i1').css('zIndex', '1');
			$('#fot_i2').css('zIndex', '0');
			$('#fot_i2').css('width', '830');
			$('#fot_i2').css('height', '600');
			$('#fot_i2').css('opacity', '1');
			$('#fot_i2').css('left', '0');
			$('#fot_i2').css('top', '0');
		}
});
</script>