<script language="javascript" src="scripts/Flyout.js"></script>

<a  class="trigger"
    onmouseenter="ShowFlyout('uxSeveritiesFlyout', 'flyouts/Severities.aspx');" 
    onmouseleave="HideFlyout('uxSeveritiesFlyout');">here</a>.

<div id="uxSeveritiesFlyout" style="visibility:hidden;" class="flyout" >MY FLYOUT</div>

var _xmlhttp;
var _scrollX, _scrollY;
var _flyoutId;
function GetWindowScrollPosition()
{
    if (document.all)
    {
        if (!document.documentElement.scrollLeft)
            _scrollX = document.body.scrollLeft;
        else
            _scrollX = document.documentElement.scrollLeft;

        if (!document.documentElement.scrollTop)
            _scrollY = document.body.scrollTop;
        else
            _scrollY = document.documentElement.scrollTop;
    }   
    else
    {
        _scrollX = window.pageXOffset;
        _scrollY = window.pageYOffset;
    }
}
function ShowFlyout(flyoutId, url)
{
    try
    {
        GetWindowScrollPosition();
        var flyout = document.getElementById(flyoutId);
        flyout.style.left = event.clientX + _scrollX - 320;
        flyout.style.top = event.clientY + _scrollY;
        var html;
        html = "<table width='100%' height='100%'><tr>";
        html = html + "<td align='center' valign='middle'>";
        html = html + "<img src='Images/Loading.gif' /></td>";
        html = html + "</tr></table>";
        flyout.innerHTML = html;
        flyout.style.visibility = "visible";
        loadDoc(flyoutId, url);
    }
    catch (ex)
    {
        alert("Error: " + ex.name + " -- " + ex.message);
    }
}
function HideFlyout(flyoutId)
{
    var flyout = document.getElementById(flyoutId);
    flyout.style.visibility = "hidden";    
}
function loadDoc(flyoutId, url)
{
    _xmlhttp = null;

    //-- Mozilla, etc. ----------------------------------------------------------------
    if (window.XMLHttpRequest)
    {
        _xmlhttp = new XMLHttpRequest()
    }
    //-- IE ---------------------------------------------------------------------------
    else if (window.ActiveXObject)
    {
        try 
        { 
            _xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")
        } 
        catch (e) 
        {
            try 
            { 
                _xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
            } 
            catch (e) {}
        }
    }

    //-- Make AJAX call ---------------------------------------------------------------
    if (_xmlhttp != null)
    {
        var detail = "";
        try 
        {
            detail = "Couldn't set onreadystatechange.";
            _flyoutId = flyoutId;
            _xmlhttp.onreadystatechange = HandleFlyoutResponse;
            
            detail = "OPEN method failed.";
            _xmlhttp.open("GET", url, true);
            
            detail = "SEND method failed.";
            _xmlhttp.send(null);/**/
        }
        catch (ex)
        {
            alert("Error in loadDoc: " + ex.name + " -- " + ex.message + " -- " + detail);
        }
    }
    //else
    //{
    //    alert("Your browser does not support XMLHTTP.")
    //}
}

function HandleFlyoutResponse()
{
    var errMsg;
    errMsg = "Couldn't initialize";
    try
    {
        errMsg = "Couldn't get ReadyState";
        
        if (_xmlhttp.readyState == 4) // 4 = loaded
        {
            var div;
            errMsg = "Couldn't get " + _flyoutId + " element";
            //alert(_flyoutId);
            div = window.document.getElementById(_flyoutId);

            errMsg = "Couldn't get status";
            if (_xmlhttp.status == 200) // 200 = OK
            {
                // handle _xmlhttp.responseText
                errMsg = "Couldn't get Response Text";
                var s = _xmlhttp.responseText;
                
                if (div == null)
                    alert("DIV is null");
                
                errMsg = "Couldn't set Inner HTML to [" + s + "]";
                div.innerHTML = s;
                //alert(_xmlhttp.responseText);
            }
            else
            {
            //alert('HELLO WORLD');
                var a;
                errMsg = "Couldn't construct error message";
                a = "Problem retrieving XML data. Status = " + _xmlhttp.status.toString()
            
                errMsg = "Couldn't set Inner Text";
                div.innerText = a;
            }
        }
        else
        {
            //alert(_xmlhttp.readyState);
        }
    }
    catch (ex)
    {
        alert("Error in HandleFlyoutResponse: " + ex.name + " -- " + ex.message + " -- " + errMsg);
    }
}

div.flyout /* flyouts */
{
    width:              320px;
    border:             solid 1px black; 
    position:           absolute; 
    left:               100px; 
    top:                100px;
    background-color:   #eeeecc;
}
a.trigger /* flyout triggers -- the links you hover over to show a flyout */
{
	border-bottom:		dotted 1.5px blue;
	text-decoration:	none;
	cursor:				hand;
}