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

    // Array com os valores das células do cabeçalho
    var columns = [
        { id: "macroSetor", name: "Macro Setor", field: "macroSetor", sortable: true, width: 150 },
        { id: "setor", name: "Setor", field: "setor", sortable: true },
        { id: "veiculo", name: "Veículo", field: "veiculo", sortable: true },
        { id: "placa", name: "Placa", field: "placa", sortable: true },
        { id: "concluido", name: "% Concluído", field: "concluido", formatter: formatter, sortable: true },
        { id: "atividade", name: "Atividade", field: "atividade", sortable: true },
        { id: "iniAtividade", name: "Início Atividade", field: "iniAtividade", sortable: true, width: 100 },
        { id: "operacao", name: "Operação", field: "operacao", sortable: true },
        { id: "agenda", name: "Agenda", field: "agenda", sortable: true, width: 120 },
        { id: "controle", name: "Controle", field: "controle", sortable: true },
        { id: "ultPeriodico", name: "Último Periódico", field: "ultPeriodico", sortable: true, width: 100 },
        { id: "velocidade", name: "Velocidade", field: "velocidade", sortable: true },
        { id: "ignicao", name: "Ignição", field: "ignicao", formatter: formatter, sortable: true },
        { id: "alarmes", name: "Alarmes", field: "alarmes", sortable: true },
        { id: "contestacao", name: "Contestação", field: "contestacao", formatter: formatter, sortable: true },
        { id: "acao", name: "Ação", field: "acao", formatter: formatter, 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] = {
                macroSetor: "OSASCO",
                setor: "0374-N",
                veiculo: "01-177-13",
                placa: "HWU-6917",
                concluido: porcentagem(),
                atividade: atividade(),
                iniAtividade: "05/09 13:13",
                operacao: "OP COL",
                agenda: "SEG/QUA/SEX/SAB",
                controle: "14090502",
                ultPeriodico: "05/09 13:39",
                velocidade: "15",
                ignicao: showStatus('<span class="green"><span class="glyphicon glyphicon-off"></span> Ligado</span>', '<span class="red"><span class="glyphicon glyphicon-off red"></span> Desligado</span>'),
                alarmes: "Normal",
                contestacao: contestacao(),
                acao: '<button type="button" class="btn-acao"><img src="../Content/img/svg/icon_detalhe.svg" width="16" />Detalhes</button>'
            };
        }

        grid = new Slick.Grid("#myGrid", data, columns, options);
        // gridAdjust(); //ajusta a altura da grid de acordo com a tela
        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();
        });
    });

    function atividade() {
        var min = 1;
        var max = 4;
        var r = Math.floor(Math.random() * (max - min + 1) + min);

        switch (r) {
            case 1:
                return "INI COLETA";
                break;
            case 2:
                return "INI DESCARGA";
                break;
            default:
                return "EM TRANSPORTE";
        }
    }

    function porcentagem() {
        var p = Math.floor(Math.random() * 100) + 1;

        return "<span class='box-percentage'><span class='percentage-bar' style='width: " + p + "%'></span><span class='percentage-value'>" + p + "%</span></span>";
    }

    function contestacao() {
        var min = 1;
        var max = 5;
        var r = Math.floor(Math.random() * (max - min + 1) + min);

        return "<span class='contestacao-" + r + "'></span>";
    }

    function showStatus(str1, str2) {
        var min = 1;
        var max = 4;
        var str1 = str1;
        var str2 = str2;
        var res = Math.floor(Math.random() * (max - min + 1) + min);

        if (res == 1 || res == 3) {
            return str1;
        } else {
            return str2;
        }
    }

    $(".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) {
            grid.resizeCanvas();
        }
    });
});