<?@header("Content-Type: text/html; charset=UTF-8");?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link href="/public/js/jsor-jcarousel/skins/tango/skincollection.css" rel="stylesheet" type="text/css" />
<link href="/public/css/gallery2012.css" rel="stylesheet" type="text/css" />
<link href="/public/css/style_new.css" rel="stylesheet" type="text/css" />

<script src="/public/js/jquery.js" type="text/javascript"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/public/js/Smooth-Div-Scroll/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="/public/js/Smooth-Div-Scroll/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="/public/js/Smooth-Div-Scroll/js/jquery.smoothDivScroll-1.2.js" type="text/javascript"></script>


<script type="text/javascript">
	var $j=jQuery.noConflict();

	jQuery(document).ready(function() {
		var mutatido  = 6000;
		var megszakitutan = 10000;
		var valtasido = 1000;
		var aktivkep  = '/<?=$elsokep?>';
		var menjen    = true;
		var sorszam   = 1;
		var idozito;
		
		
		$j('#makeMeScrollable').smoothDivScroll({
			visibleHotSpotBackgrounds: "always",
			manualContinuousScrolling: false
		});
		
		
		idozito = setTimeout(function(){menjel();},3000);
		function menjel(){
			if( menjen == true ){
				menjakovetkezore();
				idozito = setTimeout(function(){menjel();},mutatido);
			}
		}
		
		$j('.lapozkep').live('click', function(){
			lapozas($j(this).attr("rel"));
			keretez($j(this).attr("rel"));
			clearTimeout(idozito);
			idozito = setTimeout(function(){menjen=true;menjel();},megszakitutan);
		});
		
		
		$('#startstop').click(function(){
			if( $(this).html() == "Stop" ){
				menjen = false;
				$(this).html("Start");
			}else{
				menjen = true;
				$(this).html("Stop");
				idozito =  setTimeout(function(){menjel();},500);
			}
			
		});
		
		$('#elozodiv').click(function(){
			var elozo = elozokep();
			keretez(elozo);
			lapozas(elozo);
			clearTimeout(idozito);
			idozito = setTimeout(function(){menjen=true;menjel();},megszakitutan);
		});
		
		$('#kovidiv').click(function(){
			var kovi = kovetkezokep();
			keretez(kovi);
			lapozas(kovi);
			clearTimeout(idozito);
			idozito = setTimeout(function(){menjen=true;menjel();},megszakitutan);
		});
		
		function elozokep(){
			var elozo;
			
			$(".lapozkep").each(function (i) {
				if( $j(this).attr('rel') == aktivkep ){
					elozo = $j(this).prev();
				}
			});
			
			return elozo.attr('rel');
		}
		
		function kovetkezokep(){
			var kovi;
			
			$(".lapozkep").each(function (i) {
				if( $j(this).attr('rel') == aktivkep ){
					kovi = $j(this).next();
				}
			});
			
			return kovi.attr('rel');
		}
		
		function keretez(imgrel){
			var ssz = getsorszam(imgrel);
			var pleft = (ssz*73)+"px";
			$j('#kepkeret').css('left',pleft);
			
		}
		
		function lapozas(img){
		  if( img ){
			elotte();
			setTimeout(function(){getHTML2(img);},valtasido);
		  }
		}
		
		function getHTML2(img){
			var betoltendokep = img;
			
			$j('#nagykep').attr('src',betoltendokep);
			
			aktivkep = img;
			lapozokszine();
			
			$j('#gallerytop').animate({
				opacity: 1
				}, {
				duration: valtasido
			});
			
		}
		
		function elotte(){
			$j('#gallerytop').animate({
					opacity: 0.0
				}, {
				duration: valtasido
			});
		}
		
		function lapozokszine(){
			var relbal = elozokep();
			if( relbal === undefined ){
				$j('#elozodiv').addClass( 'inaktiv' );
				$j('#elozodiv').removeClass( 'aktiv' );
			}else{
				$j('#elozodiv').addClass( 'aktiv' );
				$j('#elozodiv').removeClass( 'inaktiv' );
			}
			
			var reljobb = kovetkezokep();
			if( reljobb === undefined ){
				$j('#kovidiv').addClass( 'inaktiv' );
				$j('#kovidiv').removeClass( 'aktiv' );
			}else{
				$j('#kovidiv').addClass( 'aktiv' );
				$j('#kovidiv').removeClass( 'inaktiv' );
			}
		}
		
		function menjakovetkezore(){
			var kovi = kovetkezokep();
			if(kovi !== undefined){
				keretez(kovi);
				lapozas(kovi);
			}
		}
		
		function getsorszam(img){
			var s=0;
			$(".lapozkep").each(function (i) {
				if( $j(this).attr('rel') == img ){
	//				s=s+1;
					return false;
				}
				s=s+1;
			});
			return s;
		}
		
		lapozokszine();
		
		// első elem alapból legyen keretben
		keretez(aktivkep);
		
		$j('.kepelem').css('margin-right','7px');
		
	});
</script>


<style type="text/css">
div.scrollWrapper, div.scrollableArea{
	height: auto;
}

div.scrollableArea{
	margin-left: 0px;
}
</style>

</head>

<body style="height: auto; background: url('/public/img/galeria/transikocka.png');">
<div style="width: 950px; margin: auto; padding: 10px;">





	
	<div id="gallerytop">
	
		<div id="elozodiv" class="lapozbelsodiv lapoz inaktiv" style="float: left !important; margin-right: 1px;">
		</div>
		
		<div class="nagykepdiv" style="text-align: center; width: 905px; height: 556px; overflow: hidden;">
			<img src="/<?=$elsokep?>" style="max-width: 888px; max-height: 556px;" alt="" id="nagykep" />
		</div>
		
		<div id="kovidiv" class="lapozbelsodiv lapoz aktiv">
		</div>
	
	</div>
	
	
	<div class="clear"></div>
	
	<div id="makeMeScrollable">
	<div style="float: left; height: 0px; width: 0px;">
	<img id="kepkeret" width="68" height="68" alt="" src="/public/img/galeria/thumb_selection.png" style="position: relative; left: 73px; z-index: 3;">
	</div>
	<?foreach($kepek as $kep):?>
		<?if( !is_dir($utvonal.$kep) ):?>
			<?if( file_exists( $utvonal."68/".$kep ) ):?>
			<img src="/<?=$utvonal?>68/<?=$kep?>" width="68" height="68" alt="" class="lapozkep" rel="/<?=$utvonal?><?=$kep?>" />
			<?elseif( file_exists( $utvonal."thumbs/".$kep ) ):?>
			<img src="/<?=$utvonal?>thumbs/<?=$kep?>" width="68" height="68" alt="" class="lapozkep" rel="/<?=$utvonal?><?=$kep?>" />
			<?else:?>
			<img src="/<?=$utvonal?><?=$kep?>" width="68" height="68" alt="" class="lapozkep" rel="/<?=$utvonal?><?=$kep?>" />
			<?endif;?>
		<?endif;?>
	<?endforeach;?>
	</div>
	
	
	<div style="display: none;">
	<?foreach($kepek as $kep):?>
		<?if( !is_dir($utvonal.$kep) ):?>
		<img src="/<?=$utvonal?><?=$kep?>" width="68" height="68" alt="" />
		<?endif;?>
	<?endforeach;?>
	</div>
	

</div>

<?if(!hun()):?>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-7485741-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<?else:?>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-5480261-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<?endif;?>
</body>
</html>