// ===================================================================================
// Codice jQuery per creare una table dinamica
//
// 20110915 Versione 1.0 Jessica Mammarella Creazione
//
// === === === === === ===
// - Per attivare le tabelle dinamiche racchiudere in un div con class="ea_dynamicTable" tutti i 
//   campi che si desidera inserire e assegnare un id e l'attributo destination (campo hidden di desinazione contenuto tabella)
//   (Esempio <div class="ea_dynamicTable" id="NomeTabella" destination="DatiSediOperative" >)
// - Per i campi non obbligatori inserire l'attributo requiredField="0" (Esempio <input type="text" id="FAX" requiredField="0" />)
// - L'ID indicato nel campo text diventa il titolo della colonna
// - Applicare lo stylesheet ea_dynamicTable.css
// === === === === === ===
//
// === === === === === ===
// ESEMPIO
//        <div class="ea_dynamicTable" id="NomeTabella" destination="DatiSediOperative" >
//            <label>Indirizzo*</label><input type="text" id="Indirizzo" />
//            <label>Nazione*</label><input type="text" id="Nazione" />
//            <label>Provincia*</label><input type="text" id="Provincia" />
//            <label>Comune*</label><input type="text" id="Comune" />
//            <label>CAP*</label><input type="text" id="CAP" />
//            <label>Telefono*</label><input type="text" id="Telefono" />
//            <label>FAX</label><input type="text" id="FAX" requiredField="0" />
//            <label>Email*</label><input type="text" id="Email" />
//            <label>NumeroBanconisti</label><input type="text" id="NumeroBanconisti/e" requiredField="0" />
//        </div>
// ===================================================================================

// ===================================================================================
// FUNZIONI
// ===================================================================================

var SEPARATOR_ROW = "$";
var SEPARATOR_COL = "|";

function createDynamicTable(thisTable) {
    var thisTable_id = thisTable.attr('id');
    var thisTable_table = thisTable.attr('id') + "_table";
    var codeTable = "";
    var nCol = 0;
    //alert(thisTable_id);

    $('input[type=text]', thisTable).each(
        function () {
            dropdownName = $(this).attr('name');
            if (dropdownName.length == 0) dropdownName = $(this).attr('id');
            codeTable += "<th>" + dropdownName + "</th>";
            nCol++;
        }
    );

    thisTable.append("<input type='button' id='Add' value='Aggiungi' onclick='javascript:addDataDynamicTable(\"" + thisTable_id + "\");' class='button cb fl' />");

    thisTable.append('<table class="ea_table fl" id="' + thisTable_table + '"></table>');
    $("#" + thisTable_table).append("<thead><tr>" + codeTable + "<th class='fn'>&nbsp;</th></tr></thead>");
    $("#" + thisTable_table).append("<tfoot><tr><td colspan='" + nCol + 1 + "'>&nbsp;</td></tr></tfoot>");
    updateDynamicTable(thisTable_id);
}

function updateDynamicTable(thisTable) {
    var thisTable_destination = $("#" + thisTable).attr('destination');
    var campoDati = $("#" + thisTable_destination);
    var codeTable = "";
    var thisTable_table = $("#" + thisTable).attr('id') + "_table";
    var classRow;

    //clear table
    $("#" + thisTable_table).find("tbody").empty();

    if (campoDati.val().length == 0) return false;
    
    // row
    var tableContent = campoDati.val().split(SEPARATOR_ROW);
    $.each(tableContent, function (i) {
        classRow = ""; if (i % 2) classRow = " class='mod'"; //zebra
        codeTable += "<tr>";
        // cols
        var tableContentRow = tableContent[i].split(SEPARATOR_COL);
        $.each(tableContentRow, function (j) {
            strString = tableContentRow[j].substring(0, 10);
            if (tableContentRow[j].length > 10) strString += "..";
            codeTable += "<td " + classRow + ">" + strString + "</td>";
        });
        codeTable += "<td class='fn'><a href='#' onclick='javascript:deleteDataDynamicTable(\"" + thisTable + "\"," + i + ");'>x</a></td></tr>";
    });

    $("#" + thisTable_table).append("<tbody>" + codeTable + "</tbody>");
}

function addDataDynamicTable(thisTable) {
    var updateTable = true;
    var thisTable_destination = $("#" + thisTable).attr('destination');
    var campoDati = $("#" + thisTable_destination);
    var dati = $("#" + thisTable_destination).val();
    if (dati.length > 0) dati += SEPARATOR_ROW;
    $('input[type=text]', $("#" + thisTable)).each(
        function () {
            var dato = $(this).attr('value');
            if (dato.length == 0 && $(this).attr('requiredField') != 0) {
                updateTable = false;
            };
            dati += dato + SEPARATOR_COL;
        }
    );
    dati = dati.substring(0, dati.length - 1);

    if (updateTable) $('input[type=text]', $("#" + thisTable)).each(function () { $(this).attr("value", ""); }); // clear text
    if (updateTable) { campoDati.val(dati); updateDynamicTable(thisTable); }
}

function deleteDataDynamicTable(thisTable, rowNumber) {
    var updateTable = true;
    var thisTable_destination = $("#" + thisTable).attr('destination');
    var campoDati = $("#" + thisTable_destination);
    var datiNew = "";

    // row
    var tableContent = campoDati.val().split(SEPARATOR_ROW);
    $.each(tableContent, function (i) {
        if (rowNumber != i) {
            if (datiNew.length > 0) datiNew += SEPARATOR_ROW;
            datiNew += tableContent[i];
        }
    });
    if (updateTable) { campoDati.val(datiNew); updateDynamicTable(thisTable); }
}

// ===================================================================================
// TRASFORMAZIONE
// ===================================================================================

$(document).ready(function () {

    // Creazione tabelle dinamiche
    $(".ea_dynamicTable").each(function () { createDynamicTable($(this)); });

});