﻿var postsArr = new Array(),
    $postsList = $('ul.list-items');

//Create an array containing all list items
$postsList.find('li').each(function () {
    postsArr.push($(this).html());
})


//First column, split the whole list by a third.
var avgitem = Math.ceil(postsArr.length / 5);

//First column, split the whole list by a third.
var firstList = postsArr.splice(0, avgitem),
    fifthList = postsArr.splice(0, avgitem),
    fourthList = postsArr.splice(0, avgitem),
    thirdList = postsArr.splice(0, avgitem),
    //Secound column, take one half of the remaining list items.

    //Third column, put the remaining items into an array.
    secondList = postsArr,
    ListHTML = '';

function createHTML(list) {
    ListHTML = '';
    for (var i = 0; i < list.length; i++) {
        ListHTML += '<li>' + list[i] + '</li>'
    };
}

//Generate HTML for first list
createHTML(firstList);
$postsList.html(ListHTML);
//Generate HTML for second list
createHTML(secondList);
//Create new list after original one
$postsList.after('<ul class="list-items list-unstyled"></ul>').next().html(ListHTML);
createHTML(thirdList);
//Create new list after original one
$postsList.after('<ul class="list-items list-unstyled"></ul>').next().html(ListHTML);
createHTML(fourthList);
//Create new list after original one
$postsList.after('<ul class="list-items list-unstyled"></ul>').next().html(ListHTML);
createHTML(fifthList);
//Create new list after original one
$postsList.after('<ul class="list-items list-unstyled"></ul>').next().html(ListHTML);
    //Generate HTML for third list