window.cal = {};

cal.hilightNow = function()
{
  $(".calendarSubWrapper").each(function()
  {
    if ($(this).children("h4").text() == moment().format("MMMM"))
    {
      console.log($(this).children("h4").text());
      $(this).children(".calendar").each(function()
      {
        $(this).children("tbody").each(function()
        {
          $(this).children("tr").each(function()
          {
            $(this).children("td").each(function()
            {
              console.log($(this).html());
              if ($(this).text() == moment().format("D"))
              {
                $(this).addClass("working");
                console.log($(this).text());
              }
            })
          })
        })
      })
    }
  })
}

cal.genYear = function(y)
{
  var ret = "";
  for (var i = 1; i <= 12; i++)
  {
    ret += cal.genPage(y, i);
  }
  return ret;
}

cal.switchMode = function()
{
  switch(options.calendarSelector)
  {
    case "monthly":
      $("#wholeYearSelect").css("display", "none");
      $("#yearSelect, #monthSelect").css("display", "inline-block");
      $("#calendarWrapper").html(cal.genPage($("#yearSelect").val(), $("#monthSelect").val()));
      if ($("#yearSelect").val() == moment().format("Y"))
        cal.hilightNow();
      break;
    case "yearly":
      $("#wholeYearSelect").css("display", "inline-block");
      $("#yearSelect, #monthSelect").css("display", "none");
      $("#calendarWrapper").html(cal.genYear($("#wholeYearSelect").val()));
      if ($("#wholeYearSelect").val() == moment().format("Y"))
        cal.hilightNow();
      break;
  }
}

cal.genPage = function(y, m)
{

  var ret = "";
  var t = moment([y, m-1]);
  var offset = t.format("d");

  ret += `<div class="calendarSubWrapper">`
  ret += `<h4>${t.format("MMMM")}</h4>`;
  ret += `<table class="calendar">`;
  ret += `<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>`
  for (var i = 0;; i++)
  {
    ret += `<tr>`
    if (i == 0)
    {
      for (var j = 0; j < offset; j++)
      {
        ret += `<td></td>`
      }
      for (var j = offset; j < 7; j++)
      {
        ret += `<td>${t.format("D")}</td>`
        t.add(1, "day");
        if (t.format("M") != m)
          break;
      }
    }
    else
    {
      for (var j = 0; j < 7; j++)
      {
        ret += `<td>${t.format("D")}</td>`
        t.add(1, "day");
        if (t.format("M") != m)
          break;
      }
    }
    ret += `</tr>`
        if (t.format("M") != m)
          break;
    
  }
  ret += `</table>`
  ret += `</div>`
  return ret;
}

window.options =
{
  calendarSelector: "monthly"
}

window.updateFuncs = [ cal.switchMode ];

$(document).ready(function(){
  initOption("#calendarSelector");
  $(`#monthSelect option[value=${moment().format("M")}]`).attr("selected", "selected");
  $("#yearSelect").val(moment().format("Y"));
  $("#wholeYearSelect").val(moment().format("Y"));
  $("#monthSelect, #yearSelect, #wholeYearSelect").on("change", cal.switchMode);
  cal.switchMode();
});