$(document).ready(function(){   
  
    //Show calendar if link is clicked within the calendar div
    $("#calendar a").hover(function(event){
    
        //use fadeOut if you prefer the popBox to fade rather than disappear immediately if one is open and another date is clicked
        //$("#calendar #popBoxes div").fadeOut("fast");
        
        // linkPos is used to get the x and y coordinates for showing the popBox
        var linkPos = $(this).position();
        
        //Get the box to show
        
        //I've basically created a small array split on the x character to give the number from the <A> id.
        // Name your box id as #box + number
        var boxID = $(this).attr('id');
        var boxArray = boxID.split('x');            
        var showBox = "div#box" + boxArray[1];
        
        // Show the popBox
        $(showBox).fadeIn("slow");
        $(showBox).css( {"left": (linkPos.left + 0 + "px"), "top": (linkPos.top - 0 + "px") } );
           
    },
    function(event){   
        //$("#calendar #popBoxes div").hide();   
    }
    );
    
    //hide popBox
    $("#calendar #popBoxes div").hover(function(event){   
        //$("#calendar #popBoxes div").hide();   
    },
        function(event){   
        $("#calendar #popBoxes div").hide();   
    }
    );
       
});