$(document).ready(function() {
    var doc_row_id_prefix = 'doc_row_';
    var doc_panel_id_prefix = 'doc_panel_';

    var table = $('table#list-docs');
    var doc_rows = $('tr.doc-row', table);
    var panels = $('.doc-panel');
    var row_pointer = $('#row_pointer');

    // on mouse entering thead - hide pointer and panels, and show filters
    $('thead', table).mouseenter(function() {
        row_pointer.hide();
        panels.hide();
        $('.filters').show();
    });

    // on mouse entering tfoot - hide pointer and panels, and show filters
    $('tfoot', table).mouseenter(function() {
        row_pointer.hide();
        panels.hide();
        $('.filters').show();
    });

    // on mouse entering table row (tr) -
    // show only specifil panel and show and adjust pointer coords, and hide filters
    doc_rows.mouseenter(function() {
        var row = $(this);
        var row_vertical_shift = 8; // predefined const: depends on tr top/bottom paddings
        var row_pos = row.position();

        row_pointer.css({
            position: 'absolute',
            top: (row_pos.top - row.height()/2 - row_vertical_shift) + 'px',
            left: (row_pos.left + row.width()) + 'px'
        });
        row_pointer.show();

        var panel = get_panel(row);
        $('.filters').hide();
        panels.not(panel).hide();
        panel.show();
    });

    // on mouse leaving any panel - hide panels and show filters
    panels.mouseleave(function() {
        row_pointer.hide();
        panels.hide();
        $('.filters').show();
    });

    function get_panel(row) {
        // extract doc_id from given tr element. then select and return panel by that doc_id
        var doc_id = row.prop('id').substring(doc_row_id_prefix.length);
        var panel_id = doc_panel_id_prefix + doc_id;
        return $('#'+panel_id);
    }
});