$(function() {

    // TODO: we could try Rickshaw.Graph.JSONP instead of using jQuery getJSON
    // http://code.shutterstock.com/rickshaw/

    $.getJSON("/api/usercount", function(data, textStatus, jqXHR) {

        var offset = new Date().getTimezoneOffset();
        var newData = [];

        // TODO: we could change the API to directly give us { x: , y: } objects

        for (var i = 0; i < data.datapoints.length; i++) {
            var date = moment(data.datapoints[i].at).unix() - offset * 60;
            var value = parseInt(data.datapoints[i].value);
            newData.push({x: date, y: value});
        }

        var graph = new Rickshaw.Graph( {
            element: document.querySelector("#graph"),
            renderer: 'line',
            series: [ {
                data: newData,
                name: 'Benutzer',
                color: 'steelblue'
            } ]
        } );

        new Rickshaw.Graph.Axis.Time({graph: graph}).render();
        new Rickshaw.Graph.Axis.Y({graph: graph}).render();
        new Rickshaw.Graph.HoverDetail({ graph: graph, yFormatter: function (y) { return y.toFixed(0) } });

        graph.render();

    });



});