var month = 1;
var year = 2009;
function initCal(sender, calID, target, onchangeJS) {
    var cal = $(calID);

    //now we see if we found the calendar... if we did, we just show it.
    //otherwise we have to create it
    if (cal == null) {
        createCal(sender, calID, target, onchangeJS);
    }
    else {
        cal.style.display = 'inline';
    }
    return false;
}

function createCal(sender, calID,target, onchangeJS) {
    var d = new Date();
    month = d.getMonth();
    year = d.getFullYear();
    var result = document.createElement('div');
    result.id = calID;
    result.className = 'CalendarWrapper';
    var calendar = generateCal(calID, month, year, target, onchangeJS);
    result.innerHTML = calendar;
    sender.parentNode.appendChild(result);
}

function prevMonth(calID, target) {
    month--;
    if (month < 0) { month = 11; year--; }
    var calendar = generateCal(calID, month, year, target);
    $(calID).innerHTML = calendar;
    return false;
}

function nextMonth(calID, target) {
    month++;
    if (month > 11) { month = 0; year++; }
    var calendar = generateCal(calID, month, year, target);
    $(calID).innerHTML = calendar;
    return false;
}
var days = [31,28,31,30,31,30,31,31,30,31,30,31];

function daysInMonth(monthIdx, year) {
    //if the month isn't february, OR its not a leap year, OR the year is divisible by 400.
    if(monthIdx != 1 || year % 4 != 0 || year % 400 == 0) { return days[monthIdx]; }
    else { return days[monthIdx] + 1;  }
}

function generateCal(calID, month, year, target, onchangeJS) {

    var calendar = '<div class="Calendar"><div class="CalendarHeader"><div style="float: left;width: 90%;"><table width="100%"><tr><td><a href="#" onclick="javascript:prevMonth(\'' + calID + '\', \'' + target + '\');"><<</a></td><td class="MonthName">' + months[month] + ' ' + year + '</td><td><a href="#" onclick="javascript:nextMonth(\'' + calID + '\', \'' + target + '\');">>></a></td></tr></table></div><a style="float: right;" href="#" onclick="this.parentNode.parentNode.parentNode.style.display=\'none\';return false;">[X]</a></div>';

    var dayCount = daysInMonth(month, year);

    calendar += '<div class="MonthWrapper"><table class="Month"><tr>';
    
    //label each day of the week (S, M, T, W, etc.)
    for(var day = 0; day <= 6; day++){
        calendar += '<td class="DaysOfWeek">' + daysOfWeek[day] + '</td>';
    }
    calendar += '</tr><tr>';
    
    //we need to fill in the days that didn't actually exist in this month too (ie. empty spots)
    var firstDay = new Date(year, month, 1);
    for (var pre = 0; pre < firstDay.getDay(); pre++) {
        calendar += '<td></td>';
    }

    for (var day = 1; day <= dayCount; day++) {
        var d = new Date(year, month, day);
        var asString = year + '_' + month + '_' + day;
        if (onchangeJS != null) {
            calendar += '<td class="DayCell"><a href="#" onclick="javascript:pickDay(\'' + asString + '\',\'' + target + '\',\'' + calID + '\',' + onchangeJS + ');">' + day + '</a></td>';
        } else {
            calendar += '<td class="DayCell"><a href="#" onclick="javascript:pickDay(\'' + asString + '\',\'' + target + '\',\'' + calID + '\');">' + day + '</a></td>';
        }
        if (d.getDay() == 6) {
            calendar += "</tr><tr>";
        }
    }

    //we need to fill in the days that didn't actually exist in this month too (ie. empty spots)
    var lastDay = new Date(year, month, dayCount);
    for (var pre = lastDay.getDay(); pre <= 6; pre++) {
        calendar += '<td></td>';
    }
    
    calendar += "</tr></table>";
    calendar += '</div>'; //final div
    return calendar;
}

function pickDay(day, target, calID, onchangeJS) {
    $(calID).style.display = 'none';
    var pieces = day.split('_');
    //month is 0 based in JS, 1 based in real life
    $(target).value = pieces[0] + '/' + (parseInt(pieces[1]) + 1) + '/' + pieces[2];
    if (onchangeJS != null) {
        onchangeJS(target);
    }
}

function TextChanged(target) {
    __doPostBack(target.id);
}