﻿

(function ($) {

  var resultsName = "";
  // var inputElement;
  // var displayElement;


  $.fn.extend({
    cronGen: function () {
      //create top menu
      var cronContainer = $("<div/>", { id: "CronContainer", style: "width:480px;height:300px; background: white;" });
      var mainDiv = $("<div/>", { id: "CronGenMainDiv", style: "width:480px;height:270px;" });
      var topMenu = $("<ul/>", { "class": "nav nav-tabs", id: "CronGenTabs" });
      var generateButton = $('<button type="button" class="btn btn-default" id="genButton" style="position:absolute; bottom:10px; left: 10px;">Save</button>');
      $('<li/>', { 'class': 'active' }).html($('<a id="MinutesTab" href="#Minutes">Minutes</a>')).appendTo(topMenu);
      $('<li/>').html($('<a id="HourlyTab" href="#Hourly">Hourly</a>')).appendTo(topMenu);
      $('<li/>').html($('<a id="DailyTab" href="#Daily">Daily</a>')).appendTo(topMenu);
      $('<li/>').html($('<a id="WeeklyTab" href="#Weekly">Weekly</a>')).appendTo(topMenu);
      $('<li/>').html($('<a id="MonthlyTab" href="#Monthly">Monthly</a>')).appendTo(topMenu);
      $('<li/>').html($('<a id="YearlyTab" href="#Yearly">Yearly</a>')).appendTo(topMenu);
      $(topMenu).appendTo(mainDiv);

      //create what's inside the tabs
      var container = $("<div/>", { "class": "container-fluid", "style": "margin-top: 10px; padding-left: 10px; padding-right: 10px;" });
      var row = $("<div/>", { "class": "row-fluid" });
      var span12 = $("<div/>", { "class": "span12" });
      var tabContent = $("<div/>", { "class": "tab-content" });

      //creating the minutesTab
      var minutesTab = $("<div/>", { "class": "tab-pane active", id: "Minutes" });
      $(minutesTab).append("Every&nbsp;");
      $("<input/>", { id: "MinutesInput", type: "text", value: "1", style: "width: 40px" }).appendTo(minutesTab);
      $(minutesTab).append("&nbsp;minute(s)");
      $(minutesTab).appendTo(tabContent);

      //creating the hourlyTab
      var hourlyTab = $("<div/>", { "class": "tab-pane", id: "Hourly" });

      var hourlyOption1 = $("<div/>", { "class": "well well-small" });
      $("<input/>", { type: "radio", value: "1", name: "HourlyRadio", checked: "checked" }).appendTo(hourlyOption1);
      $(hourlyOption1).append("&nbsp;Every&nbsp;");
      $("<input/>", { id: "HoursInput", type: "text", value: "1", style: "width: 40px" }).appendTo(hourlyOption1);
      $(hourlyOption1).append("&nbsp;hour(s)");
      $(hourlyOption1).appendTo(hourlyTab);

      var hourlyOption2 = $("<div/>", { "class": "well well-small" });
      $("<input/>", { type: "radio", value: "2", name: "HourlyRadio" }).appendTo(hourlyOption2);
      $(hourlyOption2).append("&nbsp;At&nbsp;");
      $(hourlyOption2).append('<select id="AtHours" class="hours" style="width: 60px"></select>');
      $(hourlyOption2).append('<select id="AtMinutes" class="minutes" style="width: 60px"></select>');
      $(hourlyOption2).appendTo(hourlyTab);

      $(hourlyTab).appendTo(tabContent);

      //craeting the dailyTab
      var dailyTab = $("<div/>", { "class": "tab-pane", id: "Daily" });

      var dailyOption1 = $("<div/>", { "class": "well well-small" });
      $("<input/>", { type: "radio", value: "1", name: "DailyRadio", checked: "checked" }).appendTo(dailyOption1);
      $(dailyOption1).append("&nbsp;Every&nbsp;");
      $("<input/>", { id: "DaysInput", type: "text", value: "1", style: "width: 40px" }).appendTo(dailyOption1);
      $(dailyOption1).append("&nbsp;day(s)");
      $(dailyOption1).appendTo(dailyTab);

      var dailyOption2 = $("<div/>", { "class": "well well-small" });
      $("<input/>", { type: "radio", value: "2", name: "DailyRadio" }).appendTo(dailyOption2);
      $(dailyOption2).append("&nbsp;Every week day&nbsp;");
      $(dailyOption2).appendTo(dailyTab);

      $(dailyTab).append("Start time&nbsp;");
      $(dailyTab).append('<select id="DailyHours" class="hours" style="width: 60px"></select>');
      $(dailyTab).append('<select id="DailyMinutes" class="minutes" style="width: 60px"></select>');

      $(dailyTab).appendTo(tabContent);

      //craeting the weeklyTab
      var weeklyTab = $("<div/>", { "class": "tab-pane", id: "Weekly" });
      var weeklyWell = $("<div/>", { "class": "well well-small" });

      var span31 = $("<div/>", { "class": "span6 col-sm-6" });
      $("<input/>", { type: "checkbox", value: "MON" }).appendTo(span31);
      $(span31).append("&nbsp;Monday<br />");
      $("<input/>", { type: "checkbox", value: "WED" }).appendTo(span31);
      $(span31).append("&nbsp;Wednesday<br />");
      $("<input/>", { type: "checkbox", value: "FRI" }).appendTo(span31);
      $(span31).append("&nbsp;Friday<br />");
      $("<input/>", { type: "checkbox", value: "SUN" }).appendTo(span31);
      $(span31).append("&nbsp;Sunday");

      var span32 = $("<div/>", { "class": "span6 col-sm-6" });
      $("<input/>", { type: "checkbox", value: "TUE" }).appendTo(span32);
      $(span32).append("&nbsp;Tuesday<br />");
      $("<input/>", { type: "checkbox", value: "THU" }).appendTo(span32);
      $(span32).append("&nbsp;Thursday<br />");
      $("<input/>", { type: "checkbox", value: "SAT" }).appendTo(span32);
      $(span32).append("&nbsp;Saturday");

      $(span31).appendTo(weeklyWell);
      $(span32).appendTo(weeklyWell);
      //Hack to fix the well box
      $("<br /><br /><br /><br />").appendTo(weeklyWell);

      $(weeklyWell).appendTo(weeklyTab);

      $(weeklyTab).append("Start time&nbsp;");
      $(weeklyTab).append('<select id="WeeklyHours" class="hours" style="width: 60px"></select>');
      $(weeklyTab).append('<select id="WeeklyMinutes" class="minutes" style="width: 60px"></select>');

      $(weeklyTab).appendTo(tabContent);

      //craeting the monthlyTab
      var monthlyTab = $("<div/>", { "class": "tab-pane", id: "Monthly" });

      var monthlyOption1 = $("<div/>", { "class": "well well-small" });
      $("<input/>", { type: "radio", value: "1", name: "MonthlyRadio", checked: "checked" }).appendTo(monthlyOption1);
      $(monthlyOption1).append("&nbsp;Day&nbsp");
      $("<input/>", { id: "DayOfMOnthInput", type: "text", value: "1", style: "width: 40px" }).appendTo(monthlyOption1);
      $(monthlyOption1).append("&nbsp;of every&nbsp;");
      $("<input/>", { id: "MonthInput", type: "text", value: "1", style: "width: 40px" }).appendTo(monthlyOption1);
      $(monthlyOption1).append("&nbsp;month(s)");
      $(monthlyOption1).appendTo(monthlyTab);

      var monthlyOption2 = $("<div/>", { "class": "well well-small" });
      $("<input/>", { type: "radio", value: "2", name: "MonthlyRadio" }).appendTo(monthlyOption2);
      $(monthlyOption2).append("&nbsp;");
      $(monthlyOption2).append('<select id="WeekDay" class="day-order-in-month" style="width: 80px"></select>');
      $(monthlyOption2).append('<select id="DayInWeekOrder" class="week-days" style="width: 100px"></select>');
      $(monthlyOption2).append("&nbsp;of every&nbsp;");
      $("<input/>", { id: "EveryMonthInput", type: "text", value: "1", style: "width: 40px" }).appendTo(monthlyOption2);
      $(monthlyOption2).append("&nbsp;month(s)");
      $(monthlyOption2).appendTo(monthlyTab);

      $(monthlyTab).append("Start time&nbsp;");
      $(monthlyTab).append('<select id="MonthlyHours" class="hours" style="width: 60px"></select>');
      $(monthlyTab).append('<select id="MonthlyMinutes" class="minutes" style="width: 60px"></select>');

      $(monthlyTab).appendTo(tabContent);

      //craeting the yearlyTab
      var yearlyTab = $("<div/>", { "class": "tab-pane", id: "Yearly" });

      var yearlyOption1 = $("<div/>", { "class": "well well-small" });
      $("<input/>", { type: "radio", value: "1", name: "YearlyRadio", checked: "checked" }).appendTo(yearlyOption1);
      $(yearlyOption1).append("&nbsp;Every&nbsp");
      $(yearlyOption1).append('<select id="MonthsOfYear" class="months" style="width: 150px"></select>');
      $(yearlyOption1).append("&nbsp;in day&nbsp;");
      $("<input/>", { id: "YearInput", type: "text", value: "1", style: "width: 40px" }).appendTo(yearlyOption1);
      $(yearlyOption1).appendTo(yearlyTab);

      var yearlyOption2 = $("<div/>", { "class": "well well-small" });
      $("<input/>", { type: "radio", value: "2", name: "YearlyRadio" }).appendTo(yearlyOption2);
      $(yearlyOption2).append("&nbsp;The&nbsp;");
      $(yearlyOption2).append('<select id="DayOrderInYear" class="day-order-in-month" style="width: 80px"></select>');
      $(yearlyOption2).append('<select id="DayWeekForYear" class="week-days" style="width: 100px"></select>');
      $(yearlyOption2).append("&nbsp;of&nbsp;");
      $(yearlyOption2).append('<select id="MonthsOfYear2" class="months" style="width: 110px"></select>');
      $(yearlyOption2).appendTo(yearlyTab);

      $(yearlyTab).append("Start time&nbsp;");
      $(yearlyTab).append('<select id="YearlyHours" class="hours" style="width: 60px"></select>');
      $(yearlyTab).append('<select id="YearlyMinutes" class="minutes" style="width: 60px"></select>');

      $(yearlyTab).appendTo(tabContent);
      $(tabContent).appendTo(span12);

      //creating the button and results input           
      resultsName = $(this).prop("id");
      $(this).prop("name", resultsName);

      $(span12).appendTo(row);
      $(row).appendTo(container);
      $(container).appendTo(mainDiv);
      $(cronContainer).append(mainDiv);
      $(cronContainer).append(generateButton);

      $(this).append(cronContainer);
      var that = $(this);

      // Hide the original input
      // that.hide();

      // Replace the input with an input group
      // var $g = $("<div>").addClass("input-group");
      // Add an input
      // var $i = $("<input>", { type: 'text', placeholder: 'Cron trigger', readonly: 'readonly' }).addClass("form-control").val($(that).val());
      // $i.appendTo($g);
      // Add the button
      // var $b = $("<button class=\"btn btn-default\"><i class=\"fa fa-edit\"></i></button>");
      // Put button inside span
      // var $s = $("<span>").addClass("input-group-btn");
      // $b.appendTo($s);
      // $s.appendTo($g);

      // $(this).before($g);

      // inputElement = that;
      // displayElement = $i;

      // $b.popover({
      //   html: true,
      //   content: function () {
      //     return $(cronContainer).html();
      //   },
      //   template: '<div class="popover" style="max-width:500px !important; width:500px"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',
      //   placement: 'bottom'

      // }).on('click', function (e) {
      //   e.preventDefault();


      //generate();
      // });

      that.fillInMonths = function () { //
        var days = [
        { text: "January", val: "1" },
        { text: "February", val: "2" },
        { text: "March", val: "3" },
        { text: "April", val: "4" },
        { text: "May", val: "5" },
        { text: "June", val: "6" },
        { text: "July", val: "7" },
        { text: "August", val: "8" },
        { text: "September", val: "9" },
        { text: "October", val: "10" },
        { text: "Novermber", val: "11" },
        { text: "December", val: "12" }
        ];
        $(".months").each(function () {
          that.fillOptions(this, days);
        });
      };

      that.fillOptions = function (elements, options) {
        for (var i = 0; i < options.length; i++)
          $(elements).append("<option value='" + options[i].val + "'>" + options[i].text + "</option>");
      };
      that.fillDataOfMinutesAndHoursSelectOptions = function () {
        for (var i = 0; i < 60; i++) {
          if (i < 24) {
            $(".hours").each(function () { $(this).append(that.timeSelectOption(i)); });
          }
          $(".minutes").each(function () { $(this).append(that.timeSelectOption(i)); });
        }
      };
      that.fillInWeekDays = function () {
        var days = [
        { text: "Monday", val: "MON" },
        { text: "Tuesday", val: "TUE" },
        { text: "Wednesday", val: "WED" },
        { text: "Thursday", val: "THU" },
        { text: "Friday", val: "FRI" },
        { text: "Saturday", val: "SAT" },
        { text: "Sunday", val: "SUN" }
        ];
        $(".week-days").each(function () {
          that.fillOptions(this, days);
        });

      };
      that.fillDayWeekInMonth = function () {
        var days = [
        { text: "First", val: "1" },
        { text: "Second", val: "2" },
        { text: "Third", val: "3" },
        { text: "Fourth", val: "4" }
        ];
        $(".day-order-in-month").each(function () {
          that.fillOptions(this, days);
        });
      };
      that.displayTimeUnit = function (unit) {
        if (unit.toString().length == 1)
          return "0" + unit;
        return unit;
      };
      that.timeSelectOption = function (i) {
        return "<option id='" + i + "'>" + that.displayTimeUnit(i) + "</option>";
      };

      that.populate = function(cron){
        return;
      }

      that.generate = function () {
        var activeTab = $("ul#CronGenTabs li.active a").prop("id");
        var results = "";
        switch (activeTab) {
          case "MinutesTab":
          results = "0 0/" + $("#MinutesInput").val() + " * 1/1 * ? *";
          break;
          case "HourlyTab":
          switch ($("input:radio[name=HourlyRadio]:checked").val()) {
            case "1":
            results = "0 0 0/" + $("#HoursInput").val() + " 1/1 * ? *";
            break;
            case "2":
            results = "0 " + Number($("#AtMinutes").val()) + " " + Number($("#AtHours").val()) + " 1/1 * ? *";
            break;
          }
          break;
          case "DailyTab":
          switch ($("input:radio[name=DailyRadio]:checked").val()) {
            case "1":
            results = "0 " + Number($("#DailyMinutes").val()) + " " + Number($("#DailyHours").val()) + " 1/" + $("#DaysInput").val() + " * ? *";
            break;
            case "2":
            results = "0 " + Number($("#DailyMinutes").val()) + " " + Number($("#DailyHours").val()) + " ? * MON-FRI *";
            break;
          }
          break;
          case "WeeklyTab":
          var selectedDays = "";
          $("#Weekly input:checkbox:checked").each(function () { selectedDays += $(this).val() + ","; });
          if (selectedDays.length > 0)
            selectedDays = selectedDays.substr(0, selectedDays.length - 1);
          results = "0 " + Number($("#WeeklyMinutes").val()) + " " + Number($("#WeeklyHours").val()) + " ? * " + selectedDays + " *";
          break;
          case "MonthlyTab":
          switch ($("input:radio[name=MonthlyRadio]:checked").val()) {
            case "1":
            results = "0 " + Number($("#MonthlyMinutes").val()) + " " + Number($("#MonthlyHours").val()) + " " + $("#DayOfMOnthInput").val() + " 1/" + $("#MonthInput").val() + " ? *";
            break;
            case "2":
            results = "0 " + Number($("#MonthlyMinutes").val()) + " " + Number($("#MonthlyHours").val()) + " ? 1/" + Number($("#EveryMonthInput").val()) + " " + $("#DayInWeekOrder").val() + "#" + $("#WeekDay").val() + " *";
            break;
          }
          break;
          case "YearlyTab":
          switch ($("input:radio[name=YearlyRadio]:checked").val()) {
            case "1":
            results = "0 " + Number($("#YearlyMinutes").val()) + " " + Number($("#YearlyHours").val()) + " " + $("#YearInput").val() + " " + $("#MonthsOfYear").val() + " ? *";
            break;
            case "2":
            results = "0 " + Number($("#YearlyMinutes").val()) + " " + Number($("#YearlyHours").val()) + " ? " + $("#MonthsOfYear2").val() + " " + $("#DayWeekForYear").val() + "#" + $("#DayOrderInYear").val() + " *";
            break;
          }
          break;
        }
        // Update original control
        // inputElement.val(results);
        // Update display
        // displayElement.val(results);
        return results;
      };
      that.fillDataOfMinutesAndHoursSelectOptions();
      that.fillDayWeekInMonth();
      that.fillInWeekDays();
      that.fillInMonths();
      $('#CronGenTabs a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
        //generate();
      });
      $("#CronGenMainDiv select,input").change(function (e) {
          // generate();
        });
      $("#CronGenMainDiv input").focus(function (e) {
        // generate();
      });
      $('#genButton').on('click', function (e) {
        that.generate();
        var triggerChange = new CustomEvent(
          "cronChange", 
          {
            'detail':{
              'cron': that.generate(),
            }
          }
          );
        that[0].dispatchEvent(triggerChange);
      })
      return that;
    }
  });
})(jQuery);

