function MenuEstiloMac(principalContenedor, pImg, minimizado, maximizado) {
    var rango = 2;
    var contenedorIcono = document.createElement('div');
    principalContenedor.appendChild(contenedorIcono);
    contenedorIcono.style.textAlign = 'center';
    contenedorIcono.style.height = maximizado + 'px';

    var anchoMaximo = 0; // inicializa el ancho maximo igual a 0
    var escala = 0; // inicializa elfactorde escala igual a 0
    // iniciliza los tiempos e intervalos
    var tiempoCerrado = null;
    var intervaloCerrado = null;
    var intervaloAbierto = null;

    var imagenes = []; // crea un arreglo de las imagenes
    var iconos = []; // crea un arreglo de los contenedores de iconos
    var reflejos = []; // crea un arreglo de los contenedores de los rfelejos
    var tamanosIconos = []; // crea un arreglo de los tanos de los iconos
    
    for (var i = 0; i < pImg.length; i++) {// Pasaos por todas las imagenes
        iconos[i] = document.createElement('img'); //crea y almacena el elemento imagen para el icono
        iconos[i].style.position = 'relative'; // la posicion para las iconos es relativa
        tamanosIconos[i] = minimizado; // almacena el tamaño inicial del icono
        actualizarPropiedadesdelIcono(i); // actualiza las propiedades de la imagen delicono
        contenedorIcono.appendChild(iconos[i]); // agrega elespacio para la imagen en el menu
        // agrega el evento apropiado para cada icono
        if (iconos[i].addEventListener) {
            iconos[i].addEventListener('mousemove', procesarMovimientoMouse, false);
            iconos[i].addEventListener('mouseout', procesarMouseFuera, false);
            iconos[i].addEventListener('click', pImg[i].onclick, false);
        } else if (iconos[i].attachEvent) {
            iconos[i].attachEvent('onmousemove', procesarMovimientoMouse);
            iconos[i].attachEvent('onmouseout', procesarMouseFuera);
            iconos[i].attachEvent('onclick', pImg[i].onclick);
        }
        for (var j = 0; j < pImg[i].tamanos.length; j++) {// recorremos los tamaños de la imagen
            var imagen = document.createElement('img'); // creamos la imagen para los diferentes tamaños
            imagen.setAttribute('src', pImg[i].nombre + pImg[i].tamanos[j] + pImg[i].extension);
            imagenes.push(imagen); // agregamos la imagen al arreglo
        }
    }
    function actualizarPropiedadesdelIcono(indice) {
        var tamano = minimizado + escala * (tamanosIconos[indice] - minimizado); // determina el tamaño del icono basado en el factor de escala
        var tamanoIndice = 0; // buscamos el indice apropiedo al tamaño de imagen
        while (pImg[indice].tamanos[tamanoIndice] < tamano && tamanoIndice + 1 < pImg[indice].tamanos.length) {
            tamanoIndice++;
        }
        if (tamano == maximizado) {
            iconos[indice].setAttribute('src', pImg[indice].nombre + maximizado + 'activo' + pImg[indice].extension);
            iconos[indice].setAttribute('title',pImg[indice].titulo);
        } else {
            iconos[indice].setAttribute('src', pImg[indice].nombre + pImg[indice].tamanos[tamanoIndice] + pImg[indice].extension);
        }
        // Asigna el alto y ancho para las imagenes y sus reflejos
        iconos[indice].setAttribute('width', tamano);
        iconos[indice].setAttribute('height', tamano);
        // Asigna los margenes
        iconos[indice].style.marginTop = (maximizado - tamano) + 'px';
    }

    /* Processa el evento del mauso en la imagen*/
    function procesarMovimientoMouse(e) {        
        window.clearTimeout(tiempoCerrado);// limpia el intervalo y el Time Out de tiempo
        tiempoCerrado = null;
        window.clearInterval(intervaloCerrado);
        intervaloCerrado = null;        
        if (escala != 1 && !intervaloAbierto) {// Checa que intervalo abierto sea requerido pero no exista aun
            // Crea el intervalo abierto
            intervaloAbierto = window.setInterval(
          function() {
              if (escala < 1) escala += 0.125;
              if (escala >= 1) {
                  escala = 1;
                  window.clearInterval(intervaloAbierto);
                  intervaloAbierto = null;
              }
              for (var i = 0; i < iconos.length; i++) {
                  actualizarPropiedadesdelIcono(i);
              }
          },
          10);

        }
        if (!e) e = window.event; // agrega el evento si el navegador no lo administra
        var activo = e.target || e.srcElement; // Busca el contenedorendonde se aplica el evento
        var indice = 0; // obtiene el incice en el cual ocurre el evento
        while (iconos[indice] != activo) indice++;
        var punto = (e.layerX || e.offsetX) / tamanosIconos[indice]; // obtiene el puto en en donde se dio click se bre la imagen
        if (punto) {// checa si punto esta dentro del icono seleccionado
            var anchoActual = 0; // inicializa el ancho actual igual a 0
            for (var i = 0; i < iconos.length; i++) {// recorremos los iconos
                if (i < indice - rango || i > indice + rango) {// checamos el rango pra determinar nuevo tamaño de icono
                    tamanosIconos[i] = minimizado; // ponemos a minimizado al icono
                } else if (i == indice) {
                    // si estamos en el indice ponemos maximizado al icono
                    tamanosIconos[i] = maximizado;

                } else if (i < indice) {

                    // si el indice es menor o esta de la izaquierdo al mximo buscamos el tamaño apropiado
                    tamanosIconos[i] = minimizado + Math.round((maximizado - minimizado - 1) * (Math.cos((i - indice - punto + 1) / rango * Math.PI) + 1) / 2);

                    // add the icon tamano to the current width
                    anchoActual += tamanosIconos[i];
                } else {
                    // si el indice es mayo o esta de la derecho al mximo buscamos el tamaño apropiado
                    tamanosIconos[i] = minimizado + Math.round((maximizado - minimizado - 1) * (Math.cos((i - indice - punto) / rango * Math.PI) + 1) / 2);
                    // agrega el icono al ancho actual
                    anchoActual += tamanosIconos[i];
                }


            }

            // actualiza el ancho m´ximo si es necesario
            if (anchoActual > anchoMaximo) anchoMaximo = anchoActual;

            // detecta si el tamaño e s el correcto
            if (indice >= rango && indice < tamanosIconos.length - rango && anchoActual < anchoMaximo) {
                // corrige el tamaño de los iconos menores
                tamanosIconos[indice - rango] += Math.floor((anchoMaximo - anchoActual) / 2);
                tamanosIconos[indice + rango] += Math.ceil((anchoMaximo - anchoActual) / 2);

            }
            // actualiza los tamaños de las imagenes
            for (var k = 0; k < iconos.length; k++)
                actualizarPropiedadesdelIcono(k);

        }


    }

    // Procesa El evento de mouse fuera de la imagen
    function procesarMouseFuera() {

        // checa que ni el intervalo cerrad ni el tiempo cerrado esten asignados
        if (!tiempoCerrado && !intervaloCerrado) {

            // crea el tiempode cerrado
            tiempoCerrado = window.setTimeout(
          function() {
              tiempoCerrado = null;
              if (intervaloAbierto) {
                  window.clearInterval(intervaloAbierto);
                  intervaloAbierto = null;
              }
              intervaloCerrado = window.setInterval(
                function() {
                    if (escala > 0) escala -= 0.125;
                    if (escala <= 0) {
                        escala = 0;
                        window.clearInterval(intervaloCerrado);
                        intervaloCerrado = null;
                    }
                    for (var i = 0; i < iconos.length; i++) {
                        actualizarPropiedadesdelIcono(i);
                    }
                },
                20);
          },
          100);

        }

    }

}