$(document).ready(inicia);

function inicia(){
		 
	$("#index h1").css("opacity", "0").animate({marginTop: "104px", opacity:1}, 1100);
	$("#index #menu").css("opacity", "0").animate({marginTop: "0px", opacity:1}, 1200);
	$("#menu a").mouseover(encimaMenu).mouseout(escondeMenu);
	
	$("#velo").animate({width:"110%", left:-1}, 400);
	$("#velo").css("opacity", "0.5").animate({opacity:0}, 600, borraVelo);

	$("#animaListL li").append("<div class='bracket'><div class='leftBr'></div><div class='rightBr'></div></div>");
	$("#animaListL li a").stop().mouseover(showInfoLeft).stop().mouseout(hideInfoLeft);
	
	$("#animaListR li").append("<div class='bracket'><div class='leftBr'></div><div class='rightBr'></div></div>");
	$("#animaListR li a").stop().mouseover(showInfoRight).stop().mouseout(hideInfoRight);

}

function borraVelo(){
	$("#velo").css("display", "none");
}

function encimaMenu(){
	var posx = $(this).position().left;
	var ancho = $(this).css("width");
	var anchoCorregido = Number(ancho.substr(0,ancho.lastIndexOf("p")))+26+"px";
	$("#menu #linea").stop().css("display", "block").animate({ marginLeft:posx, width: anchoCorregido }, 400);
}

function escondeMenu(){
	$("#menu #linea").stop().animate({ marginLeft:"0px", width: "0px" }, 400, oculta);
}

function oculta(){
	$("#menu #linea").css("display", "none");
}


function showInfoLeft(){
	var raiz = $(this).parent();
	var elementos = $(raiz).children();
	var caja  = elementos[2];
	var divsCaja = $(caja).children();
	var altura = (49-($(raiz).position().top))+"px";
	var alturaParrafo = (52-($(raiz).position().top))+"px";
	$(elementos[1]).css("top", alturaParrafo);
	$(elementos[1]).css("visibility", "visible");
	$(elementos[1]).css("opacity", "0");

	$(caja).animate({ width: "400px", height: "190px", paddingLeft:"25px", top:altura}, 400);
	$(divsCaja[0]).animate({ width: "20px", height: "190px", top:altura, marginRight:"225px"}, 400);
	$(divsCaja[1]).animate({ width: "20px", height: "190px", top:altura}, 400);
	$(elementos[1]).animate({ opacity: 0.8}, 1500);
	
}

function hideInfoLeft(){
	var raiz = $(this).parent();
	var elementos = $(raiz).children();
	var caja  = elementos[2];
	var divsCaja = $(caja).children();
	$(elementos[1]).css("visibility", "hidden");
	$(caja).animate({ width: "9px", height: "19px", paddingLeft:"0px", top:"0px"}, 400);
	$(divsCaja[0]).animate({ width: "2px", height: "12px", marginRight:"3px", top:"0px"}, 400);
	$(divsCaja[1]).animate({ width: "2px", height: "12px", top:"0px"}, 400);
}


function showInfoRight(){
	var raiz = $(this).parent();
	var elementos = $(raiz).children();
	var caja  = elementos[2];
	var divsCaja = $(caja).children();
	var altura = (49-($(raiz).position().top))+"px";
	var alturaParrafo = (52-($(raiz).position().top))+"px";
	$(elementos[1]).css("top", alturaParrafo);
	$(elementos[1]).css("visibility", "visible");
	$(elementos[1]).css("opacity", "0");

	$(caja).animate({ width: "500px", height: "190px", marginLeft:"-284px", top:altura}, 400);
	$(divsCaja[0]).animate({ width: "20px", height: "190px", top:altura, marginRight:"225px"}, 400);
	$(divsCaja[1]).animate({ width: "20px", height: "190px", top:altura}, 400);
	$(elementos[1]).animate({ opacity: 0.8}, 1500);
	
}

function hideInfoRight(){
	var raiz = $(this).parent();
	var elementos = $(raiz).children();
	var caja  = elementos[2];
	var divsCaja = $(caja).children();
	$(elementos[1]).css("visibility", "hidden");
	$(caja).animate({ width: "9px", height: "19px", marginLeft:"0px", top:"0px"}, 400);
	$(divsCaja[0]).animate({ width: "2px", height: "12px", marginRight:"3px", top:"0px"}, 400);
	$(divsCaja[1]).animate({ width: "2px", height: "12px", top:"0px"}, 400);
}

function borraVelo(){
	$("#velo").css("display", "none");
}