<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="/webui/static/js/smoothie.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var feedSeries = new TimeSeries();
      
        var dataverse = "%s";
        var dataset = "%s";
        var feed = "%s";
        var ingestLocations = "%s";
        var computeLocations = "%s";
        var storageLocations = "%s";
        var ingestionPolicy = "%s";
        var activeSince = "%s";
        var targetUrl = "/feed/data?dataverse=" + dataverse + "&dataset=" + dataset + "&feed=" + feed;


        var ingestionNodes = ingestLocations.split(",");
        var numIngestionNodes = ingestionNodes.length;
        var seriesOptions = { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 };
        var ingestionTimeSeries = new Array();
        var graphNames = new Array();

        $.ajaxSetup({ cache: false });
        setInterval(fetchFeedReport, 500);
        function fetchFeedReport() {
          $.ajax({
            url: '/feed/data?dataverse=' + dataverse + '&dataset=' + dataset + '&feed=' + feed,
            method: 'GET',
            dataType: 'json',
            success: onFeedReportReceived
            });
         }

         
        function onFeedReportReceived(data) {
            var report = data["value"];
            var tputArray = report.split("|");
            var covered = 0;
            var totalTput = 0;
            for( var i = 0; i < tputArray.length-1; i ++){
               ingestionTimeSeries[i].append(data["time"], tputArray[i]);
               covered++;
               totalTput += parseInt(tputArray[i]);
            }          
            for( var j = covered; j < numIngestionNodes; j++){
                ingestionTimeSeries[j].append(data["time"], 0);
            }          
            ingestionTimeSeries[numIngestionNodes].append(data["time"], totalTput);
        }

        function myYRangeFunction(range) {
           var min = 0;
           var max = 5000;
           return {min: min, max: max};
        }

        function initTimeline(ingestLocations) {

          document.write("<i>" + "Feed Ingestion" + "<i>");
          document.write("<br />" + "Ingestion Locations: " + ingestLocations);
          document.write("<br />" + "Compute Locations: " + computeLocations);
          document.write("<br />" + "Storage Locations: " + storageLocations);
          document.write("<br />" + "Ingestion Policy: " + ingestionPolicy);
          document.write("<br />" + "Active since" + activeSince);
          document.write("<br />");
          document.write("<br />");
    
          for( var i = 0; i < numIngestionNodes; i++){
              graphNames[i] = ingestionNodes[i];
          }          

          if(numIngestionNodes > 1){
             graphNames[numIngestionNodes] = "IngestionThroughput";
             drawCanvas(graphNames[numIngestionNodes]);
             ingestionTimeSeries[numIngestionNodes] = new TimeSeries();
             drawChart(graphNames[numIngestionNodes], ingestionTimeSeries[numIngestionNodes]);
          }

          for( var j = 0; j < numIngestionNodes; j++){
             drawCanvas(graphNames[j]);
             ingestionTimeSeries[j] = new TimeSeries();
             drawChart(graphNames[j], ingestionTimeSeries[j]);
          }
        }

        function drawCanvas(chartName) {
          document.write("<br />");
          document.write("<br />");
          document.write("<i>" + chartName + "</i>");
          document.write("<br />");
          document.write("<canvas id="+ "\"" + chartName + "\"" + " " + "width=\"500\" height=\"250\"></canvas>");
        }   

        function drawChart(chartName, ingestionTimeSeries) {
             var ingestionChart = new SmoothieChart({ minValue:0, millisPerPixel: 20, grid: { strokeStyle: '#555555', lineWidth: 1, millisPerLine: 1000, verticalSections: 4 }});
             ingestionChart.addTimeSeries(ingestionTimeSeries, seriesOptions);
             ingestionChart.streamTo(document.getElementById(chartName, 500));
        }

        initTimeline(ingestLocations);
     });   
    </script>
  </head>
  <body></body>
</html>