site.firstnames = {}
site.firstnames.init = function() {
    if (jQuery("#ranking-by-year-chart").length > 0) {
        site.firstnames.flot.init();
        $("#ranking-by-year-chart").bind("plothover", site.firstnames.flot.plotHover);
    }
}

site.firstnames.flot = {}
site.firstnames.flot.maxDataIndex = 0;
site.firstnames.flot.init = function() {

    var data = eval('(' + cdata.rankings_by_year + ')');
    var plotdata = [];
    for (i in data) {
        plotdata.push([
            data[i].flot_time,  // unix-timestamp vom jahr
            data[i].rank * -1   // ranking, negative darstellung
        ]);

        site.firstnames.flot.maxDataIndex++;
    }

    // Logik zur Ermittlung des letzten Tooltips,
    // scheinbar wird der letzte Datenpunkt nicht dargestellt,
    // deswegen -1
    site.firstnames.flot.maxDataIndex = plotdata.length - 1;

    var ticks = eval('(' + cdata.flot_ticks + ')');
    var plotticks = [];
    for (i in ticks) {
        plotticks.push([
            ticks[i].flot_time,
            ticks[i].year
        ]);
    }

    // Farbe der Linien
    //var lineColor = cdata.firstname_gender == 'male' ? '#496DAA' : '#CC3333';
    // Alle Linien immer in Blau anzeigen.
    var lineColor = '#496DAA';

    var options = {
        lines: {
            show: 'lines',
        },
        points: {
            show: true,
            fill: true,
            fillColor: lineColor,
        },
        xaxis: {
            //mode: 'time',
            //timeformat: '%y',
            ticks: plotticks
        },
        yaxis: {
            tickFormatter: function (val, axis) {
                if (val == 0) {
                    if (axis.tickSize > 1) {
                        return 'Platz 1';
                    }
                    return '';
                }
                return 'Platz ' + (val * -1);
            },
            minTickSize: 2
        },
        grid: {
            hoverable: true,
            backgroundColor: '#FFFFFF',
            borderWidth: 1,
        },
        colors: [lineColor],
        shadowSize: 1
    };

    jQuery.plot(jQuery("#ranking-by-year-chart"), [{data: plotdata, label: cdata.firstname_name}], options);
}

site.firstnames.flot.plotHover = function (event, pos, item) {
    if (item) {
        if (previousPoint != item.datapoint) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2);

            var firstnameRank = item.datapoint[1] * -1;
            var firstnameYear = (new Date(item.datapoint[0])).getFullYear();
            if (site.firstnames.flot.maxDataIndex == item.dataIndex) {
                var tooltipContent = 'Trend für ' + firstnameYear + ': Platz ' + firstnameRank;
            } else {
                var tooltipContent = 'Platz ' + firstnameRank;
            }

            site.firstnames.flot.showTooltip(item.pageX, item.pageY, tooltipContent);
        }
    } else {
        $("#tooltip").remove();
        previousPoint = null;
    }
}

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


jQuery(document).ready(site.firstnames.init);