var diasActivos = new Array();
var utilizarActivos = true;
function displayDatePicker(dateFieldName, displayBelowThisObject, dtFormat, dtSep, dataPickerFunction, minDate, maxDate, multiMonth, diasActiv)
{
    // **********************************************************************************
    // Guardamos las variables que luego utilizaremos...
    // **********************************************************************************
   
    if (diasActiv!=null) {diasActivos = diasActiv;} else {utilizarActivos = false}
    if ((diasActivos != null && diasActivos.length > 0) & (minDate == null || minDate == '') & (maxDate == null || maxDate == '')) {
       var fMin = new Date();
       var fMax = new Date();
       for (i=0;i<diasActivos.length;i++) {
          if (fMin>diasActivos[i] || i==0) fMin = diasActivos[i];
          if (fMax<diasActivos[i] || i==0) fMax = diasActivos[i];
       }
       if (minDate == null || minDate == '') {dateMinDate = getDateString(fMin); } else {dateMinDate = minDate};
       if (maxDate == null || maxDate == '') {dateMaxDate = getDateString(fMax); } else {dateMaxDate = maxDate };
    
    }else {
        dateMinDate=minDate;
        dateMaxDate=maxDate;
    }
    
    dataPickerFunctionClose=dataPickerFunction;
    var targetDateField = document.getElementById(dateFieldName);
    targetDateField.focus();
    if (displayBelowThisObject==null) { displayBelowThisObject = targetDateField; }
    if (dtSep) { dateSeparator = dtSep; } else { dateSeparator = defaultDateSeparator; }
    if (dtFormat) { dateFormat = dtFormat; } else { dateFormat = defaultDateFormat; }
    
    var x = displayBelowThisObject.offsetLeft;
    var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ;
    var parent = displayBelowThisObject;
    while (parent.offsetParent) {
        parent = parent.offsetParent;
        x += parent.offsetLeft;
        y += parent.offsetTop ;
    }

    // **********************************************************************************
    // Creasmo el Calendario....
    // **********************************************************************************
    drawDatePicker(targetDateField, x, y , multiMonth);
}

function drawDatePicker(targetDateField, x, y, multiMonth)
{
    // **********************************************************************************
    // Si el div no existe lo creamos...
    // **********************************************************************************
    if (!document.getElementById(datePickerID)) {
        
        var newNodetbl = document.createElement("table");
        var newNodetbody = document.createElement("tbody"); 
        var newNodetr = document.createElement("tr");
        var newNodetd = document.createElement("td");
        var newNodediv = document.createElement("div");  
        
        newNodetbl.setAttribute("cellpadding", "0");
        newNodetbl.setAttribute("cellspacing", "0");
        newNodetbl.setAttribute("id", datePickerID);

        newNodetd.setAttribute("id", datePickerDivID);
        newNodetr.appendChild (newNodetd);
        newNodetbody.appendChild(newNodetr);
        newNodetbl.appendChild (newNodetbody); 
        document.body.appendChild(newNodetbl);
    }

    // **********************************************************************************
    // Pone los atributos al DIV Creado...
    // **********************************************************************************
    var picker = document.getElementById(datePickerID);
    var pickerDiv = document.getElementById(datePickerDivID);
    picker.style.left = x + "px";
    picker.style.top = y + "px";
    picker.style.visibility = "visible";
    picker.style.display = "block";
    
    //picker.style.visibility = (picker.style.visibility == "visible" ? "hidden" : "visible");
    //picker.style.display = (picker.style.display == "block" ? "none" : "block");
    picker.style.zIndex = 10000;

    // **********************************************************************************
    // Establece la fecha del campoFecha y el dia...
    // **********************************************************************************
    var dt = getFieldDate(targetDateField.value);
    var dia_= dt.getDate(); //Aqui se especifica el día inicial seleccionado
    if (targetDateField.value=='') dia_=null;
    
    // **********************************************************************************
    // Ya podemos mostrar el DIV...
    // **********************************************************************************
    refreshDatePicker(targetDateField.id, dt.getFullYear(), dt.getMonth(), dia_, multiMonth);
}

function refreshDatePicker(dateFieldName, year, month, day, multiMonth)
{
    
     // **********************************************************************************
    // Establece si hemos pasado días activos
    // **********************************************************************************
    var activosFecha;
    if (diasActivos!=null) {
        activosFecha = diasActivosArrToString(diasActivos, dateFormat, " ");
    }
    
     
    // **********************************************************************************
    // Establece la fecha con la que trabajaremos, por defecto, el dia 1 del mes recibido
    // **********************************************************************************

    var thisDay = new Date();
    if ((month >= 0) && (year > 0)) {
        thisDay = new Date(year, month, 1);
    } else {
        day = thisDay.getDate();
        thisDay.setDate(1);
        if (day < dateMinDate) {
            day = dateMinDate;
        }
    }
  
    // **********************************************************************************
    // Aqui ponemos la fecha para cuando se mueve entre meses...
    // **********************************************************************************
    var objT=document.getElementById(dateFieldName);
    if ((objT) && (objT.value!=''))  {
        var dt = getFieldDate(objT.value);
        if ((thisDay.getMonth()==dt.getMonth()) && (thisDay.getFullYear()==dt.getFullYear())) {
            day=dt.getDate();
        } else {
            day='';
        }
    }

    // **********************************************************************************
    // Composición de las tabla... (TDs, Trs, Etc.)
    // **********************************************************************************
    var crlf = "\r\n";
    var DIV = "<div>";
    var DIV_main = "<div class='calendario'>";
    var DIV_header = "<div class='calCabecera'>"
    var IFRAME = "<iframe></iframe>";
    var SPAN_prevmonth = "<span class='calPrevMonth'>"
    var SPAN_nextmonth = "<span class='calNextMonth'>"
    var DIV_month = "<div class='calMonth'>";
    var DIV_monthtitleLeft = "<div class='calMonthTitleLeft'>";
    var DIV_monthtitleRight = "<div class='calMonthTitleRight'>";
    var DIV_selected = "<div class='calDayHighlight'>";
    var DIV_clear = "<div style='clear:both'>"

    var SPAN_ini="<span class='calFechaHoy'>";
    
    var TABLE = "<table cols=7 class='calTable'><tbody>" + crlf; 
    var TR = "<tr class='calTR'>";
    var TR_title = "<tr class='calTitleTR'>";
    var TR_days = "<tr class='calDayTR'>";
    var TR_todaybutton = "<tr class='calTodayButtonTR'>";
    // ** TD *****************************************************************************
    var TD = "<td class='calTD' onMouseOut='this.className=\"calTD\";' onMouseOver=' this.className=\"calTDHover\";' ";    // leave this tag open, because we'll be adding an onClick event
    var TDNoSeleccionable = "<td class='calTDNS' ";    // leave this tag open, because we'll be adding an onClick event
    var TD_selected = "<td class='calDayHighlightTD' onMouseOut='this.className=\"calDayHighlightTD\";' onMouseOver='this.className=\"calTDHover\";' ";    // leave this tag open, because we'll be adding an onClick event
    var TD_selectedNoSeleccionable = "<td class='calDayHighlightTDNS' ";    // leave this tag open, because we'll be adding an onClick event
    // ** TD *****************************************************************************
    var TD_title = "<td colspan=5 class='calTitleTD'>";
    var TD_buttons = "<td class='calButtonTD'>";
    var TD_todaybutton = "<td colspan=7 class='calTodayButtonTD'>";
    var TD_days = "<td class='calDayTD'>";
   
    var xTD = "</td>" + crlf;
    var xTR = "</tr>" + crlf;
    var xTABLE = "</tbody></table>" + crlf;         
    var xDIV = "</div>" + crlf;
    var xSPAN = "</span>" + crlf; 
    var xIFRAME = "</iframe>" + crlf;



    // **********************************************************************************
    // Ok, generamos el calendario...
    // **********************************************************************************
    var html = '';
   
    var fechaTmp1 = getFieldDate(dateMinDate);//new Date(fechaPart1[2],fechaPart1[1]-1, fechaPart1[0]);
    var fechaTmp2 = getFieldDate(dateMaxDate);
    var DiasFaltantes = "<td>&nbsp;" + xTD;  
    
    
    html += DIV_main;
    html += IFRAME;
    // ********************************************************************************
    // Row de los titulos y botones para avanzar y retroceder...
    // ********************************************************************************
    html += DIV_header;
        html += SPAN_prevmonth + getButtonCode(dateFieldName, thisDay, -1, "&lt;", multiMonth) + xSPAN;
        html += SPAN_nextmonth + getButtonCode(dateFieldName, thisDay, 1, "&gt;", multiMonth) + xSPAN;
        html += DIV_clear;
        html += xDIV;
    html += xDIV;
    html += DIV_clear;
    html += xDIV;
    
    // ********************************************************************************
    // Row de los Dias...
    // ********************************************************************************
    var z = 0;
    if (multiMonth) z = 1;
    for (j=0;j<=z;j++)
    {
        var diaspintados = 0;
        html += DIV_month;
        
        if (j==0) 
        {
            html += DIV_monthtitleLeft 
        }else {
            html += DIV_monthtitleRight
        } 
        
        html += monthArrayLong[ thisDay.getMonth()] + " " + thisDay.getFullYear()  + xDIV;
        html += TABLE;
        html += TR_days;
            for(i = 0; i < dayArrayShort.length; i++) { 
                html += TD_days + dayArrayShort[i] + xTD; 
            }
            
        html += xTR;
        // ********************************************************************************
        // Calendario en sí...
        // ********************************************************************************
        html += TR;
            
            // ********************************************************************************
            // Pintamos los dias que van en blanco...
            // ********************************************************************************
            var dayW = thisDay.getDay();
            //Aqui cambiamos para que el lunes sea el primer dia de la semana y no el domingo
            if (dayW==0) dayW=7;
            for (i = 1; i < dayW; i++) { 
                html += DiasFaltantes;  
                diaspintados +=1;
            }
            // ********************************************************************************
            // Pintamos los dias del calendario...
            // ********************************************************************************
            do {
                 diaspintados +=1;
                // ********************************************************************************
                // Definimos el dia con el que vamos a trabajar.. (es un loop dia a dia)
                // ********************************************************************************
                dayNum = thisDay.getDate();
                monthNum = thisDay.getMonth();
                yearNum = thisDay.getFullYear();
                // ********************************************************************************
                // Preparamos el TD que pintaremos, y que el usuario podra clickear para elegir un dia...
                // ********************************************************************************
                TD_onclick = " onclick=\"updateDateField('" + dateFieldName + "', '" + getDateString(thisDay) + "');\" "
                var _TD_selected=TD_selected;
                var _TD=TD;
                
                // ********************************************************************************
                // Establecemos si no es seleccionable debido al que esta fuera de rango...
                // Si no es un dia activo eliminamos la posibilidad de seleccionarlo...
                // ********************************************************************************
                var activo=true;
                var fecha_ = getDateString(thisDay, dateFormat);
                if (dateMinDate!=null) { if (thisDay<fechaTmp1) { activo=false; } };
                if (dateMaxDate!=null) { if (thisDay >fechaTmp2) { activo=false; } };
                if (utilizarActivos && activo == true)
                {
                    if (activosFecha.indexOf(fecha_)==-1)  activo=false;
                }
                if (!activo) {
                    TD_onclick = "";
                    _TD_selected=TD_selectedNoSeleccionable;
                    _TD=TDNoSeleccionable;
                }               
        
                // ********************************************************************************
                // Verificamos si es el dia de hoy, y lo marcamos...
                // ********************************************************************************
                var diaHoy=false;
                var _span_ini= SPAN_ini;
                var _span_fin= xSPAN;
                if ( (thisDay.getDate()!=((new Date()).getDate())) || (thisDay.getMonth()!=((new Date()).getMonth())) || (thisDay.getFullYear()!=((new Date()).getFullYear())) ) { 
                    _span_ini=""; _span_fin="";
                }
        
                // ********************************************************************************
                // Bien finalmente pintamos el dia...
                // ********************************************************************************
                TD_onclick += ">";
                if (dayNum == day && monthNum == month && yearNum == year) {
                    html += _TD_selected + TD_onclick + DIV_selected + _span_ini + dayNum + _span_fin + xDIV + xTD;

                } else {
                    html += _TD + TD_onclick + _span_ini + dayNum + _span_fin + xTD;
                }

                // ********************************************************************************
                // Si es el ultimo dia de la semana, creamos una nueva fila...
                // ********************************************************************************
                if (thisDay.getDay() == 0) 
                { 
                    html += xTR + TR;
                } 

                // ********************************************************************************
                // Ok, continuamos con el proximo dia...
                // ********************************************************************************
                thisDay.setDate(thisDay.getDate() + 1);
            } while (thisDay.getDate() > 1)
     
            // ********************************************************************************
            // Pintamos los dias en blanco al final...
            // ********************************************************************************
            if (thisDay.getDay() > 0) {
                    for (i = 6; i > thisDay.getDay(); i--) { 
                    html += DiasFaltantes; 
                    diaspintados +=1;
                }
            }
            // Esto es para que queden las dos tablas con el mismo tamaño
            while (diaspintados<42)
            {
               
               if (42-diaspintados == 7 || 42-diaspintados == 14)
               {
                    html += xTR + TR;
               }
               html += DiasFaltantes; 
               diaspintados +=1;
            }
            
        html += xTR;
                
        html += xTABLE;
        html += xDIV;

    } 
    
    html += DIV_clear;
    html += xDIV;
    //html += xIFRAME;
    html += xDIV;
        // ********************************************************************************
        // Pintamos los botones de "Mes Actual" y "Close"
        // ********************************************************************************
//        var today = new Date();
//        var todayString = labelFecha + " " + dayArrayMed[today.getDay()] + ", " + monthArrayMed[ today.getMonth()] + " " + today.getDate();
//        html += DIV;
//            html += "<button class='calTodayButtonMes' onClick='refreshDatePicker(\"" + dateFieldName + "\");'>" + labelEsteMes + "</button> ";
            html += "<button class='calTodayButtonClose' onClick='updateDateField(\"" + dateFieldName + "\");'>" + labelCerrar + "</button>";
//        html += xDIV;
    
    // ********************************************************************************
    // Pintamos los botones de "Mes Actual" y "Close"
    // ********************************************************************************
    document.getElementById(datePickerDivID).innerHTML = html;

    // ********************************************************************************
    // Ok, mostramos...
    // ********************************************************************************
    adjustiFrame();
}

function getButtonCode(dateFieldName, dateVal, adjust, label, multiMonth)
{
    // ********************************************************************************
    // Genera el boton de next y back...
    // ********************************************************************************
    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='calButton' onClick='refreshDatePicker(\"" + dateFieldName + "\", " + newYear + ", " + newMonth + ", undefined , " + multiMonth + ");'>" + label + "</button>";
}

function getDateString(dateVal, format)
{
    // ********************************************************************************
    // Devuelve la fecha en el formato especificado...
    // ********************************************************************************
    if (format == null) format = dateFormat;
    var dayString = "00" + dateVal.getDate();
    var monthString = "00" + (dateVal.getMonth()+1);
    dayString = dayString.substring(dayString.length - 2);
    monthString = monthString.substring(monthString.length - 2);
    switch (format) {
        case "dd/MM/yyyy" :
            return dayString + dateSeparator + monthString + dateSeparator + dateVal.getFullYear();
        case "yyyy/MM/dd" :
            return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString;
        case "MM/dd/yyyyy" :
        default :
            return monthString + dateSeparator + dayString + dateSeparator + dateVal.getFullYear();
    }
}

function getFieldDate(dateString,format)
{
    var dateVal;
    var dArray;
    var d, m, y;
    
    if (format == null) format = dateFormat;
 
    // ********************************************************************************
    // Devuelve una fecha (date()) desde un string...
    // ********************************************************************************
    try {
            dArray = splitDateString(dateString);
            if (dArray) {
                switch (format) {
                    case "dd/MM/yyyy" :
                        d = parseInt(dArray[0], 10);
                        m = parseInt(dArray[1], 10) - 1;
                        y = parseInt(dArray[2], 10);
                        break;
                    case "yyyy/MM/dd" :
                        d = parseInt(dArray[2], 10);
                        m = parseInt(dArray[1], 10) - 1;
                        y = parseInt(dArray[0], 10);
                        break;
                    case "MM/dd/yyyy" :
                    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;
}

function splitDateString(dateString)
{
    // ********************************************************************************
    // Parte un string de fecha, con el separador seleccionado...
    // ********************************************************************************
    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)
{
    // ********************************************************************************
    // Recogemos el campo donde debemos pintar el dia seleccionado, y escondemos el DIV
    // ********************************************************************************
    var targetDateField = document.getElementById(dateFieldName);
    if (dateString) targetDateField.value = dateString;
    var pickerDiv = document.getElementById(datePickerID);
    pickerDiv.style.visibility = "hidden";
    pickerDiv.style.display = "none";
    adjustiFrame();
    targetDateField.focus();

    // ********************************************************************************
    // Si tenemos function de retorno la llamamos...
    // ********************************************************************************
  if ((dateString) && (typeof(dataPickerFunctionClose) == "function")) {
    dataPickerFunctionClose(targetDateField);
  }
}

function verificarFechaInChange(min, max, campoFecha, funcionOnClose) {

    var fechaOk=false;
    if (campoFecha.value!='') {
        var fechaMin_=null;
        var fechaMax_=null;
        var fechaSel_=null;

        if (min) fechaMin_= getFieldDate(min);
        if (max) fechaMax_= getFieldDate(max);
        fechaSel_= getFieldDate(campoFecha.value);

        // Sin rango Definido...
        if ((fechaMin_==null) && (fechaMax_==null)) { fechaOk=true; } 
        
        // Sin fecha Fin... (OK)
        if ((fechaMin_!=null) && (fechaMax_==null)) {
            if (fechaSel_>=fechaMin_) { fechaOk=true; }
        } 

        // Sin Fecha Ini... (OK)
        if ((fechaMin_==null) && (fechaMax_!=null)) {
            if (fechaSel_<=fechaMax_) { fechaOk=true; }
        } 

        // En rango X... (OK)
        if ((fechaMin_!=null) && (fechaMax_!=null)) {
            if ((fechaSel_>=fechaMin_) && (fechaSel_<=fechaMax_)) { fechaOk=true; }
        } 

    } else { fechaOk=true; }
    
    if (fechaOk) { 
        
        if (typeof(funcionOnClose) == "function") { funcionOnClose(campoFecha); }
    } else {
        if (typeof(mostrarError) == "function") { mostrarError(labelFechaIncorrecta); } else { alert(labelFechaIncorrecta); }
    }
}

function adjustiFrame(pickerDiv, iFrameDiv)
{
    // ********************************************************************************
    // Ajustamos el DIV, segun sea el caso...
    // ********************************************************************************
    var is_opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
    if (is_opera) return;
    try {
//        if (!document.getElementById(iFrameDivID)) {
//          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(datePickerID);
        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) {}
}



/*Funciones de conversion*/

function diasActivosToArray(strDiasActivos, formato, separador) {
   strDiasAct = new String();
   var arrDiasAct = new Array();
   var arrDiasActToDate = new Array();
   if (strDiasActivos !=null && strDiasActivos !='') 
   {
       strDiasAct = strDiasActivos;
       arrDiasAct = strDiasAct.split(separador);
       for (i=0;i<arrDiasAct.length;i++) {
          arrDiasActToDate[i] = getFieldDate(arrDiasAct[i],formato);
       }
   }
   return arrDiasActToDate;
}

function diasActivosArrToString(arrDiasActivos, formato, separador) {
   var strDiasAct = new String();
   for (i=0;i<arrDiasActivos.length;i++) {
       strDiasAct = strDiasAct + getDateString(arrDiasActivos[i]) + separador;      
   }
   return strDiasAct;
}

function hideDatePicker() {
    if (document.getElementById(datePickerID)) {
        document.getElementById(datePickerID).style.display = 'none';
    }
}