[% site_config.title = c.loc('System Statistics') -%]

    <!--[if lte IE 9]><script language="javascript" type="text/javascript" src="/js/jsrrd/flot/excanvas.min.js"></script><![endif]-->
    <script type="text/javascript" src="/js/libs/jsrrd/jsrrd/binaryXHR.js"></script>
    <script type="text/javascript" src="/js/libs/jsrrd/jsrrd/rrdFile.js"></script>
    <script type="text/javascript" src="/js/libs/jsrrd/jsrrd/rrdMultiFile.js"></script>
    <script type="text/javascript" src="/js/libs/jsrrd/jsrrd/rrdFlotSupport.js"></script>
    <script type="text/javascript" src="/js/libs/jsrrd/jsrrd/rrdFlot.js"></script>
    <script type="text/javascript" src="/js/libs/jsrrd/flot/jquery.flot.js"></script>
    <script type="text/javascript" src="/js/libs/jsrrd/flot/jquery.flot.selection.js"></script>
    <script type="text/javascript" src="/js/libs/jsrrd/flot/jquery.flot.pie.js"></script>
    <script type="text/javascript" src="/js/libs/jsrrd/flot/jquery.flot.time.js"></script>
    <script type="text/javascript" >
        $(document).ready(function() {
            $('#host').change(function() {
                $('#folder').load('/statistics/subdirs/' + $(this).attr('value'));
            });
        });
    </script>

    <div class="row">
        <span>
            <a class="btn btn-primary btn-large" href="[% c.uri_for('/back') %]"><i class="icon-arrow-left"></i> [% c.loc('Back') %]</a>
        </span>
    </div>
    [% back_created = 1 -%]
    <div class="ngcp-separator"></div>

    <div class="row-fluid">
        [% translate_form(form).render %]
    </div>

    <div class="ngcp-separator"></div>

    <div class="ngcp-statistics">

        <p>[% c.loc('Click&Drag on the graphs to zoom individual ranges.') | html %]</p>

        <div class="row-fluid">
          [% even = 0 %]
          [% FOREACH item IN plotdata %]
            <h3>[% item.title %]</h3>
            <div id="plot_[% item.name | replace('[^a-zA-Z0-9_]+', '_') %]" class="ngcp-plot"><div style="margin: 20px;"><img src="/img/loader.gif" alt="loading" style="margin-right: 10px;"/>[% c.loc('loading...') %]</div></div>
          [% END %]
        </div>
    </div>

    <script type="text/javascript">

      function update_fname(rrd_data_arr, args) {
        var graph_opts = {};
        var ds_graph_opts = {};
        var tz_offset = [% tz_offset %];

        if (rrd_data_arr.length == 1)
          var f = new rrdFlot(args['plot_id'],rrd_data_arr[0],graph_opts,ds_graph_opts,args['si_suffix'],tz_offset);
        else {
          var t = new RRDFileSum(rrd_data_arr, false);
          var f = new rrdFlot(args['plot_id'],t,graph_opts,ds_graph_opts,args['si_suffix'],tz_offset);
        }
      }

      function update_fname_handler(bf, args) {
          var rrd_data=undefined;
          var fname = args['name'];
          var output = args['output'];
          try {
            var rrd_data=new RRDFile(bf);
          } catch(err) {
            alert("File "+fname+" is not a valid RRD archive!");
          }
          if (rrd_data!=undefined) {
            output.push(rrd_data);
            if (output.length >= args['rrd_count']) {
              update_fname(output, args);
            }
          }
      }

      function fname_update(fname, plot_id, si_suffix) {
        var o = new Array();
        for (var i = 0; i < fname.length; i++) {
          try {
            FetchBinaryURLAsync(fname[i], update_fname_handler, {plot_id: plot_id,
                                     si_suffix: si_suffix, rrd_count: fname.length, name: fname[i],
                                     output: o});
          } catch (err) {
             alert("Failed loading "+fname[i]+"\n"+err);
          }
        }
      }

      [% FOREACH item IN plotdata %]
        fname_update([
          [% FOREACH url IN item.url %]
            "[% url %]",
          [% END %]
        ], "plot_[% item.name | replace('[^a-zA-Z0-9_]+', '_') %]", [% item.si ? "true" : "false" %]);
      [% END %]

    </script>

[% # vim: set tabstop=4 syntax=html expandtab: -%]
