$(function () {
    var img = $('img');
    img.each(function () {
        if ($(this).attr('src').length == 0) {
            $(this).hide();
        }
    });

    // var templete = $('.simple-post').detach();
    var templete = '';
    var content = $('.content');
    var postsContainer = content.find('.posts');
    var detailpostContainer = content.find('.single-post');
    if (postsContainer.length > 0) {
        console.log('posts');
        postsContainer.append(columnCreator(posts, templete, 1));
    } else if (detailpostContainer.length > 0) {
        console.log('detailpost');
        detailpostContainer.append(fullPostCreator(templete, posts[0]));
    } else {
        contentCreator(content, posts, templete);
        $(window).resize(function () {
            content.empty();
            contentCreator(content, posts, templete);
        });
    }
});

function contentCreator(content, posts, templete) {
    var columNumber = calcColumn($(document).width());
    content.append(columnCreator(posts, templete, columNumber));
    var contentHeight = $('.content').height();
    var columns = '.column-' + columNumber;
    appendMargin(columns, contentHeight, templete);
}


function columnCreator(postsCollection, templete, columNumber) {
    var frag = $('<div>');
    for (var i = 0; i < columNumber; i++) {
        var column = $('<div>').addClass('column-' + columNumber);
        var len = postsCollection.length;
        for (var k = i; k < len; k = k + columNumber) {
            var post = postCreator(templete, postsCollection[k]);
            // var style = postsCollection[k].style;
            // if (style != 'simple-post') {
            //     post.removeClass('simple-post');
            //     post.addClass(style);
            // }
            column.append(post);
        }
        if (i + 1 == columNumber) {
            column.css("margin-right", "0");
        }
        frag.append(column);
    }
    return frag;
}
function templeteCreator(style) {
    var post = $('<div>').addClass(style);
    var post_image = $('<div class="post-image">').append($('<img src="">'));
    var gallery_image = $('<div>').addClass('gallery-image').append($('<div>').addClass('gallery-image-4')).append($('<div>').addClass('gallery-image-4')).append($('<div>').addClass('gallery-image-4')).append($('<div>').addClass('gallery-image-4'));
    var top_post = $(' <div class="top-post">')
        .append($('<div class="blog-icon">')
            .append($('<i class="fa" aria-hidden="true"></i>')))
        .append($('<h3 class="post-type"></h3>'))
        .append($('<h2 class="post-header"><a></a></h2>'))
        .append($('<h3 class="post-author"></h3>'))
        .append($('<h3 class="post-date"></h3>'))
        .append($('<p class="post-body"></p>'))
        .append($('<div class="short-line-up"></div>'))
        .append($('<a class="post-link">read more</a>'))
        .append($('<div class="short-line-down"></div>'));
    var post_footer = $('<div class="post-footer">')
        .append($('<div class="post-comment">')
            .append($(' <div class="post-icon"><i class="fa fa-comments-o" aria-hidden="true"></i></div>'))
            .append($(' <span>NO COMMENT</span>')))
        .append($('<div class="post-likes">')
            .append('<div class="post-icon"><i class="fa fa-heart-o" aria-hidden="true"></i></div>')
            .append($('<span>LIKE 25</span>')))
        .append($('<div class="post-average">')
            .append($('<span>Average</span>'))
            .append($('<span>5%</span>'))
            .append($('<i class="fa fa-star" aria-hidden="true"></i>'))
        )
        .append($('<div class="post-icons">')
            .append($('<div class="post-icon"><i class="fa fa-pinterest" aria-hidden="true"></i></div>'))
            .append($('<div class="post-icon"><i class="fa fa-twitter" aria-hidden="true"></i></div>'))
            .append($('<div class="post-icon"><i class="fa fa-facebook" aria-hidden="true"></i></div>'))
            .append($('<div class="post-icon"><i class="fa fa-dribbble" aria-hidden="true"></i></div>'))
        );
    post.append(post_image).append(gallery_image).append(top_post).append(post_footer);
    return post;
}

function postCreator(temp, content) {
    // var post = temp.clone();
    var post = templeteCreator(content.style);
    post.find('.blog-icon i').addClass(content.icon);
    post.find('.post-type').html(content.type);
    post.find('.post-author').html(content.author);
    post.find('.post-header a').html(content.header);
    post.find('.post-date').html(content.date);
    post.find('.post-body').html(content.body.substr(0, 250));
    if (content.dark_auth) {
        post.find('.post-link').html(content.dark_auth);
    }
    post.attr('id', content.id);
    return post;
}
function fullPostCreator(temp, content) {
    // var post = temp.clone();
    var post = templeteCreator(content.style);
    post.find('.blog-icon i').addClass(content.icon);
    post.find('.post-type').html(content.type);
    post.find('.post-author').html('<i class="fa fa-user" aria-hidden="true"></i>' + content.author);
    post.find('.post-header a').html(content.header);
    post.find('.post-date').html('<i class="fa fa-calendar" aria-hidden="true"></i>' + content.date);
    post.find('.post-body').html(content.body);
    if (content.dark_auth) {
        post.find('.post-link').html(content.dark_auth);
    }
    post.attr('id', content.id);
    return post;
}
function emptyPostCreator(temp) {
    var post = temp.clone();
    post.css('margin-bottom', '0 !important');
    return post;
}

function appendMargin(columns, contentHeight, templete) {
    $(columns).each(function (el, i) {
        var column = $(this);
        var childrenHeight = 0;
        var childrenNumber = $(this).children().length;
        column.children().each(function (i) {
            childrenHeight = childrenHeight + $(this).height();
        });
        var margin = (contentHeight - childrenHeight - 30) / (childrenNumber - 1);
        //
        // if (margin > 300) {
        //     // console.log('margin > 300');
        //     var emptyPost = emptyPostCreator(templete);
        //     emptyPost.height(300);
        //     margin -= 300;
        //     column.append(emptyPost);
        //
        // }
        $(this).children().each(function (i) {
            if (i != childrenNumber - 1) {
                $(this).css('margin-bottom', margin);
            }
        });
    });
}

function calcColumn(width) {
    var columNumber = 4;
    if (width < 1600) {
        columNumber = 3;
    }
    if (width < 1150) {
        columNumber = 2;
    }
    if (width < 680) {
        columNumber = 1;
    }
    return columNumber;
}


var posts = [
    {
        id: 0,
        author: "JHONE ALBERT",
        icon: "fa-pencil",
        style: 'simple-post',
        type: 'travelling',
        header: "Travel besT Adventure",
        date: "January 25, 2016",
        body: "This is Photoshop's version now we’s of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi eiilit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsans ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. Class aptent taciti  have a great is the best sociosqu ad litora torquent per conubia nostra.Exercitation photo booths stumptowns totes bag Banksy, elit small batchbit kale chips proident chillwave have a great work deep haves laborum.Proins gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagitgitis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec terzllus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. Class aptent taciti Duis aute irure dolor in reprehenderit in voluptate velit. Qui officia deserunt mollit anim id est labosasirum. Corrupti quosalores et quas molestias excepturi sint occaecati. Facere possimus, omnis voluptas assumenda have esOmnis dolor repellendus. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis.Et harum quidem the odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.sociosqu ad litora torquent per conubia nostra.What a crowded bazaar! There were large crowds of people at the shops. There were motor cars, rickshaws, scooters and taxies. The has buses, too, were plying up and own the bazaar. We kept to the foot-path. Soon we were at the Fountain. There we is th saw the Gurdwara Sis Ganj with its golden dome. A large number of devotees were going in or coming out.We moved on. There were shops dealing in all sorts of goods. There were the cloth merchants, chemists, jewellers, confectioners1, tobaccoonists, leather goods merchants, wine merchants, gramophone dealers, radio shops and shops dealing in general merchandise. The show cases exhibited the goods in style to great idea gave a so much tempt us."
    },
    {
        id: 1,
        author: "JHONE ALBERT",
        icon: "fa-picture-o",
        style: 'simple-post-image',
        type: 'travelling',
        header: "Standard Image Post ",
        date: "January 25, 2016",
        body: "Lorem ipsum doloirs sit amet, csatetur adipisicin, sed does eiusmod tehampor choice is the have great work."
    },
    {
        id: 2,
        author: "JHONE ALBERT",
        icon: "fa-pencil",
        style: 'simple-post',
        type: 'Fashion',
        header: "Simple post style ",
        date: "January 02, 2016",
        body: "Lorem ipsum doloirs sit amet, csatetur adipisicin, sed does eiusmod tehampor choice is the have great work."
    },
    {
        id: 3,
        author: "JHONE ALBERT",
        icon: "",
        style: 'simple-post-just-image',
        type: '',
        header: "",
        date: "",
        body: ""
    },
    {
        id: 4,
        author: "JHONE ALBERT",
        icon: "",
        style: 'simple-post-just-image',
        type: 'travelling',
        header: "Standard Image Post ",
        date: "January 25, 2016",
        body: ""
    },
    {
        id: 5,
        author: "JHONE ALBERT",
        icon: "fa-music",
        style: 'simple-post-dark',
        type: 'Fashion',
        header: "Simple post style ",
        dark_auth: 'Nathalia Alexy',
        date: "January 02, 2016",

        body: "As per Lorm ipsum dolor sitamet, consectetur adipisicing elits, sed do Now eiusmod tempor havei ut labores et dolore magna aliqusa. Ut wenim ad minim veniam, quis its a snostrud now is the ullamco aliquip ex ea commodo ."
    },
    {
        id: 6,
        author: "JHONE ALBERT",
        style: 'simple-post-gallery',
        type: 'Adventures',
        header: "awesome Gallery Post",
        date: "January 19, 2016",
        body: ""
    },
    {
        id: 7,
        author: "JHONE ALBERT",
        style: 'simple-post',
        type: 'Fashion',
        header: "Simple post style ",
        date: "January 02, 2016",
        body: "Lorem ipsum doloirs sit amet, csatetur adipisicin, sed does eiusmod tehampor choice is the have great work."
    }
];