// ******************************
// Author:  Patrick McDonald
// Date:    23-Apr-2010
// ******************************
// ****** Dependancies **********
// css file:    ajaxpopup-PMD.css
// link structure:  <a class="ajaxPopupTrigger" href="#"  name="ajax_file.aspx" rel="id">Note</a>
//                  name:   ajax file url
//                  rel:    querystring parameter to be passed to ajax file
//
// ***************************                    

$(document).ready(function() {
    var hideDelay = 50;
    var currentID;
    var hideTimer = null;

    // One instance that's reused to show popup
    var container = $('<div id="ajaxPopupContainer">'
      + '<table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="ajaxPopupPopup">'
      + '<tr>'
      + '   <td class="corner topLeft"></td>'
      + '   <td class="top"></td>'
      + '   <td class="corner topRight"></td>'
      + '</tr>'
      + '<tr>'
      + '   <td class="left">&nbsp;</td>'
      + '   <td><div id="ajaxPopupContent"></div></td>'
      + '   <td class="right">&nbsp;</td>'
      + '</tr>'
      + '<tr>'
      + '   <td class="corner bottomLeft">&nbsp;</td>'
      + '   <td class="bottom">&nbsp;</td>'
      + '   <td class="corner bottomRight"></td>'
      + '</tr>'
      + '<tr>'
      + '   <td colspan="3" align="center" class="bottomTail"><div>&nbsp;</div></td>'
      + '</tr>'
      + '</table>'
      + '</div>');

    $('body').append(container);

    $('.ajaxPopupTrigger').live('mouseover', function() {
       
        // the value of the querystring parameter id : ?id=(var id)
        var id = $(this).attr('rel');
        // the url of the ajax file
        var ajaxFile = $(this).attr('name');
        // the current date is passed as a querystringf parameter to ensure 
        // the ajax called file is the most recent i.e. not cached version 
        var curdate = new Date().toString();

        if (hideTimer)
            clearTimeout(hideTimer);

        var pos = $(this).offset();
        var width = $(this).width();
        container.css({
            left: (pos.left + width) + 'px',
            top: pos.top - 95 + 'px'
        });
        
        // loading image
        $('#ajaxPopupContent').html('<img src="images/ajaxpopup/ajax-loader.gif" />');

        // ajax call
        $.get(ajaxFile, { id: id, time: curdate },
        function(data) {
            var text = $(data).find('.ajaxPopupResult').html();
            $('#ajaxPopupContent').html(data);

        });

        container.css('display', 'block');
    });

    $('.ajaxPopupTrigger').live('mouseout', function() {
        if (hideTimer)
            clearTimeout(hideTimer);
        hideTimer = setTimeout(function() {
            container.css('display', 'none');
        }, hideDelay);
    });

    // Allow mouse over of details without hiding details
    $('#ajaxPopupContainer').mouseover(function() {
        if (hideTimer)
            clearTimeout(hideTimer);
    });

    // Hide after mouseout
    $('#ajaxPopupContainer').mouseout(function() {
        if (hideTimer)
            clearTimeout(hideTimer);
        hideTimer = setTimeout(function() {
            container.css('display', 'none');
        }, hideDelay);
    });
});