jQuery(function($){
    
    $("div.thumbnail").mouseover(function(e){
        
        $("div.baloon dl").hide();
        
        var is_large = $(e.target).closest("td").hasClass("cell_large");
        
        var div = $(e.target).closest("div.thumbnail");
        var dt = div.attr("alt");
        
        var pos = get_client_pos(div);
        var pos_abs = div.offset();
        
        var elem;
        if ( pos.top > 100 && pos.left > 150 ){
            elem = $("div.baloon dl.dt"+ dt +".p1");
            pos_abs.top  -= 60;
            pos_abs.left -= 116;
        }
        else if ( pos.top > 100 ){
            elem = $("div.baloon dl.dt"+ dt +".p2");
            pos_abs.top  -= 60;
            pos_abs.left += 64;
            if (is_large){
                pos_abs.left += 100;
            }
        }
        else if ( pos.left > 150 ){
            elem = $("div.baloon dl.dt"+ dt +".p3");
            pos_abs.top  += 70;
            pos_abs.left -= 116;
            if (is_large){
                pos_abs.top += 100;
            }
        }
        else{
            elem = $("div.baloon dl.dt"+ dt +".p4");
            pos_abs.top  += 70;
            pos_abs.left += 64;
            if (is_large){
                pos_abs.top  += 100;
                pos_abs.left += 100;
            }
        }
        
        elem.css({
            top:  pos_abs.top  +"px",
            left: pos_abs.left +"px"
        })
        .show();
        
        return false;
    });
    
    $("div.thumbnail").mouseout(function(e){
        var div = $(e.target).closest("div.thumbnail");
        var dt = div.attr("alt");
        $("div.baloon dl.dt"+ dt).hide();
        return false;
    });
    
    var get_client_pos = function(elem){
        var el = $(elem);
        
        var scrollTop  = document.body.scrollTop  || document.documentElement.scrollTop;
        var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
        
        var client_top  = el.position().top  - scrollTop;
        var client_left = el.position().left - scrollLeft;
        
        return {
            left: client_left,
            top:  client_top
        };
    };
    
});