function JsonTree(jsonData) {
    function isArray(o) {
        if (Array.isArray) {
            return Array.isArray(o);
        }
        if (Object.prototype.toString.call(o) === '[object Array]') {
            return true;
        }
        return false;
    }

    function htmlEncode(str) {
        var div = document.createElement("div");
        div.appendChild(document.createTextNode(str));
        return div.innerHTML;
    }

    //building the jsonData as dom elements
    this.getTree = function(domId) {
        if (this.display === true) {
            return;
        } else {
            this.display = true;
        }
        var html = '';
        var dataType = isArray(jsonData) ? 'arr' : '';
        var tree = document.createElement('div');
        tree.id = domId || "tree";
        tree.className = 'tree';
        //tree.id = "JsonViewer";
        tree.innerHTML = buildDom(jsonData, dataType);
        bindEvents(tree);
        return tree;
    }
    //building doms
    function buildDom(o, literal) {
        // null object
        var type = o === null
                   ? 'null'
                   : (isArray(o) ? 'array' : typeof o);
        var html = '';

        switch(type) {
            case 'array' :
                for (var i = 0, len = o.length; i < len; i++) {
                    html += '<li class = \'tree-close\' title=\''
                            + literal + '[' + i + ']\'><strong>'
                            + i + '</strong>:'
                            + buildDom(o[i], literal + '[' + i + ']')
                            + ',</li>';
                }
                return '<span class="operator">+</span><div class="group">'
                       + '[<ul class="' + type + '">'
                       + html.replace(/,<\/li>$/, '<\/li>')
                       + '</ul>]</div><div class="summary">Array['
                       + len + ']</div>';
                break;
            case 'object':
                //sort obj
                //var keys = Object.keys(o);
                //keys.sort();
                for (var key in o) {
                    //quote numeric property
                    if (/^\d+$/.test(key)) {
                        html += '<li class = \'tree-close\' title=\'' + literal
                                + '["' + key + '"]\'><strong>"'
                                + key + '"</strong>:'
                                + buildDom(
                                    o[key], literal + '["' + key + '"]'
                                  )
                                + ',</li>';
                    } else {
                        html += '<li class = \'tree-close\' title=\''
                                + key
                                + '\'><a href=\'#' + (literal == '' ? key : literal).charAt(0).toUpperCase()
                                + (literal == '' ? key : literal).slice(1)
                                + '\'><strong>' + key + '</strong></a>:'
                                + buildDom(o[key], literal == '' ? key : literal)
                                + ',</li>';
                    }
                }
                //remove last comma
                return '<span class="operator">+</span><div class="group">'
                       +'{<ul class="' + type + '">'
                       + html.replace(/,<\/li>$/, '<\/li>')
                       + '</ul>}</div><div class="summary">Object</div>';
                break;
            case 'string':
                return '<span class="value ' + type + '">"'
                        + (/^https?\:(\/\/).*$/i.test(o)
                          ? '<a href="' + o + '" target="_blank">' + o + '</a>'
                          : htmlEncode(o) ) + '"</span>';
                break;
            default :
                return '<span class="value ' + type + '">' + o + '</span>';
        }
    }

    function bindEvents(tree) {
        tree.onclick = function(e) {
            e = e || window.event;
            var src = e.srcElement || e.target;
            if (src.className === 'operator') {
                if (src.parentNode.className == 'tree-close') {
                    src.parentNode.className = 'open';
                    src.innerHTML = '-';
                } else {
                    src.parentNode.className = 'tree-close';
                    src.innerHTML = '+';
                }
            }
            _resize();
        }
    }
}

var domConfig = document.getElementById('config');
var domToc = document.getElementById('toc');
domConfig.appendChild(new JsonTree(echartsConfig).getTree());
function _resize() {
    var viewHeight = document.documentElement.clientHeight;
    var scrollHeight = document.documentElement.scrollTop
                       || document.body.scrollTop;
    var offsetHeight = document.body.offsetHeight;
    var maxHeight;
    var footHole = offsetHeight - scrollHeight - viewHeight;
    if (footHole > 60) {
        // 未见footer，60 top、bottom， 40 per one
        maxHeight = viewHeight - 100 - 40 * 2;
    }
    else {
        // 见footer
        maxHeight = viewHeight - 200 - 40 * 2;
    }
    if (domConfig.scrollHeight > maxHeight) {
        domConfig.style.height = maxHeight + 'px';
    } else {
        domConfig.style.height = 'auto';
    }
    if (domToc.scrollHeight > maxHeight) {
        domToc.style.height = maxHeight + 'px';
    } else {
        domToc.style.height = 'auto';
    }
}
$(window).on('scroll', _resize);
$(window).on('resize', _resize);
_resize();