var results;

function viewData()
{
  var resultsTable = $('<table></table>').attr('id', 'results');
  var tableHead = $("<thead></thead>");
  var tableBody = $("<tbody></tbody>");
  var temp;

  $.post("/api/Data/Query/",
  {
      name: $('#name').val(),
      query: $('#query').val(),
      server: $('#server').val(),
      description: $('#description').val()
  },
  function(data, status){})
  .done(function(data)
  {
    data = JSON.parse(data);
    //Take care of the headers
    var columnSet = [];
    var tableHeadRow = $("<tr></tr>");
    for (var key in data[0])
    {
      if ($.inArray(key, columnSet) == -1)
      {
        columnSet.push(key);
        tableHeadRow.append($('<th/>').html(key));
      }
    }

    tableHead.append(tableHeadRow);

    //Take care of the data
    for(i = 0; i < 10 || i == data.length; i++)
    

    buildSelect("Dependent",columnSet,"Dependent");
    buildSelect("Independent",columnSet,"Independent");
    $('#main').append('<button class="btn grey" type="button" onclick="buildChart()">Build Chart</button>');
    $('#main').append('<br>');
    $('#main').append('<br>');
    $('#main').append('<br>');

    results = data;
});

  //Append Everything
  resultsTable.append(tableHead);
  resultsTable.append(tableBody);
  resultsTable.addClass("centered");
  resultsTable.addClass("highlight");
  $('#main').append(resultsTable);
}

function buildChart()
{
  $('#myChart').remove();
  $('#main').append('<canvas id="myChart" width="500" height="500"></canvas>');

  var depend = $('#Dependent').find(":selected").text();
  var independ = $('#Independent').find(":selected").text();

  var labels = [];
  var data = [];
  var color = [];

  $.each(results, function(j, row)
  {
    labels.push(row[independ]);
    data.push(row[depend]);
    color.push(colorGenerator());
  });

  var data = {
      labels: labels,
      datasets: [{
          data: data,
          backgroundColor: color,
          hoverBackgroundColor: color}]
    };

  var ctx = document.getElementById("myChart");
  var chart = new Chart(ctx,{
    type: 'pie',
    data: data,
    options: {responsive: false, maintainAspectRatio: false}
  });

  $('#saveBtn').remove();
  $('#main').append('<button class="btn grey" id="saveBtn" type="button" onclick="persistChart()">Save Chart</button>');
  $('#main').append('<br>');
}

//
//
//
function buildSelect(ID, options, name)
{
  var division = $('<div class="input-field col s12" id="'+ID+'"></div>');
  var selectBox = $("<select id='"+name+"'></select>");
  for(var x in options)
  {
    var option = $("<option value="+options[x]+">"+options[x]+"</option>");
    selectBox.append(option);
  }
  var option = $('<option value="0" disabled selected>Choose your option</option>');
  selectBox.append(option);
  var labelBox = $("<label>"+name+"</label>");
  division.append(selectBox);
  division.append(labelBox);
  $('#main').append(division);
  $('select').material_select();
}

//
//
//
function persistChart()
{
  $.post("/api/Charts/Create/",
  {
      name: $('#name').val(),
      query: $('#query').val(),
      server: $('#server').val(),
      description: $('#description').val(),
      dependent: $('#Dependent').find(":selected").text(),
      independent: $('#Independent').find(":selected").text()
  },
  function(data, status){})
  .done(function(data)
  {
    alert("Chart Saved");
  });
}

{
      row = data[i];
      var tableBodyRow = $("<tr></tr>");
      $.each(row, function(j, field)
      {
        tableBodyRow.append($('<td/>').html(field));
      });
      tableBody.append(tableBodyRow);
    }