// JavaScript Document

var timer, timer2;
var capamostrada = 1;
var activo = 0;

$(
  function(){
	$("#boton1 > a").css("background-position", "center bottom");
	$("#boton1 > a").click(
			function(){
				$(this).css("background-position", "center bottom");
				clearInterval(timer);
				clearTimeout(timer2);
				cambiopaso(1);
			}, 
			function(){
				if (capamostrada != 1){
					$(this).css("background-position", "center top");
				}
				clearInterval(timer);
				clearTimeout(timer2);
				timer = setInterval("cambiopaso(0)", 9000);
			}
		);
	$("#boton2 > a").click(
			function(){
				$(this).css("background-position", "center bottom");
				clearInterval(timer);
				clearTimeout(timer2);
				cambiopaso(2);
			}, 
			function(){
				if (capamostrada != 2){
					$(this).css("background-position", "center top");
				}
				clearInterval(timer);
				clearTimeout(timer2);
				timer = setInterval("cambiopaso(0)", 9000);
			}
		);
	$("#boton3 > a").click(
			function(){
				$(this).css("background-position", "center bottom");
				clearInterval(timer);
				clearTimeout(timer2);
				cambiopaso(3);
			}, 
			function(){
				if (capamostrada != 3){
					$(this).css("background-position", "center top");
				}
				clearInterval(timer);
				clearTimeout(timer2);
				timer = setInterval("cambiopaso(0)", 9000);
			}
		);
	$("#botonempieza > a").hover(
			function(){
				$(this).css("background-position", "center bottom");
			},
			function(){
				$(this).css("background-position", "center top");
			}
		);
	$(".paso").hover(
		function(){
			clearInterval(timer);
			clearTimeout(timer2);
			activo = 1;
		},
		function(){
			clearInterval(timer);
			clearTimeout(timer2);
			activo = 0;
			timer = setInterval("cambiopaso(0)", 9000);
		}
	);
	$("#menuani > .boton > a > span").css("display", "none");
	$("#menuani > .boton[id!=botonempieza]").bind("click", function(e){
		return false;
	});
	$("#menuani > #botonempieza").bind("click", function(e){
		document.location.href = "contrasena_solicitud.php";
		return true;
	});
	$("#paso2").children().css("display", "none");
	$("#paso3").children().css("display", "none");
	timer = setInterval("cambiopaso(0)", 9000);
  }
);

$(
  function(){
	$("#boton1_eu > a").css("background-position", "center bottom");
	$("#boton1_eu > a").click(
			function(){
				$(this).css("background-position", "center bottom");
				clearInterval(timer);
				clearTimeout(timer2);
				cambiopaso(1);
			}, 
			function(){
				if (capamostrada != 1){
					$(this).css("background-position", "center top");
				}
				clearInterval(timer);
				clearTimeout(timer2);
				timer = setInterval("cambiopaso(0)", 9000);
			}
		);
	$("#boton2_eu > a").click(
			function(){
				$(this).css("background-position", "center bottom");
				clearInterval(timer);
				clearTimeout(timer2);
				cambiopaso(2);
			}, 
			function(){
				if (capamostrada != 2){
					$(this).css("background-position", "center top");
				}
				clearInterval(timer);
				clearTimeout(timer2);
				timer = setInterval("cambiopaso(0)", 9000);
			}
		);
	$("#boton3_eu > a").click(
			function(){
				$(this).css("background-position", "center bottom");
				clearInterval(timer);
				clearTimeout(timer2);
				cambiopaso(3);
			}, 
			function(){
				if (capamostrada != 3){
					$(this).css("background-position", "center top");
				}
				clearInterval(timer);
				clearTimeout(timer2);
				timer = setInterval("cambiopaso(0)", 9000);
			}
		);
	$("#botonempieza_eu > a").hover(
			function(){
				$(this).css("background-position", "center bottom");
			},
			function(){
				$(this).css("background-position", "center top");
			}
		);
	$(".paso").hover(
		function(){
			clearInterval(timer);
			clearTimeout(timer2);
		},
		function(){
			clearInterval(timer);
			clearTimeout(timer2);
			timer = setInterval("cambiopaso(0)", 9000);
		}
	);
	$("#menuani > .boton > a > span").css("display", "none");
	$("#menuani > .boton").not("#botonempieza_eu").bind("click", function(e){return false;});
	$("#paso2").children().css("display", "none");
	$("#paso3").children().css("display", "none");
	timer = setInterval("cambiopaso(0)", 9000);
  }
);

function cambiopaso(id2){
	id1 = capamostrada;
	
	if (id2==0){
		id2 = id1+1;
	}
	if (id2>=4){
		id2=1;
	}
	
	if (id1!=id2){
		
		if (activo == 0){
			clearInterval(timer);
			clearTimeout(timer2);
			activo = 1;
			$("#paso"+id1).css("left", "auto");
			$("#paso"+id1).css("right", "auto");
			$("#paso"+id2).children().css("display", "block");
			
			$("#paso"+id1).animate({
				right: $("#pasos").width()
			}, 1500, function(){
				$("#paso"+id1).children().css("display", "none");
			});
			
			$("#paso"+id2).css("bottom", (250*(id2-1))+"px");
			$("#paso"+id2).css("left", $("#pasos").width());
			
			$("#paso"+id2).animate({
				left: "0px"
			}, 1500, function(){
				$("#menuani > .boton > a").css("background-position", "center top");
				$("#boton"+id2+" > a").css("background-position", "center bottom");
				activo = 0;
				capamostrada = id2;
			});
		}else{
			timer2 = setTimeout("cambiopaso("+id2+")", 9000);
		}
	}
}