// JavaScript Document

$(document).ready(function(){
	$("ul.menu li ul li").hide();
	$("ul.menu li ul").css("background-position", "-190px 0");
});

$(function() {
	var admin = false;
	if ($('#bg3').is('*')) {
		admin = true;
	}

	/* position of the <li> that is currently shown */
	var current = -1;	
	var loaded  = 0;

	for(var i = 1; i < 3; i++)
		$('<img />').load(function(){
			++loaded;
			if(loaded == 2){
				$('#bg1,#bg2,#bg3').mouseover(function(e){
	
					var $this = $(this);
					/* if we hover the current one, then don't do anything */
					if($this.parent().index() == current)
						return;
					/* item is bg1 or bg2 or bg3 or bg4, depending where we are hovering */
					var item = e.target.id;
	
					/*
					this is the sub menu overlay. Let's hide the current one
					if we hover the first <li> or if we come from the last one,
					then the overlay should move left -> right,
					otherwise right->left
					 */
	
					if ($this.parent().index() < current) {
						$('#menu .sub'+parseInt($this.parent().index()+1)).css("background-position", "190px 0");
						$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-240px 0)"},300);
						$('#menu .sub'+parseInt(current+1)).find('li').hide();
						/* if we hover the first <li> or if we come from the last one, then the images should move left -> right */
						$('#menu > li').animate({backgroundPosition:"(-960px 40px)"},0).removeClass('bg0 bg1 bg2 bg3').addClass(item);
						move(1,item);
					}
					else{
						$('#menu .sub'+parseInt($this.parent().index()+1)).css("background-position", "-240px 0");
						$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(190px 0)"},300);
						$('#menu .sub'+parseInt(current+1)).find('li').hide();
						/* if we hover the first <li> or if we come from the last one, then the images should move right -> left */
						$('#menu > li').animate({backgroundPosition:"(960px 40px)"},0).removeClass('bg0 bg1 bg2 bg3').addClass(item);
						move(0,item);
					}

					/* change background to current staus in secure */
					$('#menuWrapper').removeClass('bg0 bg1 bg2 bg3').addClass('bg' + parseInt(current+1));
	
					/* change the current element */
					current = $this.parent().index();
					
					/* let's make the overlay of the current one appear */
					$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
						$(this).find('li').show();
					});
	
				});
			}	
		}).attr('src', 'css/images/'+i+'.jpg');
		
		/*
		dir:1 - move left->right
		dir:0 - move right->left
		 */
		function move(dir,item){
			if (admin) {
				if(dir){
					$('#bg1').parent().stop().animate({backgroundPosition:"(0 40px)"},300);
					$('#bg2').parent().stop().animate({backgroundPosition:"(-190px 40px)"},400);
					$('#bg3').parent().stop().animate({backgroundPosition:"(-380px 40px)"},500,function(){
						$('#menuWrapper').removeClass('bg0 bg1 bg2 bg3').addClass(item);
					});
				}
				else{
					$('#bg1').parent().stop().animate({backgroundPosition:"(0 40px)"},700,function(){
						$('#menuWrapper').removeClass('bg0 bg1 bg2 bg3').addClass(item);
					});
					$('#bg2').parent().stop().animate({backgroundPosition:"(-190px 40px)"},600);
					$('#bg3').parent().stop().animate({backgroundPosition:"(-380px 40px)"},500);
				}
			} else {
				if(dir){
					$('#bg1').parent().stop().animate({backgroundPosition:"(0 40px)"},300);
					$('#bg2').parent().stop().animate({backgroundPosition:"(-190px 40px)"},400);
					$('#bg3').parent().stop().animate({backgroundPosition:"(-380px 40px)"},500,function(){
						$('#menuWrapper').removeClass('bg0 bg1 bg2 bg3').addClass(item);
					});
				}
				else{
					$('#bg1').parent().stop().animate({backgroundPosition:"(0 40px)"},600,function(){
						$('#menuWrapper').removeClass('bg0 bg1 bg2 bg3').addClass(item);
					});
					$('#bg2').parent().stop().animate({backgroundPosition:"(-190px 40px)"},500);
					$('#bg3').parent().stop().animate({backgroundPosition:"(-380px 40px)"},400);
				}
			}
		}
});