/**
* @var string
* @desc Indica el contenedor principal de los elementos.
*/
var content = "#cuadro";

/**
* @var string
* @desc Indica el id del boton que ejecuta la accion de CloseEffect().
*/
var buton = "#cerrar";

/**
* @var int/string
* @desc Indica la duracion del efecto jquery.
*/
var duracion = "fast";

/**
* Document
* @desc Funcion que se inicia cuando se carga el DOM
*/
$(function(){
	$("#imagenUno").bind('click', {selector:"#imagenUno", contenedor:content, boton:buton}, OpenEffect);
	$("#imagenDos").bind('click', {selector:"#imagenDos", contenedor:content, boton:buton}, OpenEffect);
	$("#imagenTres").bind('click', {selector:"#imagenTres", contenedor:content, boton:buton}, OpenEffect);
	$("#cerrar").bind('click', {contenedor:content, boton:buton}, CloseEffect);
});

/**
* OpenEffect()
* @author Isaac Lopez
* @update Pablo Orozco
* @param e 
* @return void
* @desc Funcion que genera el efecto principal , extiende el ancho del div y aplica z-index para posicionarlo encima de los demas elementos.
*/
function OpenEffect(e)
{	
	// Se reinicia valor de z-index para los elementos del contenedor
	$(e.data.contenedor+" :eq(0), "+e.data.contenedor+" :eq(1), "+e.data.contenedor+" :eq(2)").css("zIndex",0);

	// Dependiendo del selector proporcionado es la accion que se realiza
	switch(e.data.selector) {

		case "#imagenUno":
			$(e.data.selector).animate({
			 			width: "573px"
        			   	   }, duracion).css('zIndex', 1);

			break;
		
		case "#imagenDos":
			$(e.data.selector).animate({
			 			width: "573px",
						left:"0px"
        			   	   }, duracion).css('zIndex', 1);

			break;

		case "#imagenTres":
			$(e.data.selector).animate({
			 			width: "572px",
						left:"0px"
        			   	   }, duracion).css('zIndex', 1);

			break;

		default:
			break;
			
	}
	// Se muestra el boton de cerrar
	$(e.data.boton).fadeIn();
}

/**
* CloseEffect()
* @author Isaac Lopez
* @update Pablo Orozco
* @param e
* @return void
* @desc Regresa los elementos a su estado normal
*/
function CloseEffect(e)
{
	// Se reestablecen los valores originales a los elementos
	$(e.data.contenedor+" :eq(0)").animate({ width: "191px",left:"0px"}, duracion);
	$(e.data.contenedor+" :eq(1)").animate({ width: "191px",left:"191px"}, duracion);
	$(e.data.contenedor+" :eq(2)").animate({ width: "191px",left:"0px"}, duracion);
	// Se desaparece el boton de cerrar
	$(e.data.boton).fadeOut();

}