$(function () {
    //Requires
    //<script src="../javascript/jquery-1.3.2.js" type="text/javascript"></script>
    var hideDelay = 500;
    var currentID;
    var hideTimer = null;

    // this container is not used in this implementation
    var container = $('<div id="popupContainer">'
      + '<table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="popupPopup">'
      + '<tr>'
      + '   <td class="corner topLeft"></td>'
      + '   <td class="top" width="100"></td>'
	  + '   <td class="middletop" width="20"></td>'
	  + '   <td class="top" width="100"></td>'
	  + '   <td class="corner topRight"></td>'
      + '</tr>'
      + '<tr>'
      + '   <td class="left">&nbsp;</td>'
      + '   <td colspan="3"><div id="popupContent"></div></td>'
      + '   <td class="right">&nbsp;</td>'
      + '</tr>'
      + '<tr>'
      + '   <td class="corner bottomLeft">&nbsp;</td>'
      + '   <td class="bottom" colspan="3">&nbsp;</td>'
      + '   <td class="corner bottomRight">&nbsp;</td>'
      + '</tr>'
      + '</table>'
      + '</div>');
    // A simple div with border
      /* original width 267px*/
    var container2 = $('<div id="popupContainer">'
      + '<div style="width: 250px; border: 4px solid #666666;" class="popupPopup">'
      + '<div id="popupContent"></div>'
      + '<div id="popdiag"></div></div>');

    $('#containerperfdetails').append(container2);

    $('.PopupTrigger').live('mouseover', function () {
        // format of 'rel' tag: pageid,personguid   
        var settings = $(this).attr('rel').split(',');
        var pageID = settings[0];
        currentID = settings[1];

        // If no guid in url rel tag, don't popup blank   
        if (currentID == '')
            return;

        if (hideTimer)
            clearTimeout(hideTimer);


        //OFFSET  
        var pos = $(this).offset();
        var width = $(this).width();
        var pos2 = $('#sidebar-header').offset;
        container.css({
            left: (pos.left + width) + 'px',
            top: pos.top + 'px'
        });

        //CUSTOM: MINICAL OFFSET
        var pos3 = $('#minicalendar').offset();
        var width2 = $('#minicalendar').width();
        var height2 = $('#minicalendar').height();
        var mouseTop = $(this).offset();

        container2.css({
            /*(mouseTop.left) - pos3.left + 5 + 'px',*/
            left: 1 + 'px',
            top: (mouseTop.top) - pos3.top + 70 + 'px'
        });


        container2.css('display', 'block');

        $("#popupContent").text('');
        $("#PopupResult").hide();
        $("#PopupResult").text('');
        $('#popupContent').html('&nbsp;');
        //$('#popdiag').html('MouseTop: ' + mouseTop.top + 'px | Pos3left: ' + pos3.left + 'px | Posleft: ' + pos.left + 'px');

        //Load content
        var sUID = Math.random() * Math.random();
        $('#popupContent').html('<div id=\"cpopLoading\">&nbsp;</div>');
        //$('#popupContent').load('popup/popdetail.aspx?id=' + pageID + '&uid=' + sUID, { 'p': pageID});
        $('#popupContent').load('/popup/popPerfByDate.aspx?d=' + pageID + '&uid=' + sUID, { 'p': pageID }); //Pass In Date as Page ID


        //Alt. Load Content
        /*
        $.ajax({   
        type: 'GET',   
        url: 'popdetail.aspx',   
        data: 'id=' + pageID + '&guid=' + currentID,   
        success: function(data)   
        {   
        // Verify that we're pointed to a page that returned the expected results.   
        if (data.indexOf('PopupResult') < 0)   
        {   
        $('#popupContent').html('<span >Page ' + pageID + ' did not return a valid result' + currentID + '</span>');   
        }   
  
        // Verify requested since we could have multiple ajax   
        // requests out if the server is taking a while.   
        if (data.indexOf(currentID) > 0)   
        {                     
        var text = $(data) ;//.find('.PopupResult').html();   
        $('#popupContent').html(data); 
        $("#cpopLoading").hide();  
        $("#popupContent").show();  
        $("#PopupResult").show();   
        }   
        }   
        });   
        */

        //HIDE LOADER 
        $("#popupContent").show();
        $("#PopupResult").show();
        //    container.css('display', 'block');   

    });

    $('.PopupTrigger').live('mouseout', function () {
        if (hideTimer)
            clearTimeout(hideTimer);
        hideTimer = setTimeout(function () {
            $("#popupContent").text('');
            $("#PopupResult").hide();
            $("#PopupResult").text('');
            //SHOW LOADER
            $('#popupContent').html('<div id=\"cpopLoading\">&nbsp;</div>');
            container2.css('display', 'none');
        }, hideDelay);
    });

    // Allow mouse over of details without hiding details   
    $('#popupContainer').mouseover(function () {
        $("#popupContent").show();
        $("#PopupResult").show();
        if (hideTimer) {
            clearTimeout(hideTimer);
        }

    });

    // Hide after mouseout   
    $('#popupContainer').mouseout(function () {
        if (hideTimer)
            clearTimeout(hideTimer);
        hideTimer = setTimeout(function () {
            $("#popupContent").text('');
            $("#PopupResult").hide();
            $("#PopupResult").text('');
            //SHOW LOADER
            $('#popupContent').html('<div id=\"cpopLoading\">&nbsp;</div>');
            container2.css('display', 'none');
        }, hideDelay);
    });
});