$(function () {

    // hard-code color indices to prevent them from shifting as
    // countries are turned on/off
    var i = 0;
    $.each(datasets, function(key, val) {
        val.color = i;
        ++i;
    });
    
    // insert checkboxes 
    var choiceContainer = $("#choices");
    $.each(datasets, function(key, val) {
        choiceContainer.append('&nbsp;<input type="checkbox" name="' + key +
                               '" checked="checked" id="id' + key + '">' +
                               '<label for="id' + key + '">'
                                + val.label + '</label>');
    });
    choiceContainer.find("input").click(plotAccordingToChoices);

    
    function plotAccordingToChoices() {
        var data = [];

        choiceContainer.find("input:checked").each(function () {
            var key = $(this).attr("name");
            if (key && datasets[key])
                data.push(datasets[key]);
        });

        if (data.length > 0)
            $.plot($("#placeholder"), data, {
                yaxis: { min: 2 ,max: 4, tickFormatter: yTicks},
                xaxis: { mode: "time",ticks: 7,tickFormatter: "month"},
                legend: { position: 'sw' },
                series: {
                    lines: { show: true },
                    points: { show: false }
                }             
            });
    }

    plotAccordingToChoices();
});


function yTicks(a,b){
	var d = '$' + a;
	return d;

}