//========================================================
//  DISPLAY CALENDAR CONTROL
//============= PREPARE DATA VALUES ======================
var months = new Array();
var days = new Array();
var cDate = new Date();
var cYear;
var cMonth;
var cDay;
var paramDay;
var paramMonth;
var paramYear;
loadCalendar('26/05/11', 'NZ');
//========================================================
function loadCalendar(dateValue, dateFormat,title) {
    try {
        months[0] = "Jan";
        days[0] = 31;
        months[1] = "Feb";
        days[1] = 28;
        months[2] = "Mar";
        days[2] = 31;
        months[3] = "Apr";
        days[3] = 30;
        months[4] = "May";
        days[4] = 31;
        months[5] = "Jun";
        days[5] = 30;
        months[6] = "Jul";
        days[6] = 31;
        months[7] = "Aug";
        days[7] = 31;
        months[8] = "Sep";
        days[8] = 30;
        months[9] = "Oct";
        days[9] = 31;
        months[10] = "Nov";
        days[10] = 30;
        months[11] = "Dec";
        days[11] = 31;

        cYear = cDate.getFullYear();
        cMonth = cDate.getMonth();
        cDay = cDate.getDate();
        if (dateFormat == "NZ") {
            var dte = dateValue.split("/");
            paramDay = Number(dte[0]);
            paramMonth = Number(dte[1]);
            paramYear = Number(dte[2]);
        }
        document.getElementById("headerValue").innerHTML = title;
        displayYears();
    }
    catch (ex) {
        alert(String(ex));
    }
}

function displayYears() {
    try {
        document.getElementById("c1").innerHTML = "";
        var s = new Array();
        s[s.length] = "<table style=\"font-family: Arial; font-size: 9pt; font-weight: bold;\">\n";
        s[s.length] = "<tr>\n";
        s[s.length] = "<td>Year</td><td>\n";
        s[s.length] = "<select style=\"font-family: Arial; font-size: 9pt;\" id=\"yearNo\" onchange=\"changeYear()\">\n";
        for (var i = cYear; i <= (cYear + 3); i++) {
            if (i == paramYear)
                s[s.length] = "<option selected value=\"" + i + "\">" + i + "</option>\n";
            else
                s[s.length] = "<option value=\"" + i + "\">" + i + "</option>\n";
        }
        s[s.length] = "</select>\n";
        s[s.length] = "</td></tr><table>\n";
        document.getElementById("c1").innerHTML = s.join("");
        displayMonths(paramMonth, paramYear);
    }
    catch (ex) {
        alert(String(ex));
    }
}

function changeYear() {
    try {
        paramYear = document.getElementById("yearNo").options[document.getElementById("yearNo").selectedIndex].value;
        if (cYear != paramYear) {
            paramMonth = 1;
        }
        else {
            paramMonth = (cMonth + 1);
        }
        displayMonths(paramMonth, paramYear);
    }
    catch (ex) {
        alert(String(ex));
    }
}

function displayMonths(selectedMonth, selectedYear) {
    try {
        document.getElementById("c2").innerHTML = "";
        var s = new Array();
        s[s.length] = "<table style=\"font-family: Arial; font-size: 9pt; font-weight: bold; position: relative; left: 6px;\" cellpadding=\"0\" cellspacing=\"0\">\n";
        var border = "";
        //---- ROW 1
        s[s.length] = "<tr style=\"height: 20px; text-align: center;\">\n";
        for (var i = 0; i < 4; i++) {
            if (i == 0)
                border = " border: solid 1px black;"
            else
                border = " border-top: solid 1px black; border-right: solid 1px black; border-bottom: solid 1px black;";
            if ((selectedYear == cYear) && (i < cMonth)) {
                s[s.length] = "<td style=\"background-color: Silver; width: 30px; text-align: center;" + border + "\">" + months[i] + "</td>";
            }
            else {
                if (i == (selectedMonth - 1)) {
                    s[s.length] = "<td style=\"background-color: Orange; width: 30px; text-align: center;" + border + "\">" + months[i] + "</td>";
                }
                else {
                    s[s.length] = "<td style=\"background-color: White; cursor: pointer; width: 30px; text-align: center; color: Black;" + border + "\" onclick=\"displayMonths(" + String(i + 1) + "," + selectedYear + ");\">" + months[i] + "</td>";
                }
            }
        }
        s[s.length] = "</tr>\n";

        //---- ROW 2
        s[s.length] = "<tr style=\"height: 20px; text-align: center;\">\n";
        for (i = 4; i < 8; i++) {
            if (i == 4)
                border = " border-left: solid 1px black; border-bottom: solid 1px black; border-right: solid 1px black;"
            else
                border = " border-right: solid 1px black; border-bottom: solid 1px black;";
            if ((selectedYear == cYear) && (i < cMonth)) {
                s[s.length] = "<td style=\"background-color: Silver; width: 30px; text-align: center;" + border + "\">" + months[i] + "</td>";
            }
            else {
                if (i == (selectedMonth - 1)) {
                    s[s.length] = "<td style=\"background-color: Orange; width: 30px; text-align: center;\"" + border + ">" + months[i] + "</td>";
                }
                else {
                    s[s.length] = "<td style=\"background-color: White; cursor: pointer; width: 30px; text-align: center; color: Black;" + border + "\" onclick=\"displayMonths(" + String(i + 1) + "," + selectedYear + ");\">" + months[i] + "</td>";
                }
            }
        }
        s[s.length] = "</tr>\n";

        //---- ROW 3
        s[s.length] = "<tr style=\"height: 20px; text-align: center;\">\n";
        for (i = 8; i < 12; i++) {
            if (i == 8)
                border = " border-left: solid 1px black; border-bottom: solid 1px black; border-right: solid 1px black;"
            else
                border = " border-right: solid 1px black; border-bottom: solid 1px black;";
            if ((selectedYear == cYear) && (i < cMonth)) {
                s[s.length] = "<td style=\"background-color: Silver; width: 30px; text-align: center;" + border + "\">" + months[i] + "</td>";
            }
            else {
                if (i == (selectedMonth - 1)) {
                    s[s.length] = "<td style=\"background-color: Orange; width: 30px; text-align: center;" + border + "\">" + months[i] + "</td>";
                }
                else {
                    s[s.length] = "<td style=\"background-color: White; cursor: pointer; width: 30px; text-align: center; color: Black;" + border + "\" onclick=\"displayMonths(" + String(i + 1) + "," + selectedYear + ");\">" + months[i] + "</td>";
                }
            }
        }
        s[s.length] = "</tr>\n";

        s[s.length] = "</table>\n";
        document.getElementById("c2").innerHTML = s.join("");
        if (selectedMonth != paramMonth) {
            if ((selectedYear == cYear) && (selectedMonth == (cMonth + 1))) {
                paramDay = cDay;
            }
            else {
                paramDay = 1;
            }
        }
        paramMonth = selectedMonth;
        displayDays(paramDay, selectedMonth, selectedYear);
    }
    catch (ex) {
        alert(String(ex));
    }
}

function displayDays(selectedDay, selectedMonth, selectedYear) {
    try {
        paramDay = Number(selectedDay);
        document.getElementById("c3").innerHTML = "";
        var s = new Array();
        s[s.length] = "<table style=\"font-family: Arial; position: relative; left: 6px; font-size: 9pt;\" cellpadding=\"0\" cellspacing=\"0\">\n";
        s[s.length] = "<tr style=\"background-color: #00778c; color: white; font-weight: bold;\">\n";
        s[s.length] = "<td>&nbsp;Sun&nbsp;</td><td>&nbsp;Mon&nbsp;</td><td>&nbsp;Tue&nbsp;</td><td>&nbsp;Wed&nbsp;</td><td>&nbsp;Thu&nbsp;</td><td>&nbsp;Fri&nbsp;</td><td>&nbsp;Sat&nbsp;</td>";
        s[s.length] = "</tr>\n";
        var border = "";
        s[s.length] = "<tr>\n";
        var d = new Date(Number(selectedYear), (Number(selectedMonth) - 1), 1);
        for (var i = 1; i <= d.getDay(); i++) {
            if (i == 0)
                border = " border: solid 1px black;"
            else
                border = " border-top: solid 1px black; border-right: solid 1px black; border-bottom: solid 1px black;";
            s[s.length] = "<td style=\"background-color: Silver;" + border + "; text-align: center;\">&nbsp;</td>";
        }
        var pos = 1;
        for (i = (d.getDay() + 1); i <= 7; i++) {
            if (i == 0)
                border = " border: solid 1px black;"
            else
                border = " border-top: solid 1px black; border-right: solid 1px black; border-bottom: solid 1px black;";
            if ((selectedYear == cYear) && (selectedMonth == (cMonth + 1)) && (pos < cDay)) {
                s[s.length] = "<td style=\"background-color: Silver;" + border + "; text-align: center;\">" + pos + "</td>";
            }
            else {
                if (pos == paramDay)
                    s[s.length] = "<td style=\"background-color: Orange;" + border + "; text-align: center;\">" + pos + "</td>";
                else
                    s[s.length] = "<td style=\"background-color: White; cursor: pointer;" + border + "; text-align: center;\" onclick=\"displayDays(" + pos + "," + selectedMonth + "," + selectedYear + ")\">" + pos + "</td>";
            }
            pos++;
        }
        s[s.length] = "</tr>\n";
        s[s.length] = "<tr>\n";
        var nPos = pos;
        for (i = nPos; i < (nPos + 7); i++) {
            if (i == nPos)
                border = " border-left: solid 1px black; border-bottom: solid 1px black; border-right: solid 1px black;"
            else
                border = " border-right: solid 1px black; border-bottom: solid 1px black;";
            if ((selectedYear == cYear) && (selectedMonth == (cMonth + 1)) && (pos < cDay)) {
                s[s.length] = "<td style=\"background-color: Silver;" + border + "; text-align: center;\">" + pos + "</td>";
            }
            else {
                if (pos == paramDay)
                    s[s.length] = "<td style=\"background-color: Orange;" + border + "; text-align: center;\">" + pos + "</td>";
                else
                    s[s.length] = "<td style=\"background-color: White; cursor: pointer;" + border + "; text-align: center;\" onclick=\"displayDays(" + pos + "," + selectedMonth + "," + selectedYear + ")\">" + pos + "</td>";
            }
            pos++;
        }
        s[s.length] = "</tr>\n";
        s[s.length] = "<tr>\n";
        nPos = pos;
        for (i = nPos; i < (nPos + 7); i++) {
            if (i == nPos)
                border = " border-left: solid 1px black; border-bottom: solid 1px black; border-right: solid 1px black;"
            else
                border = " border-right: solid 1px black; border-bottom: solid 1px black;";
            if ((selectedYear == cYear) && (selectedMonth == (cMonth + 1)) && (pos < cDay)) {
                s[s.length] = "<td style=\"background-color: Silver;" + border + "; text-align: center;\">" + pos + "</td>";
            }
            else {
                if (pos == paramDay)
                    s[s.length] = "<td style=\"background-color: Orange;" + border + "; text-align: center;\">" + pos + "</td>";
                else
                    s[s.length] = "<td style=\"background-color: White; cursor: pointer;" + border + "; text-align: center;\" onclick=\"displayDays(" + pos + "," + selectedMonth + "," + selectedYear + ")\">" + pos + "</td>";
            }
            pos++;

        }
        s[s.length] = "</tr>\n";
        s[s.length] = "<tr>\n";
        nPos = pos;
        for (i = nPos; i < (nPos + 7); i++) {
            if (i == nPos)
                border = " border-left: solid 1px black; border-bottom: solid 1px black; border-right: solid 1px black;"
            else
                border = " border-right: solid 1px black; border-bottom: solid 1px black;";
            if ((selectedYear == cYear) && (selectedMonth == (cMonth + 1)) && (pos < cDay)) {
                s[s.length] = "<td style=\"background-color: Silver;" + border + "; text-align: center;\">" + pos + "</td>";
            }
            else {
                if (pos == paramDay)
                    s[s.length] = "<td style=\"background-color: Orange;" + border + "; text-align: center;\">" + pos + "</td>";
                else
                    s[s.length] = "<td style=\"background-color: White; cursor: pointer;" + border + "; text-align: center;\" onclick=\"displayDays(" + pos + "," + selectedMonth + "," + selectedYear + ")\">" + pos + "</td>";
            }
            pos++;
        }
        s[s.length] = "</tr>\n";
        nPos = pos;
        if ((days[selectedMonth - 1] - nPos) >= 7) {
            s[s.length] = "<tr>\n";
            for (i = nPos; i < (nPos + 7); i++) {
                if (i == nPos)
                    border = " border-left: solid 1px black; border-bottom: solid 1px black; border-right: solid 1px black;"
                else
                    border = " border-right: solid 1px black; border-bottom: solid 1px black;";
                if ((selectedYear == cYear) && (selectedMonth == (cMonth + 1)) && (pos < cDay)) {
                    s[s.length] = "<td style=\"background-color: Silver;" + border + "; text-align: center;\">" + pos + "</td>";
                }
                else {
                    if (i == paramDay)
                        s[s.length] = "<td style=\"background-color: Orange;" + border + "; text-align: center;\">" + pos + "</td>";
                    else
                        s[s.length] = "<td style=\"background-color: White; cursor: pointer;" + border + "; text-align: center;\" onclick=\"displayDays(" + pos + "," + selectedMonth + "," + selectedYear + ")\">" + pos + "</td>";
                }
                pos++;
            }
            s[s.length] = "</tr>\n";
            nPos = pos;
            s[s.length] = "<tr>\n";
            var rem = 7;
            for (i = nPos; i <= (nPos + (days[selectedMonth - 1] - nPos)); i++) {
                if (i == nPos)
                    border = " border-left: solid 1px black; border-bottom: solid 1px black; border-right: solid 1px black;"
                else
                    border = " border-right: solid 1px black; border-bottom: solid 1px black;";
                if ((selectedYear == cYear) && (selectedMonth == (cMonth + 1)) && (pos < cDay)) {
                    s[s.length] = "<td style=\"background-color: Silver;" + border + "; text-align: center;\">" + pos + "</td>";
                }
                else {
                    if (pos == paramDay)
                        s[s.length] = "<td style=\"background-color: Orange;" + border + "; text-align: center;\">" + pos + "</td>";
                    else
                        s[s.length] = "<td style=\"background-color: White; cursor: pointer;" + border + "; text-align: center;\" onclick=\"displayDays(" + pos + "," + selectedMonth + "," + selectedYear + ")\">" + pos + "</td>";
                }
                pos++;
                rem--;
            }
            for (i = 1; i <= rem; i++)
                s[s.length] = "<td style=\"background-color: Silver;" + border + "; text-align: center;\">&nbsp;</td>";
            s[s.length] = "</tr>\n";
        }
        else {
            var rem2 = 7;
            s[s.length] = "<tr>\n";
            for (i = nPos; i <= (nPos + (days[selectedMonth - 1] - nPos)); i++) {
                if (i == nPos)
                    border = " border-left: solid 1px black; border-bottom: solid 1px black; border-right: solid 1px black;"
                else
                    border = " border-right: solid 1px black; border-bottom: solid 1px black;";
                if ((selectedYear == cYear) && (selectedMonth == (cMonth + 1)) && (pos < cDay)) {
                    s[s.length] = "<td style=\"background-color: Silver;" + border + "; text-align: center;\">" + pos + "</td>";
                }
                else {
                    if (pos == paramDay)
                        s[s.length] = "<td style=\"background-color: Orange;" + border + "; text-align: center;\">" + pos + "</td>";
                    else
                        s[s.length] = "<td style=\"background-color: White; cursor: pointer;" + border + "; text-align: center;\" onclick=\"displayDays(" + pos + "," + selectedMonth + "," + selectedYear + ")\">" + pos + "</td>";
                }
                pos++;
                rem2--;
            }
            for (var x = 1; x <= rem2; x++)
                s[s.length] = "<td style=\"background-color: Silver;" + border + "; text-align: center;\">&nbsp;</td>";
            s[s.length] = "</tr>\n";
        }
        s[s.length] = "</table>\n";
        document.getElementById("c3").innerHTML = s.join("");
    }
    catch (ex) {
        alert(String(ex));
    }
}