$(document).ready(function () {

  $(".settings").click(function () {
    $("#settings").toggleClass("active");
  });

  
  $(".detailbtn").click(function () {
    $(".visible").fadeOut("200", function () {
      $("#itemtable").stop().animate({
        width: "300"
      }, 700, function () {
        $(".closeDetail").fadeIn(500, function () {
        });
        $(".drillcontainer").slideDown(500, function () {
          // Trigger chart build
          drawChart();
        });
      });
    });
  });

  $(".closeDetail").click(function () {
    $(".drillcontainer").slideUp(500, function () {
      $("#itemtable").stop().animate({
        width: "100%"
      }, 400, function () {
        $(".visible").fadeIn("200", function () {
          $(".closeDetail").fadeOut(500, function () {
          });
        });
      });
    });
  });
});




$(function () {
  $('#supported').text('Supported/allowed: ' + !!screenfull.enabled);

  if (!screenfull.enabled) {
    return false;
  }

  $('#request').click(function () {
    screenfull.request($('#container')[0]);
    // Does not require jQuery. Can be used like this too:
    // screenfull.request(document.getElementById('container'));
  });

  $('#exit').click(function () {
    screenfull.exit();
  });

  function fullscreenchange() {
    var elem = screenfull.element;

    $('#status').text('Is fullscreen: ' + screenfull.isFullscreen);

    if (elem) {
      $('#element').text('Element: ' + elem.localName + (elem.id ? '#' + elem.id : ''));
    }

    if (!screenfull.isFullscreen) {
      $('#external-iframe').remove();
      document.body.style.overflow = 'auto';
    }
  }

  screenfull.on('change', fullscreenchange);

  // Set the initial values
  fullscreenchange();
});

function swapStyleSheet(sheet) {
  document.getElementById('pagestyle').setAttribute('href', sheet);
}

  // Chart demo 

  var chartData = {

    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      type: 'line',
      label: 'Dataset 1',
      borderColor: '#226B9D',
      borderWidth: 2,
      fill: false,
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor()
      ]
    }, {
      type: 'bar',
      label: 'Dataset 2',
      backgroundColor: '#FE802A',
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor()
      ]
    }, {
      type: 'bar',
      label: 'Dataset 3',
      backgroundColor: '#309F39',
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor()
      ]
    }]

  };




  var drawChart = function () {
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myMixedChart = new Chart(ctx, {
      type: 'bar',
      data: chartData,
      options: {
        responsive: true,
        title: {
          display: false,
          text: 'Chart.js Combo Bar Line Chart'
        },
        tooltips: {
          mode: 'index',
          intersect: true
        },
        legend: {
          display: true,
          labels: {
            fontColor: 'rgb(255, 255, 255)'
          },
          position: 'bottom'
        },
        scales: {
          xAxes: [{
            display: true,
            gridLines: {
              color: '#666',
              zeroLineColor: '#666',
              fontColor: '#fff'
            },
            ticks: {
              fontColor: '#fff'
            }
          }],
          yAxes: [{
            display: true,
            gridLines: {
              color: '#666',
              zeroLineColor: '#666'
            },
            ticks: {
              fontColor: '#fff'
            }
          }],
        }
      }
    });
  }




