var stopSliding = 'Zastavit';
var playSliding = 'Spustit';

;(function($) {

$(document).ready(function () {
	$("#photo").append('<div id="urlloader" class="none"> </div>');
	$("#photo").append('<div class="playPause"><a id="stopButton" href="javascript:;"><span>'+stopSliding+'</span></a><a id="playButton" href="javascript:;"><span>'+playSliding+'</span></a></div>');
	$("#photo").append('<div class="container"><a id="prevPic" href=""></a><a id="nextPic" href=""></a><div class="image"><img id="placeholder" src="" alt="" width="" height="" /></div> <div id="photo-desc"> <h5> </h5> <p> </p> </div> </div>');

	var slideCount = 0;
	var buttonCount = 0;
	
	var slidesArray = [];
	var buttonsArray = [];
	
	function init() {
		playAndPause();
		buttonHeight();
	}
	
	
	$("#gal a").each(function() {
		slidesArray.push($(this));
		$(this).attr('rel',slideCount);
		$("#urlloader").prepend('<span style="background:url('+$(this).attr('href')+')"></span> ');
		
		slideCount++;
		$(this).css({ opacity: 0.2 });
		$(this).click( function(e) {
			e.preventDefault();
			loadPic($(this).attr('href'));
			playing = true;
			playAndPause();
			$(this).animate({ opacity: 1 }, 1000);
			current = $(this).attr('rel');
		});
		$(this).mouseover( function() {
			if(current != $(this).attr('rel')){
				$(this).animate({ opacity: 1 }, 100);
			}
		});
		$(this).mouseout( function() {
			if(current != $(this).attr('rel')){
				$(this).animate({ opacity: 0.2 }, 100);
			}
		});
	});

	$("#stopButton, #playButton").each(function() {
		$(this).click( function() { playAndPause(); } );
	});
	function buttonHeight() {
		var winHeight = $("#placeholder").height();
		$("#nextPic, #prevPic").css("height", winHeight);
	}
	$(window).resize(function() {
		buttonHeight();
	});
	$("#prevPic").click( function(e) {
		e.preventDefault();
		playing = true;
		playAndPause();
		switchSlide(true);
	});
	$("#nextPic").click( function(e) {
		e.preventDefault();
		playing = true;
		playAndPause();
		switchSlide(false);
	});
	
	
	var playing = false;
	var current = slidesArray.length - 1;
	
	function playAndPause() {
		if(playing){
			$("#playButton").css("display", "inline");
			$("#stopButton").css("display", "none");
			playing = false;
		}else{
			$("#playButton").css("display", "none");
			$("#stopButton").css("display", "inline");		
			playing = true;
			showSliding();
		}
	}

	function loadPic(which, title, desc) {
		//alert();
		
		slidesArray[current].animate({ opacity: 0.2 }, 200);
		$("#placeholder").fadeOut(200, function() {
			$("#placeholder").attr('src','');
			$("#placeholder").fadeIn(2000);
			//$("#placeholder").animate({ opacity: 0.5 }, 500);
			$("#placeholder").attr('src',which);
			var vyska = $("#placeholder").height() + 90;
			var sirka = $("#placeholder").width() + 4;
			$("#photo").animate({ height: vyska}, 500);
			$("#photo").animate({ width: sirka}, 500);
			$("#photo-desc h5").empty();
			$("#photo-desc p").empty();
			$("#photo-desc h5").append(title);
			$("#photo-desc p").append(desc);
			
			buttonHeight();
		});
	}

	
	function showSliding() {
		if(playing){
			switchSlide(false, true);
		}
	}
	function switchSlide(reversed, repeatIt) {
		slidesArray[current].removeClass('active');
		slidesArray[current].animate({ opacity: 0.2 }, 200);
		if(reversed){
			current--;
		}else{
			current++;
		}
		if(current >= slidesArray.length){
			current = 0;
		}

		if(current < 0){
			current = slidesArray.length;
		}
		loadPic(slidesArray[current].attr('href'), slidesArray[current].attr('title'), slidesArray[current].attr('desc'));
		slidesArray[current].addClass('active');
		slidesArray[current].animate({ opacity: 1 }, 1000);
		if(slidesArray.length > 1){
			if(repeatIt){
				setTimeout(function() { showSliding(); }, 8000);
			}
		}else{
			$(".playPause").css("display", "none");
		}
	}

	
	init();
});


})(jQuery);