months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
daysInMonths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

Calendar = function(configuration) {
    this.relativeElement = $("#"+configuration.relativeElementId);
    this.date = new Date();
    this.setLayout();
    this.setEvents(this);
    this.updateDaysTable(this.date);
}

Calendar.prototype.setLayout = function() {
    this.calendarDiv = $("<div>").addClass("calendar");
    $("body").append(this.calendarDiv);

    this.headerDiv = $("<div>").addClass("header");
    $(this.calendarDiv).append(this.headerDiv);
    $(this.calendarDiv).css( { "top": $(this.relativeElement).position().top + 22 + "px" } );

    this.monthYearSpan = $("<span>").addClass("month-year");
    $(this.headerDiv).append(this.monthYearSpan);

    this.leftArrow = $("<a>").addClass("left-arrow").html("&larr;").attr("href", "#");
    $(this.headerDiv).append(this.leftArrow);

    this.rightArrow = $("<a>").addClass("right-arrow").html("&rarr;").attr("href", "#");
    $(this.headerDiv).append(this.rightArrow);

    var weekDaysDiv = $("<div>").addClass("week-days");
    $(this.headerDiv).append(weekDaysDiv);

    var weekDaysTable = $("<table>").append("<tr>");
    var row = $("tr", weekDaysTable);
    for (var i = 0; i < 7; i++) {
        var cell = $(row).append("<td>").children().last().append(weekdays[i].substr(0, 3));
    }
    $(weekDaysDiv).append(weekDaysTable);

    this.daysTableWrapperDiv = $("<div>").addClass("days-table-wrapper");
    $(this.calendarDiv).append(this.daysTableWrapperDiv);
}

Calendar.prototype.updateMonthYear = function(month, year) {
    $(this.monthYearSpan).html(month + " " + year);
}

Calendar.prototype.updateDaysTable = function(date) {
    if (this.daysTable != null) {
        $(this.daysTable).remove();
    }
    var calendarObject = this;
    date.setDate(1);
    var first = date.getDay();
    var monthNumber = date.getMonth();
    var year = date.getFullYear();
    var monthLength = year % 4 == 0 && year % 100 != 0 && monthNumber == 1 || year % 400 == 0 ? 29 : daysInMonths[monthNumber];
    var d = 1;

    this.daysTable = $("<table>");
    for (var i = 0; i < Math.ceil((first + monthLength) / 7); i++) {
        var row = $(this.daysTable).append("<tr>").children().last().children().last();
        for (var j = 0; j < 7; j++) {
            var cell = $(row).append("<td>").children().last().addClass("day").attr("value", d);
            if (i * 7 + j >= first && d <= monthLength) {
                $(cell).click(function() {
                    date.setDate($(this).attr("value"));
                    $(calendarObject.relativeElement).attr("value", date.toDateString());
                    calendarObject.showOrHide();
                });
                $(cell).append(d++);
            }
        }
    }
    $(this.daysTableWrapperDiv).append(this.daysTable);
    $(this.calendarDiv).height($(this.headerDiv).height() + $(this.daysTable).height());
    this.updateMonthYear(months[monthNumber], year);
}

Calendar.prototype.setEvents = function(calendarObject) {

    var d = calendarObject.date;

    $(this.leftArrow).click(function() {
        d.setMonth(d.getMonth() - 1);
        calendarObject.updateDaysTable(d);
    });

    this.rightArrow.click(function() {
        d.setMonth(d.getMonth() + 1);
        calendarObject.updateDaysTable(d);
    });

}

Calendar.prototype.showOrHide = function() {
    $(this.calendarDiv).toggle();
}