$(document).ready(function(){
    
    //Para desplegar un apuntador temporal, mientras el mouse está sobre el link del menu
    var anchoBtn;
    var posicion;
    $('#flecha-temporal').hide();
    
    $('#menu').hover(
        function(){
            //Cuando el mouse está sobre el menu, y sobre el link que esta en el menu
            $('.AspNet-Menu-Item a').hover(
                function () {
                    //Cuando el mouse está sobre el link, se toma el ancho y posicion de ese link
                    anchoBtn=$(this).width();
                    posicion=$(this).position();
                    
                    //Se coloca el apuntador con respecto a los datos de posicion y anchura obtenidos anteriormente
                    $('#flecha-temporal').css({
                        'left': posicion.left+anchoBtn+15+'px'
                    });
                    $('#flecha-temporal').show();
                });
            },
            //Cuando el mouse está fuera del menu, se esconde el apuntador
        function(){
            $('#flecha-temporal').hide();
        }
    );
    
    //Cuando el mouse está sobre el apuntador, lo muestra para evitar 'blinks'
    $('#flecha-temporal').hover(
        function () {
            $('#flecha-temporal').show();
        }
    );
    
    //Despliega el apuntador dependiendo de la sección donde se encuentra el usuario actualmente
    if ($('.AspNet-Menu-Selected').length>0) {
        $('#flecha-seccion').hide();
        var anchoBtn=$('.AspNet-Menu-Selected').width();
        var posicion=$('.AspNet-Menu-Selected a').position();
    
        $('#flecha-seccion').css({
            'left': posicion.left+anchoBtn+'px'
        });
        
        $('#flecha-seccion').show();
    }
});