$(function () {

         




//Agregamos los criterios de categorizacion
    $('#tablaCriteriosCategorizacion tbody').sortable({
        stop: rellenarOrden
    });
    console.log(criteriosSeleccionados);
    for(var i in criteriosSeleccionados) {
        agregarFilaCriterioCategorizacion(criteriosSeleccionados[i]['caracteristicaSeleccionada'], criteriosSeleccionados[i]['valorCaracteristicaSeleccionado'], criteriosSeleccionados[i]['tipoSeleccionado']);
    }
    $('button[name="agregarCriterio"]').click(function() {
        agregarFilaCriterioCategorizacion();
    });    
});

/**
 * Pone valor al input de orden.
 */
function rellenarOrden() {
    var orden = 0;
    $('#tablaCriteriosCategorizacion input[name*="orden"]').each(function() {
        $(this).val(orden);
        orden++;
    });
}

/**
 * Agrega una fila de categorizacion en la tabla.
 * @param {int} caracteristicaSeleccionada
 * @param {int} valorCaracteristicaSeleccionado
 * @param {int} tipoSeleccionado
 */
function agregarFilaCriterioCategorizacion(caracteristicaSeleccionada, valorCaracteristicaSeleccionado, tipoSeleccionado) {
    var indice = -1;
    $('#tablaCriteriosCategorizacion').find('td:first-child').children('select[name^="categorizacion"]').each(function() {
        var nombreTemp = $(this).attr('name').split('[');
        var indiceTemp = nombreTemp[1].substr(0, nombreTemp[1].length - 1);
        if(indiceTemp > indice) {
            indice = indiceTemp;
        }
    });
    indice++;
    
    var html = '<tr>';
    html += '<td>' + generarSelectCategorizacion('caracteristicaSeleccionada', indice, caracteristicasFormateadas, caracteristicaSeleccionada) + '</td>';
    html += '<td>' + generarSelectCategorizacion('valorCaracteristicaSeleccionado', indice, (typeof valoresCaracteristicaFormateados[caracteristicaSeleccionada] !== 'undefined' ? valoresCaracteristicaFormateados[caracteristicaSeleccionada] : { 0: '- Seleccione uno -' }), valorCaracteristicaSeleccionado) + '</td>';
    html += '<td>' + generarSelectCategorizacion('tipoSeleccionado', indice, tiposFormateados, tipoSeleccionado) + '</td>';
    html += '<td><input type="hidden" name="categorizacion[' + indice + '][orden]" value=""/> <input class="btn btn-default" type="button" name="eliminarFilaCriterioCategorizacion" value="-"/></td>';
    html += '</tr>';
    
    var fila = $(html);
    //Eliminar fila
    fila.find('input[name="eliminarFilaCriterioCategorizacion"]').click(function() {
        $(this).parent().parent().remove();
    });
    //Modificar el select de valores
    fila.find('select[name*="caracteristicaSeleccionada"]').change(function() {
        var parent = fila.find('select[name*="valorCaracteristicaSeleccionado"]').parent();
        var nombreTemp = $(this).attr('name').split('[');
        var indiceTemp = nombreTemp[1].substr(0, nombreTemp[1].length - 1);
        fila.find('select[name*="valorCaracteristicaSeleccionado"]').remove();
        parent.append(generarSelectCategorizacion('valorCaracteristicaSeleccionado', indiceTemp, (typeof valoresCaracteristicaFormateados[$(this).val()] !== 'undefined' ? valoresCaracteristicaFormateados[$(this).val()] : { 0: '- Seleccione uno -' })));
    });
    
    $('#tablaCriteriosCategorizacion tbody').append(fila);
    
    rellenarOrden();
}


/**
 * Devuelve un select generado con los datos.
 * @param {String} nombre
 * @param {int} indice
 * @param {Object} datos
 * @param {String} seleccionado
 * @returns {String}
 */
function generarSelectCategorizacion(nombre, indice, datos, seleccionado) {
    var html = '<select name="categorizacion[' + indice + '][' + nombre + ']">';
    for (var value in datos) {
        html += '<option value="' + value + '" ' + (value == seleccionado ? 'selected="selected"' : '') + '>' + datos[value] + '</option>';
    }
    html += '</select>';

    return html;
}