var grid;

$(function () {
    // Função para alterar o formato do valor das células
    function formatter(row, cell, value, columnDef, dataContext) {
        return value;
    }

    // Configura as opções da grid
    var options = {
        enableCellNavigation: false,
        enableColumnReorder: true,
        forceFitColumns: true,
        syncColumnCellResize: true,
        multiColumnSort: true,
        headerRowHeight: 50,
        rowHeight: 50,
        //forceSyncScrolling: true,
        enableAsyncPostRender: true,
        autoHeight: true
    }

    // Array com os valores das células do cabeçalho
    var columns = [
        //{ id: "jornada", name: "Jornada", field: "jornada", formatter: formatter, sortable: true, width: 60 },
        { id: "numRD", name: "Nº da RD", field: "numRD", sortable: true, width: 60 },
        { id: "frota", name: "Frota", field: "frota", sortable: true, width: 60 },
        { id: "placa", name: "Placa", field: "placa", sortable: true, width: 60 },
        { id: "inicioRD", name: "Início da RD", field: "inicioRD", sortable: true },
        { id: "terminoRD", name: "Término da RD", field: "terminoRD", sortable: true },
        { id: "setor", name: "Setor", field: "setor", sortable: true },
        { id: "turno", name: "Turno", field: "turno", sortable: true },
        { id: "regional", name: "Regional", field: "regional", sortable: true, width: 120 },
        { id: "origem", name: "Origem", field: "origem", sortable: true },
        { id: "status", name: "Status", field: "status", sortable: true },
        { id: "rdHomologada", name: "RD Homologada", field: "rdHomologada", sortable: true, width: 100 },
        { id: "modificadoEm", name: "Modificado em", field: "modificadoEm", sortable: true },
        { id: "matriculaMotorista", name: "Matrícula do Motorista", field: "matriculaMotorista", sortable: true, width: 130 },
        { id: "editar", name: "", field: "editar", formatter: formatter, sortable: false, maxWidth: 50 },
        { id: "excluir", name: "", field: "excluir", formatter: formatter, sortable: false, maxWidth: 50 }
    ];

    // Função que mostra os valores das células na grid
    $(function () {
        var data = [];

        for (var i = 0; i < 10; i++) {
            data[i] = {
                //jornada: "<span class='jornada-status-1'></span>",
                numRD: "15071101",
                frota: "12345678",
                placa: "ATG-1347",
                inicioRD: "15/08/2015 - 09h00",
                terminoRD: "15/08/2015 - 09h00",
                setor: "1004D",
                turno: "Diurno",
                regional: "002 - Campos dos Goytacazes",
                origem: "Automática",
                status: "Original",
                rdHomologada: "SIM",
                modificadoEm: "15/08/2015 - 09h00",
                matriculaMotorista: "15250148",
                editar: "<button type='button' class='icon-pencil'></button>",
                excluir: "<button type='button' class='icon-cross'></button>"
            };
        }

        grid = new Slick.Grid("#myGrid", data, columns, options);

        columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);

        grid.onSort.subscribe(function (e, args) {
            var cols = args.sortCols;

            data.sort(function (dataRow1, dataRow2) {
                for (var i = 0, l = cols.length; i < l; i++) {
                    var field = cols[i].sortCol.field;
                    var sign = cols[i].sortAsc ? 1 : -1;
                    var value1 = dataRow1[field], value2 = dataRow2[field];
                    var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;

                    if (result != 0) {
                        return result;
                    }
                }

                return 0;
            });

            grid.invalidate();
            grid.render();
        });
    });
});