$(function() {
	/* pozycja znacznika <li> który jest obecnie pokazany */
	var stanObecny = 0;
	
	var stanZaladowany  = 0;
	for(var i = 1; i <4; ++i)
		$('<img />').load(function(){
			++stanZaladowany;
			if(stanZaladowany == 3){
				$('#bg1,#bg2,#bg3,#bg4').mouseover(function(e){
					
					var $this = $(this);
					/* jeśli najedziemy na pokazany znacznik to nic nie robi */
					if($this.parent().index() == stanObecny)
						return;

					/* obiektami najazdu są bg1 lub bg2 lub bg3, zależnie od tego który wskażemy kursorem */
					var obiektMenu = e.target.id;

					/*
					tutaj ustawiamy tło podmenu.
					Ustawiamy kierunek ruchu animacji zależnie od tego z której strony
					najedziemy kursorem.
					Jeśli najedziemy z lewej strony obrazka to animacja będzie 
					szła od prawej do lewej, a jeśli z prawej strony najedziemy
					to animacja będzie szła od lewej do prawej
					 */
					if(obiektMenu == 'bg1' || stanObecny == 3)
						$('#menu .podmenu'+parseInt(stanObecny+1)).stop().animate({backgroundPosition:"(-305 0)"},800,function(){
							$(this).find('li').hide();
						});
					else
						$('#menu .podmenu'+parseInt(stanObecny+1)).stop().animate({backgroundPosition:"(305 0)"},800,function(){
							$(this).find('li').hide();
						});

					if(obiektMenu == 'bg4' || stanObecny == 3){
						/* animacja od lewej do prawej */
						$('#menu > li').animate({backgroundPosition:"(-1220px 500)"},0).removeClass('bg1 bg2 bg3 bg4').addClass(obiektMenu);
						move(1,obiektMenu);
					}
					else{
						/* animacja od prawej do lewej */
						$('#menu > li').animate({backgroundPosition:"(1220px 500)"},0).removeClass('bg1 bg2 bg3 bg4').addClass(obiektMenu);
						move(0,obiektMenu);
					}

					/*
					Część środkowa menu, też powinna ulec animacji, gdy będziemy przejeżdżać
					kursorem nad częścią środkową.
					Animacja ma być zależna od kierunku najazdu.
					To jest ważne w przypadku przechodzenia od pierwszego do ostatniego lelemntu menu
					lub na odwrót.
					 */
					if(stanObecny == 1 && obiektMenu == 'bg1'){
						$('#menu .podmenu'+parseInt(stanObecny)).stop().animate({backgroundPosition:"(-305px 0)"},300);
					}
					if(stanObecny == 0 && obiektMenu == 'bg4'){
						$('#menu .podmenu'+parseInt(stanObecny+2)).stop().animate({backgroundPosition:"(305px 0)"},300);
					}

					
					/* zmień obecny element */
					stanObecny = $this.parent().index();
					
					/* nakładanie tła dla podmenu */
					
					$('#menu .podmenu'+parseInt(stanObecny+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
						$(this).find('li').fadeIn();
					});
				});
			}	
		}).attr('src', 'images/menu/'+i+'.jpg');

		 function move(dir,obiektMenu){
			  if(dir){
					$('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},300);
					$('#bg2').parent().stop().animate({backgroundPosition:"(-305px 0)"},400);
					$('#bg3').parent().stop().animate({backgroundPosition:"(-610px 0)"},500);
					$('#bg4').parent().stop().animate({backgroundPosition:"(-915px 0)"},700,function(){
						 $('#kontener').removeClass('bg1 bg2 bg3 bg4').addClass(obiektMenu);
					});
			  }
			  else{
					$('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},700,function(){
						 $('#kontener').removeClass('bg1 bg2 bg3 bg4').addClass(obiektMenu);
					});
					$('#bg2').parent().stop().animate({backgroundPosition:"(-305px 0)"},600);
					$('#bg3').parent().stop().animate({backgroundPosition:"(-610px 0)"},500);
					$('#bg4').parent().stop().animate({backgroundPosition:"(-915px 0)"},400);
					
			  }
		 }
	});