$(document).ready(function() {

    $('tr.tooltip').each(function(index, tr) {
        
        var img_id = $(tr).closest('table').attr('id') + '-' + index;

        $('<img src="assets/images/' + img_id + '.jpg" alt="" />')
            .attr('id', img_id)
            .addClass('tt-main')
            .css({'display' : 'none'})
            .appendTo('body');

        // Handler In (make it visible)
        $(tr).bind('mouseenter', { 'img_id' : img_id }, function(event) {
            $('#' + event.data['img_id'])
                .css({'display' : 'block'});
        });

        // Handler out (make it invisible)
        $(tr).bind('mouseleave', { 'img_id' : img_id }, function(event) {
            $('#' + event.data['img_id'])
                .css({'display' : 'none'});
        });
        
        // Mouse move
        $(tr).bind('mousemove', { 'img_id' : img_id }, function(event) {
            $('#' + event.data['img_id'])
                .css({'top' : event.pageY+15, 'left' : event.pageX+15});
            
        });

    });


});