var vm = null;

//View model de eventos
var vmEventos = null;

/* -- JQUERY -- */

$(function () {

    $('footer .modulo .bloco .content').hide(); //esconde conteudo dos blocos do rodapé
    //$('#logo_ginlog').css('bottom', $('footer').height() + 7); //coloca a logo 'Grupo Inlog' visível acima do rodapé (se houver)
    eventoClicarIconeMenuDireito();
    //reposicionaLogo();
    resize(); //re-calcula altura da coluna direita


    //$('#coluna_direita .modulo.estatistica .icone').trigger('click'); //inicia a página abrindo o módulo de estatística



    /****************************************************************************************/
    /*****                       DROPABLE e DRAGABLE dos módulos                        *****/
    /****************************************************************************************/
    /*
    $("#coluna_direita .modulo, footer .modulo").draggable({
        //handle: '.modulo_title',
        containment: 'body',
        stack: '.modulo',
        cursor: 'move',
        snap: '#coluna_direita, footer',
        snapMode: 'inner',
        snapTolerance: 30,
        revert: true,
        revertDuration: 200,
        zIndex: 999,
        opacity: 0.6,
        //helper: "clone",
        handle: '.icone, .bloco .title',
        stop: function (event, ui) {
            $(this).css('left', '0px');
            $(this).css('top', '0px');
            //liberaSide();
        }
    });

    //$("footer .modulo").sortable();

    $("#coluna_direita").droppable({
        accept: '.modulo',
        tolerance: "touch",
        drop: function (event, ui) {
            $('#coluna_direita .modulo .bloco .title').unbind('click'); //retirar evendo do title
            $(ui.draggable).children('.bloco').children('.content').show(); //mostrar conteudo

            $(ui.draggable).children('.icone').children('img.on').hide(); //esconde ícone cinza
            $(ui.draggable).children('.icone').children('img.off').show(); //mostra o icone branco
            $(ui.draggable).children('.bloco').hide(); //esconde o conteudo

            $(this).append(ui.draggable);

            eventoClicarIconeMenuDireito(); //EVENTO CLICAR ICONE
            //reposicionaLogo();
            resize();
        },
        activate: function (event, ui) {
            $(this).addClass('active');
        },
        deactivate: function (event, ui) {
            $(this).removeClass('active');
            resize();
        }
    });

    $("footer").droppable({
        accept: '.modulo',
        tolerance: "touch",
        drop: function (event, ui) {
            //se o bloco estava omitido no menu direito, mostra para o rodapé
            if ($(ui.draggable).children('.bloco').css('display') == 'none') {
                $(ui.draggable).children('.bloco').show();
            }

            //$('#coluna_direita .modulo .bloco').show(); //mostrar bloco
            $(ui.draggable).children('.icone').children('img.on').hide(); //esconde ícone cinza
            $(ui.draggable).children('.icone').children('img.off').show(); //mostra o icone branco

            $(ui.draggable).children('.icone').unbind('click'); //RETIRAR CLIQUE DO ICONE

            resize();

            $(this).append(ui.draggable);

            eventoClicarModuloRodape();
            //reposicionaLogo();
            resize();
        }
    });*/

    /****************************************************************************************/


    //&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
    //&&&&&                       Eventos do Menu Principal                            &&&&&&
    //&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

    //setarEventosMenuPrincipal();

    // Evento para abrir/fechar menu principal
    /*$('#btn_menu').click(function () {
        $("#menu").toggle("slide", { direction: 'left' }, 200);
        $('#btn_menu, .icon_menu').toggleClass('active');
    });*/
    //&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&






    //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
    //@@@@@                         Lista de alarmes menu direito                       @@@@@
    //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

    //evento ao clicar/selecionar <li> alarme
    $('ul.alarme_lista li').click(function (e) {
        if ($(e.target).is(".check, .icon_verdetalhes, .icon_trataralarme, .maisinfo")) return;

        var check = $(this).children('.options').children('.check');
        if (check.prop('checked')) {
            check.prop('checked', false);
            $(this).removeClass('selected');
        } else {
            check.prop('checked', true);
            $(this).addClass('selected');
        }
    });

    //evento ao selecionar alarme pelo checkbox
    $('.check').change(function () {
        if ($(this).prop('checked')) {
            $(this).parent('.options').parent('li').addClass('selected');
        } else {
            $(this).parent('.options').parent('li').removeClass('selected');
        }
    });

    //evento para carregar mais info de alarmes
    $('.maisinfo').click(function () {
        $(this).next('.alarme_mais').slideToggle(200);
        ($(this).text() == '▼') ? $(this).text('▲') : $(this).text('▼');
    });

    //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@





    //***************************************************************************************
    //*****                                  RODAPÉ                                     *****
    //***************************************************************************************

    //evento ao selecionar um alarme no rodapé
    $('footer .table input[type=checkbox]').click(function () {
        var self = $(this);
        if (self.prop('checked')) {
            var tipo = self.parent('td').next('td').children('span').text(); //pega o tipo do alarme
            //desabilita os tipos diferentes
            self.parents('.table').children('tbody').children('tr').each(function (index, value) {
                if ($(this).children('td:nth-child(2)').children('span').text() != tipo) {
                    $(this).addClass('disabled');
                }
            });
        } else {
            self.parents('.table').children('tbody').children('tr').removeClass('disabled');
        }

        //se apenas 1 item estiver selecionado, habilita o btn de tratar alarme dele
        //se houver mais de 1 item selecionado, desabilita os btn individuais e habilita em massa
        //se não houver item selecionado, desabilita em massa e habilita todos btn individuais
        var qtdeItensSelected = self.parents(".table").children("tbody").children('tr').children('td').children('input[type=checkbox]:checked').length;
        if (qtdeItensSelected == 1) {
            //desabilita todos os botoes para tratar alarme
            self.parents(".table").children("tbody").children('tr').children('td').children("button[title='Tratar Alarme']").prop("disabled", true);
            //habilita somente do item selecionado
            $('.table input[type=checkbox]:checked').next().next("button[title='Tratar Alarme']").prop("disabled", false);
            //habilita o btn de tratamento em massa
            self.parents(".table").children("thead").children('tr').children('th').children("button[title='Tratar Alarme']").prop("disabled", false);
        } else {
            if (qtdeItensSelected == 0) {//nenhum item selecionado
                //habilita todos os btn 'Tratar alarme' individuais
                self.parents(".table").children("tbody").children('tr').children('td').children("button[title='Tratar Alarme']").prop("disabled", false);
                //desabilita o btn de tratamento em massa
                self.parents(".table").children("thead").children('tr').children('th').children("button[title='Tratar Alarme']").prop("disabled", true);
            } else {//mais de 1 item selecionado
                //desabilita todos os botoes para tratar alarme
                self.parents(".table").children("tbody").children('tr').children('td').children("button[title='Tratar Alarme']").prop("disabled", true);
                //habilita o btn de tratamento em massa
                self.parents(".table").children("thead").children('tr').children('th').children("button[title='Tratar Alarme']").prop("disabled", false);
            }
        }
    });

    //evento ao selecionar 'todos' por tipo no rodapé
    $('.selectall li a.sel').click(function () {
        var self = $(this);
        var tipo = self.attr('tipo');
        var flag = 0; //contagem de itens selecionados

        self.parents('.table').children('tbody').children('tr').children('td').children('input[type=checkbox]').prop('checked', false); //des-seleciona todos os checkbox
        self.parents('.table').children('tbody').children('tr').removeClass('disabled'); //habilita todos para seleção

        self.parents('.table').children('tbody').children('tr').each(function (index, value) {
            if ($(this).children('td:nth-child(2)').children('span').text() != tipo) {
                $(this).addClass('disabled');
            } else {
                $(this).children('td:nth-child(1)').children('input[type=checkbox]').prop('checked', true);
                flag++;
            }
        });

        if (flag == 0) {//se não há itens selecionados
            self.parents('.table').children('tbody').children('tr').removeClass('disabled'); //habilita todos para seleção
        }
    });

    //***************************************************************************************



    //evento ao mudar de abas nas grids (deve-se executar resize())
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        resize();
    })



    //evento ao redimensionar tela
    $(window).resize(function () {
        resize();
        //tudo o que precisar de redimensionamento ou re-definição deve estar aqui
    });




    //$$$$$$$$$$$$$$$$$$$$$$$     FORMAS   $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
    $('#alvo_menu').click(function (e) {
        AcaoClickAlvo();
    });

    $('#alvo_options li.selectable').click(function (e) {
        $('#alvo_active').html($(this).children('svg').clone().attr('width', '34').attr('height', '34'));
    });

    //$('#btn_alvo').click(function (e) {
    //    $('#alvo_circle').removeClass().addClass('normal');
    //    $('#alvo_menu').trigger('click');
    //});

    //$('#btn_circle').click(function (e) {
    //    $('#alvo_circle').removeClass().addClass('circle');
    //    $('#alvo_menu').trigger('click');
    //});

    //$('#btn_polygon').click(function (e) {
    //    $('#alvo_circle').removeClass().addClass('polygon');
    //    $('#alvo_menu').trigger('click');
    //});

    //$('#btn_polilinha').click(function (e) {
    //    $('#alvo_circle').removeClass().addClass('normal');
    //    $('#alvo_menu').trigger('click');
    //});

    //$('#btn_cor').click(function (e) {
    //    $('#alvo_circle').removeClass().addClass('normal');
    //});

    //$('#btn_undo').click(function (e) {
    //    $('#alvo_circle').removeClass().addClass('normal');
    //});

    //$('.item').click(function (e) {
    //    var parent = $(this).parent('div');
    //    parent.children('.item').removeClass('active');
    //    $(this).addClass('active');
    //});

});

function AcaoClickAlvo() {
    var L = ($('#alvo').outerWidth() - $('#alvo_options').outerWidth()) / 2;
    $('#alvo_options').css('left', L);
    $('#alvo_options').fadeToggle(300);
    $(this).toggleClass('active');
}



//função para redimensionar tudo necessario
function resize() {
    $('#coluna_direita .modulo .bloco .content').each(function (index, value) {
        $(this).css('max-height', $('footer').offset().top - $(this).parent().prev('.icone').offset().top - 30);
    });

    $('#menu').css('bottom', $('footer').height());

    $('#mapa').css('bottom', $('footer').height());

    //$('#content').css('max-height', $('footer').offset().top - $('header').height() - $('#favoritos').height() - 1);
    //$('#content').css('max-height', $('footer').offset().top - $('#content').offset().top - 1);

    //$('body').height($(window).height());
    alinhaGrid();

    $('.form-account-login').css('margin-top', ($(window).height() - $('.form-account-login').height()) / 2)


    //reposiciona o alvo
    var top = ($('#mapa').outerHeight() - 422) / 2 + $('header').outerHeight();
    var left = ($('#mapa').outerWidth() - 422) / 2 + 28;
    $('#alvo').css('top', top).css('left', left);

    //posiciona menu de ferramentas
    //$('#alvo_options').css('left', ($('#alvo').outerWidth() - $('#alvo_options').outerWidth()) / 2);
}




//***************************************************************************************
//*****                                  RODAPÉ                                     *****
//***************************************************************************************
//evento ao clicar no botão de minimizar de um módulo do rodapé
function eventoClicarModuloRodape(idModulo) {
    //$('footer .modulo .bloco .title').unbind('click');
    //$('footer .modulo .bloco .title').click(function () {
    $('footer #' + idModulo + '.modulo .bloco .title').unbind('click');
    $('footer #' + idModulo + '.modulo .bloco .title').click(function () {

        //var botao = $(this).children('.functions').children('.btn_minimize');
        //$(this).parents('.bloco').children().not('.title').toggle();
        $(this).next('.content').toggle();
        //(botao.text() == '▼') ? botao.text('▲') : botao.text('▼');
        //$('#logo_ginlog').css('bottom', $('footer').height() + 7);
        //reposicionaLogo();
        resize();
    });
}

function alinhaGrid(target) {
    //vm.Perspectiva.alinharGrid();
}

function gridBuilder() {

    //$('#myTab li a').unbind("click");
    //$('#myTab li a').click(function (event) {
    //event.stopPropagation();
    //alinhaGrid();
    //    resize();
    //});

    //aplica evento ao alterar filtros
    $('.grid table thead tr th .dropdown-menu a').unbind('click', realiarGridColunas);
    $('.grid table thead tr th .dropdown-menu a').click(realiarGridColunas);

    alinhaGrid();

    resize();
}

function realiarGridColunas(event) {
    //event.stopPropagation();
    if (event.naoAlinhar)
        return;
    else
        alinhaGrid();
}


//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//@@@@@                               Menu Direito                                  @@@@@
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//evento ao clicar no icone do menu direito
function eventoClicarIconeMenuDireito(idModulo) {

    $('#coluna_direita .modulo .icone').unbind('click');
    $('#coluna_direita .modulo .icone').click(function (e) {
        //$('#' + idModulo + '.modulo .icone').unbind('click');
        //$('#' + idModulo + '.modulo .icone').click(function (e) {

        if ($(this).parent().is('.active')) {//se estiver aberto, fecha

            $(this).next('.bloco').hide("fade", { direction: 'right' }, 200); //esconde o bloco
            $(this).children('img.on').hide();
            $(this).children('img.off').show();
            $(this).parent().removeClass('active'); //retira a classe active

        } else {//senão, esconde o aberto e mostra somente o desejado

            $('#coluna_direita .modulo.active .bloco').hide("fade", { direction: 'right' }, 200); //esconde o bloco active
            $('#coluna_direita .modulo.active .icone img.on').hide(); //troca os icones
            $('#coluna_direita .modulo.active .icone img.off').show();
            $('#coluna_direita .modulo.active').removeClass('active'); //remove a classe active

            $(this).next('.bloco').show("fade", { direction: 'right' }, 200); //mostra o bloco do modulo desejado
            $(this).children('img.on').show(); //troca os icones
            $(this).children('img.off').hide();
            $(this).parent().addClass('active'); //adiciona a classe active
        }
    });
}


/****************************************************************************************/
/*****                       DRAGABLE do módulo                                     *****/
/****************************************************************************************/
function eventoDragModulo(idModulo) {
    /*
        $("#" + idModulo + ".modulo").draggable({
            //handle: '.modulo_title',
            containment: 'body',
            stack: '.modulo',
            cursor: 'move',
            snap: '#coluna_direita, footer',
            snapMode: 'inner',
            snapTolerance: 30,
            revert: true,
            revertDuration: 200,
            zIndex: 999,
            opacity: 0.6,
            //helper: "clone",
            handle: '.icone, .bloco .title',
            stop: function (event, ui) {
                $(this).css('left', '0px');
                $(this).css('top', '0px');
                //liberaSide();
            }
        });
        */

    /*
    $("footer #" + idModulo).resizable({
        handles: 'n',
        maxHeight: 500,
        minHeight: 100,
        resize: function (event, ui) {
            //resize();
        }
    });
    */
}



//&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
//&&&&&                       Eventos do Menu Principal                            &&&&&&
//&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
function ativarIconeHover() {
    $('.icone').unbind('mouseover');
    $('.icone').mouseover(function (event) {
        if (event.handled !== true) {
            //$(this).children('span').show('fade', { direction: 'left' }, 100);
            $(this).children('span').show();
            $(this).children('span').delay(700).hide('fade', { direction: 'left' }, 300);
        }
    });
}

function desativarIconeHover() {
    $('.icone').unbind('mouseover');
}


//&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
//&&&&&                                  Modal                                     &&&&&&
//&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
function openDialog(id, drag, modal, resize) {
    var divID = "#" + id;
    $(divID).dialog({
        closeText: "Fechar",
        draggable: drag,
        show: { effect: "fade", duration: 100 },
        hide: { effect: "fade", duration: 100 },
        modal: modal,
        resizable: resize
    });
}


function carregarMapa() {
    var el = document.getElementById('mapa');
    if (el) {
        var centro = new google.maps.LatLng(-14, -54);;
        var mapOptions = {
            zoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: centro,
            keyboardShortcuts: false
        }
        map = new google.maps.Map(el, mapOptions);

        try {
            //layout.Container.removeClass("hide");
        } catch (e) {
            //layout.Container.removeClass("hide");
        }
    }
}


function linhaSelecionada() {
    return grid.getSelectedRows();
}

//$(document).keydown(function (e) {
//    switch(e.which) {
//        case 13:
//            //ENTER
//            //aplica a ação selecionada
//            return;
//        case 37:
//            //SETA ESQUERDA
//            //Seleciona item anterior
//            selecionaLinhaAnterior()
//            return;
//        case 38:
//            //SETA CIMA
//            //Seleciona item anterior
//            selecionaLinhaAnterior()
//            return;
//        case 39:
//            //SETA DIREITA
//            //Seleciona item próximo
//            selecionaProximaLinha();
//            return;
//        case 40:
//            //SETA BAIXO
//            //Seleciona item próximo
//            selecionaProximaLinha();
//            return;
//        //case 66:
//            //$('#alvo_circle').removeClass().addClass('bomba');
//            //return;
//    }
//});


function setarEventosMenuPrincipal() {
    //FUNÇÃO DO CLIQUE SOBRE UM ITEM DE MENU QUE ABRA OUTRAS JANELAS DE MENU
    $('.menu_item').click(function () {
        //desativarIconeHover();

        if ($(this).parents('.menu_bloco').length) {
            $(this).next('.menu_bloco').css('left', $(this).parents('.menu_bloco').outerWidth() + 1 + 'px');//posiciona a janela do menu
            $(this).next('.menu_bloco').css('top', $(this).position().top); //posiciona a janela do menu
            //$(this).parents('.menu_bloco').show(); //mostra os blocos-pai
        } else {
            $('.menu_bloco').not($(this).next('.menu_bloco')).hide(); //esconde todos os blocos
        }

        $(this).parent('.menu_bloco').children('.menu_bloco').hide();
        $(this).next('.menu_bloco').toggle('fade', 200);
    });

    //evento do botão para fechar janela do menu
    $('.menu_titulo .icon_fechar').click(function () {
        $(this).closest('.menu_bloco').hide();
        $(this).parents('.menu_titulo').parent('.menu_bloco').prev('.icone').removeClass('active');
    });

    //ativar/desativar ícones do menu
    $('#menu .icone').click(function () {
        $('.icone.active').not($(this)).removeClass('active');
        $(this).toggleClass('active');

        if ($('.icone.active').length) {
            desativarIconeHover();
        } else {
            ativarIconeHover();
        }
    });
}


