/**
    The following styles must be defined in your document.  You can customize them as necessary.

            #MouseoverPanelId { position:absolute; display:none; left:0px; top:0px; height:0px; z-index:200; }
            .Panel { padding:5px; background-color:#CBD4E1; border:1px solid #1C3B69; font-family:Arial,sans-serif; color:#1C3B69; font-size:11px}
            .PanelTitle { font-size:15px; color:#1C3B69; font-weight:bold; }
    **/

    var offsetFromMouse=[15,15]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
    var maxImageHeight = 600;   // maximum image size.

    if (document.getElementById || document.all){
        document.write('<div id="MouseoverPanelId"><'+'/div>');
    }

    function getPanelObject(){
        if (document.getElementById) {
            return document.getElementById("MouseoverPanelId").style;
        } else if (document.all) {
            return document.all.MouseoverPanelId.style;
        }
    }

    function getPanelObjectNoStyle(){
        if (document.getElementById) {
            return document.getElementById("MouseoverPanelId");
        } else if (document.all) {
            return document.all.MouseoverPanelId;
        }
    }


    function getTrueBody(){
        return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
    }

    function showPanel(imagename, title, description, height){
        if (height > 0){
            maxImageHeight = height;
        }
        document.onmousemove=followMouse;
        newHTML = '<div class="Panel">';
        newHTML = newHTML + '<div class="PanelTitle">' + title + '<'+'/div>';
        newHTML = newHTML + description + '<br/>';
        newHTML = newHTML + '<div align="center" style="padding: 2px;">';
        newHTML = newHTML + '<img src="' + imagename + '" border="0"><'+'/div>';
        newHTML = newHTML + '<'+'/div>';
        getPanelObjectNoStyle().innerHTML = newHTML;
        getPanelObject().display="inline";
    }

    function showTextPanel(height, panelBodyContent){
        if (height > 0){
            maxImageHeight = height;
        }
        document.onmousemove=followMouse;
        getPanelObjectNoStyle().innerHTML = panelBodyContent;
        getPanelObject().display="inline";
    }

    function hidePanel(){
        getPanelObject().innerHTML = " ";
        getPanelObject().display="none";
        document.onmousemove="";
        getPanelObject().left="-500px";
    }

    function followMouse(e){
        var xcoord=offsetFromMouse[0];
        var ycoord=offsetFromMouse[1];
        var docwidth=document.all? getTrueBody().scrollLeft+getTrueBody().clientWidth : pageXOffset+window.innerWidth-15;
        var docheight=document.all? Math.min(getTrueBody().scrollHeight, getTrueBody().clientHeight) : Math.min(window.innerHeight);
        if (typeof e != "undefined") {
            if (docwidth - e.pageX < 380) {
                xcoord = e.pageX - xcoord - 400; // Move to the left side of the cursor
            } else {
                xcoord += e.pageX;
            }
            if (docheight - e.pageY < (maxImageHeight + 110)){
                ycoord += e.pageY - Math.max(0,(110 + maxImageHeight + e.pageY - docheight - getTrueBody().scrollTop));
            } else {
                ycoord += e.pageY;
            }
        } else if (typeof window.event != "undefined"){
            if (docwidth - event.clientX < 380){
                xcoord = event.clientX + getTrueBody().scrollLeft - xcoord - 400; // Move to the left side of the cursor
            } else {
                xcoord += getTrueBody().scrollLeft+event.clientX
            }
            if (docheight - event.clientY < (maxImageHeight + 110)){
                ycoord += event.clientY + getTrueBody().scrollTop - Math.max(0,(110 + maxImageHeight + event.clientY - docheight));
            } else {
                ycoord += getTrueBody().scrollTop + event.clientY;
            }
        }
        if(ycoord < 0) { ycoord = ycoord*-1; }
        getPanelObject().left=xcoord+"px";
        getPanelObject().top=ycoord+"px";
    }