var url = 'http://www.example.com/json';

function removeTable(id)
{
  var tbl = document.getElementById(id);
  if (tbl) tbl.parentNode.removeChild(tbl);
}

document.addEventListener('DOMContentLoaded', function ()
{
  // do not display gauge on mobile devices
  if (jscd.mobile)
  {
      removeTable("gaugeTable")
      document.getElementById("gaugeTable").innerHTML = "";
  }
}, false);

(function (window)
{
  {
      var unknown = '-';
      // browser
      var nVer = navigator.appVersion;
      // mobile version
      var mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer);
  }
  window.jscd = {
      mobile: mobile,
  };
}(this));


$().ready(function ()
{
  setInterval(function ()
  {
      jQuery.support.cors = true;
      // do not pull and display non-mobile devices.
      if (jscd.mobile)
      {
          $.ajax(
          {
              url: url,
              data:
              {
                  format: 'json'
              },
              error: function (jqXHR, textStatus, errorThrown)
              {
                  alert(textStatus + ': ' + errorThrown);
              },
              dataType: 'json',
              crossDomain: true,
              success: function (sensorData)
              {
                  var tempHumidData = sensorData.arduino;
                  renderHTML(tempHumidData);

              },

              type: 'GET'
          });
      }
  }, 5000);
});



function renderHTML(data)
{
  if (data)
  {
      removeTable("pullingDataMsg")
      var sensorDataContainer = document.getElementById("displaySensorData");
      var htmlString = "<table id='headTable' style='width:100%'><tr><th>Location</th><th>Temperature</th><th>Humidity</th></tr>";
      for (i = 0; i < data.length; i++)
      {
          htmlString += "<tr align='center'><td>" + data[i].location + "</td><td>" + data[i].temperatureInC + "&deg;C/ " + data[i].temperatureInF + "&deg;F </td> <td> " + data[i].humidity + "%</td></tr>";
      }
      htmlString += "</table>"
      sensorDataContainer.innerHTML = htmlString;
  }
}

//------------- Google Gauge -------------------//

// global variables
var chart, humidityChart, data, humidityData;
// maximum value for the gauge
var max_gauge_value = 70;
// name of the gauge
var gauge_name = 'Temperature';
var outTemp, drwngRomTemp, outHumidity, drwRomHumid;

var hoptions = {
  animation:
  {
      duration: 1000,
      easing: 'inAndOut'
  },
  min: 0,
  max: 100,
  redFrom: 90,
  redTo: 100,
  yellowFrom: 75,
  yellowTo: 90,
  minorTicks: 5
};

// load the google gauge visualization
google.load('visualization', '1',
{
  'packages': ['gauge']
});
google.setOnLoadCallback(initChart);

// display the data
function displayData(outTemp, drwngRomTemp, outHumidity, drwRomHumid)
{
  chart.draw(data, options);
  data.setValue(0, 0, gauge_name);
  data.setValue(0, 1, outTemp);
  data.setValue(1, 0, gauge_name);
  data.setValue(1, 1, drwngRomTemp);
  humidityChart.draw(humidityData, hoptions);
  humidityData.setValue(0, 0, "Humidity");
  humidityData.setValue(0, 1, outHumidity);
  humidityData.setValue(1, 0, "Humidity");
  humidityData.setValue(1, 1, drwRomHumid);
  removeTable("pullingDataMsg")
}

// load the data
function loadData()
{
  // get the data from arduino

  $.ajax(
  {
      url: url,
      data:
      {
          format: 'json'
      },
      error: function (jqXHR, textStatus, errorThrown)
      {
          alert(textStatus + ': ' + errorThrown);
      },
      dataType: 'json',
      crossDomain: true,
      success: function (sensorData)
      {
          // set the sensor data pulled from arduino to global variable sensorData
          // get the data point
          outTemp = sensorData.arduino[0].temperatureInC;
          drwngRomTemp = sensorData.arduino[1].temperatureInC;
          outHumidity = sensorData.arduino[0].humidity;
          drwRomHumid = sensorData.arduino[1].humidity;
          displayData(outTemp, drwngRomTemp, outHumidity, drwRomHumid);
      },

      type: 'GET'
  });
}

// initialize the chart
function initChart()
{
  var initTempData = {
      "cols": [
      {
          "id": "",
          "label": "Label",
          "pattern": "",
          "type": "string"
      },
      {
          "id": "",
          "label": "Temperature",
          "pattern": "",
          "type": "number"
      }],
      "rows": [
      {
          "c": [
          {
              "v": "Temperature",
              "f": null
          },
          {
              "v": -20,
              "f": null
          }]
      },
      {
          "c": [
          {
              "v": "Temperature",
              "f": null
          },
          {
              "v": -20,
              "f": null
          }]
      }]
  };

  data = new google.visualization.DataTable(initTempData);

  options = {
      greenFrom: 10,
      greenTo: 29,
      redFrom: 41,
      redTo: 70,
      yellowFrom: 30,
      yellowTo: 40,
      majorTicks: ['-10', '0', '10', '20', '30', '40', '50', '60', ''],
      minorTicks: 5,
      animation:
      {
          duration: 1000,
          easing: 'inAndOut'
      },
      min: -20,
      max: 70,
      greenColor: '#CCFFCC',
      yellowColor: '#FFFFCC',
      redColor: '#F78181'
  };

  chart = new google.visualization.Gauge(document.getElementById('gauge_div'));

  var initHumidData = {
      "cols": [
      {
          "id": "",
          "label": "Label",
          "pattern": "",
          "type": "string"
      },
      {
          "id": "",
          "label": "Humidity",
          "pattern": "",
          "type": "number"
      }],
      "rows": [
      {
          "c": [
          {
              "v": "Humidity",
              "f": null
          },
          {
              "v": 0,
              "f": null
          }]
      },
      {
          "c": [
          {
              "v": "Humidity",
              "f": null
          },
          {
              "v": 0,
              "f": null
          }]
      }]
  };


  humidityData = new google.visualization.DataTable(initHumidData);

  humidityChart = new google.visualization.Gauge(document.getElementById('humidity_gauge_div'));

  loadData();

  // load new data every 5 seconds
  setInterval('loadData()', 5000);
}