var dtDate =        new Date();
var arrMonth =      ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
var arrDay =        ["Su", "M", "Tu", "W", "Th", "F", "Sa"];
var selectedMonth = dtDate.getUTCMonth();
var selectedYear =  dtDate.getUTCFullYear();
var dropDownYear =  selectedYear;
var selectedDay =   dtDate.getUTCDate();

var objDateSelected = new Object();   

function inputData(inputID,calID)
{
    document.getElementById(inputID).value = (selectedMonth + 1) + "/" + selectedDay + "/" + selectedYear;
    document.getElementById(calID).style.display = "none";
    selectedMonth = dtDate.getUTCMonth()
    selectedYear =  dtDate.getUTCFullYear();
    dropDownYear =  selectedYear;
    selectedDay =   dtDate.getUTCDate();
}
function buildCalendar(inputID,calID)
{       
    var strHTML = "";
    var strSelect = "";
    var dtMonthInfo =   new Date(selectedYear, selectedMonth + 1, 0);//By making the day zero, it reverts to the last day of the previous month
    var daysInMonth = dtMonthInfo.getDate();
    var dtDayInfo = new Date(selectedYear, selectedMonth, 1);
    var firstDayOfMonth = dtDayInfo.getDay();
    
    var numOfDateSquaresRequired = firstDayOfMonth + daysInMonth;
    var rowsRequired = Math.ceil(numOfDateSquaresRequired/7);
    
    strHTML = "";
    
    strHTML += "<div style=\"width:148px; overflow:hidden; padding: 3px 3px 0px 3px;\">";
    strHTML += "<select onChange=\"selectedMonth = this.selectedIndex; buildCalendar('" + inputID + "','" + calID + "');\" style=\"float:left;\">\n";
    for(i=0; i<12; i++)
    {
        if(i == selectedMonth){
           strSelect = "Selected"; 
        }
        else{
            strSelect = "";
        }
        strHTML += "<option " + strSelect + " value >" + arrMonth[i] + "</option>\n";
    }
    strHTML += "</select>";
    strHTML += "<select onChange=\"selectedYear = this.options[this.selectedIndex].value; buildCalendar('" + inputID + "','" + calID + "');\" style=\"float:right;\">\n";
    for(i = (dropDownYear); i<= (dropDownYear + 10); i++)
    {
        if(i == selectedYear){
           strSelect = "Selected"; 
        }
        else{
            strSelect = "";
        }
        strHTML += "<option " + strSelect + " value=\"" + i + "\" >" + i + "</option>\n";
    }
    strHTML += "</select>";
    strHTML += "</div>";
               
    var Day = 1;
    var borderStyle;
    var borderBackgroundColorOver;
    
    strHTML += "<div style=\"width:148px; overflow:hidden; padding: 0px 3px 3px 3px;\">";
    for(calendarDays = 0; calendarDays < 7; calendarDays++){
        strHTML += "<div style=\"width:21px; height:16px; float:left; text-align:center; color:#ffffff;\">";
        strHTML += arrDay[calendarDays];
        strHTML += "</div>"; 
    }
    for (calendarRows = 0; calendarRows < rowsRequired; calendarRows++){
        for(calendarColumns = 0; calendarColumns < 7; calendarColumns++){
            if((calendarColumns < 6) && (calendarRows < (rowsRequired - 1))){
                borderStyle = "border-top: solid 1px #000000; border-left:solid 1px #000000;";
            }else if(calendarColumns < 6){
                borderStyle = "border-top: solid 1px #000000; border-left:solid 1px #000000; border-bottom:solid 1px #000000;";
            }else if(calendarRows < (rowsRequired - 1)){
                borderStyle = "border-top: solid 1px #000000; border-left:solid 1px #000000; border-right:solid 1px #000000;";
            }else{
                borderStyle = "border: solid 1px #000000;";
            }
            if(((calendarRows * 7 + calendarColumns) < firstDayOfMonth)||((calendarRows * 7 + calendarColumns) >= (daysInMonth + firstDayOfMonth))){
                strHTML += "<div style=\"" + borderStyle + " width:20px; height:20px; background-color:#bebebe; float:left;\"></div>";
            }else if((Day == selectedDay)&&(selectedMonth == dtDate.getMonth())){
                strHTML += "<div style=\"" + borderStyle + " width:20px; height:20px; background-color:#ffffff; font-family:Arial; color:#272d53; float:left; text-align:right; cursor:pointer;\" onmouseover=\"this.style.backgroundColor = '#272d53'; this.style.color = '#ffffff';\" onmouseout=\"this.style.backgroundColor = '#ffffff'; this.style.color = '#272d53';\" onclick=\"selectedDay=" + Day + ";inputData('" + inputID + "','" + calID + "');\">";
                strHTML += "<div style=\"width:16px; height:16px; border:solid 2px #dbe7f3;\">" + Day + "</div>";
                Day++;
                strHTML += "</div>";
            }else{
                strHTML += "<div style=\"" + borderStyle + " width:20px; height:20px; background-color:#bdd3e9; font-family:Arial; color:#272d53; float:left; text-align:right; cursor:pointer;\" onmouseover=\"this.style.backgroundColor = '#272d53'; this.style.color = '#ffffff';\" onmouseout=\"this.style.backgroundColor = '#bdd3e9'; this.style.color = '#272d53';\" onclick=\"selectedDay=" + Day + ";inputData('" + inputID + "','" + calID + "');\">";
                strHTML += "<div style=\"width:16px; height:16px; border:solid 2px #dbe7f3;\">" + Day + "</div>";
                Day++;
                strHTML += "</div>";
            }
        }
    }
    strHTML += "</div>";
    
    document.getElementById(calID).style.display = "";
    document.getElementById(calID).innerHTML = strHTML;
}