/************************************
**         Copyright ©2007         **
**   Written by Sharp Format Ltd   **
**  http://www.sharpformat.co.uk/  **
************************************/
/*
Expanded from the work done by Julian Robichaux -- http://www.nsftools.com
version 1.5, December 4, 2005
*/

var datePickerDivID = "datepicker";
var iFrameDivID = "datepickeriframe";

var dayArray = new Array('Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa');
var dayArrayMed = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
var dayArrayLong = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
var monthArray = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
var monthArrayLong = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
 
var defaultDateSeparator = "/"; // common values would be "/" or "."
var defaultDateFormat = "dmy"; // valid values are "mdy", "dmy", and "ymd"
var dateSeparator = defaultDateSeparator;
var dateFormat = defaultDateFormat;

/**
This is the main function you'll call from the onClick event of a button.
Normally, you'll have something like this on your HTML page:

Start Date: <input name="StartDate">
<input type=button value="select" onclick="displayDatePicker('StartDate');">
*/
function displayDatePicker(dateFieldName, dtFormat, dtSep) {
  var targetDateField = document.getElementsByName (dateFieldName).item(0);
 
  // if a date separator character was given, update the dateSeparator variable
  if (dtSep)
    dateSeparator = dtSep;
  else
    dateSeparator = defaultDateSeparator;
 
  // if a date format was given, update the dateFormat variable
  if (dtFormat)
    dateFormat = dtFormat;
  else
    dateFormat = defaultDateFormat;
 
  var dt = getFieldDate(dateFieldName.value);
  updateDateField(dateFieldName, getDateString(dt));
  //refreshDatePicker(dateFieldName, dt.getFullYear(), dt.getMonth(), dt.getDate());
}

/**
This is the function that actually draws the datepicker calendar.
*/
function refreshDatePicker(dateFieldName, year, month, selectedDate)
{
  // if no arguments are passed, use today's date; otherwise, month and year
  // are required (if a day is passed, it will be highlighted later)
  var thisDay = new Date();
  selectedDate=new Date(selectedDate);

  if ((month >= 0) && (year > 0)) {
    thisDay = new Date(year, month, 1);
  } else {
    day = thisDay.getDate();
    thisDay.setDate(1);
  }
  
  var today=new Date();
  var todayNum = today.getDate();
  
  // you can customize the table elements with a global CSS style sheet,
  // or by hardcoding style and formatting elements below
  var crlf = "\r\n";
  var TD = "<td onMouseOut='this.className=\"dpTD\";' onMouseOver=' this.className=\"dpTDHover\";' "; // leave this tag open, because we'll be adding an onClick event
  var TD_selected = "<td class='dpDayHighlight' onMouseOut='this.className=\"dpDayHighlight\";' onMouseOver='this.className=\"dpTDHover\";' "; // leave this tag open, because we'll be adding an onClick event
 
  // start generating the code for the calendar table
  var html = "<table cols=7 class='dpTable'>";
 
  // this is the title bar, which displays the month and the buttons to
  // go back to a previous month or forward to the next month
  var titleRow = "<tr class='dpTitleTR'>";
  titleRow += "<td>" + getButtonCode(dateFieldName, thisDay, -1, selectedDate, "&lt;") + "</td>";
  titleRow += "<td colspan=5 class='dpTitleTD'><div class='dpTitleText'>" + monthArrayLong[ thisDay.getMonth()] + " " + thisDay.getFullYear() + "</div></td>";
  titleRow += "<td>" + getButtonCode(dateFieldName, thisDay, 1, selectedDate, "&gt;") + "</td>";
  titleRow += "</tr>";
  html+=titleRow;
  
  // this is the row that indicates which day of the week we're on
  var daynamesRow = "<tr class='dpDayTR'>";
  for(i = 0; i < dayArray.length; i++)
    daynamesRow += "<td>" + dayArray[i] + "</td>";
  daynamesRow += "</tr>";
  html+=daynamesRow;
  
  // now we'll start populating the table with days of the month
  var days = "<tr>";
 
  // first, the leading blanks
  for (i = 0; i < thisDay.getDay(); i++)
    days += "<td>&nbsp;</td>";
 
  // now, the days of the month
  do {
    dayNum = thisDay.getDate();
    TD_onclick = " onclick=\"updateDateField('" + dateFieldName + "', '" + getDateString(thisDay) + "');\">";
	
	if (thisDay.getMonth()==today.getMonth()) {
		if (todayNum==dayNum) {
			if (thisDay.getMonth()==selectedDate.getMonth() && selectedDate.getDate()==dayNum) {
				days += "<td class=\"selected today\" " + TD_onclick + dayNum + "</td>";
			} else {
				days += "<td class=\"today\" onMouseOut='this.className=\"today\"' onMouseOver=' this.className=\"dpTDHover\"' " + TD_onclick + dayNum + "</td>";
			}
		} else {
			if (thisDay.getMonth()==selectedDate.getMonth() && dayNum == selectedDate.getDate()) {
				days += "<td class=\"selected\" " + TD_onclick + dayNum + "</td>";
			} else {
				days += TD + TD_onclick + dayNum + "</td>";
			}
		}
	} else if (thisDay.getMonth()==selectedDate.getMonth()) {
		if (dayNum == selectedDate.getDate()) {
			days += "<td class=\"selected\" " + TD_onclick + dayNum + "</td>";
		} else {
			days += TD + TD_onclick + dayNum + "</td>";
		}
	} else {
		days += TD + TD_onclick + dayNum + "</td>";
	}
	
    // if this is a Saturday, start a new row
    if (thisDay.getDay() == 6)
      days += "</tr><tr>";
    
    // increment the day
    thisDay.setDate(thisDay.getDate() + 1);
  } while (thisDay.getDate() > 1)
 
  // fill in any trailing blanks
  if (thisDay.getDay() > 0) {
    for (i = 6; i > thisDay.getDay(); i--)
      days +=  "<td>&nbsp;</td>";
  }
  days += "</tr>";
  html += days;
  
  // add a button to allow the user to easily return to today
  var selectedString = dayArrayMed[selectedDate.getDay()] + ", " + monthArray[selectedDate.getMonth()] + " " + selectedDate.getDate();
  html += "<tr class='dpTodayButtonTR'><td colspan=5>" + selectedString + "</td><td colspan=2 class='dpTodayButtonTD'>";
  html += "<button class='dpTodayButton' onClick='updateDateField(\"" + dateFieldName + "\", \"" + getDateString(today) + "\");'>today</button> ";
  html += "</td></tr>";
 
  // and finally, close the table
  html += "</table>";
  document.getElementById(datePickerDivID).innerHTML = html;
}


/**
Convenience function for writing the code for the buttons that bring us back or forward
a month.
*/
function getButtonCode(dateFieldName, dateVal, adjust, selectedDate, label)
{
  var newMonth = (dateVal.getMonth () + adjust) % 12;
  var newYear = dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12);
  if (newMonth < 0) {
    newMonth += 12;
    newYear += -1;
  }
 
  return "<input type='button' class='dpButton' onClick='refreshDatePicker(\"" + dateFieldName + "\", " + newYear + ", " + newMonth + ", \"" + selectedDate + "\");' value='" + label + "' />";
}


/**
Convert a JavaScript Date object to a string, based on the dateFormat and dateSeparator
variables at the beginning of this script library.
*/
function getDateString(dateVal)
{
  var dayString = "00" + dateVal.getDate();
  var monthString = "00" + (dateVal.getMonth()+1);
  dayString = dayString.substring(dayString.length - 2);
  monthString = monthString.substring(monthString.length - 2);
 
  switch (dateFormat) {
    case "dmy" :
      return dayString + dateSeparator + monthString + dateSeparator + dateVal.getFullYear();
    case "ymd" :
      return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString;
    case "mdy" :
    default :
      return monthString + dateSeparator + dayString + dateSeparator + dateVal.getFullYear();
  }
}


/**
Convert a string to a JavaScript Date object.
*/
function getFieldDate(dateString)
{
  var dateVal;
  var dArray;
  var d, m, y;
 
  try {
    dArray = splitDateString(dateString);
    if (dArray) {
      switch (dateFormat) {
        case "dmy" :
          d = parseInt(dArray[0], 10);
          m = parseInt(dArray[1], 10) - 1;
          y = parseInt(dArray[2], 10);
          break;
        case "ymd" :
          d = parseInt(dArray[2], 10);
          m = parseInt(dArray[1], 10) - 1;
          y = parseInt(dArray[0], 10);
          break;
        case "mdy" :
        default :
          d = parseInt(dArray[1], 10);
          m = parseInt(dArray[0], 10) - 1;
          y = parseInt(dArray[2], 10);
          break;
      }
      dateVal = new Date(y, m, d);
    } else if (dateString) {
      dateVal = new Date(dateString);
    } else {
      dateVal = new Date();
    }
  } catch(e) {
    dateVal = new Date();
  }
 
  return dateVal;
}


/**
Try to split a date string into an array of elements, using common date separators.
If the date is split, an array is returned; otherwise, we just return false.
*/
function splitDateString(dateString)
{
  var dArray;
  if (dateString.indexOf("/") >= 0)
    dArray = dateString.split("/");
  else if (dateString.indexOf(".") >= 0)
    dArray = dateString.split(".");
  else if (dateString.indexOf("-") >= 0)
    dArray = dateString.split("-");
  else if (dateString.indexOf("\\") >= 0)
    dArray = dateString.split("\\");
  else
    dArray = false;
 
  return dArray;
}

/**
Update the field with the given dateFieldName with the dateString that has been passed,
and hide the datepicker. If no dateString is passed, just close the datepicker without
changing the field value.
*/
function updateDateField(dateFieldName, dateString)
{
  var targetDateField = document.getElementsByName (dateFieldName).item(0);
  if (dateString)
    targetDateField.value = dateString;
 
  var dt = getFieldDate(dateString);
  refreshDatePicker(dateFieldName, dt.getFullYear(), dt.getMonth(), dt);
}