var selectedCell = new Array();
var selectedDate = new Array();
var selectedMonth = new Array();
var selectedYear = new Array();

function selectDate(idComponent, date, month, year) {

  if (selectedCell[idComponent] != null) {
    selectedCell[idComponent].bgColor = '#fbda92';
    selectedCell[idComponent].style.color = '#000000';  
  }

  var cell = document.getElementById(idComponent + "" + date);
  selectedCell[idComponent] = cell;
  selectedDate[idComponent] = date;
  selectedMonth[idComponent] = month;
  selectedYear[idComponent] = year;
  cell.bgColor = '#8fc9ff';
  cell.style.color = '#ffffff';
  
}

function validateCalendar(idMatch, idComponent) {

  var matchHour = document.getElementsByName(idComponent + 'Hour')[0].value;
  var matchMinute = document.getElementsByName(idComponent + 'Minute')[0].value;
  var xhr_object = getXhrObject();
  if (xhr_object == null)
    alert("navigateur incompatible!");
    
  xhr_object.open("POST", "html/ajaxMatch.php5", true);

  xhr_object.onreadystatechange = function() {
    if(xhr_object.readyState == 4)
      eval(xhr_object.responseText);
  }

  xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  var data = "action=saveDate&idMatch=" + idMatch + "&idComponent=" + idComponent + "&dateMatch=" + selectedDate[idComponent] + "&monthMatch=" + (selectedMonth[idComponent]+1) + "&yearMatch=" + selectedYear[idComponent] + "&matchHour=" + matchHour + "&matchMinute=" + matchMinute;
  xhr_object.send(data);

}

function displayCalendar(idMatch, idComponent, ddate, mmonth, yyear, hhour, mminute) {

  //  Attributs du calendrier
  var listOfDays = new Array("Lu","Ma","Me","Je","Ve","Sa","Di");
  var listOfMonths = new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");

  var now = new Date();
  if (yyear != 0)
    now = new Date(yyear, mmonth, ddate);

  var curDate = new Date(now);
  curDate.setDate(1);
  var day = curDate.getDay();
  if (day == 0)
    day = 7;
  var month = curDate.getMonth();
  var year = curDate.getFullYear();
  
  var calendar = "<table class='Calendar'>";  
  var lastMonthDate = new Date(curDate);
  lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
  var nextMonthDate = new Date(curDate);
  nextMonthDate.setMonth(nextMonthDate.getMonth() + 1);
  calendar += "<tr><td class='CalendarMonth' onClick=\"displayCalendar(" + idMatch + ", '" + idComponent + "', " + lastMonthDate.getDate() + ", " + lastMonthDate.getMonth() + ", " + lastMonthDate.getFullYear()
      + ", 0, 0" + ");\">&laquo;</td><td class='CalendarMonth' colspan='5'>" + listOfMonths[month] + " " + year + "</td><td class='CalendarMonth' onClick=\"displayCalendar(" + idMatch + ", '" + idComponent + "', " + nextMonthDate.getDate() + ", " + nextMonthDate.getMonth() + ", " + nextMonthDate.getFullYear() + ", 0, 0" + ");\">&raquo;</td></tr>";

  calendar += "<tr><td class='CalendarDay'>Lu</td><td class='CalendarDay'>Ma</td><td class='CalendarDay'>Me</td><td class='CalendarDay'>Je</td><td class='CalendarDay'>Ve</td><td class='CalendarDay'>Sa</td><td class='CalendarDay'>Di</td></tr>";
  
  calendar += "<tr>";
  for (i = 1; i < day; i++) {
    calendar += "<td></td>";
  }
  

  
  for (i = 1; i <= (8 - day); i++) {
    calendar += "<td id='" + idComponent + "" + i + "' onClick=\"selectDate('" + idComponent + "', " + curDate.getDate() + ", " +  (curDate.getMonth()) + ", " + curDate.getFullYear() + ");\">" + i + "</td>";
    curDate.setDate(curDate.getDate() + 1);
  }
  calendar += "</tr>";

  while (curDate.getMonth() == month) {
    calendar += "<tr>";
    var deb = curDate.getDate();
    while (curDate.getDate() < (deb + 7) && curDate.getMonth() == month) {
      calendar += "<td id='" + idComponent + "" + curDate.getDate() + "' onClick=\"selectDate('" + idComponent + "', " + curDate.getDate() + ", " +  (curDate.getMonth()) + ", " + curDate.getFullYear() + ");\">" + curDate.getDate() + "</td>";
      curDate.setDate(curDate.getDate() + 1);
    }
    calendar += "</tr>";
  }
  calendar += "</table>";
   
  var time = "<table class='CalendarTime' cellspacing='0' cellpadding='0'><tr><td>Heure (hh:mm)&nbsp;<input name='" + idComponent + "Hour' type='text' style='width:20px' maxlength='2'  value='" + hhour + "' onkeypress='validateDate();' /> : <input name='" + idComponent + "Minute' style='width:20px' maxlength='2' value='" + mminute + "' /></td></tr></table>";
    
  var validate = "<input type='image' src='composants/BtnOk.png' title='Valider la date' onClick=\"validateCalendar(" + idMatch + ", '" + idComponent + "');\"/>";

  //  Afficher le calendrier dans Popup
  var width = 280;
  var height = 320; 
  var content = calendar + time + validate;
  showPopup(width, height, "Saisie date/heure", content);
  selectDate(idComponent, now.getDate(), now.getMonth(), now.getFullYear());

}

function validateDate(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    theEvent.preventDefault();
  }
}