sss

var alturaMosaicos;
var anchuraMosaicos;
var isOpen = false;


function init() {

    var nFilas = 10;
    var nColumas = 10;

    var contenedor = $('.contenedor');
    var imagen = $('.imagen');
    var widthImg = imagen.width();
    var heightImg = imagen.height();

    var widthMosaico = widthImg / nColumas;
    var heightMosaico = heightImg / nFilas;

    imagen.hide();

    contenedor.width((widthMosaico + 5) * nColumas);
    contenedor.height((heightMosaico + 5) * nFilas);

    // almancenando valores en las variables globla
    alturaMosaicos = heightMosaico;
    anchuraMosaicos = widthMosaico;

    var fila;
    var mosaico;
    var clear;
    for (var x = 0; x < nFilas; x++) {
        fila = nuevaFila();
        for (var y = 0; y < nFilas; y++) {
            mosaico = nuevoMosaico(imagen, widthMosaico, heightMosaico, x, y);
            fila.append(mosaico);
        }
        fila.append(nuevoClear());
        contenedor.append(fila);
    }

    setInterval(animate, 30000);
    animate();
}

function nuevoMosaico(imagen, width, height, x, y) {
    var imagenURL = imagen.attr('src');
    var div = $('<div>');
    var posX = height * -x;
    var posY = width * -y;

    div.attr('class', 'mosaico');
    div.css('background-image', "url(" + imagenURL + ")");
    div.css('background-position', posY + 'px ' +  posX + 'px');

    div.width(0);
    div.height(0);
    div.css('margin-bottom', height);
    div.css('margin-right', width / 2);
    div.css('margin-left', width / 2);

    return div;
}

function nuevoClear() {
    var div = $('<div>');
    div.attr('class', 'clear');

    return div;
}

function nuevaFila() {
    var div = $('<div>');
    div.attr('class', 'fila');

    return div;
}

function animate() {
    if (isOpen) {
        closeAll();
    } else {
        openAll();
    }

    isOpen = !isOpen;
}


function openAll() {
    $('.contenedor .fila').each(function (indexFila) {
        var fila = $(this);
        var mosaicos = fila.find('.mosaico');

        mosaicos.each(function (indexMosaico) {
            var mozaico = $(this);
            var tiempoEspera = (indexMosaico * 10 + indexFila) * 100
            setTimeout(function () { open(mozaico) }, tiempoEspera);
        });
    })
}

function closeAll() {
    $('.contenedor .fila').each(function (indexFila) {
        var fila = $(this);
        var mosaicos = fila.find('.mosaico');

        mosaicos.each(function (indexMosaico) {
            var mozaico = $(this);
            var tiempoEspera = (indexMosaico * 10 + indexFila) * 100
            setTimeout(function () { close(mozaico) }, tiempoEspera)
        });
    })
}

function open(mozaico) {
    mozaico.animate({
        'height': alturaMosaicos,
        'width': anchuraMosaicos,
        'margin-right': 0,
        'margin-left': 0,
        'margin-bottom': 0
    }, 600);
}

function close(mosaico) {
    mosaico.animate({
        'height': 0,
        'width': 0,
        'margin-right': anchuraMosaicos / 2,
        'margin-left': anchuraMosaicos / 2,
        'margin-bottom': alturaMosaicos
    }, 600)
}


$(window).load(function () {
    init();
});