//Set today's date/month/year
var today = new Date();
function show_date(ctrName,month,year,day)
{
  // Setting startDate => 1st of a month
  var startDate = new Date();
  
  startDate.setDate(1);
  startDate.setMonth(month);
  startDate.setFullYear(year);
  
  // Putting into human-readable format
  var month_arr = new Array("January","Febuary","March","April","May","June","July","August","September","October","November","December");
  
  // Setting displayable calendar date
  var calendar_date = 1;
  
  // Generating innerHTML (table) for div
  var innerHTML = "";
  
  innerHTML += "<select id='opt_" + ctrName + "' onChange='getMonth("+ String.fromCharCode(34) + ctrName +String.fromCharCode(34)+","+String.fromCharCode(34)+ctrName+String.fromCharCode(34)+","+String.fromCharCode(34)+String.fromCharCode(34)+");'>";
  for(iCount=0; iCount <= 1; iCount++)
  {
      for(jCount=0; jCount <= 11; jCount++)
      {
        innerHTML += "<option value='" + jCount + "|" + (today.getFullYear()+iCount) + "'>" + month_arr[jCount] + " " + (today.getFullYear()+iCount) + "</option>";  
      }
  }
  innerHTML += "</select>";
  
  
  innerHTML += "<table border='0' cellpadding='0' class='TBLCalendar'>";
  innerHTML += "<caption>";
  innerHTML += "<a href='javascript:prev_month(" + String.fromCharCode(34) + ctrName + String.fromCharCode(34) + "," + String.fromCharCode(34) + String.fromCharCode(34) +");'><</a>";
  innerHTML += " "+month_arr[startDate.getMonth()]+" "+startDate.getFullYear()+" ";
  innerHTML += "<a href='javascript:next_month(" + String.fromCharCode(34) + ctrName + String.fromCharCode(34) + "," + String.fromCharCode(34) + String.fromCharCode(34) + ");'>></a>";
  innerHTML += "</caption>";
  
  innerHTML += "<tr>";  
  innerHTML += "<th scope='col' abbr='Sunday' title='Sunday'>Sun</th>";
  innerHTML += "<th scope='col' abbr='Monday' title='Monday'>Mon</th>";
  innerHTML += "<th scope='col' abbr='Tuesday' title='Tuesday'>Tue</th>";
  innerHTML += "<th scope='col' abbr='Wednesday' title='Wednesday'>Wed</th>";
  innerHTML += "<th scope='col' abbr='Thursday' title='Thursday'>Thu</th>";
  innerHTML += "<th scope='col' abbr='Friday' title='Friday'>Fri</th>";
  innerHTML += "<th scope='col' abbr='Saturday' title='Saturday'>Sat</td>";
  innerHTML += "<tr>";
 
  for(iCount=0; iCount<(maxDate(startDate.getMonth(),startDate.getFullYear())+startDate.getDay())/7; iCount++ )
  {
    innerHTML += "<tr>";
    
    for( jCount=iCount*7; jCount<iCount*7+7; jCount++ )
    {
      if( jCount < startDate.getDay())
      {
        // blank if date hasn't been started
        innerHTML += "<td class='Daydisable'></td>";
      }
      else
      if ( jCount >= maxDate(startDate.getMonth(),startDate.getFullYear())+startDate.getDay() )
      {
        // blank if max date is passed
        innerHTML += "<td class='Daydisable'></td>";
      }
      else
      {
        // Display date on the calendar
        if( jCount-startDate.getDay()+1 == today.getDate() && startDate.getMonth() == today.getMonth())
        {
            innerHTML += "<td id='td_" + ctrName + "_" + (jCount - startDate.getDay() + 1) + "' class='Today'><b><a href='javascript:apply_date(" + String.fromCharCode(34) + ctrName + String.fromCharCode(34) + ", " + (jCount - startDate.getDay() + 1) + "," + (startDate.getMonth() + 1) + "," + startDate.getFullYear() + "," + String.fromCharCode(34) + String.fromCharCode(34) + ");'>" + (jCount - startDate.getDay() + 1) + "</a></b></td>";
        }
        else if(jCount-startDate.getDay()+1 == day && startDate.getMonth() == today.getMonth())
        {
            innerHTML += "<td id='td_" + ctrName + "_" + (jCount - startDate.getDay() + 1) + "' class='Selector'><b><a href='javascript:apply_date(" + String.fromCharCode(34) + ctrName + String.fromCharCode(34) + ", " + (jCount - startDate.getDay() + 1) + "," + (startDate.getMonth() + 1) + "," + startDate.getFullYear() + "," + String.fromCharCode(34) + String.fromCharCode(34) + ");'>" + (jCount - startDate.getDay() + 1) + "</a></b></td>";
        }
        else
        {
            innerHTML += "<td id='td_" + ctrName + "_" + (jCount - startDate.getDay() + 1) + "'><a href='javascript:apply_date(" + String.fromCharCode(34) + ctrName + String.fromCharCode(34) + ", " + (jCount - startDate.getDay() + 1) + "," + (startDate.getMonth() + 1) + "," + startDate.getFullYear() + "," + String.fromCharCode(34) + String.fromCharCode(34) + ");'>" + (jCount - startDate.getDay() + 1) + "</a></td>";
        }
      }
    }
    innerHTML += "</tr>";
  }
  innerHTML += "</table>";
  
  // Inserting innerHTML
  document.getElementById(ctrName).innerHTML = innerHTML;
  // Displaying calendar
  document.getElementById(ctrName).style.display = 'block';
  
  var objSelect = document.getElementById("opt_" + ctrName);
  for(iCount=0;iCount<objSelect.length;++iCount)
    {
        if(objSelect.options[iCount].value == startDate.getMonth()+"|"+startDate.getFullYear())
        {
           objSelect.selectedIndex = iCount; 
           break;
        }
    }
  startDate= null;
}

function maxDate(month,year) {
  //search max date
  var dd = new Date(year, month+1, 0);
  return dd.getDate();
}

function next_month(ctrName)
{
  // Increate calendar month
  var objSelect = document.getElementById("opt_" + ctrName);
  var strValue = objSelect.options[objSelect.selectedIndex].value
  var strMaxYear = parseInt(objSelect.options[objSelect.length-1].value.split("|")[1])
  var dtMonth = parseInt(strValue.split("|")[0]);
  var dtYear = parseInt(strValue.split("|")[1]);
  
  if(dtMonth == 11)
  {
    ++dtYear;
  }
  if (dtYear <= strMaxYear)
  {show_date(ctrName,dtMonth+1,dtYear,0);}
  
}

function prev_month(ctrName)
{
  // Decrease calendar month
  var objSelect = document.getElementById("opt_" + ctrName);
  var strValue = objSelect.options[objSelect.selectedIndex].value
  var strMinYear = parseInt(objSelect.options[0].value.split("|")[1])
  var dtMonth = parseInt(strValue.split("|")[0]);
  var dtYear = parseInt(strValue.split("|")[1]);
  
  if(dtMonth == 0)
  {--dtYear;}
  
  if (dtYear >= strMinYear)
  {show_date(ctrName,dtMonth-1,dtYear,0);}
  
}
function getMonth(ctrCarName, ctrName)
{
    var objSelect = document.getElementById("opt_" + ctrCarName);
    var strValue = objSelect.options[objSelect.selectedIndex].value
    
    show_date(ctrName, strValue.split("|")[0],strValue.split("|")[1], 0);

}
function apply_date(ctlName, date, month, year) {
    // Format the selected date and copy the value into textbox
    var objTd;

    //Clear All Selction
    for (var iCount = 1; iCount < 31; iCount++) {
        objTd = document.getElementById("td_" + ctlName + "_" + iCount);
        if (objTd != null) {
            if (objTd.className != "Today") {
                objTd.className = "";
            }
        }
    }

    objTd = document.getElementById("td_" + ctlName + "_" + date);
    if (objTd != null) {
        objTd.className = "Selector";
    }

    objTd = null;

    if (date < 10)
    { date = "0" + date; }
    if (month < 10)
    { month = "0" + month; }


    // You can change display format on textbox here
    var objDateSelected = document.getElementById("txt_" + ctlName)
    if (objDateSelected != null) {
        objDateSelected.value = year + '-' + month + '-' + date;
        ShowHideCalendar("w_" + ctlName);
    }
    objDateSelected = null;
}

function ShowHideCalendar(ctrName) {

    var objCa = document.getElementById(ctrName);

    if (objCa.style.display == "none") {
        objCa.style.display = "block";
    }
    else {
        objCa.style.display = "none";
    }
}