// JavaScript Document
var x_width_op2;
var x_left_op2;
var x_width_op3;
var x_left_op3;

//duracion en segundos de la transicion
var x_duracion = 1;

//el tipo de efecto que le vamos a aplicar
//var x_efecto = "Tween.bounceEaseOut";
//var x_efecto = "Tween.regularEaseIn";
//var x_efecto = "Tween.regularEaseOut";
//var x_efecto = "Tween.regularEaseInOut";
//var x_efecto = "Tween.strongEaseIn";
var x_efecto = "Tween.strongEaseOut";
//var x_efecto = "Tween.strongEaseInOut";
//var x_efecto = "Tween.backEaseOut";
//var x_efecto = "Tween.backEaseIn";
//var x_efecto = "Tween.backEaseInOut";
//var x_efecto = "Tween.bounceEaseOut";
//var x_efecto = "Tween.bounceEaseIn";
//var x_efecto = "Tween.bounceEaseInOut";
//var x_efecto = "Tween.elasticEaseIn";
//var x_efecto = "Tween.elasticEaseOut";
//var x_efecto = "Tween.elasticEaseInOut";


//onload
function Inicio()
{

	//necesitamos capturar los objetos que van a tener la animacion javascript para asignarles el prototipo Tween
	x_Obj_ContenidoInicio = document.getElementById('contenido-inicio');
	x_Obj_Op1 = document.getElementById('op-1');
	x_Obj_Op2 = document.getElementById('op-2');
	x_Obj_Op3 = document.getElementById('op-3');
	
	x_Obj_ContenidoInicio.onmouseout = function() {ExpandeSeccion("default");};
	x_Obj_Op1.onmouseover = function(){ExpandeSeccion("op1");};
	x_Obj_Op2.onmouseover = function(){ExpandeSeccion("op2");};
	x_Obj_Op3.onmouseover = function(){ExpandeSeccion("op3");};

	//function Tween(obj, prop, func, begin, finish, duration, suffixe)
	//la funcion Tween es la que hace las transiciones
	x_width_op2 = new Tween(x_Obj_Op2.style,'width','',parseInt(x_Obj_Op2.style.width),parseInt(x_Obj_Op2.style.width),1,'px');
	x_left_op2 = new Tween(x_Obj_Op2.style,'left','',parseInt(x_Obj_Op2.style.left),parseInt(x_Obj_Op2.style.left),1,'px');
	x_width_op3 = new Tween(x_Obj_Op3.style,'width','',parseInt(x_Obj_Op3.style.width),parseInt(x_Obj_Op3.style.width),1,'px');
	x_left_op3 = new Tween(x_Obj_Op3.style,'left','',parseInt(x_Obj_Op3.style.left),parseInt(x_Obj_Op3.style.left),1,'px');

}


//aqui hacemos una transición u otra dependiendo de donde se encuentre el puntero
function ExpandeSeccion(sSeccion)
{
	switch(sSeccion)
	{
		//si salimos del menu, demajos los menus centrados
		case "default":
			x_width_op2.func = eval(x_efecto);
			x_width_op2.continueTo(498,x_duracion);
			x_left_op2.func = eval(x_efecto);
			x_left_op2.continueTo(249,x_duracion);

			x_width_op3.func = eval(x_efecto);
			x_width_op3.continueTo(249,x_duracion);
			x_left_op3.func = eval(x_efecto);
			x_left_op3.continueTo(498,x_duracion);
			break;

		//si estamos sobre la primera opcion
		case "op1":
			x_width_op2.func = eval(x_efecto);
			x_width_op2.continueTo(249,x_duracion);
			x_left_op2.func = eval(x_efecto);
			x_left_op2.continueTo(498,x_duracion);

			x_width_op3.func = eval(x_efecto);
			x_width_op3.continueTo(125,x_duracion);
			x_left_op3.func = eval(x_efecto);
			x_left_op3.continueTo(622,x_duracion);
			break;

		//si estamos sobre la segunda opcion
		case "op2":
			x_width_op2.func = eval(x_efecto);
			x_width_op2.continueTo(498,x_duracion);
			x_left_op2.func = eval(x_efecto);
			x_left_op2.continueTo(125,x_duracion);

			x_width_op3.func = eval(x_efecto);
			x_width_op3.continueTo(125,x_duracion);
			x_left_op3.func = eval(x_efecto);
			x_left_op3.continueTo(622,x_duracion);
			break;

		//si estamos sobre la tercera opcion
		case "op3":
			x_width_op2.func = eval(x_efecto);
			x_width_op2.continueTo(498,x_duracion);
			x_left_op2.func = eval(x_efecto);
			x_left_op2.continueTo(125,x_duracion);

			x_width_op3.func = eval(x_efecto);
			x_width_op3.continueTo(498,x_duracion);
			x_left_op3.func = eval(x_efecto);
			x_left_op3.continueTo(249,x_duracion);
			break;

	}
}