// JavaScript Document
/**
 * Ride Leader Calendar Scripts
 * Sacrament Bike Hikers
 * File: formCalendar.js
 * Date: Dec. 14, 2009
 * Version: 1.04   
 * 
 * Discription **********************************************
 * This scrip fills in a calendar for the scheduling of
 * bike rides in the future. (Up to one year in the future)
 * It then passes the selection date to the ride description
 * form as a hidden field.
 *   
 ************************************************************     
 *Copyright 2009 by Big Bear Studios   
 *
 * These scripts require the support file "Core.js"
 * 
 * These scripts assumes:
 *      "calTable" - ID of the calendar table
 *      "selMonth" - ID of the Month Selection widge
 *    "targetDate" - ID, span element to display the selected date
 *      "formDate" - ID, form input field* for the full date  
 *       "rideDay" - ID, form input field* for the day of the week, e.g. "MON"
 *      "rideDate" - ID, form input field* for the date of the ride, e.g. 1-31
 *        
 *                *formDate, rideDay, & rideDate are all hidden form fields 
 *    
 *    Classes:
 *         cellClear - cell without a date
 *          cellDate - cell with a date
 *      cellSelected - selected date cell
 *         cellHover - cell with date, mouse hovering
 *
 *    
 *               
 */
 
 var nDays = new Array("SUN","MON","TUE","WED","THU","FRI","SAT");
 var nDaysLong = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
 var nMonths = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
 var nMonthsL = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
 
 
 // BUILD CALENDAR
 //    
 //    Argument "M" the selected month (0-11) from the "selMonth" widget
 //    This functions clears all the table cells (that is cells 7-48), cells 0-6 hold Sun...Sat
 //    Then it writes in the dates into the calendar table
 //    "onclick" events are added to all dates
 //
 function buildCalendar(M)
{
  var spacer = "\240"; // non-breaking space character ($nbsp) for blank table cells
  var calTable = document.getElementById("calTable"); // get the calendar Table
  var cells = calTable.getElementsByTagName("td"); // get all the table cells, there are 49 cells
  var selectedMonth = M;// the currently selected month ... 0-11
  var selectedYear = rideYear(selectedMonth); // this year or next year
  M++; // add one to "M" so the Date function works properly ... 1-12
  var selectedDate = new Date(M + "/1/" + selectedYear);
  var oldCell = null; // this is the current selected cell
  var dstr = selectedDate.toDateString(); // temp variable, see line 61
  
  newMonthSel();
  clearCells();
  setDates();
  // test only code below...
  //  this code displays the selectedDate in the <span> object with ID "rideDate"
  //var rdDate = document.getElementById("rideDate");
  //var nt = document.createTextNode(dstr);
  //var ot = rdDate.firstChild;
  //rdDate.replaceChild(nt,ot);
  // end of test code ...
  // ********************** end of buildCalendar() ***************
 
 
 
  // NEW MONTH SELECTED
  //   function sets the span "theMonth" is the Month & Year "June - 2010",
  //   clears the form elements (rideDay & rideDate) and places a message
  //   in the span element "targetDate"
  function newMonthSel()
  {
    
    // clear the span element "targetDate"
    var rdField = document.getElementById("targetDate");
    nTxt = document.createTextNode("Pick a Date");
    oTxt = rdField.firstChild;
    rdField.replaceChild(nTxt,oTxt);
    
    // Clear the form element "formDate"
    var frmDate = document.getElementById("formDate");
    frmDate.value = null;
    
    // clear the from element "rideDay"
    var frmDOW = document.getElementById("rideDay");
    frmDOW.value = null;
    
    // clear the form element "rideDate"
    var frmDOM = document.getElementById("rideDate");
    frmDOM.value = null;
  } // newMonthSel()
 
  
  // RIDE YEAR
  // calculate the current year. if the selected date's month ("dt") is less 
  // than the current month, then set the year to current year plus one else
  // just return the current year.
  function rideYear(mon)
  {
    var today = new Date();
    var Yr = today.getFullYear(); 
    
    if (mon <= today.getMonth())
    {
      Yr++;
    } // if
    return Yr
  } // rideYear()
 
  
  // DAYS IN THE MONTH
  // Argument "dt" (type Date) - The days in the month are calculated based on this date
  // function RETURNs the number of days in the selected month
  // calculate the number of days in the selected month including leap year
  function daysInMonth(dt)
  {
    var thisYear = dt.getFullYear();
    var daysAr = [31,28,31,30,31,30,31,31,30,31,30,31];
    var M = dt.getMonth();
    var numDays = daysAr[M]; // days in the selected month
    
    rem = thisYear % 4;
    
    // if leap year then add one day
    if ((rem == 0)&&(M == 2))
    {
      numDays++;
    } // if rem
    
    return numDays;
  } // daysInMonth()
 
 
 
  // DATE SET
  //   This function populates the ride description form with the day of
  //   the week (SUN...SAT), the date of the ride (1-31), and it fills in
  //   a non-form element, a span element, with the full date (Sun Jun 1 2010)
  //
  //   Arguments:
  //      dt (date) the is the first day of the month
  //      dx (number) this is the day of the month
  function dateSet(dt,dx)
  {
    var ndate = new Date(dt.getFullYear(),dt.getMonth(),dx); // ride date
    var dsDy = ndate.getDay();
    var dsM = ndate.getMonth();
    var dsY = ndate.getFullYear();
    var rd = nDaysLong[dsDy] + ", " + nMonths[dsM] + ". " + dx + ", " + dsY;
    var nTxt = document.createTextNode(rd);
    
    // get the span element "targetDate" and display the date
    var rdField = document.getElementById("targetDate");
    var oTxt = rdField.firstChild;
    rdField.replaceChild(nTxt,oTxt);
    
    // Update the form element "formDate". Example: "Sunday, June 1, 2010"
    var frmDate = document.getElementById("formDate");
    frmDate.value = rd;
    
    // update the from element "rideDay", (SUN-SAT)
    var frmDOW = document.getElementById("rideDay");
    frmDOW.value = nDays[ndate.getDay()];
    
    // update the form element "rideDate",(1-31)
    var frmDOM = document.getElementById("rideDate");
    frmDOM.value = dx;
  } // dateString()
  
  
  
  // CLEAR CELLS
  // function clears all the date cells in the table (calendar)
  function clearCells()
  {
    for(i=7; i<cells.length; i++)
    {
      var newTxt = document.createTextNode(spacer);
      var oldTxt = cells[i].firstChild;
      cells[i].replaceChild(newTxt,oldTxt);
      cells[i].onclick = null;
      cells[i].onmouseover = null;
      cells[i].onmouseout = null;
      cells[i].className = "cellClear";
    } // for loop
  }// clearCells()
 
  
  // LAY IN DATES
  function setDates()
  {
	
    var calendarStart = 7 + selectedDate.getDay();
    var calendarStop = calendarStart + daysInMonth(selectedDate);
    var dateX = 1; // the calendar date index ... 1 - 31
    
    for(i=calendarStart; i<calendarStop; i++)
    {
      var newTxt = document.createTextNode(dateX); // current date
      var oldTxt = cells[i].firstChild;
      
      cells[i].replaceChild(newTxt,oldTxt);
      cells[i].className = "cellDate";
      cells[i].onclick = function()
            {
              dateSet(selectedDate,this.innerHTML)
              
              // set and clear background cells as selected cell changes
              if (oldCell != null)
                oldCell.className = "cellDate";
              this.className = "cellSelected";
              oldCell = this;
            } // onclick
      cells[i].onmouseover = function()
            {
              if (this.className != "cellSelected")
                this.className = "cellHover";
            } // onmouseover
      cells[i].onmouseout = function()
            {
              if (this.className != "cellSelected")
                this.className = "cellDate";
            } //onmouseout
      dateX++;
      
    } // for loop
  } // setDates()
  
}// buildCalendar()



// LISTENER ROUTINES
// This code only loads after the page is loaded
var monthChange =
{
  init: function()
  {
	 var tempdate = new Date(); // get the current Date
	 var startMonth = tempdate.getMonth(); // get the current Month
     var dropDown = document.getElementById("selMonth"); // get the dropdown widget object
	 dropDown.selectedIndex = startMonth; // get the current month in the dropdown widget
     Core.addEventListener(dropDown, 'change', monthChange.dropDownListener);
	 buildCalendar(startMonth); // build the intial calendar using the current month
  },  
  dropDownListener: function(event)
  {
    //alert("Selected Month Number is: "+ this.selectedIndex);
	buildCalendar(this.selectedIndex);
  } // submitListener function
}

Core.start(monthChange);