jquery datepicker hover

want to create a hover dialog box working on the jquery datepicker. on click the dialog should "freeze" and allow selection of the links placed in the dialog to enable the link to be followed

by sebababi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Position dialog relative to mouse movement, dispaly on hover and fix on click</title>
<!-- from datepicker-->
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css"> body{font-family:  Verdana,Arial, sans-serif}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script src="ttt.js"></script>
</head>

<body>
<div id="dialog"></div>
<div id="datepicker"></div>
</body>
</html>

JavaScript

$(document).ready(function()
{

    var selected_dates = new Array();
        // get all the events from the database using AJAX
        selected_dates = getSelectedDates();
    
    var hovered_date = getHoveredDate();
    
/*    tried this to add an individual class to each <td> hoping that we could then rettrieve this information on hover
    and thence retrieve information from the mysql events table to show in the dialog box

    $('#date').datepicker({
    beforeShowDay: function(date) {
        var dateString = 'date-'+date.getDate()+'-'+date.getMonth()+'-'+date.getFullYear();  
        return [true, dateString, ''];
    }
});    */

    $('#datepicker').datepicker({
        dateFormat: 'yy-m-d',
        inline: true,
    /* onSelect freezes the dialog box and populates with a link
        want to populate the dialog on hover and then freeze so that link can be followed*/    
        onSelect: function(date) {
            $('#dialog').dialog({ autoOpen: false });
            //var detail = $(".ui-state-default.ui-state.hover").html();
            $('#dialog').attr('title', "changed");
            $('#dialog').html( '<a href="http://www.xxx/addoreditevent.php?id=1">' + "<span style='color: #7f7fff; font-weight: lighter;'>" + '(edit)  ' + '</span>' + selected_dates +'</a>');
            //make sure we have same functionality when dialog is closed by refreshing the page
            $('#dialog').dialog({
                close: function(event, ui) {
                location.reload();    
                }
            });
            //now open the dialog
            $('#dialog').dialog('open');
            }
            
    });
    



   $('#dialog').attr('title', hovered_date);
    $('#dialog').html( '<a href="http://www.xxx/addoreditevent.php?id=2">' + "<span style='color: #7f7fff; font-weight: lighter;'>" + '(edit)  ' + '</span>' + selected_dates +'</a>');
        
    var dlg = $('#dialog').dialog({
        autoOpen: false,
        draggable: false,
     ...