function onMonthChange(selmonth, selday, selyear) {
    var selDay = document.getElementById(selday);
    var selMonth = document.getElementById(selmonth);
    var selYear = document.getElementById(selyear);
    var v = selMonth.value;
    if (selDay.options[29 - 1] == null) {
        var varItem = new Option(29, 29);
        selDay.options.add(varItem);
    }
    if (selDay.options[30 - 1] == null) {
        var varItem = new Option(30, 30);
        selDay.options.add(varItem);
    }
    if (v == 1 || v == 3 || v == 5 || v == 7 || v == 8 || v == 10 || v == 12) {
        if (selDay.options[31 - 1] == null) {
            var varItem = new Option(31, 31);
            selDay.options.add(varItem);
        }
    } else if (v == 4 || v == 6 || v == 9 || v == 11) {
        if (selDay.options[31 - 1] != null) {
            selDay.options[31 - 1] = null;
        }
    } else if (v == 2) {
        if (selDay.options[31 - 1] != null) {
            selDay.options[31 - 1] = null;
        }
        if (selDay.options[30 - 1] != null) {
            selDay.options[30 - 1] = null;
        }
        if (selDay.options[29 - 1] != null) {
            vv = selYear.value;
            if ((vv % 4 == 0 && vv % 100 != 0) || vv % 400 == 0) {} else {
                selDay.options[29 - 1] = null;
            }
        }
    }
}

function lunchstr() {
    var reval =
        "<div class=\"yycalbox\">" +
        "<div class=\"yycal_info\">" +
        "<span class=\"yycal_title\">Gregorian</span>" +
        "<span class=\"yycal_title_s\">- Chinese Calendar Converter</span>" +
        "</div>" +
        "<form class=\"form-inline yycal_searchbar\" name=\"yycal\" id=\"yycal\">" +
        "<p><select name=\"themonth\" id=\"themonth\"></select></p>" +
        "<p><select name=\"theday\" id=\"theday\"></select></p>" +
        "<p><select name=\"theyear\" id=\"theyear\"></select></p>" +
        "<input type=\"button\" value=\"Search\" id=\"btnsearch\" name=\"btnsearch\" class=\"sendButton\">" +
        "</form>" +
        "<div id=\"yycal_result\" class=\"yycal_resultbox\">" +
        "<p><span class=\"yycal_stitle\">Gregorian date: </span> <span id=\"searchinfo\"></span></p>" +
        "<p><span class=\"yycal_stitle\">Chinese lunar calendar date: </span> <span id=\"resultinfo\"></span></p>" +
        "<p><span class=\"yycal_stitle\">Chinese zodiac sign: </span>  <span id=\"yycal_zodiac\"></span></p>" +
        "</div>" +
        "</div>";
    return reval;
}
$(function() {
    if (typeof citsLoad != 'undefined') {
        try {
            citsLoad.css(['//data.chinahighlights.com/css/lunarcalendar.css']);
            citsLoad.js(['//data.chinahighlights.com/js/Lunarcalendar.js']);
        } catch (e) {

        }
    }
    var str_LC = lunchstr();
    $('#thelcbox').append(str_LC);
    var myDate = new Date();
    var dayoption = '';
    for (var i = 1; i <= 31; i++) {
        dayoption += '<option value="' + i + '"';
        if (i == myDate.getDate()) {
            dayoption += ' selected';
        }
        dayoption += '>' + i + '</option>';
    }
    $('#theday').html(dayoption);
    var monoption = '';
    var en_month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    for (var i = 0; i < 12; i++) {
        monoption += '<option value="' + (i + 1) + '"';
        if (i == myDate.getMonth()) {
            monoption += ' selected';
        }
        monoption += '>' + en_month[i] + '</option>';
    }
    $('#themonth').html(monoption);
    var yearoption = '';
    for (var i = 1930; i < 2023; i++) {
        yearoption += '<option value="' + i + '"';
        if (i == myDate.getFullYear()) {
            yearoption += ' selected';
        }
        yearoption += '>' + i + '</option>';
    }
    $('#theyear').html(yearoption);

    onMonthChange('themonth', 'theday', 'theyear');

    $('#themonth').change(function() {
        onMonthChange('themonth', 'theday', 'theyear');
    });
    $('#theyear').change(function() {
        onMonthChange('themonth', 'theday', 'theyear');
    });
    $('#btnsearch').click(function() {
        var d = document.getElementById("theday").value;
        var m = document.getElementById("themonth").value;
        var y = document.getElementById("theyear").value;
        var curDate = new Date(y, parseInt(m - 1), d);
        var ht = [];
        var lc = new LC.lunar(curDate);
        var txt_searchinfo = LC.monthName[parseInt(m - 1)] + ' ' + d + ', ' + y;
        $('#searchinfo').html(txt_searchinfo);
        var txt_season = LC.get_season(parseInt(m));
        var txt_resultinfo = txt_season + ' (month ' + lc.month + '), date ' + parseInt(lc.day) + ', ' + lc.year + '';
        $('#resultinfo').html(txt_resultinfo);
        var txt_zodiac = '<a target="_blank" href="http:' + '//www.chinahighlights.com/travelguide/chinese-zodiac/' + LC.get_animal(lc.year).toLowerCase() + '.htm">' + LC.get_animal(lc.year) + '</a>';
        $('#yycal_zodiac').html(txt_zodiac);
        //$('#yycal_season').html(txt_season);
        $('#yycal_result').show();
    });
});