$(document).ready(function() {
	
	$('body').prepend(
		$('<div>').attr('id', 'debug')
					.css('position', 'fixed')
					.css('top', '0px')
					.css('right', '0px')
					.css('backgroundColor', 'black')
					.css('opacity', '0.7')
					.css('textAlign', 'right')
					.css('zIndex', '1')
	);
	$('#pobierz').hide();
	$('#content').css('overflow', 'hidden')
				.css('top', '165px')
				.css('left', '420px')
				.css('width', '430px')
				.css('height', '450px');
	$('#content p').each(function(){
		$(this).css('display', 'block')
				.attr('id', 'p'+$('#content p').index($(this)) )
				.css('position', 'absolute')
				.css('zIndex', (30-$('#content p').index($(this))) )
				.css('width', $('#content').width()-180)
				//.css('left', '0px' )
				.css('left', 50*$('#content p').index($(this))+'px' )
				.append(
					$('<div>').css('width', '100%')
								.css('height', '24px')
								.css('paddingTop', '18px')
								.append(
									$('<a>').attr('href', '#')
											.attr('class', 'prev')
											.css('float', 'left')
											.text('wróć')
								)
								.append(
									$('<a>').attr('href', '#')
											.attr('class', 'next')
											.css('float', 'right')
											.text('dalej')
								)
				);
		$(this).css('top', ($('#content').height()-$(this).height())*$('#content p').index($(this))*5/20)
		$('#content').append(
			$('<div>').attr('id', 'bg_'+$(this).attr('id'))
				.css('position', $(this).css('position'))
				.css('zIndex', (-20+parseInt($(this).css('zIndex'))))
				.css('width', parseInt($(this).css('width'))+2*parseInt($(this).css('marginLeft')))
				.css('height', parseInt($(this).height())+2*parseInt($(this).css('marginBottom')))
				.css('left', $(this).css('left'))
				.css('top', $(this).css('top'))
				//.css('border', '3px solid #932fa3')
				.css('backgroundColor', '#932fa3')
				.hide()
				//.css('backgroundImage', $('#container').css('backgroundImage'))
				//.css('backgroundImage', $('#container').css('backgroundImage'))
				//.css('backgroundPosition', '-'+Math.round($(this).offset().left-$('#container').offset().left)+'px -'+Math.round($(this).offset().top-$('#container').offset().top)+'px')
		);
		$(this).hide();
	});
	
	/********************************************/
	//$('#content p:gt(0)').hide();
	function fadeBg(x){
		$('#content > div').each(function(){
			ind = $('#content > div').index($(this));
			$(this).fadeTo('fast', (x==ind ? 0.65 : (Math.abs(x-ind)==1 ? 0.3 : 0)) );
		});
	}
	$('#content p:eq(0)').fadeIn('fast').each(function(){
		thisbg = $('#bg_'+$(this).attr('id'));
		thisbg.css('zIndex', parseInt(thisbg.css('zIndex'))+10);
		//$('#bg_'+$(this).attr('id')).fadeTo('fast', 0.5);
		//$('#bg_'+$(this).next().attr('id')).fadeTo('fast', 0.3);
		fadeBg(0);
	});
	$('#content p:first .prev').remove();
	$('#content p:last .next').remove();
	$('#content p a.next').click(function(e){
		e.preventDefault();
		//$('#content > div').fadeOut('fast');
		$($(this).parent().parent().get(0)).fadeOut('fast', function(){
			//$('#bg_'+$(this).attr('id')).fadeTo('fast', 0.3);
			//$('#bg_'+$(this).next().attr('id')).fadeTo('fast', 0.5);
			//$('#bg_'+$(this).next().next().attr('id')).fadeTo('fast', 0.3);
			fadeBg($('#content p').index($(this).next()));
			//thisbg = $('#bg_'+$(this).attr('id'));
			//thisbg.css('zIndex', parseInt(thisbg.css('zIndex'))-10);
			$(this).next().fadeIn('fast');
			//thisbg = $('#bg_'+$(this).next().attr('id'));
			//thisbg.css('zIndex', parseInt(thisbg.css('zIndex'))+10);
		});
	});
	$('#content p a.prev').click(function(e){
		e.preventDefault();
		//$('#content > div').fadeOut('fast');
		$($(this).parent().parent().get(0)).fadeOut('fast', function(){
			//$('#bg_'+$(this).attr('id')).fadeTo('fast', 0.3);
			//$('#bg_'+$(this).prev().attr('id')).fadeTo('fast', 0.5);
			//$('#bg_'+$(this).prev().prev().attr('id')).fadeTo('fast', 0.3);
			fadeBg($('#content p').index($(this).prev()));
			//thisbg = $('#bg_'+$(this).attr('id'));
			//thisbg.css('zIndex', parseInt(thisbg.css('zIndex'))-10);
			$(this).prev().fadeIn('fast');
			//thisbg = $('#bg_'+$(this).prev().attr('id'));
			//thisbg.css('zIndex', parseInt(thisbg.css('zIndex'))+10);
		});
	});
	/********************************************/
	
});