CSSOM

window.analyzer = {
    init: function (object, id) {
        this.functions.appendTable(id);
        this.functions.setupHeaders(object);
        this.functions.addData(object);
        this.functions.addCaption("Analysis of the stylesheets");
    },
    data: {},
    helpers: {
        wrapper: function (id) {
            var wrap;
            if (document.getElementById(id)) {
                wrap = document.getElementById(id);
            } else {
                 wrap = document.createElement('div');
                 wrap.setAttribute("id", id)
                 document.body.appendChild(wrap);
            }
            return wrap; 
        },
        bootstrapTable: function () {
            var self = window.analyzer;
            self.data.table = document.createElement('table');
            self.data.table.sortable = true;
            self.data.tBody = document.createElement('tbody');
            analyzer.data.table.appendChild(self.data.tBody);
        },
        createBodyRows: function (list) {
            var self = window.analyzer,
                ll = list.length,
                i;
            for (i = 0; i <= ll; i++) {
                var row = self.data.tBody.insertRow(i);
                self.helpers.createCells(list[0], row, 'td');
            }
        },
        createCells: function (item, row, el) {
            var self = window.analyzer,
                i = 0,
                itemProp;
            for (var itemProp in item) {
                if (typeof item[itemProp] !== 'function') {
                    if (el == 'td') {
                        var cell = row.insertCell(i);
                        cell.setAttribute('headers', itemProp);
                    } else {
                        var th = document.createElement('th');
                        cell = row.appendChild(th);
                    }
                    i++;
                }
            }
            self.data.columnCount = i;
        },
        loadHeadingData: function (item, row) {
            var self = window.analyzer,
                colCount = self.data.columnCount,
                i = 0;
            for (var itemProp in item) {
                if (typeof item[itemProp] !== 'function') {
                    var thisCell = row.cells[i],
                        val = document.createTextNode(itemProp);
                    thisCell.appendChild(val);
                    i++;
                }
            }
        },
        createHeader: function (list) {
            var self = window.analyzer,
                item = list[0];
            self.data.table.createTHead();
            self.data.table.tHead.className = "table__header";
            var tHeadRow = self.data.table.tHead.insertRow(0);
            tHeadRow.className = "table__header__row";
            self.helpers.createCells(item, tHeadRow, 'th');
            self.helpers.loadHeadingData(item, self.data.table.tHead.rows[0]);
        },
        createFooter: function (list) {
            var self = window.analyzer,
                item = list[0];
            self.data.table.createTFoot();
            self.data.table.tFoot.className = "table__footer";
            var tHeadRow = self.data.table.tFoot.insertRow(0);
            tHeadRow.className = "table__footer__row";
            self.helpers.createCells(item, tHeadRow, 'th');
            self.helpers.loadHeadingData(item, self.data.table.tFoot.rows[0]);
        },
        addRowData: function (list) {
            var self = window.analyzer,
                ll = list.length,
                tbody = self.data.table.tBodies[0],
                rows = tbody.rows,
                i = 0;
            for (var row in rows) {
                var item = list[i],
                    z = 0,
                    thisRow = rows[row];
                for (var itemProp in item) {
                    if (typeof item[itemProp] !== 'function') {
                        var val = self.helpers.filterDatum(item, itemProp);
                        var content = self.helpers.convertContent(val),
                            thisCell = thisRow.cells[z];
                        thisCell.appendChild(content);
                        z++;
                    }
                }
                i++;
            }
        },
        convertContent: function (val) {
            var content;
            if (typeof val == 'object' && val !== null) {
                var content = document.createElement('ul');
                val.forEach(function (el, i) {
                    var item = document.createElement('li');
                    item.innerHTML = el;
                    content.appendChild(item);
                });
            } else {
                 content = document.createTextNode(val);
            }
            return content;
        },
        convertToArray: function (ruleList) {
            ruleList = Array.prototype.slice.call(ruleList);
            var newArray = [];
            ruleList.forEach(function (el, i) {
                if (el.cssText) {
                    newArray.push(el.cssText);
                } else if (el.mediaText) {
                    newArray.push(el.mediaText)
                }
            });
            console.log(newArray);
            return newArray;
        },
        filterDatum: function (item, itemProp) {
            var self = window.analyzer,
                value = item[itemProp];
            switch (itemProp) {
                case "ownerNode":
                    value = value.nodeName;
                    break;
                case "cssRules":
                    if (value !== null) {
                        var value = self.helpers.convertToArray(value);
                    }
                    break;
                case "rules":
                    if (value !== null) {
                        var value = self.helpers.convertToArray(value);
                    }
                    break;
                case "media":
                    if (value !== null) {
                        var value = self.helpers.convertToArray(value);
                    }
                    break;
                default:
                    value = value;
                    break;
            }
            return value;
        }
    },
    functions: {
        appendTable: function (id) {
            var self = window.analyzer,
                wrapper = self.helpers.wrapper(id);
            self.helpers.bootstrapTable();
            wrapper.appendChild(self.data.table);
        },
        setupHeaders: function (list) {
            var self = window.analyzer;
            self.helpers.createHeader(list);
            self.helpers.createFooter(list);
        },
        addData: function (list) {
            var self = window.analyzer;
            self.helpers.createBodyRows(list);
            self.helpers.addRowData(list);
        },
        addCaption: function (caption) {
            var self = window.analyzer;
            caption = document.createTextNode(caption);
            self.data.table.createCaption();
            self.data.table.caption.appendChild(caption);
        }
    }
};
window.analyzer.init(document.styleSheets, 'css');