// AbsoluteGrid module for creating grid
var AbsoluteGrid = (function() {
    //public interface to return
    var interfaceModel = {};

    interfaceModel.init = function(config) {
        this.wrapper = $(config.container);
        this.elements = this.wrapper.find('[data-item]');
        this.ratio = config.ratio;
        this.elementWidth = this.wrapper.width() / config.ratio;
        this.order = config.order;
        this.bias = config.bias || 0;
        this.totalHeight = 0;

        createGrid();
    };

    interfaceModel.getRandomColor = function() {
        var colors = ['#5D6D7E', '#34495E', '#2E4053', '#283747', '#212F3C', '#2C3E50', '#5D6D7E',
        '#566573'];

        return colors[Math.floor(Math.random() * colors.length)];
    };

    // private interface
    function createGrid() {

        setPosition();
        setDataAttributes();

        // if any images appears, w8 4 it load for correct offset of block
        if (interfaceModel.elements.find('img').length) {
            // imagesLoaded from https://github.com/desandro/imagesloaded
            interfaceModel.wrapper.imagesLoaded(function() {
                setBlockStyles();
            });
        } else {
            setBlockStyles();
        }
    };

    function setBlockStyles() {
        var count =  0;
        var linkedElement;

        interfaceModel.elements.each(function(index, el) {
            if (count === interfaceModel.ratio) {
                count = 0;
            };
            setColor(el);

            el.style.left = interfaceModel.elementWidth * (count++) + 'px';

            linkedElement = interfaceModel.elements[index - interfaceModel.ratio];

            if (linkedElement) {
                el.style.top = linkedElement.dataset.offset + 'px';
                el.dataset.offset = Number(linkedElement.dataset.offset) + el.offsetHeight;
            } else {
                el.style.top = 0 + 'px';
                el.dataset.offset = el.offsetHeight;

                if (interfaceModel.order === 'even' && interfaceModel.bias) {
                    if (index % 2 === 0) {
                        el.style.top = parseInt(el.style.top) + interfaceModel.bias + 'px';
                        el.dataset.offset = parseInt(el.dataset.offset) + interfaceModel.bias;
                    }
                } else if (interfaceModel.order === 'odd' && interfaceModel.bias) {
                    if (index % 2 !== 0) {
                        el.style.top = parseInt(el.style.top) + interfaceModel.bias + 'px';
                        el.dataset.offset = parseInt(el.dataset.offset) + interfaceModel.bias;
                    }
                }
            };

            if (interfaceModel.totalHeight < el.dataset.offset) {
                interfaceModel.totalHeight = el.dataset.offset;
            };

            setTimeout(function() {
                el.classList.add('show')
            }, 100 * el.dataset.order);
        });

        setParentHeight();
    }

    function setColor(el) {
        el.style.backgroundColor = interfaceModel.getRandomColor();
    };

    function setDataAttributes() {
        var order = 1;

        $.each(interfaceModel.elements, function(index, el) {
             el.dataset.order = order++;
        });
    };

    function setPosition() {
        interfaceModel.wrapper.css({
            'position': 'relative'
        });

        interfaceModel.elements.css({
            'position': 'absolute',
            'width': interfaceModel.elementWidth
        });
    };

    function setParentHeight() {
        interfaceModel.wrapper.css({
            'height': interfaceModel.totalHeight
        })
    };

    return interfaceModel;
})();


$(document).ready(function() {
    // grid init
    AbsoluteGrid.init({
        container: '.items-wrapper', // parent container
        ratio: 5, // how many items in the row
        order: 'even', // offset order -> 'even/odd'
        bias: 100 // offset of items from the top
    });

    // modal init
    showModal.init({
        target: '.item-info',
        targetParent: '.items-wrapper',
        modal: '.modal'
    });

});


// modal
var showModal = (function() {
    var interfaceModel = {};
    var img;
    var views;
    var comments;
    var likes;
    var text;
    var currentItem;

    interfaceModel.init = function(config) {
        this.target = config.target;
        this.targetParent = $(config.targetParent);
        this.modal = $(config.modal);

        img = this.modal.find('[data-img]');
        views = this.modal.find('[data-views]');
        comments = this.modal.find('[data-comments]');
        likes = this.modal.find('[data-likes]');
        text = this.modal.find('[data-content]');

        eventManager();
    };

    function eventManager() {
        interfaceModel.targetParent.on('click', interfaceModel.target, onItemClickHandler);
        interfaceModel.modal.on('click', '.modal-close', onCloseClickHandler);
        $(document).on('click', onDocumentClickHandler);
    };

    function onItemClickHandler(evt) {
        var $this = $(this);
        currentItem = $this.closest('[data-item]');

        // a 'little bit' rough for demo purpose
        img.attr('src', currentItem.find('img').attr('src'))
        views.text(currentItem.find('.views').text());
        comments.text(currentItem.find('.comments').text());
        likes.text(currentItem.find('.likes').text());
        text.html('<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, atque. Veritatis, fugiat sapiente, dolorum laborum quaerat molestias, placeat sunt exercitationem aliquam corrupti voluptatem cupiditate.</p><p>quis repellat illo commodi dolorem! Molestias minus, illo rerum nihil ea architecto incidunt quae eveniet delectus!</p>');

       interfaceModel.modal.addClass('show');
    };

    function onDocumentClickHandler(evt) {
        var $target = $(evt.target);

        if(!$target.closest(interfaceModel.modal).length && !$target.closest($(interfaceModel.target)).length) {
            if(interfaceModel.modal.is(":visible")) {
                interfaceModel.modal.removeClass('show');
            }
        }
    };

    function onCloseClickHandler(evt) {
        $(this).closest(interfaceModel.modal).removeClass('show');
    };

    return interfaceModel;
})()