var grid1;

$(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: 25,
        rowHeight: 25,
        //forceSyncScrolling: true,
        enableAsyncPostRender: true
    }

    // Array com os valores das células do cabeçalho
    var columns = [
        { id: "teste1", name: "Macro Setor", field: "teste1", sortable: true },
        { id: "teste2", name: "Setor", field: "teste2", sortable: true },
        { id: "teste3", name: "Veículo", field: "teste3", sortable: true }
    ];

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

        for (var i = 0; i < 100; i++) {
            data[i] = {
                teste1: "OSASCO",
                teste2: "0374-N",
                teste3: "01-177-13"
            };
        }

        grid1 = new Slick.Grid("#myGrid", data, columns, options);
        // gridAdjust(); //ajusta a altura da grid de acordo com a tela
        columnpicker = new Slick.Controls.ColumnPicker(columns, grid1, options);

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

            grid1.invalidate();
            grid1.render();
        });
    });

    $(".table-head").toggle(
		function () {
		    $("footer").css({ "top": "auto", "height": "auto" });
		    $(".wrap-grid").hide();
		    $("#menu, #mapa").css({ "bottom": "20px" });
		}, function () {
		    $(".wrap-grid").show();

		    // Ajusta o menu de acordo com a altura da grid
		    var h = $("footer").outerHeight();
		    $("#menu").css({ "bottom": +h + "px" });
		}
	);

    $('.grid-footer').resizable({
        alsoResize: ".slick-viewport, .wrap-grid, #myGrid",
        animate: false,
        minHeight: 171,
        handles: "n",
        stop: function (event, ui) {
            grid1.resizeCanvas();
        }
    });
});