$(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 doc_rows_click = $('tr.doc-row td.clck', 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 = -30; // 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);
        var table_height = $('.docs-content-wrapper').height();
        panel.css({height:table_height, 'overflow-y':'auto'});
        $('.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);
    }

    $('.toggle_doc_status').on('click', function(e){
        e.preventDefault();
        $this = $(this);
        var doc_id = $this.closest("tr").data("id")
        var doc_type = $this.data("doctype")
        var doc_attr = $this.data("attr")
        $.post('/my/docs/ajax_toggle_doc_status/' + doc_type + '/' + doc_id + '/' + doc_attr + '/', function(data){ 
            $this.text(data[0]);
            $this.removeClass('doc_status1 doc_status2 doc_status3 doc_statustrue doc_statusTrue doc_statusFalse doc_statusfalse');
            $this.addClass('doc_status' + data[1]);
        })

    });

    doc_rows_click.click(function(e){
        e.preventDefault();
        var link = $($(this).parent().find('a')[0]).attr('href');
        location.replace(link);
    })
});