$(function () {
  var Charts = {
    location: window.location.pathname,
    paths: {
      init: this.location + '/charts_initializer.json',
      realtime: this.location + '/charts.json'
    },
    options: function(columns) {
      return {
        data: {
          x: 'x',
          xFormat: '%H:%M:%S',
          columns: columns
        },
        axis: {
          x: {
            type: 'timeseries',
            tick: {
              count: 5,
              format: '%H:%M:%S'
            }
          }
        }
      }
    }
  }

  var failedChart
  var passedChart
  var excludedWorkers = []

  $('.worker__checkbox').change(function() {
    var name = this.name

    failedChart.toggle(name)
    passedChart.toggle(name)

    if(this.checked) {
      excludedWorkers.push(this.name)
    } else {
      excludedWorkers.splice($.inArray(this.name, excludedWorkers), 1)
    }
  });

  $.getJSON(Charts.paths.init, function (response) {
    var options = Charts.options(response)

    failedChart = c3.generate($.extend(options, { bindto: '.realtime__failed-chart' }))
    passedChart = c3.generate($.extend(options, { bindto: '.realtime__passed-chart' }))

    setInterval(function () {
      if ($('.worker__checkbox').length === $('.worker__checkbox:checked').length) {
        return
      }

      $.getJSON(Charts.paths.realtime, { excluded: excludedWorkers })
        .done(function (data) {
          failedChart.flow(data['failed'])
          passedChart.flow(data['passed'])
        })
    }, 1000);
  })
})