/* From http://stackoverflow.com/a/10284006/223092 */
function zip(arrays) {
    return arrays[0].map(function(_,i){
        return arrays.map(function(array){return array[i]})
    });
}

$(document).ready(function() {
    $.each(graphs_data, function(index, graph_data) {
        var graph_id = graph_data.id,
            dataset,
            plot,
            graph_data,
            graph_div = $('#' + graph_id),
            previousPoint = null;

        if (!graph_data.x_values) {
            /* Then there's no data for this graph */
            return true;
        }

        graph_div.css('width', '700px');
        graph_div.css('height', '600px');

        dataset = [
            {'color': 'orange',
             'bars': {
                 'show': true,
                 'barWidth': 0.5,
                 'align': 'center'
             },
             'data': zip([graph_data.x_values,
                          graph_data.y_values])
            }
        ]

        if (graph_data.errorbars) {
            dataset.push({
                'color': 'orange',
                'points': {
                    // Don't show these, just draw error bars:
                    'radius': 0,
                    'errorbars': 'y',
                    'yerr': {
                        'asymmetric': true,
                        'show': true,
                        'upperCap': "-",
                        'lowerCap': "-",
                        'radius': 5
                    }
                },
                'data': zip([graph_data.x_values,
                             graph_data.y_values,
                             graph_data.cis_below,
                             graph_data.cis_above])
            });
        }

        options = {
            'grid': { 'hoverable': true, 'clickable': true },
            'xaxis': {
                'ticks': graph_data.x_ticks,
                'rotateTicks': 90
            },
            'yaxis': {
                'min': 0,
                'max': graph_data.y_max
            },
            'xaxes': [{
                'axisLabel': graph_data.x_axis,
                'axisLabelPadding': 20,
                'axisLabelColour': 'black'
            }],
            'yaxes': [{
                'axisLabel': graph_data.y_axis,
                'axisLabelPadding': 20,
                'axisLabelColour': 'black'
            }],
            'series': {
		'lines': {
		    'show': false
		}
	    },
        }

        plot = $.plot(graph_div,
                      dataset,
                      options);

        graph_div.bind("plotclick", function(event, pos, item) {
            var i, pb, url, name;
            if (item) {
                i = item.dataIndex;
                pb = graph_data.public_bodies[i];
                url = pb.url;
                name = pb.name;
                window.location.href = url;
            }
        });

        /* This code is adapted from:
           http://www.flotcharts.org/flot/examples/interacting/ */

        function showTooltip(x, y, contents) {
            $('<div id="flot-tooltip">' + contents + '</div>').css({
                'position': 'absolute',
                'display': 'none',
                'top': y + 10,
                'left': x + 10,
                'border': '1px solid #fdd',
                'padding': '2px',
                'background-color': '#fee',
                'opacity': 0.80
            }).appendTo("body").fadeIn(200);
        }

        graph_div.bind("plothover", function (event, pos, item) {
            var escapedName, x, y;
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
                    $("#flot-tooltip").remove();
                    escapedName = $('<div />').text(
                        graph_data.tooltips[item.dataIndex]).html();
                    showTooltip(item.pageX,
                                item.pageY,
                                escapedName);
                }
            } else {
                $("#flot-tooltip").remove();
                previousPoint = null;
            }
        });
    });
});