// Initialize app
var myApp = new Framework7();

// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;

// Add view
var mainView = myApp.addView('.view-main', {
    // Because we want to use dynamic navbar, we need to enable it for this view:
    dynamicNavbar: true
});

var tempThreshold = 30;
var hours = 1;
var minutes = '00';

// Handle Cordova Device Ready Event
$$(document).on('deviceready', function() {

});

// Using page callback for page:
myApp.onPageInit('settings', function (page) {
  // Set threshold value initially
  $$('#temperatureThreshold').text(tempThreshold.toString() + '° C');

  // Add threshold inc/dec handlers
  $$('#incTempThreshold').on('click', function(){
    tempThreshold++;
    $$('#temperatureThreshold').text(tempThreshold.toString() + '° C');
  });
  $$('#decTempThreshold').on('click', function(){
    tempThreshold--;
    $$('#temperatureThreshold').text(tempThreshold.toString() + '° C');
  });

  var today = new Date();

  var pickerInline = myApp.picker({
      input: '#movementThreshold',
      container: '#picker-date-container',
      toolbar: false,
      rotateEffect: true,

      value: [hours, minutes],

      formatValue: function (p, values) {
          return values[0] + ' hours ' + values[1] + ' minutes';
      },

      cols: [
          // Hours
          {
              values: (function () {
                  var arr = [];
                  for (var i = 0; i <= 12; i++) { arr.push(i); }
                  return arr;
              })(),
          },
          // Divider
          {
              divider: true,
              content: ':'
          },
          // Minutes
          {
              values: (function () {
                  var arr = [];
                  for (var i = 0; i <= 59; i++) { arr.push(i < 10 ? '0' + i : i); }
                  return arr;
              })(),
          }
      ]
  });
})

// TODO Ajax GET to update temp + time values
function refresh() {
  alert('refresh()');
  $$('#currentTemperature').html('69');


  $$.ajax({
      url: "0.0.0.0:3000/refresh", // TODO insert pi IP
      contentType: "OPTIONS",
      dataType : 'json',
      crossDomain: true,
      data: {
          q: "getValues",
          format: "json",
          callback:function(){
             return true;
          }
      },
      success: function( response ) {
          alert( response ); // TODO read response and handle values
      },
      error: function( xhr, textStatus, thrownError ) {
        alert(thrownError);
      }
  });
}

// TODO Ajax GET/POST to enable/disable the stove. May want to have 2 functions.
function toggleStove() {
  alert('toggleStove()');
}

function adjustTempThreshold(adjustment) {
  alert('adjustTempThreshold(' + adjustment + ')');
  tempThreshold += adjustment;

  $$.ajax({
      url: "0.0.0.0:3000/toggle", // TODO insert pi IP
      contentType: "OPTIONS",
      dataType : 'json',
      crossDomain: true,
      data: {
          q: "getThresholds",
          format: "json",
          callback:function(){
             return true;
          }
      },
      success: function( response ) {
          alert( response ); // TODO read response and handle values
      },
      error: function( xhr, textStatus, thrownError ) {
        alert(thrownError);
      }
  });
}

// TODO Ajax POST to change thresholds
function applySettings() {
  alert('applySettings()');

  $$.ajax({
      url: "0.0.0.0:3000/apply", // TODO insert pi IP
      contentType: "OPTIONS",
      dataType : 'json',
      crossDomain: true,
      data: {
          q: 'tempThreshold='+tempThreshold+'&timeThreshold=', // TODO fix this
          format: "json",
          callback:function(){
             return true;
          }
      },
      success: function( response ) {
          alert( response ); // TODO read response and handle values
      },
      error: function( xhr, textStatus, thrownError ) {
        alert(thrownError);
      }
  });
}

@@ -320,17 +320,65 @@
 ld = 30;
+ // degrees C%0Avar timeThreshold = 60; // minutes
 %0A
-
 var hour
@@ -1221,22 +1221,111 @@
 e: %5B
-hours, minutes
+Math.floor(timeThreshold / 60), (timeThreshold %25 60 %3C 10? '0' + timeThreshold %25 60: timeThreshold %25 60)
 %5D,%0A%0A
@@ -2037,15 +2037,183 @@
   %7D%0A
-
       %5D
+,%0A%0A      onChange: function(p, values, displayValues)%7B // TODO make sure this is correct%0A        timeThreshold = parseInt(values%5B0%5D) * 60 + parseInt(values%5B1%5D);%0A      %7D
 %0A  %7D

Fix time picker and setup variables for ajax to work properly