<?php

/*

type: layout

name: Pictures Grid

description: Grid with 3 columns

*/

?>
<?php if (is_array($data)): ?>
    <?php $rand = uniqid(); ?>
    <script>mw.require("tools.js", true);</script>
    <script>mw.require("<?php print $config['url_to_module']; ?>js/masonry.pkgd.min.js", true); </script>
    <script>mw.moduleCSS("<?php print $config['url_to_module']; ?>css/style.css"); </script>
    <script>
        mw._masons = mw._masons || [];
        $(document).ready(function () {
            var m = mw.$('#mw-gallery-<?php print $rand; ?>');
            m.masonry({
                "itemSelector": '.masonry-item',
                "gutter": 15
            });
            mw._masons.push(m);
            if (typeof mw._masons_binded === 'undefined') {
                mw._masons_binded = true;
                setInterval(function () {
                    var l = mw._masons.length, i = 0;
                    for (; i < l; i++) {
                        var _m = mw._masons[i];
                        if (mw.$(".masonry-item", _m[0]).length > 0) {
                            _m.masonry({
                                "itemSelector": '.masonry-item',
                                "gutter": 15
                            });
                        }
                    }
                }, 500);
            }

        });
    </script>
    <div class="mw-images-template-masonry mw-images-template-masonry-grid" id="mw-gallery-<?php print $rand; ?>"
         style="position: relative;width: 100%;">
        <?php $count = -1; foreach ($data as $item): ?>
            <?php $count++; ?>
            <div class="masonry-item masonry-item-grid"
                 style="background-image:url('<?php print thumbnail($item['filename'], 400); ?>');"
                 onclick="mw.tools.gallery.init(gallery<?php print $rand; ?>, <?php print $count; ?>)">
                <?php if ($item['title'] != '') { ?>
                    <div class="masonry-item-description"><?php print $item['title']; ?></div>
                <?php } ?>
            </div>
        <?php endforeach;  ?>
    </div>
    <script>gallery<?php print $rand; ?> = [
                <?php foreach($data  as $item): ?>{image: "<?php print thumbnail( $item['filename'], 1000); ?>", description: "<?php print $item['title']; ?>"},
            <?php endforeach;  ?>
        ];</script>
<?php else : ?>
<?php endif; ?>