function histogram(data, buckets) {
    var histo = {},
        x,
        i,
        arr = [];

    var max = 0;
    var min = 1;

    var step = (max-min)/(buckets-1);

    // Group down
    for (i = 0; i < data.length; i++) {
        x = Math.floor(data[i] / step) * step;
        if (!histo[x]) {
            histo[x] = 0;
        }
        histo[x]++;
    }

    // Make the histo group into an array
    for (x in histo) {
        if (histo.hasOwnProperty((x))) {
            arr.push([parseFloat(x), histo[x]]);
        }
    }

    // Finally, sort the array
    arr.sort(function (a, b) {
        return a[0] - b[0];
    });

    return arr;
}

function cost(data, winner) {
    var arr = [];

    // Group down
    for (var i = 0; i < data.length; i++) {
        if(winner == 'left') {
            arr.push([data[i], -1*Math.log(1-data[i])]);
        } else if(winner == 'right') {
            arr.push([data[i], -1*Math.log(data[i])]);
        }
    }
    return arr;
}

function randn_bm(mu, sigma) {
    var u = 1 - Math.random();
    var v = 1 - Math.random();
    return (sigma * Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v )) + mu;
}

function distribution(size) {
    var mean = Math.max(0.1, Math.min(0.9, randn_bm(0.5, 0.15)));

    var distr = [];
    for(var i=0; i<size; i++) {
        distr.push(Math.max(0, Math.min(1, randn_bm(mean, 0.15))));
    }
    return distr;
}

var data = distribution(400);

function make_cost_histogram(container) {
    var teamA = {
        color: '#4285f4'
    };
    var teamB = {
        color: '#ea4335'
    };
    var histo = {
        color: '#ccccdd'
    };
    Highcharts.chart(container, {
        chart: {
            type: 'column',
        alignTicks: false
        },
        title: {
            text: '<span style="color:' + teamA.color + ';">&lt; Team A</span> vs <span style="color:' + teamB.color + ';">Team B &gt;</span>'
        },
        credits: {
            enabled: false
        },
        xAxis: [{
            title: {
                text: 'Probability Team B beats Team A'
            },
            floor: 0,
            ceiling: 1,
            min: 0,
            minPadding: 0,
            max: 1,
            maxPadding: 0,
            endOnTick: true
        },{
            floor: 0,
            ceiling: 1,
            min: 0,
            minPadding: 0,
            max: 1,
            maxPadding: 0,
            endOnTick: true,
            visible: false
        }],
        yAxis: [{
            title: {
                text: 'Count'
            }
        }, {
            opposite: true,
            lineWidth: 0,
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            title: {
                text: 'Penalty'
            }
        }],
            series: [{
                name: 'Penalty if Team A Wins',
                type: 'spline',
                color: teamA.color,
                data: cost([0.01, 0.02, 0.03, 0.04, 0.05, 0.06, 0.07, 0.08, 0.09, 0.1, 0.11, 0.12, 0.13, 0.14, 0.15, 0.16, 0.17, 0.18, 0.19, 0.2, 0.21, 0.22, 0.23, 0.24, 0.25, 0.26, 0.27, 0.28, 0.29, 0.3, 0.31, 0.32, 0.33, 0.34, 0.35, 0.36, 0.37, 0.38, 0.39, 0.4, 0.41, 0.42, 0.43, 0.44, 0.45, 0.46, 0.47, 0.48, 0.49, 0.5, 0.51, 0.52, 0.53, 0.54, 0.55, 0.56, 0.57, 0.58, 0.59, 0.6, 0.61, 0.62, 0.63, 0.64, 0.65, 0.66, 0.67, 0.68, 0.69, 0.7, 0.71, 0.72, 0.73, 0.74, 0.75, 0.76, 0.77, 0.78, 0.79, 0.8, 0.81, 0.82, 0.83, 0.84, 0.85, 0.86, 0.87, 0.88, 0.89, 0.9, 0.91, 0.92, 0.93, 0.94, 0.95, 0.96, 0.97, 0.98, 0.99], 'left'),
                xAxis: 1,
                yAxis: 1,
                index: 1,
                legendIndex: 0,
                tooltip: {
                    pointFormatter: function() {
                        return '<span style="color:' + this.color + '">\u25CF</span> Penalty: <b>' + (Math.round(this.y*10000)/10000) + '</b><br/>';
                    }
                },
                marker: {
                    radius: 0
                }
            }, {
                name: 'Histogram',
                type: 'column',
                color: histo.color,
                data: histogram(data, 31),
                index: 0,
                legendIndex: 1,
                tooltip: {
                    headerFormat: '<span style="font-size: 10px"> {point.key:.4f} </span><br/>'
                },
                pointPadding: 0,
                groupPadding: 0,
                pointPlacement: 'on'
            }, {
                name: 'Penalty if Team B Wins',
                type: 'spline',
                color: teamB.color,
                data: cost([0.01, 0.02, 0.03, 0.04, 0.05, 0.06, 0.07, 0.08, 0.09, 0.1, 0.11, 0.12, 0.13, 0.14, 0.15, 0.16, 0.17, 0.18, 0.19, 0.2, 0.21, 0.22, 0.23, 0.24, 0.25, 0.26, 0.27, 0.28, 0.29, 0.3, 0.31, 0.32, 0.33, 0.34, 0.35, 0.36, 0.37, 0.38, 0.39, 0.4, 0.41, 0.42, 0.43, 0.44, 0.45, 0.46, 0.47, 0.48, 0.49, 0.5, 0.51, 0.52, 0.53, 0.54, 0.55, 0.56, 0.57, 0.58, 0.59, 0.6, 0.61, 0.62, 0.63, 0.64, 0.65, 0.66, 0.67, 0.68, 0.69, 0.7, 0.71, 0.72, 0.73, 0.74, 0.75, 0.76, 0.77, 0.78, 0.79, 0.8, 0.81, 0.82, 0.83, 0.84, 0.85, 0.86, 0.87, 0.88, 0.89, 0.9, 0.91, 0.92, 0.93, 0.94, 0.95, 0.96, 0.97, 0.98, 0.99], 'right'),
                xAxis: 1,
                yAxis: 1,
                index: 1,
                legendIndex: 2,
                tooltip: {
                    pointFormat: '<span style="color:{point.color}">\u25CF</span> Penalty: <b>{point.y:.4f}</b><br/>'
                },
                marker: {
                    radius: 0
                }
            }]
    });
}