text: type = ['', 'info', 'success', 'warning', 'danger'];
  
  
  var moistureRefreshInterval = setInterval(updateMoisture, 20000);
  function updateMoisture() {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
              document.getElementById("moistureText").innerHTML = this.responseText + " <small>%</small>";
              document.getElementById("moistureLevelTable").innerHTML = this.responseText + "%";
          }
          if (this.responseText > 50 && this.responseText < 80) {
              document.getElementById("moistureWarningIcon").innerHTML = "thumb_up";
              document.getElementById("moistureWarningIcon").style.color = "#55ae59";   
              document.getElementById("moistureWarningText").innerHTML = "Optimal Moisture Levels"; 
              document.getElementById("moistureWarningText").style.color = "#55ae59"; 
          }
           if (this.responseText > 80) {
              document.getElementById("moistureWarningIcon").innerHTML = "warning";
              document.getElementById("moistureWarningIcon").style.color = "#f44336";   
              document.getElementById("moistureWarningText").innerHTML = "Over Saturation of Water. Risk Of Leaching"; 
              document.getElementById("moistureWarningText").style.color = "#f44336"; 
  
          }
          if (this.responseText < 20 ) {
              document.getElementById("moistureWarningIcon").innerHTML = "warning";
              document.getElementById("moistureWarningIcon").style.color ="#f44336"
              document.getElementById("moistureWarningText").innerHTML = "Moisture Levels Critical";            
              document.getElementById("moistureWarningText").style.color = "#f44336";
          }
          if (this.responseText < 50 && this.responseText > 20) {
              document.getElementById("moistureWarningIcon").innerHTML = "warning";
              document.getElementById("moistureWarningIcon").style.color ="yellow"
              document.getElementById("moistureWarningText").innerHTML = "Moisture Levels Low";
              document.getElementById("moistureWarningText").style.color ="yellow";
          }
      };
      xmlhttp.open("GET", "https://api.thingspeak.com/channels/389180/fields/1/last.txt", true);
      xmlhttp.send();
      demo.showInfo('bottom','left');
  }
  
  function abortMoistureUpdate() {
      clearInterval(moistureRefreshInterval);
  }
  
  demo = {
  
  
      initPickColor: function() {
          $('.pick-class-label').click(function() {
              var new_class = $(this).attr('new-class');
              var old_class = $('#display-buttons').attr('data-class');
              var display_div = $('#display-buttons');
              if (display_div.length) {
                  var display_buttons = display_div.find('.btn');
                  display_buttons.removeClass(old_class);
                  display_buttons.addClass(new_class);
                  display_div.attr('data-class', new_class);
                  display_div.innerHTML(longlatid);
              }
          });
      },
  
      initDocumentationCharts: function() {
          /* ----------==========     Daily Sales Chart initialization For Documentation    ==========---------- */
  
          dataDailySalesChart = {
              labels: ['12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM'],
              series: [
                  [54, 48, 46, 42, 36, 32, 89]
              ]
          };
  
          optionsDailySalesChart = {
              lineSmooth: Chartist.Interpolation.cardinal({
                  tension: 0
              }),
              low: 0,
              high: 100, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
              chartPadding: {
                  top: 0,
                  right: 0,
                  bottom: 0,
                  left: 0
              },
          }
  
          var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
  
          md.startAnimationForLineChart(dailySalesChart);
      },
  
      initDashboardPageCharts: function() {
  
          /* ----------==========     Daily Sales Chart initialization    ==========---------- */
  
          dataDailySalesChart = {
              labels: ['12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM'],
              series: [
                  [54, 48, 46, 32, 27, 12, 89]
              ]
          };
  
          optionsDailySalesChart = {
              lineSmooth: Chartist.Interpolation.cardinal({
                  tension: 0
              }),
              low: 0,
              high: 100, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
              chartPadding: {
                  top: 0,
                  right: 0,
                  bottom: 0,
                  left: 0
              },
          }
  
          var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
  
          md.startAnimationForLineChart(dailySalesChart);
  
  
  
          /* ----------==========     Completed Tasks Chart initialization    ==========---------- */
  
          dataCompletedTasksChart = {
              labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
              series: [
                  [0, 23, 17, 0, 0, 0, 8]
              ]
          };
  
          optionsCompletedTasksChart = {
              lineSmooth: Chartist.Interpolation.cardinal({
                  tension: 0
              }),
              low: 0,
              high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
              chartPadding: {
                  top: 0,
                  right: 0,
                  bottom: 0,
                  left: 0
              }
          }
  
          var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
  
          // start animation for the Completed Tasks Chart - Line Chart
          md.startAnimationForLineChart(completedTasksChart);
  
  
          /* ----------==========     Emails Subscription Chart initialization    ==========---------- */
  
          var dataEmailsSubscriptionChart = {
              labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
              series: [
                  [21, 14, 38, 76, 88, 79, 74, 86, 71, 68, 42, 28]
  
              ]
          };
          var optionsEmailsSubscriptionChart = {
              axisX: {
                  showGrid: false
              },
              low: 0,
              high: 100,
              chartPadding: {
                  top: 0,
                  right: 5,
                  bottom: 0,
                  left: 0
              }
          };
          var responsiveOptions = [
              ['screen and (max-width: 640px)', {
                  seriesBarDistance: 5,
                  axisX: {
                      labelInterpolationFnc: function(value) {
                          return value[0];
                      }
                  }
              }]
          ];
          var emailsSubscriptionChart = Chartist.Bar('#emailsSubscriptionChart', dataEmailsSubscriptionChart, optionsEmailsSubscriptionChart, responsiveOptions);
  
          //start animation for the Emails Subscription Chart
          md.startAnimationForBarChart(emailsSubscriptionChart);
  
      },
   
      initGoogleMaps: function() {
          var myLatlng = new google.maps.LatLng(40.748817, -73.985428); //TODO - should be inserting our own lat and long dynamically
          var mapOptions = {
              zoom: 13,
              center: myLatlng,
              scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
              styles: [{
                  "featureType": "water",
                  "stylers": [{
                      "saturation": 43
                  }, {
                      "lightness": -11
                  }, {
                      "hue": "#0088ff"
                  }]
              }, {
                  "featureType": "road",
                  "elementType": "geometry.fill",
                  "stylers": [{
                      "hue": "#ff0000"
                  }, {
                      "saturation": -100
                  }, {
                      "lightness": 99
                  }]
              }, {
                  "featureType": "road",
                  "elementType": "geometry.stroke",
                  "stylers": [{
                      "color": "#808080"
                  }, {
                      "lightness": 54
                  }]
              }, {
                  "featureType": "landscape.man_made",
                  "elementType": "geometry.fill",
                  "stylers": [{
                      "color": "#ece2d9"
                  }]
              }, {
                  "featureType": "poi.park",
                  "elementType": "geometry.fill",
                  "stylers": [{
                      "color": "#ccdca1"
                  }]
              }, {
                  "featureType": "road",
                  "elementType": "labels.text.fill",
                  "stylers": [{
                      "color": "#767676"
                  }]
              }, {
                  "featureType": "road",
                  "elementType": "labels.text.stroke",
                  "stylers": [{
                      "color": "#ffffff"
                  }]
              }, {
                  "featureType": "poi",
                  "stylers": [{
                      "visibility": "off"
                  }]
              }, {
                  "featureType": "landscape.natural",
                  "elementType": "geometry.fill",
                  "stylers": [{
                      "visibility": "on"
                  }, {
                      "color": "#b8cb93"
                  }]
              }, {
                  "featureType": "poi.park",
                  "stylers": [{
                      "visibility": "on"
                  }]
              }, {
                  "featureType": "poi.sports_complex",
                  "stylers": [{
                      "visibility": "on"
                  }]
              }, {
                  "featureType": "poi.medical",
                  "stylers": [{
                      "visibility": "on"
                  }]
              }, {
                  "featureType": "poi.business",
                  "stylers": [{
                      "visibility": "simplified"
                  }]
              }]
  
          }
          var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
          var marker = new google.maps.Marker({
              position: myLatlng,
              title: "Hello World!"
          });
  
          // To add the marker to the map, call setMap();
          marker.setMap(map);
      },
  
      showNotification: function(from, align) {
          color = Math.floor((Math.random() * 4) + 1);
  
          $.notify({
              icon: "notifications",
              message: "Warning</b> - Sensor 1 Moisture Values Critical."
  
          }, {
              type: type[color],
              timer: 4000,
              placement: {
                  from: from,
                  align: align
              }
          });
      },
      
      showDanger: function(from, align) {
  
          $.notify({
              icon: "notifications",
              message: "<b>Warning</b> - Sensor 1 Moisture Values Critical."
  
          }, {
              type: "danger",
              timer: 4000,
              placement: {
                  from: from,
                  align: align
              }
          });
      },
      
          showWarning: function(from, align) {
  
          $.notify({
              icon: "notifications",
              message: "<b>Warning</b> - Sensor 1 Moisture Values Low."
  
          }, {
              type: "warning",
              timer: 4000,
              placement: {
                  from: from,
                  align: align
              }
          });
      },
      
         showSuccess: function(from, align) {
  
          $.notify({
              icon: "notifications",
              message: "Moisture Levels Normal"
  
          }, {
              type: "success",
              timer: 4000,
              placement: {
                  from: from,
                  align: align
              }
          });
      },
      
             showInfo: function(from, align) {
  
          $.notify({
              icon: "notifications",
              message: "Updating Moisture Values"
  
          }, {
              type: "info",
              timer: 4000,
              placement: {
                  from: from,
                  align: align
              }
          });
      },
  
  
  
  }
  