function HtmlInfo(root, cfg) {
    'use strict';

    var self;
    var previous;

    var a = root.append('a')
        .style('font-size', (cfg.titleSize * 1.25) + 'px')
        .style('line-height', 1)
        .style('font-weight', 'bold')
        .style('color', '#333')
        .attr('href', 'http://bl.ocks.org/darosh/7b816a50e66bb62208a7')
        .attr('target', '_blank')
        .text('Planetary Grid');

    root = root.append('div')
        .style('display', 'none');

    var b = root.append('b')
        .style('display', 'block')
        .style('font-size', cfg.titleSize + 'px');

    var s = b.append('svg')
        .attr('width', cfg.titleSize * 1.6)
        .attr('height', cfg.titleSize * 1.6)
        .style('float', 'left')
        .style('margin-top', (-cfg.titleSize * 0.25) + 'px')
        .style('margin-left', (-cfg.titleSize * 0.25) + 'px')
        .style('margin-right', (cfg.titleSize * 0.25) + 'px')
        .append('path')
        .style('stroke-width', 2)
        .attr('transform', 'translate(' + [cfg.titleSize * 1.6 / 2, cfg.titleSize * 1.6 / 2] + ')');

    var t = b.append('span');

    var c = root.append('small')
        .style('display', 'block')
        .style('text-align', 'right')
        .style('margin-top', (cfg.titleSize / 4) + 'px')
        .style('margin-bottom', (cfg.titleSize / 2) + 'px');

    var d = root.append('a')
        .style('display', 'block')
        .attr('target', '_blank')
        .text('Wikipedia');

    var e = root.append('a')
        .style('display', 'block')
        .attr('target', '_blank')
        .text('Google');

    var f = root.append('a')
        .style('display', 'block')
        .attr('target', '_blank')
        .text('Google Maps');

    var g = root.append('a')
        .style('display', 'block')
        .attr('target', '_blank')
        .text('Google Earth');


    function update(feature) {
        if (previous === feature) {
            return;
        }

        previous = feature;

        if (feature) {
            t.text(feature.properties.name);

            s
                .attr('class', feature.coordinates ? 'legend-symbol ' + feature.type : 'symbol ' + feature.properties.description)
                .attr('d', function () {
                    var s = cfg.sizes[feature.properties.description || 'place'] * cfg.titleSize / 6;
                    return d3.svg.symbol().size(s).type(cfg.symbols[feature.properties ? feature.properties.description : 'circle'])();
                });

            if (feature.type !== 'Feature') {
                d.style('display', 'none');
                e.style('display', 'none');
            } else {
                d.style('display', 'block');
                e.style('display', 'block');
            }

            var coo = [feature.geometry.coordinates[1], feature.geometry.coordinates[0]];

            coo[0] = d3.round(coo[0], 3);
            coo[1] = d3.round(coo[1], 3);

            c.text(d3.round(coo[0], 2) + ', ' + d3.round(coo[1], 2));
            d.attr('href', 'https://wikipedia.org/wiki/Special:Search/' + feature.properties.name);
            e.attr('href', 'https://www.google.com/search?q=' + feature.properties.name);
            f.attr('href', 'https://www.google.com/maps/@' + coo[0] + ',' + coo[1] + ',12z');
            g.attr('href', 'https://www.google.com/maps/@' + coo[0] + ',' + coo[1] + ',512m/data=!3m1!1e3');

            a.style('display', 'none');
            root.style('display', null);
            self.size = root.node().getBoundingClientRect();
        } else {
            a.style('display', null);
            root.style('display', 'none');
        }
    }

    return self = {
        update: update
    };
}