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

    // **********************************************************************************
    // 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 = '';
    dateMinDate
    dateMaxDate
    var fechaTmp1 = StringToDate(dateMinDate, dateFormat);
    var fechaTmp2 = StringToDate(dateMaxDate, dateFormat);
    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++) {
            if (arrDiasAct[i] != "") arrDiasActToDate.push(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';
    }
}