/*************************************** Transformation des select en ul/li **************************************/

// Copyright (c) 2006 - 2007 Gabriel Lanzani (http://www.glanzani.com.ar)
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// SEE CHANGELOG FOR A COMPLETE CHANGES OVERVIEW
// VERSION 0.3

Autocompleter.SelectBox = Class.create();
Autocompleter.SelectBox.prototype = Object.extend(new Autocompleter.Base(), {
  initialize: function(select, options) {
    this.element = "<input type=\"text\" id=\"" + $(select).id + "_combo\" />"
    new Insertion.Before(select, this.element)
    var inputClasses = Element.classNames(select);
    inputClasses.each(function(inputClass)
        {
            Element.addClassName($(select).id + "_combo", inputClass);
        });

    this.update = "<div id=\"" + $(select).id + "_options\" class=\"autocomplete\"></div>"
    new Insertion.Before(select, this.update)


    this.baseInitialize($(select).id + "_combo", $(select).id + "_options", options);
    this.select = select;
    this.selectOptions = [];

    $(this.element.id).setAttribute('readonly','readonly');
    this.element.readOnly = true;
    if(this.options.debug)alert('input ' + this.element.id + ' and div '+ this.update.id + ' created, Autocompleter.Base() initialized');
    if(!this.options.debug)Element.hide(select);

    var optionList = $(this.select).getElementsByTagName('option');
    var nodes = $A(optionList);

    for(i=0; i<nodes.length;i++){
        if( $(select).id == "city" )
        {
            this.selectOptions.push("<li id=\"" + nodes[i].value + "\" onclick=\"return goToUrl('"+nodes[i].value+"');\">" + nodes[i].innerHTML + '</li>');
        }
        else
        {
            this.selectOptions.push("<li id=\"" + nodes[i].value + "\" onclick=\"clic_elem();\">" + nodes[i].innerHTML + '</li>');
        }

        if (nodes[i].getAttribute("selected")) this.element.value = nodes[i].innerHTML;

        if(this.options.debug)alert('option ' + nodes[i].innerHTML + ' added to '+ this.update.id);
    }

    Event.observe(this.element, "click", this.activate.bindAsEventListener(this));

    if ($(select).selectedIndex >= 0)this.element.value = $(select).options[$(select).selectedIndex].innerHTML;

    var self = this;
    this.options.afterUpdateElement = function(text, li) {
        var optionList = $(select).getElementsByTagName('option');
        var nodes = $A(optionList);

        var opt = nodes.find( function(node){
            return (node.value == li.id);
        });
        $(select).selectedIndex=opt.index;

        // [AJOUT SEB] simulation du submit sur onchange du select de "nos residences"
        if( $('form_fiche_residence') )
        {
            $('form_fiche_residence').submit();
        }
        // [FIN AJOUT SEB]

        if( typeof( combo_type_appart ) != 'undefined')
        {

            // [AJOUT SEB] si on selectionne une ville, on met a jour
            // la liste des appartements correspondants
            if ($(select).id == "ville") {
                combo_type_appart.updateTypeAppart(opt.value, "");
            }
            // si on selectionne un type d'appartement, on met a jour
            // le libelle de l'appartement pour le transmettre a l'etape 2
            if ($(select).id == "type_appart") {
                $('roomdesc').value = opt.text;
            }
            // [FIN AJOUT SEB]

        }
        
        if( typeof( combo_nb_adultes ) != 'undefined')
        {

            // [AJOUT STEPH] si on selectionne un type d'appartement, on met a jour
            // la liste de choix du nombre d'adultes
            if ($(select).id == "type_appart") {
              
               combo_nb_adultes.updateListePersonnes($('nb_adultes'),opt.value,1);
                
            }
            // [FIN AJOUT STEPH]

        }
        

        if( typeof( combo_nb_enfants ) != 'undefined')
        {

            // [AJOUT STEPH] si on selectionne un type d'appartement, on met a jour
            // la liste de choix du nombre d'enfants
            if ($(select).id == "type_appart") {
              
               combo_nb_enfants.updateListePersonnes($('nb_enfants'),opt.value,0);
                
            }
            // [FIN AJOUT STEPH]

        }

        if(self.options.redirect) document.location.href = opt.value;
        if(self.options.autoSubmit)
            $(self.options.autoSubmit).submit;
    }
  },

  getUpdatedChoices: function() {
        this.updateChoices(this.setValues());
  },

  setValues : function(){
        return ("<ul>" + this.selectOptions.join('') + "</ul>");
  },

  // [AJOUT SEB] fonction pour mettre a jour la liste des appartements
  // en fonction de la ville selectionnee (ville_id)
  // cette fonction preselectionne egalement un appartement si
  // roomtypecode_value est renseigne
  updateTypeAppart: function(ville_id, roomtypecode_value) {

//        alert("mise a jour des types d'appartements ville_id[" + ville_id + "][" + roomtypecode_value + "]");

        var type_appart = $('type_appart');
        var ville = $('ville');
        
        // par defaut, libelles en francais
        var libStudio = "Studio";
        var libT1 = "Suite";
        var libT2 = "Suite Deluxe";
        var libStudioSup = "Studio Supérieur";
        var libT1Sup = "Suite Supérieure";
        var libSelect = "";
        
        // libellé de la valeur vide
        if (type_appart.options[0]){
          libSelect = type_appart.options[0].text;
        }

        // la variable userLang est definie dans le template Freemarker de l'etape 1 de la reservation
        // et dans les JSP de la home et de la colonne de droite
        if (userLang == 'en') {
            libStudio = "Studio";
            libT1 = "Suite";
            libT2 = "\"Deluxe\" Suite";
            libStudioSup = "Executive Studio";
            libT1Sup = "Executive Suite";
        }

        // Init
        type_appart.length = 1;
        var index = 0;
        // 476312 - Romuald AHUNON - 14/10/2010 date par défaut en fonction de l'ouverture de la ville
        document.getElementById('date_init').value = '';
        document.getElementById('date_arrivee_init').value = '';

        // Grenoble c_5410
        if (ville_id == "c_5410") {
            type_appart.length = 6;
            type_appart.options[0] = new Option(libSelect, "");
            //type_appart.options[1] = new Option(libStudio, "STD"); if ("STD" == roomtypecode_value) { index = 1 };
            //type_appart.options[2] = new Option(libStudioSup, "STDX2"); if ("STDX2" == roomtypecode_value) { index = 2 };
            //type_appart.options[3] = new Option(libT1, "SUI"); if ("SUI" == roomtypecode_value) { index = 3 };            
            //type_appart.options[4] = new Option(libT1Sup, "SUIX2"); if ("SUIX2" == roomtypecode_value) { index = 4 };
            //type_appart.options[5] = new Option(libT2, "SDL"); if ("SDL" == roomtypecode_value) { index = 5 };
            type_appart.options[1] = new Option(libStudio, "S2K"); if ("S2K" == roomtypecode_value) { index = 1 };            
            type_appart.options[2] = new Option(libStudioSup, "S1K"); if ("S1K" == roomtypecode_value) { index = 2 };
            type_appart.options[3] = new Option(libT1, "A1K"); if ("A1K" == roomtypecode_value) { index = 3 };            
            type_appart.options[4] = new Option(libT1Sup, "C1K"); if ("C1K" == roomtypecode_value) { index = 4 };
            type_appart.options[5] = new Option(libT2, "B1K"); if ("B1K" == roomtypecode_value) { index = 5 };
            //document.getElementById('date_init').value = new Date();
            //document.getElementById('date_arrivee_init').value = document.getElementById('date_init').value;
        }

        // Nice c_6467
        if (ville_id == "c_6467") {
            type_appart.length = 6;
            type_appart.options[0] = new Option(libSelect, "");
            type_appart.options[1] = new Option(libStudio, "S2K"); if ("S2K" == roomtypecode_value) { index = 1 };
            type_appart.options[2] = new Option(libStudioSup, "S1K"); if ("S1K" == roomtypecode_value) { index = 2 };
            type_appart.options[3] = new Option(libT1, "A1K"); if ("A1K" == roomtypecode_value) { index = 3 };
            type_appart.options[4] = new Option(libT1Sup, "C1K"); if ("C1K" == roomtypecode_value) { index = 4 };
            type_appart.options[5] = new Option(libT2, "B1K"); if ("B1K" == roomtypecode_value) { index = 5 };
            // 476312 - Romuald AHUNON - 14/10/2010 date par défaut en fonction de l'ouverture de la ville
            //document.getElementById('date_init').value = '01/12/2010';            
            //if (Date.parse(getFieldDate( ville.options[ville.options.selectedIndex].label)) > Date.parse(new Date())) {
            //  document.getElementById('date_init').value = ville.options[ville.options.selectedIndex].label; //ville.options['c_6467'].label;  
            //} else {
            //   document.getElementById('date_init').value = new Date();
            //}
            //document.getElementById('date_arrivee_init').value = document.getElementById('date_init').value;
        }
        
        // Marseille c_8185
        if (ville_id == "c_8185") {
            type_appart.length = 3;
            type_appart.options[0] = new Option(libSelect, "");
            type_appart.options[1] = new Option(libStudio, "S2K"); if ("S2K" == roomtypecode_value) { index = 1 };
            type_appart.options[2] = new Option(libT1, "A1K"); if ("A1K" == roomtypecode_value) { index = 2 };
            // 476312 - Romuald AHUNON - 14/10/2010 date par défaut en fonction de l'ouverture de la ville            
            //document.getElementById('date_init').value = ville.options[ville.options.selectedIndex].label; //'15/03/2011';
            //document.getElementById('date_arrivee_init').value = document.getElementById('date_init').value;
        }
        
        // 476312 - Romuald Ahunon - 09/12/2010 - Date max entre ouverture et date du jour
         if (Date.parse(getFieldDate( ville.options[ville.options.selectedIndex].label)) > Date.parse(new Date())) {
              document.getElementById('date_init').value = ville.options[ville.options.selectedIndex].label; //ville.options['c_6467'].label;  
            } else {
               document.getElementById('date_init').value = new Date();
            }
            document.getElementById('date_arrivee_init').value = document.getElementById('date_init').value;

        type_appart.selectedIndex = index;

        // mise a jour de la liste d'options, pompee sur le code lignes 52-60
        this.selectOptions = [];
        var optionList = type_appart.getElementsByTagName('option');
        var nodes = $A(optionList);
        for(i=0; i<nodes.length;i++){
            this.selectOptions.push("<li id=\"" + nodes[i].value + "\" onclick=\"clic_elem();\">" + nodes[i].innerHTML + '</li>');
            if (nodes[i].getAttribute("selected")) this.element.value = nodes[i].innerHTML;
        }

        this.getUpdatedChoices();
  },
  // [FIN AJOUT SEB]

  // [AJOUT STEPH] fonction pour mettre a jour la liste 'nombres d'adultes' ou 'nombres d'enfants'
  // en fonction du type d'appartement selectionne 
  // cette fonction preselectionne egalement un nombre si value est renseigne
  updateListePersonnes: function(field, type_appart, startValue) {

//       alert("mise a jour des nombres de personnes field[" + field.name + "][" + type_appart + "][" + startValue + "]");

       // Init
        var nb_value = field.value;       
        var index = 0;
        var tmpIndex = 0;
        
        if (startValue==0){
            field.options[tmpIndex] = new Option("0", "0"); if ("0" == nb_value) { index = tmpIndex }; tmpIndex++;          
        }
        
        // Tout type d'appartement
        if (type_appart == "" || type_appart == "S2K" || type_appart == "S1K" || type_appart == "A1K" || type_appart == "B1K" || type_appart == "C1K" || type_appart == "STDX2"  || type_appart == "STD"   || type_appart == "SUI" || type_appart == "SDL" || type_appart == "SUIX2") {
            field.options[tmpIndex] = new Option("1", "1"); if ("1" == nb_value) { index = tmpIndex }; tmpIndex++;          
            field.options[tmpIndex] = new Option("2", "2"); if ("2" == nb_value) { index = tmpIndex }; tmpIndex++;          
        }

        // Suite et Suite deluxe
        if (type_appart == "" || type_appart == "A1K" || type_appart == "B1K" || type_appart == "C1K"  || type_appart == "SUI" || type_appart == "SDL" || type_appart == "SUIX2") {
            field.options[tmpIndex] = new Option("3", "3"); if ("3" == nb_value) { index = tmpIndex }; tmpIndex++;          
            field.options[tmpIndex] = new Option("4", "4"); if ("4" == nb_value) { index = tmpIndex }; tmpIndex++;          
        }

        // Suite deluxe
        if (type_appart == "" || type_appart == "B1K" || type_appart == "SDL") {
            field.options[tmpIndex] = new Option("5", "5"); if ("5" == nb_value) { index = tmpIndex }; tmpIndex++;          
            field.options[tmpIndex] = new Option("6", "6"); if ("6" == nb_value) { index = tmpIndex }; tmpIndex++;          
        }

        field.length = tmpIndex;
        field.selectedIndex = index;

        // mise a jour de la liste d'options, pompee sur le code lignes 52-60
        this.selectOptions = [];
        var optionList = field.getElementsByTagName('option');
        var nodes = $A(optionList);
        for(i=0; i<nodes.length;i++){
          this.selectOptions.push("<li id=\"" + nodes[i].value + "\" onclick=\"clic_elem();\">" + nodes[i].innerHTML + '</li>');
          if (nodes[i].getAttribute("selected")) this.element.value = nodes[i].innerHTML;
        }

        this.getUpdatedChoices();
  }
  
})

function clic_elem() {
    if (document.getElementById("cachable"))
        document.getElementById("cachable").style.display = 'block';
}

function goToUrl( url )
{
    if( url != "" )
    {
        window.location = url;
    }
    return false;
}
/*************************************************** Date Picker *************************************************/

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

// par defaut, libelles en francais
var dayArrayShort = new Array("Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di");
var dayArrayMed = new Array("Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim");
var dayArrayLong = new Array("Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche");
var monthArrayShort = new Array("Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec");
var monthArrayMed = new Array("Janv", "Fevr", "Mars", "Avri", "Mai", "Juin", "Juil", "Aout", "Sept", "Oct", "Nov", "Dec");
var monthArrayLong = new Array("Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre");

// these variables define the date formatting we're expecting and outputting.
// If you want to use a different format by default, change the defaultDateSeparator
// and defaultDateFormat variables either here or on your HTML page.
var defaultDateSeparator = "/";        // common values would be "/" or "."
var defaultDateFormat = "dmy"    // valid values are "mdy", "dmy", and "ymd"
var dateSeparator = defaultDateSeparator;
var dateFormat = defaultDateFormat;

// par defaut, libelles en francais
var lienMoisActuel = "Mois actuel";
var lienFermer = "Fermer"

function displayDatePicker(dateFieldName, dateInitFieldName, displayBelowThisObject, dtFormat, dtSep)
{
  var targetDateField = document.getElementsByName(dateFieldName).item(0);

  // Date d'initialisation
  var initDateField;
  if (dateInitFieldName)
    initDateField = document.getElementsByName(dateInitFieldName).item(0);
    
  // if we weren't told what node to display the datepicker beneath, just display it
  // beneath the date field we're updating
  if (!displayBelowThisObject)
    displayBelowThisObject = targetDateField;

  // 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;

    // [AJOUT SEB] calendrier en anglais
    // la variable userLang est definie dans le template Freemarker de l'etape 1 de la reservation
    // et dans les JSP de la home et de la colonne de droite
    if (userLang == 'en') {
        dayArrayShort = new Array("Mo", "Tu", "We", "Th", "Fr", "Sa", "Su");
        dayArrayMed = new Array("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");
        dayArrayLong = new Array("Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday");
        monthArrayShort = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
        monthArrayMed = new Array("Janu", "Febr", "Mar", "Apri", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec");
        monthArrayLong = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
        lienMoisActuel = "Current month";
        lienFermer = "Close";
    }
    // [FIN AJOUT SEB]

  var x = displayBelowThisObject.offsetLeft;
  var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ;

  // deal with elements inside tables and such
  var parent = displayBelowThisObject;
  while (parent.offsetParent) {
    parent = parent.offsetParent;
    x += parent.offsetLeft;
    y += parent.offsetTop ;
  }

  drawDatePicker(targetDateField, dateInitFieldName, x, y);
}

function drawDatePicker(targetDateField, dateInitFieldName, x, y)
{
  
  // the datepicker table will be drawn inside of a <div> with an ID defined by the
  // global datePickerDivID variable. If such a div doesn't yet exist on the HTML
  // document we're working with, add one.
  if (!document.getElementById(datePickerDivID)) {
    // don't use innerHTML to update the body, because it can cause global variables
    // that are currently pointing to objects on the page to have bad references
    //document.body.innerHTML += "<div id='" + datePickerDivID + "' class='dpDiv'></div>";
    var newNode = document.createElement("div");
    newNode.setAttribute("id", datePickerDivID);
    newNode.setAttribute("class", "dpDiv");
    newNode.setAttribute("style", "visibility: hidden;");
    document.body.appendChild(newNode);
  }
  
  // move the datepicker div to the proper x,y coordinate and toggle the visiblity
  var pickerDiv = document.getElementById(datePickerDivID);
  pickerDiv.style.position = "absolute";
  pickerDiv.style.left = x + "px";
  pickerDiv.style.top = y + "px";
  pickerDiv.style.visibility = (pickerDiv.style.visibility == "visible" ? "hidden" : "visible");
  pickerDiv.style.display = (pickerDiv.style.display == "block" ? "none" : "block");
  pickerDiv.style.zIndex = 10000;

  // draw the datepicker table
  var dt;
  // test inutile maintenant que la date arrivée possède une date d'initialisation
  //if (dateInitFieldName){ // && dateInitFieldName=='date_arrivee_init'
    initDateField = document.getElementsByName(dateInitFieldName).item(0);
    dt = initDate(targetDateField, initDateField);
  //} else {
  //  initDateField = document.getElementsByName(dateInitFieldName).item(0);
  //  dt = initDate(targetDateField, initDateField);
  //} 
  refreshDatePicker(targetDateField.name, dt.getFullYear(), dt.getMonth(), dt.getDate(), dateInitFieldName);  
}

function initDate(targetDateField, initDateField){

  var dt;

  // valeur saisie vide ?
  if (Date.parse(targetDateField.value)){
    
     dt = getFieldDate(targetDateField.value); 

     //if (initDateField){ // Ce test n'est plus correct, car la date arrivée possède dorenavant une date d'initialisation
     //if (dateInitFieldName){
     //if (targetDateField.name=='date_depart') {
       
      //  dt2 = getFieldDate(initDateField.value);
        
        // Décaler la date à la valeur initiale ( minimale ) + 1 jour
      //  if ( dt2 > dt ){
      //    dt = dt2;
      //    dt.setDate(dt.getDate()+1);
      //  }
       
    // }

  } else {

    if (initDateField && initDateField.value != ''){ // 476312 - Romuald AHUNON - Initialisation si date vide
      dt = getFieldDate(initDateField.value);
    } else {
      dt = new Date();
    }
    
    // Date d'arrivée ou date de départ ?
    if (targetDateField.name=='date_depart'){
        
        // Ajouter un jour  
        dt.setDate(dt.getDate()+1);
    }
            
  }

  return dt;
}

function refreshDatePicker(dateFieldName, year, month, day, dateInitFieldName)
{
  
  // 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();
  if ((month >= 0) && (year > 0)) {
    thisDay = new Date(year, month, 1);
  } else {
//    day = thisDay.getDate();
    thisDay.setDate(1);
  }
  
  // Recalculer day
  if (day==0){
    var dt;
    var targetDateField = document.getElementsByName(dateFieldName).item(0);
    if (dateInitFieldName){
      initDateField = document.getElementsByName(dateInitFieldName).item(0);
      dt = initDate(targetDateField, initDateField);
    } else {
      initDateField = document.getElementsByName(dateInitFieldName).item(0);
      dt = initDate(targetDateField,initDateField);
    }
    if (thisDay.getYear()==dt.getYear() && thisDay.getMonth()==dt.getMonth()){
      day = dt.getDate();
    }
  }  
  
  
  // Date d'arrivée ou date de départ ? // 476312 - Romuald AHUNON - 19/10/2010 - Correction bug pour le grisé
  var initDay = getFieldDate('');
  //if (dateFieldName=='date_depart'){
  if (dateInitFieldName){
    initDateField = document.getElementsByName(dateInitFieldName).item(0);
    if (initDateField){
      initDay = getFieldDate(initDateField.value);
      if (dateFieldName=='date_depart'){
        // Ajouter un jour  
        initDay.setDate(initDay.getDate()+1);
      }
    }
  }
  
   
  //alert('initDay:' + initDay.getDate());
  
  // the calendar will be drawn as a table
  // 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 TABLE = "<table cols=7 class='dpTable'>" + crlf;
  var xTABLE = "</table>" + crlf;
  var TR = "<tr class='dpTR'>";
  var TR_title = "<tr class='dpTitleTR'>";
  var TR_days = "<tr class='dpDayTR'>";
  var TR_todaybutton = "<tr class='dpTodayButtonTR'>";
  var xTR = "</tr>" + crlf;
  var TD = "<td class='dpTD' onMouseOut='this.className=\"dpTD\";' onMouseOver=' this.className=\"dpTDHover\";' ";    // leave this tag open, because we'll be adding an onClick event
  var TD_inactive = "<td class='dpTD'>";
  var TD_title = "<td colspan=5 class='dpTitleTD'>";
  var TD_buttons = "<td class='dpButtonTD'>";
  var TD_todaybutton = "<td colspan=7 class='dpTodayButtonTD'>";
  var TD_days = "<td class='dpDayTD'>";
  var TD_selected = "<td class='dpDayHighlightTD' onMouseOut='this.className=\"dpDayHighlightTD\";' onMouseOver='this.className=\"dpTDHover\";' ";    // leave this tag open, because we'll be adding an onClick event
  var xTD = "</td>" + crlf;
  var DIV_title = "<div class='dpTitleText'>";
  var DIV_selected = "<div class='dpDayHighlight'>";
  var DIV_inactive = "<div class='dpDayInactive'>";  
  var xDIV = "</div>";

  // start generating the code for the calendar table
  var html = TABLE;

  // 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
  html += TR_title;
  html += TD_buttons + getButtonCode(dateFieldName, thisDay, -1, "&lt;", dateInitFieldName) + xTD;
  html += TD_title + DIV_title + monthArrayLong[ thisDay.getMonth()] + " " + thisDay.getFullYear() + xDIV + xTD;
  html += TD_buttons + getButtonCode(dateFieldName, thisDay, 1, "&gt;", dateInitFieldName) + xTD;
  html += xTR;
  
  // this is the row that indicates which day of the week we're on
  html += TR_days;
  for(i = 0; i < dayArrayShort.length; i++)
    html += TD_days + dayArrayShort[i] + xTD;
  html += xTR;

  // now we'll start populating the table with days of the month
  html += TR;
 var getDay;
 if (thisDay.getDay()==0)
    getDay = 6
 else
    getDay = thisDay.getDay()-1;

  // first, the leading blanks
  for (i = 0; i < getDay; i++) {
    html += TD_inactive + "&nbsp;" + xTD;
  }
  // now, the days of the month
  do {
    dayNum = thisDay.getDate();
    TD_onclick = " onclick=\"updateDateField('" + dateFieldName + "', '" + getDateString(thisDay) + "');\">";

    if (dayNum == day)
      html += TD_selected + TD_onclick + DIV_selected + dayNum + xDIV + xTD;
    else {
      if ( thisDay < initDay ){
        html += TD_inactive + DIV_inactive + dayNum + xDIV + xTD;     
      } else {
        html += TD + TD_onclick + dayNum + xTD;        
      }
    }

     var tDay;
     if (thisDay.getDay()==0)
        tDay = 6
     else
        tDay = thisDay.getDay()-1;

    // if this is a Saturday, start a new row
    if (tDay == 6)
      html += xTR + TR;

    // increment the day
    thisDay.setDate(thisDay.getDate() + 1);
  } while (thisDay.getDate() > 1)

  // fill in any trailing blanks
  if (thisDay.getDay() > 0) {
    for (i = 7; i > thisDay.getDay(); i--)
      html += TD_inactive + "&nbsp;" + xTD;
  }
  html += xTR;

  // add a button to allow the user to easily return to today, or close the calendar
  var today = new Date();
  var todayString = "Today is " + dayArrayMed[today.getDay()] + ", " + monthArrayMed[ today.getMonth()] + " " + today.getDate();
  html += TR_todaybutton + TD_todaybutton;
  html += "<button class='dpTodayButton' onClick='refreshDatePicker(\"" + dateFieldName + "\", 0,0, 0, \"" + dateInitFieldName + "\");'>" + lienMoisActuel + "</button> ";
  html += "<button class='dpTodayButton' onClick='updateDateField(\"" + dateFieldName + "\");'>" + lienFermer + "</button>";
  html += xTD + xTR;

  // and finally, close the table
  html += xTABLE;
  
  document.getElementById(datePickerDivID).innerHTML = html;
  // add an "iFrame shim" to allow the datepicker to display above selection lists
  adjustiFrame();
}

function getButtonCode(dateFieldName, dateVal, adjust, label, dateInitFieldName)
{
  var newMonth = (dateVal.getMonth () + adjust) % 12;
  var newYear = dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12);
  if (newMonth < 0) {
    newMonth += 12;
    newYear += -1;
  }

  return "<button class='dpButton' onClick='refreshDatePicker(\"" + dateFieldName + "\", " + newYear + ", " + newMonth + ", 0, \"" + dateInitFieldName + "\");'>" + label + "</button>";
}

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();
  }
}

function getFieldDate(dateString)
{
  
  var dateVal;
  var dArray;
  var d, m, y;
  var dtToday = new Date();

  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(dtToday.getYear(),dtToday.getMonth(),dtToday.getDate());
    }
  } catch(e) {
    dateVal = new Date(dtToday.getYear(),dtToday.getMonth(),dtToday.getDate());
  }

  return dateVal;
}

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;
}

function updateDateField(dateFieldName, dateString)
{
  var targetDateField = document.getElementsByName (dateFieldName).item(0);
  if (dateString) {
    targetDateField.value = dateString;
    document.getElementById('date_arrivee_init').value = document.getElementById('date_arrivee').value;
    }

  var pickerDiv = document.getElementById(datePickerDivID);
  pickerDiv.style.visibility = "hidden";
  pickerDiv.style.display = "none";

  adjustiFrame();
  targetDateField.focus();

  // after the datepicker has closed, optionally run a user-defined function called
  // datePickerClosed, passing the field that was just updated as a parameter
  // (note that this will only run if the user actually selected a date from the datepicker)
  if ((dateString) && (typeof(datePickerClosed) == "function"))
    datePickerClosed(targetDateField);
}

function adjustiFrame(pickerDiv, iFrameDiv)
{
  // we know that Opera doesn't like something about this, so if we
  // think we're using Opera, don't even try
  var is_opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
  if (is_opera)
    return;

  // put a try/catch block around the whole thing, just in case
  try {
    if (!document.getElementById(iFrameDivID)) {
      // don't use innerHTML to update the body, because it can cause global variables
      // that are currently pointing to objects on the page to have bad references
      //document.body.innerHTML += "<iframe id='" + iFrameDivID + "' src='javascript:false;' scrolling='no' frameborder='0'>";
      var newNode = document.createElement("iFrame");
      newNode.setAttribute("id", iFrameDivID);
      newNode.setAttribute("src", "javascript:false;");
      newNode.setAttribute("scrolling", "no");
      newNode.setAttribute ("frameborder", "0");
      document.body.appendChild(newNode);
    }

    if (!pickerDiv)
      pickerDiv = document.getElementById(datePickerDivID);
    if (!iFrameDiv)
      iFrameDiv = document.getElementById(iFrameDivID);

    try {
      iFrameDiv.style.position = "absolute";
      iFrameDiv.style.width = pickerDiv.offsetWidth;
      iFrameDiv.style.height = pickerDiv.offsetHeight ;
      iFrameDiv.style.top = pickerDiv.style.top;
      iFrameDiv.style.left = pickerDiv.style.left;
      iFrameDiv.style.zIndex = pickerDiv.style.zIndex - 1;
      iFrameDiv.style.visibility = pickerDiv.style.visibility ;
      iFrameDiv.style.display = pickerDiv.style.display;
    } catch(e) {
    }

  } catch (ee) {
  }

}

/*****************************************************************************************************************/

// Verification du formulaire de l'etape 4 (coordonnees)
// on verifie le nom, l'email, et l'acceptation des CGV
// NB : la variable userLang est definie dans le template Freemarker de l'etape 4 de la reservation
function verifResaEtape4() {

    var verif = true;
    var err_msg = "";

    var nom = $('nom');
    if (nom.value == '') {
        verif = false;
        if (userLang == 'fr') {
            err_msg = "<p>Veuillez renseigner votre nom.</p>";
        } else if (userLang == 'en') {
            err_msg = "<p>Please enter your last name.</p>";
        }
    }

    var prenom = $('prenom');
    if (prenom.value == '') {
        verif = false;
        if (userLang == 'fr') {
            err_msg = err_msg + "<p>Veuillez renseigner votre prénom.</p>";
        } else if (userLang == 'en') {
            err_msg = err_msg + "<p>Please enter your first name.</p>";
        }
    }

    var email = $('email');
    var filter = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]{2,}[.][a-zA-Z]{2,}$/;
    if (!filter.test(email.value)) {
        verif = false;
        if (userLang == 'fr') {
            err_msg = err_msg + "<p>Veuillez renseigner une adresse email valide.</p>";
        } else if (userLang == 'en') {
            err_msg = err_msg + "<p>Please enter a valid email</p>";
        }
    }

    var telephone = $('telephone');
    if (telephone.value == '') {
        verif = false;
        if (userLang == 'fr') {
            err_msg = err_msg + "<p>Veuillez renseigner votre téléphone.</p>";
        } else if (userLang == 'en') {
            err_msg = err_msg + "<p>Please enter your phone.</p>";
        }
    }

    var cgv = $('conditions_generales');
    if (!cgv.checked) {
        verif = false;
        if (userLang == 'fr') {
            err_msg = err_msg + "<p>Veuillez accepter les conditions générales de vente.</p>";
        } else if (userLang == 'en') {
            err_msg = err_msg + "<p>Please accept the sell policy.</p>";
        }
    }

    if (!verif) {
        $('form_resa_etape4_err_msg').innerHTML = err_msg;
        $('form_resa_etape4_err_msg').show();
    }

    return verif;
}

Event.observe(window, 'load', function() {

    // formulaire etape 1
    if ($('reservation_form')) {
        var ville = $('ville');
        var ville_index = ville.selectedIndex;
        var ville_value = ville[ville_index].value;
        var roomtypecode = $('roomtypecode');
        if (ville_value != "") {
          if (roomtypecode) {
            combo_type_appart.updateTypeAppart(ville_value, roomtypecode.value);
            if (roomtypecode.value != "") {
               combo_nb_adultes.updateListePersonnes($('nb_adultes'),roomtypecode.value,1);
               combo_nb_enfants.updateListePersonnes($('nb_enfants'),roomtypecode.value,0);
            }
          } else {
            combo_type_appart.updateTypeAppart(ville_value, "");
          } 
        }
    }

    // formulaire etape 4
    if ($('form_resa_etape4')) {
        $('form_resa_etape4').onsubmit = verifResaEtape4;
        $('form_resa_etape4_err_msg').hide();
    }

});