/*-------------------------------------------------------------------
 Author:      Albert Mata (www.albertmata.net)
 Date:        20080718
 Description: Old JavaScript calendar I programmed a long time ago. 
-------------------------------------------------------------------*/


/*------------------------------------------------------------------- 
 Attributes.
-------------------------------------------------------------------*/

var monthShown;
var yearShown;
var textboxId;
var firstMonthWeekDay;


/*------------------------------------------------------------------- 
 Draws calendar giving identifiers to each button.
-------------------------------------------------------------------*/
function drawCalendar(txtId) {
    var currentDate;

    textboxId = txtId;

    /* Getting current month and year. */
    currentDate = new Date();
    monthShown = currentDate.getMonth();
    yearShown = currentDate.getFullYear();

    /* Opening HTML table. */
    document.write('<table width="126" bgcolor="#FFFFFF"' 
                 + 'align="center" cellspacing="0" cellpadding="0"'                     
                 + 'border="0">');
    document.write('<tr><td width="6"><img src="http://www.albertmata.net/public/uploads/2008/07/left.gif"' 
                 + 'style="cursor: hand;" onClick="SafeRefill(1);"/>'
                 + '</td><td width="60"><input type="button"' 
                 + 'style="width: 60px; background-color: #FFFFFF;' 
                 + 'font-size: 10px; text-align: center;' 
                 + 'font-family: Arial, Helvetica, sans-serif;' 
                 + 'border: 0px;" id="mth"' 
                 + 'value="'+monthName(monthShown)+'"/></td>'
                 + '<td width="6"><img src="http://www.albertmata.net/public/uploads/2008/07/right.gif"' 
                 + 'style="cursor: hand;" onClick="SafeRefill(2);"/>'
                 + '</td><td width="10"></td><td width="6">'
                 + '<img src="http://www.albertmata.net/public/uploads/2008/07/left.gif" style="cursor: hand;"' 
                 + 'onClick="SafeRefill(3);"/></td>'
                 + '<td width="32"><input type="button"' 
                 + 'style="width: 32px; background-color: #FFFFFF;' 
                 + 'font-size: 10px; text-align: center;' 
                 + 'font-family: Arial, Helvetica, sans-serif;' 
                 + 'border: 0px;" id="yea" value="'+yearShown+'"/>'
                 + '</td><td width="6"><img src="http://www.albertmata.net/public/uploads/2008/07/right.gif"' 
                 + 'style="cursor: hand;" onClick="SafeRefill(4);"/>'
                 + '</td></tr>');
    document.write('<tr><td width="126" colspan="7">');
   
    /* Adding buttons. */
    for (i = 0; i < 42; i++) {
        document.write('<input type="button" style="width: 18px;' 
                     + 'background-color: #FFFFFF; font-size: 10px;' 
                     + 'text-align: center;' 
                     + 'font-family: Arial, Helvetica, sans-serif;' 
                     + 'border: 0px;" id="day' + i + '" value=" "' 
                     + 'onMouseOver="Hover('+i+',1);"' 
                     + 'onMouseOut="Hover('+i+',0);"' 
                     + 'onClick="ShowDate(' + i + ');"/>');
        if (((i+1) % 7) == 0) {
            document.write('<br/>');
        }
    }

    /* Closing HTML table. */   
    document.write('</td></tr>');
    document.write('</table>');

    Refill();
}


/*------------------------------------------------------------------- 
 Prevents possible wrong values for month and refills calendar.
-------------------------------------------------------------------*/
function SafeRefill(action) {
    /* Increasing or decreasing month and year. */
    if (action == 1) { monthShown-- }
    if (action == 2) { monthShown++ }
    if (action == 3) { yearShown-- }
    if (action == 4) { yearShown++ }
   
    /* Moving from January to December. */
    if (monthShown == -1) {
        monthShown = 11;
        yearShown--;
    }
   
    /* Moving from December to January. */
    if (monthShown == 12) {
        monthShown = 0;
        yearShown++;
    }
   
    Refill();
}


/*------------------------------------------------------------------- 
 Redraws calendar when month or year has changed, using identifiers
 previously given to all buttons.
-------------------------------------------------------------------*/
function Refill() {
    var firstMonthDay;
    var lastMonthDay;
    var lastMonthWeekDay;

    /* Getting first month day and weekday. */
    firstMonthDay = new Date(yearShown,monthShown,1);
    firstMonthWeekDay = firstMonthDay.getDay();
    if (firstMonthWeekDay == 0) {
        firstMonthWeekDay = 7;
    } 

    /* Getting last month day and weekday. */
    lastMonthDay = new Date(yearShown,monthShown,
                            monthDays(monthShown,yearShown));
    lastMonthWeekDay = lastMonthDay.getDay();
    if (lastMonthWeekDay == 0) {
        lastMonthWeekDay = 7;
    } 

    /* Clearing all buttons. */
    for (i = 0; i < 42; i++) {
        document.getElementById('day'+i).value = " ";
        document.getElementById('day'+i).style.cursor = 'default';
    }

    /* Giving new values to buttons. */
    for (i = 1; i <= monthDays(monthShown,yearShown); i++) {
        document.getElementById('day'+(i+firstMonthWeekDay-2))
                                              .value = i;
        document.getElementById('day'+(i+firstMonthWeekDay-2))
                                              .style.cursor = 'hand';
    }

    /* Giving new values to month and year buttons. */
    document.getElementById('mth').value = monthName(monthShown);
    document.getElementById('yea').value = yearShown;
}


/*------------------------------------------------------------------- 
 Function to calculate a month's number of days depending on it's a 
 leap year or not. It's a leap year when it can be divided by 4, but
 it's not when it can be divided by 100 as well. And it's a leap
 year again when it can be divided by 100 and by 400.
-------------------------------------------------------------------*/
function monthDays (mm, yyyy) {
    var februaryDays;
    var daysNumber;

    februaryDays = 28;

    /* Deciding number of days for February. */
    if ((yyyy % 4) == 0) {
        if ((yyyy % 100) == 0) {
            if ((yyyy % 400) == 0) { 
                februaryDays = 29;
            } 
        } else { 
            februaryDays = 29;
        }
    } 

    daysNumber = new Array (31, februaryDays, 31, 30, 31, 30, 
                            31, 31, 30, 31, 30, 31);

    /* Returning number of days for selected month and year. */
    return daysNumber[mm];
}


/*------------------------------------------------------------------- 
 Returns month name.
-------------------------------------------------------------------*/
function monthName (mm) {
   var monthNames;

   monthNames = new Array('enero','febrero','marzo','abril',
                          'mayo','junio','julio','agosto',
                          'septiembre','octubre','noviembre',
                          'diciembre');

   return monthNames[mm];
}


/*------------------------------------------------------------------- 
 Customizes mouseOver effects.
-------------------------------------------------------------------*/
function Hover(dd,x) {
    if (document.getElementById('day'+dd).value != " ") {
        if (x == 1) {
            document.getElementById('day'+dd).style.background = 
                                                       '#CCCCFF' 
        } else { 
            document.getElementById('day'+dd).style.background = 
                                                       '#FFFFFF' 
        }
    }
}


/*------------------------------------------------------------------- 
 Returns selected data to textbox.
-------------------------------------------------------------------*/
function ShowDate(dd) {
    var selDay;
    var selMonth;

    /* Formatting day. */
    if ((dd - firstMonthWeekDay + 2) < 10) {
        selDay = '0' + (dd - firstMonthWeekDay + 2);
    } else {
        selDay = (dd - firstMonthWeekDay + 2);
    }

    /* Formatting month. */
    if ((1+monthShown) < 10) {
        selMonth = '0' + (1 + monthShown);
    } else {
        selMonth = (1 + monthShown);
    }

    /* Returning date to textbox. */
    if (document.getElementById('day'+dd).value != ' ' ) { 
        /* Customize this line to change output format!!! */
        document.getElementById(textboxId).value = selDay + '/' 
                                                 + selMonth + '/' 
                                                 + yearShown; 
    }
}