<div xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:xi="http://www.w3.org/2001/XInclude" 
     xmlns:py="http://genshi.edgewall.org/" 
     class="flotchart"
     style="width:${width}px;">

<?python from trac.util.translation import _ ?>

<div class="charttitle">${_('Sprint Burndown Chart')}</div>
<div id="burndownchart_${unique_id}" style="width:${width}px;height:${height}px;">
    <h3 style="margin-top: ${int(height)/2}px" py:if="defined('error_message')">${error_message}</h3>
</div>

<!--! We need to have this in a separate JS block with a HTML comment because
      otherwise the 'i < weekends.length' would be invalid xml which Genshi does
      not like.
  -->
<script language="javascript" type="text/javascript">
    <!--
        function buildDayBands(weekends, color) {
            var markings = [];
            for (var i = 0; i < weekends.length; i=i+1) {
                var weekend_day = weekends[i];
                var start = weekend_day[0];
                var end = weekend_day[1];
                markings.push({ xaxis: { from: start, to: end }, color: color });
            }
            return markings;
        }
    -->
</script>

<script language="javascript" type="text/javascript">
    <xi:include href="../../../charts/templates/widget_helper_macros.html" />

    <py:if test="not defined('error_message')">
        ${series_to_js(remaining_times, 'remainingTimes_%d' % unique_id)}
        ${series_to_js(ideal_data, 'idealBurndown_%d' % unique_id)}
        ${series_to_js(capacity_data, 'capacityData_%d' % unique_id)}
        ${series_to_js(trend_data, 'trendData_%d' % unique_id)}
        
        <!--! weekend_data is a tuple too so we can use the same function here as well -->
        ${series_to_js(weekend_data, 'weekendData_%d' % unique_id)}
        ${series_to_js(today_data, 'todayData_%d' % unique_id)}
        ${string_list_to_js(localized_month_names, 'localizedMonthNames_%d' % unique_id)}

        var todayColor_${unique_id} = "$today_color";
        
        var current = new Date().getUTCDate();

        function drawMarkings() {
            weekendMarkings = buildDayBands(weekendData_${unique_id}, "#eee");
            // today bar should overlay the weekend so it must be rendered afterwards
            todayMarkings = buildDayBands(todayData_${unique_id}, todayColor_${unique_id});
            return weekendMarkings.concat(todayMarkings);
        }
        
        var options_${unique_id} = {
            xaxis: { mode: "time", monthNames: localizedMonthNames_${unique_id}},
            yaxis: { min: 0 },
            grid: { markings: drawMarkings }
        };
        
        /* need to use JQuery.ready here - see sprint_ticket_stats_chart.html */
        jQuery(document).ready(function() {
            var plot = jQuery.plot(jQuery("#burndownchart_${unique_id}"), [
                // trend data comes first so it is drawn on the lowest layer
                {
                    data: trendData_${unique_id},
                    color: "red",
                    label: "${_('Trend')}",
                    lines: { show: true, lineWidth: 1},
                    shadowSize: 0
                },
                {
                    data: capacityData_${unique_id},
                    color: "#5c7bbe",
                    label: "${_('Capacity')}",
                    lines: { show: true, lineWidth: 1},
                    shadowSize: 0
                },
                {
                    data: remainingTimes_${unique_id},
                    color: "#4BAAFF",
                    label: "${_('Actual Burndown')}",
                    lines: { fill: true, show: true, lineWidth: 3 },
                    points: { show: true },
                    shadowSize: 5
                },
                {
                    data: idealBurndown_${unique_id},
                    color: "#999",
                    label: "${_('Ideal Burndown')}",
                    lines: { show: true, lineWidth: 1},
                    shadowSize: 0
                }
            ], options_${unique_id});
            <!--! We must not use gt 0 because Genshi does not like that at all -->
            if (remainingTimes_${unique_id}.length != 0) {
                // last item of actual burndown data (3rd series, so 2 starting 
                // from 0) should be highlighted.
                plot.highlight(2, remainingTimes_${unique_id}.length - 1);
            }
        });
    </py:if>
</script>

</div>
