var Tooltip = function () {
    var config = {
        container: null,
        templateSelector: '#linechart-tooltip',
        bound: null,
        pos: [0, 0]
    };
    var data = {
        header: null,
        text: null
    };
    var cache = {
        rootSelection: null
    };
    var exports = {};

    function init() {
        var rootNode = config.container;
        rootNode.innerHTML = '<div class="tooltip-container"></div>';
        cache.rootSelection = d3.select(rootNode).style({opacity: 0, 'pointer-events': 'none'});
    }

    exports.show = function() {
        var tooltipContainer = cache.rootSelection;
        tooltipContainer.html(data.text);
        var tooltipSize = tooltipContainer.node().getBoundingClientRect();
        var shouldBeLeft = false;
        if (config.bound) {
            var bounds = config.bound.getBoundingClientRect();
            shouldBeLeft = (config.pos.x < (bounds.width / 2) && config.pos.x > tooltipSize.width) || config.pos.x > bounds.width - tooltipSize.width;
        }
        tooltipContainer.classed('left', shouldBeLeft).classed('right', !shouldBeLeft);
        var tooltipPosX = shouldBeLeft ? config.pos.x - tooltipSize.width : config.pos.x;
        tooltipContainer.interrupt().style({opacity: 1, left: tooltipPosX + 'px', top: config.pos.y - tooltipSize.height/2 + 'px'});
        return this;
    };

    exports.hide = function(){
        cache.rootSelection.transition().duration(500).style({opacity: 0});
        return this;
    };

    exports.setConfig = function (_newConfig) {
        chartUtils.override(_newConfig, config);
        if (!cache.rootSelection) {init();}
        return this;
    };

    exports.setData = function (_newData) {
        data = _newData;
        return this;
    };

    return exports;
};