document.addEventListener("DOMContentLoaded", function(event) {
  B("#btnChannelStats").on('click', function(e) {
    B(this).addClass('pure-button-disabled');
    B('#btnMessageStats').removeClass('pure-button-disabled');
    B('#btnUserStats').removeClass('pure-button-disabled');
    B('#channelStats').removeClass('hidden');
    B('#userStats').addClass('hidden');
    B('#messageStats').addClass('hidden');
  });

  B('#btnMessageStats').on('click', function(e) {
    B(this).addClass('pure-button-disabled');
    B('#btnChannelStats').removeClass('pure-button-disabled');
    B('#channelStats').addClass('hidden');
    B('#btnUserStats').removeClass('pure-button-disabled');
    B('#userStats').addClass('hidden');
    B('#messageStats').removeClass('hidden');
  });

  B('#btnUserStats').on('click', function(e) {
    B(this).addClass('pure-button-disabled');
    B('#btnChannelStats').removeClass('pure-button-disabled');
    B('#channelStats').addClass('hidden');
    B('#btnMessageStats').removeClass('pure-button-disabled');
    B('#messageStats').addClass('hidden');
    B('#userStats').removeClass('hidden');
  });

  B('#btnUsrHrlyStats').on('click', function(e) {
    B(this).addClass('pure-button-disabled');
    B('#btnUsrDowStats').removeClass('pure-button-disabled');
    B('#userHourlyStats').removeClass('hidden');
    B('#userDowStats').addClass('hidden');
  });

  B('#btnUsrDowStats').on('click', function(e) {
    B(this).addClass('pure-button-disabled');
    B('#btnUsrHrlyStats').removeClass('pure-button-disabled');
    B('#userHourlyStats').addClass('hidden');
    B('#userDowStats').removeClass('hidden');
  });

  var main_channel_names = ['general','random'],
      main_member_numbers = [],
      main_message_numbers = [],
      other_channel_names = [],
      other_member_numbers = [],
      other_message_numbers = [];
  for(var i = 0; i < stats.channels.length; i++) {
    if(stats.channels[i].name == "general") {
      main_member_numbers[0] = stats.channels[i].member_count;
      main_message_numbers[0] = stats.channels[i].message_count;
    } else if(stats.channels[i].name == "random") {
      main_member_numbers[1] = stats.channels[i].member_count;
      main_message_numbers[1] = stats.channels[i].message_count;
    } else {
      other_channel_names.push(stats.channels[i].name);
      other_member_numbers.push(stats.channels[i].member_count);
      other_message_numbers.push(stats.channels[i].message_count);
    }
  }
  
  var mainChart = new Highcharts.Chart({
    chart: {
      renderTo: 'mainStatsBarChart',
      type: 'column'
    },

    title: {
      text: 'Main Channels'
    },

    yAxis: [{
      min: 0,
      title: { text: 'Messages' }
    },{
      min: 0,
      title: { text: 'Members' },
      opposite: true
    }],

    plotOptions: {
      column: {
        grouping: false,
        shadow: false,
        borderWidth: 0
      }
    },

    xAxis: {
      categories: main_channel_names
    },

    series: [{
      name: 'Messages',
      color: 'rgba(126,86,134,0.9)',
      data: main_message_numbers,
      pointPadding: 0.3
    },{
      name: 'Members',
      color: 'rgba(165,170,217,1)',
      data: main_member_numbers,
      pointPadding: 0.4,
      yAxis: 1
    }]
  });

  var otherChart = new Highcharts.Chart({
    chart: {
      renderTo: 'statsBarChart',
      type: 'column'
    },

    title: {
      text: 'Other Channels'
    },

    yAxis: [{
      min: 0,
      title: { text: 'Members' }
    },{
      min: 0,
      title: { text: 'Messages' },
      opposite: true
    }],

    tooltip: { shared: true },

    plotOptions: {
      column: {
        grouping: false,
        shadow: false,
        borderWidth: 0
      }
    },

    xAxis: {
      categories: other_channel_names
    },

    series: [{
      name: 'Messages',
      color: 'rgba(126,86,134,0.9)',
      data: other_message_numbers,
      pointPadding: 0.0
    },{
      name: 'Members',
      color: 'rgba(165,170,217,1)',
      data: other_member_numbers,
      pointPadding: 0.2,
      yAxis: 1
    }]
  });

  var msg1 = [{name: 'Messages', data: []}];
  for(var i = 0; i < 24; i++) {
    msg1[0].data.push(stats.messages.hours[i]);
  }
  var msgHourlyChart = new Highcharts.Chart({
    chart: {
      renderTo: 'msgHourlyStats'
    },
    title: {
      text: 'Hourly Stats'
    },
    xAxis: {
      categories: [
          '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
          '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
          '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
          '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
      ]
    },
    yAxis: { 
      title: { text: '' },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    series: msg1
  });

  var msg2 = [{name: 'Messages', data: []}];
  msg2[0].data.push(stats.messages.dow['Sun']);
  msg2[0].data.push(stats.messages.dow['Mon']);
  msg2[0].data.push(stats.messages.dow['Tue']);
  msg2[0].data.push(stats.messages.dow['Wed']);
  msg2[0].data.push(stats.messages.dow['Thu']);
  msg2[0].data.push(stats.messages.dow['Fri']);
  msg2[0].data.push(stats.messages.dow['Sat']);

  var msgDowChart = new Highcharts.Chart({
    chart: {
      renderTo: 'msgDowStats'
    },
    title: {
      text: 'Day of Week Stats'
    },
    xAxis: {
      categories: [
        'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
      ]
    },
    yAxis: {
      title: { text: '' },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    series: msg2
  });

  
  var numCharts = 0,
      usrHourlyCharts = [],
      usrDowCharts = [],
      maxMessages = 0;
  stats.users.sort(function(a, b){
    if(a.name < b.name) { return -1; }
    if(a.name > b.name) { return 1; }
    return 0;
  });

  for(var i = 0; i < stats.users.length; i++) {
    for(var j = 0; j < 24; j++) {
      if(stats.users[i].messages.hours[j] > maxMessages) {
        maxMessages = stats.users[i].messages.hours[j];
      }
    }
  }
  while((numCharts*10) < stats.users.length) {
    var usrList = [],
        usrHourlyActivity = [],
        usrDowActivity = [];
    for(var i = (numCharts*10); i < 10+(numCharts*10); i++) {
      if(i < stats.users.length) {
        usrList.push(stats.users[i].name);
        for(var j = 0; j < 24; j++) {
          usrHourlyActivity.push({
            x: j,
            y: (i - (numCharts*10)),
            value: stats.users[i].messages.hours[j]
          });
        }
        dowArr=['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
        for(var dowI = 0; dowI < 7; dowI++) {
          usrDowActivity.push({
            x: dowI,
            y: (i - (numCharts*10)),
            value: stats.users[i].messages.dow[dowArr[dowI]]
          });
        }
      }
    }

    B("#userHourlyStats").append(B("<div>").attr('id','usrHourlyStats-'+numCharts));
    B("#userDowStats").append(B("<div>").attr('id','usrDowStats-'+numCharts));

    usrHourlyCharts.push(new Highcharts.Chart({
      chart: {
        type: 'heatmap',
        renderTo: 'usrHourlyStats-'+numCharts
      },
      title: {
        text: 'Hourly Activity by User'
      },
      xAxis: {
        categories: [
          '00:00','01:00','02:00','03:00','04:00','05:00',
          '06:00','07:00','08:00','09:00','10:00','11:00',
          '12:00','13:00','14:00','15:00','16:00','17:00',
          '18:00','19:00','20:00','21:00','22:00','23:00'
        ]
      },
      yAxis: {
        categories: usrList,
        title: null
      },
      colorAxis: {
        stops: [
          [0, '#3060cf'],
          [0.5, '#fffbbc'],
          [0.9, '#c4463a']
        ],
        min: 0,
        max: maxMessages
      },
      series: [{
        borderWidth: 1,
        data: usrHourlyActivity,
        name: "Messages",
        tooltip: {
          pointFormatter: function() {
            if(this.x < 10) {
              return this.series.yAxis.categories[this.y] + " - 0"+this.x+":00 ("+this.value+" messages)";
            }
            return this.series.yAxis.categories[this.y] + " - "+this.x+":00 ("+this.value+" messages)";
          }
        }
      }]
    }));

    usrDowCharts.push(new Highcharts.Chart({
      chart: {
        type: 'heatmap',
        renderTo: 'usrDowStats-'+numCharts
      },
      title: {
        text: 'Day Of Week Activity by User'
      },
      xAxis: {
        categories: [
          'Sun','Mon','Tue','Wed','Thu','Fri','Sat'
        ]
      },
      yAxis: {
        categories: usrList,
        title: null
      },
      colorAxis: {
        stops: [
          [0, '#3060cf'],
          [0.5, '#fffbbc'],
          [0.9, '#c4463a']
        ],
        min: 0,
        max: maxMessages
      },
      series: [{
        borderWidth: 1,
        data: usrDowActivity,
        name: "Messages",
        tooltip: {
          pointFormatter: function() {
            if(this.x < 10) {
              return this.series.yAxis.categories[this.y] + " - 0"+this.x+":00 ("+this.value+" messages)";
            }
            return this.series.yAxis.categories[this.y] + " - "+this.x+":00 ("+this.value+" messages)";
          }
        }
      }]
    }));
    numCharts++;
  }

  B('#userStats').addClass('hidden');
  B('#messageStats').addClass('hidden');
  B('#userDowStats').addClass('hidden');
});