var datePickerElement;

function DatePicker() {
    this.shortDayArray = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
    this.shortMonthArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    this.monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    this.selectedInputField;
    datePickerElement = this;
    this.selectedDate = new Date();

    this.DatePickerPanel = document.createElement("div");
    this.DatePickerPanel.setAttribute("id", "datePickerPanel");

    this.DatePickerMonthPanel = document.createElement("div");
    this.DatePickerMonthPanel.setAttribute("id", "datePickerMonthPanel");
    this.DatePickerPanel.appendChild(this.DatePickerMonthPanel);

    this.DatePickerLeftMonthPanel = document.createElement("div");
    this.DatePickerLeftMonthPanel.setAttribute("id", "datePickerLeftMonthPanel");
    this.DatePickerLeftMonthPanel.setAttribute("onclick", "setDatePickerMonth('down')");
    this.DatePickerMonthPanel.appendChild(this.DatePickerLeftMonthPanel);

    this.DatePickerMonthTextPanel = document.createElement("div");
    this.DatePickerMonthTextPanel.setAttribute("id", "datePickerMonthTextPanel");
    this.DatePickerMonthPanel.appendChild(this.DatePickerMonthTextPanel);

    this.DatePickerRightMonthPanel = document.createElement("div");
    this.DatePickerRightMonthPanel.setAttribute("id", "datePickerRightMonthPanel");
    this.DatePickerRightMonthPanel.setAttribute("onclick", "setDatePickerMonth('up')");
    this.DatePickerMonthPanel.appendChild(this.DatePickerRightMonthPanel);

    this.DatePickerDayPanel = document.createElement("div");
    this.DatePickerDayPanel.setAttribute("id", "datePickerDayPanel");
    this.DatePickerPanel.appendChild(this.DatePickerDayPanel);

    for (var i = 0; i < 7; i++) {
        this.DatePickerDay = document.createElement("div");
        this.DatePickerDay.setAttribute("class", "datePickerDay");
        this.DatePickerDay.innerHTML = this.shortDayArray[i];
        this.DatePickerDayPanel.appendChild(this.DatePickerDay);
    }

    this.DatePickerDatePanel = document.createElement("div");
    this.DatePickerDatePanel.setAttribute("id", "datePickerDatePanel");
    this.DatePickerPanel.appendChild(this.DatePickerDatePanel);

    this.daysInMonth = function (month, year) {
        var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        if (month != 2) return m[month - 1];
        if (year % 4 != 0) return m[1];
        if (year % 100 == 0 && year % 400 != 0) return m[1];
        return m[1] + 1;
    }

    this.setMonth = function () {
        this.DatePickerDatePanel.innerHTML = "";
        var dayCount = this.daysInMonth(this.selectedDate.getMonth() + 1, this.selectedDate.getYear());
        this.selectedDate.setDate(1);
        var dayOfWeek = this.selectedDate.getDay();
        var dayCounter = 1;
        for (var j = 0; j < 42; j++) {
            this.DatePickerDate = document.createElement("div");
            if (j >= dayOfWeek && dayCounter <= dayCount) {
                this.DatePickerDate.setAttribute("class", "datePickerDate2");
                this.DatePickerDate.setAttribute("onclick", "setDatePickerDate(this)");
                this.DatePickerDate.innerHTML = dayCounter;
                dayCounter++;
            }
            else {
                this.DatePickerDate.setAttribute("class", "datePickerDate1");
            }
            this.DatePickerDatePanel.appendChild(this.DatePickerDate);
        }
        this.DatePickerMonthTextPanel.innerHTML = this.monthArray[this.selectedDate.getMonth()] + " " + this.selectedDate.getFullYear();
    }

    this.setMonth();

    this.showDatePicker = function (elem) {
        this.selectedInputField = elem;
        elem.parentNode.appendChild(this.DatePickerPanel);
        this.DatePickerPanel.style.top = elem.offsetTop + elem.offsetHeight + "px";
        this.DatePickerPanel.style.left = elem.offsetLeft + elem.offsetWidth - 182 + "px";
        this.DatePickerPanel.style.display = "inline";
    }

    this.hideDatePicker = hideDatePickerPanel();
}

function setDatePickerDate(elem) {
    datePickerElement.selectedDate.setDate(elem.innerHTML);
    var newDateString = datePickerElement.selectedDate.getDate() + "/" +
                        (datePickerElement.selectedDate.getMonth() + 1) + "/" +
                        datePickerElement.selectedDate.getFullYear();
    if (datePickerElement.selectedInputField.tagName.toLowerCase() == "input") {
        datePickerElement.selectedInputField.value = newDateString;
    }
    else {
        datePickerElement.selectedInputField.innerHTML = newDateString;
    }
    hideDatePickerPanel();
}

function setDatePickerMonth(dir) {
    var currMonthValue = datePickerElement.selectedDate.getMonth();
    if (dir == "up") {
        currMonthValue++;
    }
    else {
        currMonthValue--;
    }
    datePickerElement.selectedDate.setMonth(currMonthValue);
    datePickerElement.setMonth();
}

function hideDatePickerPanel() {
    datePickerElement.DatePickerPanel.style.display = "none";
}