// *****   -----------------   *****
// *****     apptSelect.js     *****
// *****   -----------------   *****

$(document).ready(function(){

  $(".apptSelectButton").click(function(){
    $btn = $(this);
    var btnId = $btn.attr('id');
    var calId = btnId.split('_')[1];
    $txtDate = $("#DATE_" + calId);
    $lstAppt = $("#APPOINTMENT_" + calId);
    $hdnResId = $("#RESERVATION_" + calId);
    $hdnApptKey = $("#APPTKEY_" + calId);
    $hdnSelDate = $("#SELDATE_" + calId);
    $hdnAdminAppt = $("#ADMINAPPT_" + calId);
    $apptKey = $lstAppt.val();
    if(($txtDate.val() == '') || ($lstAppt.val() == '')) {
      alert('Choose a date and timeslot first');
      return;
    }



    if ($(this).val() == "Cancel") {
      if($hdnAdminAppt.val() == '1') {
        $id = $hdnApptKey.val();
      } else {
        $id = $hdnResId.val();
      }
    } else {
      $id = $lstAppt.val();
    }
    
    var isTest = ($("input[name='TEST_" + calId + "']").val() == "1" ? true : false);
    var useNew = ($("input[name='NEW_" + calId + "']").val() == "1" ? true : false);
      var mydata = {"action": $(this).val(), optlist: 'ADMIN.APPT="' + $hdnAdminAppt.val() + '"', "targetId" : $id};
    if(isTest) {
      mydata["TEST"] = '1';
    }
    if(useNew) {
      mydata["NEW"] = '1';
    }

    $.ajax({
      url: "/apptSelect/action",
      data: mydata,
      type: "POST",
      success: function(data) {
        data = $.trim(data);
        var duration = $("#DURATION_" + calId).val();
        if(data == 'Canceled') {
          $btn.val('Reserve');
          window.clearInterval(ptrTimerArr[$btn.data("timerIndex")]);
          $txtDate.val('');
          $txtDate.attr("disabled", false);
          $lstAppt.val('');
          $lstAppt.attr("style", 'width:150px;');
          $ticker = $("#TIMER_" + calId);
          $ticker.html('');
          $hdnResId.val('');
          $hdnApptKey.val('');
          $hdnSelDate.val('');
          $hdnAdminAppt.val(''); 
        } else if(data == 'ReserveError') {
           alert('Reserve Problems')
        } else if(data == 'CommunicationsError') {
           alert('Problems')
        } else {
          $btn.val('Cancel');
          ptrTimerArr.push(null);
          var index = ptrTimerArr.length - 1;
          ptrTimerArr[index] = window.setInterval(function(){tick(calId, index, duration)}, 1000);
          $btn.data("timerIndex", index);
          $hdnResId.val(data);
          $hdnApptKey.val($apptKey);
          $hdnSelDate.val($txtDate.val());
          $txtDate.attr("disabled", true);
          $lstAppt.attr("disabled", true);
        }
      },
      error: function() {
        alert("Unable to complete the task due to server error. Please try again later.")
        $txtDate.val('');
        $lstAppt.val('');
        $lstAppt.attr("disabled", true);
        $lstAppt.attr("style", 'width:150px;');
      }
    });
  });
});


var ptrTimerArr = [];
var cntTickArr = [];
function tick(calId, index, duration) {
  cntTickArr[index] = (cntTickArr[index] ? (cntTickArr[index] + 1000) : 1000);
  var dt = new Date(duration - cntTickArr[index]);
  var mins = ('0' + dt.getMinutes()).slice(-2);
  var secs = ('0' + dt.getSeconds()).slice(-2);
  $ticker = $("#TIMER_" + calId);
  $ticker.html(mins + ":" + secs);
  if(cntTickArr[index] == duration) {
    window.clearInterval(ptrTimerArr[index]);
    alert("Your temporary reservation date has expired.  However, it may still be available. Please choose again.");
    $ticker.html('');
    $txtDate = $("#DATE_" + calId);
    $txtDate.val('');
    $txtDate.attr("disabled", false);
    //I will probably need to use ajax to fetch a new textbox that will be formatted again for available dates.
    //maybe it would be possible to just disable dates that have become unavailable since we started using the tool.
    //

    $lstAppt = $("#APPOINTMENT_" + calId);
    $lstAppt.val('');
    $lstAppt.attr("style", 'width:150px;');
    $("#BUTTON_" + calId).val('Reserve');
  }
}

// This is called in the beforeShowDay event
// So called multiple times for each date before the datepicker pops up
//It is looking through each date and underlining certain ones (only for admins)
function beforeShowApptDates(dt, calId) {
  var isAdmin = ($("input[name='ADMIN_" + calId + "']").val() == "1" ? true : false);
  var d = ("0" + dt.getDate()).slice(-2);
  var m = ("0" + (dt.getMonth() + 1)).slice(-2);
  var y = dt.getFullYear();
  var res = [false, ''];
  if(isAdmin) {
    res = [true, ''];
  }
  var datestr = m + "-" + d + "-" + y;
  var apptDays = $("#HDNDATES_" + calId).val().split(',');
//console.log(datestr);
//console.log('-------');
  if($.inArray(datestr, apptDays) != -1) {
    if(isAdmin) {
      res = [true, 'underline'];
    } else {
      res = [true, ''];
    }
  }
  return res;
}


// This is called in the onChangeMonthYear event
function setApptDates(calendarId, year, month) {
  var isTest = ($("input[name='TEST_" + calendarId + "']").val() == "1" ? true : false);
  var useNew = ($("input[name='NEW_" + calendarId + "']").val() == "1" ? true : false);
  var mydata = {apptYear:year, apptMonth:month, calId:calendarId};
  if(isTest) {
    mydata["TEST"] = '1';
  }
  if(useNew) {
    mydata["NEW"] = '1';
  }
  $.ajax({
    url: "/apptSelect/dates",
    data: mydata,
    type: "POST",
    async: false,
    success: function(data) {
      data = $.trim(data);
      $("#HDNDATES_" + calendarId).val(data);
    }
  });
}


// This is called in the onSelect event
function fetchApptsAndNotes(dateText, ctrl) {
  var calId = ctrl.id.split('_')[1];

  var isTest = ($("input[name='TEST_" + calId + "']").val() == "1" ? true : false);
  var useNew = ($("input[name='NEW_" + calId + "']").val() == "1" ? true : false);
  var mydata = {seldate: dateText, "calId" : calId};
  if(isTest) {
    mydata["TEST"] = '1';
  }
  if(useNew) {
    mydata["NEW"] = '1';
  }
  $.ajax({
    url: "/apptSelect/fetch",
    data: mydata,
    type: "POST",
    success: function(data) {
      data = $.trim(data);
      if(!data) {
        return;
      }
      var arr = data.split('^^');
      var notes = arr[0];
      if(notes) {
        notes = notes.split('>|<');
      } else {
        notes = [];
      }

      var isAdmin = ($("input[name='ADMIN_" + calId + "']").val() == "1" ? true : false);

      var appts = arr[1];
      if(appts) {
        appts = appts.split('>|<');
      } else {
        appts = [];
      }

      $lst = $("#APPOINTMENT_" + calId);

      var notepane = $("#NOTEPANE_" + calId);
      var sHtml = '';
      if(notes.length > 0) {
        sHtml = '<br /><ul><li class="red">' + notes.join('</li><li class="red">') + '</li></ul>';
      }
      notepane.html(sHtml);
      
      var apptCnt = appts.length;
      $lst.find("option").remove().end().append("<option></option>");
      if(apptCnt > 0) {
        $lst.removeAttr("disabled");
        $lst.removeAttr("style");
        for(var apptLoop = 0; apptLoop < apptCnt; apptLoop++) {
          var appt = appts[apptLoop];
          var items = appt.split(",");
          $lst.append('<option value="' + items[0] + '">' + items[1] + '</option>');
        }
      }
      if(isAdmin) {
        $lst.append('<option value="CHANGE">Create Custom Appointment</option>');
        $lst.removeAttr("disabled");
        $lst.removeAttr("style");
      }

      if((apptCnt == 0) && (!isAdmin)) {
        //shouldn't be necessary since we only allow non-admin to pick dates that have appts or notes
        $lst.attr("disabled", "disabled", true);
        $lst.attr("style", "width:150px;");
      }
    }
  });
}

function displayError(msg, fields) {
  msg = $.trim(msg);
  if(msg == '') {
    return;
  }
  $objErr = $("#errorBox");
  if($objErr.length == 0) {
    return;
  }
  $objErr.css('marginBottom', '10px');
  $objErr.html(msg).addClass( "ui-state-highlight" );
  fields.addClass("ui-state-error");                        
}  
function resetValidation(fields) {
  $objErr = $("#errorBox");
  if($objErr.length == 0) {
    return;
  }
  $objErr.css('marginBottom', '0');
  $objErr.html("").removeClass( "ui-state-highlight")
  fields.removeClass( "ui-state-error" );
}
function resetFormElements(fields) {
  fields.each(function(){
     if($(this)[0].tagName == 'INPUT') {
        var inputtype = $(this).attr("type").toUpperCase();
        if((inputtype == "CHECKBOX") || (inputtype == "RADIO")) {
           $(this).attr("checked", false);
        } else {
           $(this).val("");
        }
     } else {
        $(this).val("");
     }
  });
}

$(document).on("change", ".calApptList", function(){
  $lst = $(this);
  if($lst.val() == 'CHANGE') {
    var dialog = $('<div style="display:none" class="showSpinner"></div>').appendTo('body');
    dialog.dialog({
      title: "Create Custom Appointment",
      close:function(event, ui){
        dialog.remove();
        $lst.val('');
      },
      buttons: [{
        text:"Create & Reserve",
        click:function(){

          $objStartTime = $("#txtAddStartTime");
          $objDuration = $("#txtAddDuration"); 
         // $objSlot = $("#txtAddSlot");
          $calId = $lst.attr("id").split("_")[1];
          $txtDate = $("#DATE_" + $calId);

          //$fields = $([]).add($objStartTime).add($objDuration).add($objSlot);
          $fields = $([]).add($objStartTime).add($objDuration);
          resetValidation($fields);

          $startTime = $.trim($objStartTime.val());
          $duration = $.trim($objDuration.val());
          //$slot = $.trim($objSlot.val());
          if($startTime == '') {
            displayError('Enter a Start Time.', $objStartTime);
            return;
          }
          if($duration == '') {
            displayError('Enter a Duration.', $objDuration);
            return;
          }
          //if($slot == '') {
          //  displayError('Enter the number of Slots.', $objSlot);
          //  return;
          //}
 
          var isTest = ($("input[name='TEST_" + $calId + "']").val() == "1" ? true : false);
  var useNew = ($("input[name='NEW_" + $calId + "']").val() == "1" ? true : false);
          var schedID = $("input[name='SCHED_" + $calId + "']").val();
          var mydata = {calendar: $calId, apptDate: $txtDate.val(), startTime: $startTime, duration: $duration, slots: 1, "SCHED.ID": schedID};
          if(isTest) {
             mydata["TEST"] = "1";
          }
          if(useNew) {
             mydata["NEW"] = "1";
          }
          $.ajax({
            url: "/apptSelect/createprocess",
            data: mydata,
            type: "POST",
            success: function(data) {

//APPT.SELECT.CREATEPROCESS is returning a string equal to apptId | reservedID | range
//They are being written to hiddens within the tool
//A new option is being added to the appt listbox with the new data.  It is writing the value = apptId and text equal to range
//We have changed the listbox to be schedgroupDateKey_schedGroupTimeKey


              data = $.trim(data);
              //once this is done then it is created and reserved.  We need to disable the fields.  There will be no ticker b/c the reservation don't expire.
              if(data == '') {
                 alert('Request did not complete.');
                 return;
              }
              var arr = data.split('|');
              var apptId = arr[0];
              var reservedId = arr[1];
              var range = arr[2];

              $txtDate = $("#DATE_" + $calId);
              $lstAppt = $("#APPOINTMENT_" + $calId);
              $hdnApptKey = $("#APPTKEY_" + $calId);
              $hdnSelDate = $("#SELDATE_" + $calId);
              $hdnResId = $("#RESERVATION_" + $calId);
              $btn = $("#BUTTON_" + $calId);
              $adminAppt = $("#ADMINAPPT_" + $calId);

              $btn.val('Cancel');
              $hdnResId.val(reservedId);
              $hdnApptKey.val(apptId);                                                                                                                                                   
              $hdnSelDate.val($txtDate.val());                                                                                                                                             
              $txtDate.attr("disabled", true);                                                                                                                                             

              var sTime = range.split('-')[0];
              var sTimeHrs = sTime.substr(0,2);
              var sTimeMins = sTime.substr(3,2);
              var sTimeAmpm = sTime.substr(5,2);
              var sTime = convertToMilitaryTime(sTimeAmpm, sTimeHrs, sTimeMins);
              var oDate = new Date();
              oDate.setHours(
                  parseInt(sTime.substr(0, 2), 10),
                  parseInt(sTime.substr(3, 2), 10),
                  0,
                  0
              );
              var stTimestamp = oDate.getTime();

              // inserting the new appointment in the proper order
              $found = false;
              $newopt = '<option value="' + apptId + '">' + range + '</option>';  // we are no longer using apptId as value...but the listbox is disabled...so data is not passed through that, and if you click the Cancel button it should delete this option.
              $lstAppt.find("option").each(function(i){
                $t = $(this).text();
                $v = $(this).val();

                //continuing past these two options in the loop
                if(($v == 'CHANGE') || ($v == '')) {
                  return;
                }

                var oTime = convertToMilitaryTime($t.substr(5,2), $t.substr(0, 2), $t.substr(3, 2));
                var oDate = new Date();
                oDate.setHours(
                    parseInt(oTime.substr(0, 2), 10),
                    parseInt(oTime.substr(3, 2), 10),
                    0,
                    0
                );
                var tTimestamp = oDate.getTime();
                //when we find a timestamp that is greater than mine then we insert new option before it. 
                if(tTimestamp > stTimestamp) {
                  $lstAppt.find('option').eq(i).before($newopt);
                  $found = true;
                  return false;
                }
              });
              //if no option has a greater timestamp then stick at end.
              if(!$found) {
                $lstAppt.find('option:last').before($newopt);
              }


              //$lstAppt.val(apptId);
              //$lstAppt.attr("disabled", true);             
              eval('window.setTimeout(function(){$("#APPOINTMENT_' + $calId + '").val(' + apptId + ').attr("disabled", true);}, 1)');

              $adminAppt.val('1');

              dialog.dialog("close");
              alert('Appointment created and reserved without a timeout');
            }
          });
        }
      }],
      modal:true
    });
    dialog.load(
      '/apptSelect/create?' + Math.random(),
      {},// omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
      function(responseText, textStatus,XMLHttpRequest){
        dialog.removeClass('showSpinner');
        //$('.ui-dialog :button').blur();
      }
    );
  }
});

function convertToMilitaryTime( ampm, hours, minutes ) {
    var militaryHours;
    if(!ampm) {
      ampm = 'am';
    }
    ampm = ampm.toLowerCase();
    if(( ampm == "am" ) || (ampm == 'a.m.')) {
        militaryHours = hours;
        // check for special case: midnight
        if( militaryHours == "12" ) { militaryHours = "00"; }
    } else {
        if( ampm == "pm" || ampm == "p.m." ) {
            // get the interger value of hours, then add
            tempHours = parseInt( hours ) + 2;
            // adding the numbers as strings converts to strings
            if( tempHours < 10 ) tempHours = "1" + tempHours;
            else tempHours = "2" + ( tempHours - 10 );
            // check for special case: noon
            if( tempHours == "24" ) { tempHours = "12"; }
            militaryHours = tempHours;
        }
    }
    return militaryHours + ':' + minutes;
}