var imgWidth = 0;
    var imgHeight = 0;
    var offsetfrommouse= { x : 0, y :10 } //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset


    if (document.getElementById || document.all)
    {
        document.write('<div id="trailimageDebug">Debug</div>')
        document.write('<div id="trailimageDiv" style="display: none;">')
        document.write('    <img id="trailimageImg" src="images/1x1_transparent.gif" border="0" width="1" height="1">')
        document.write('    <div id="trailimageTitle">Test</div>')
        document.write('    <div id="trailimageDescription"><p>Test Body Copy</p></div>')
        document.write('</div>')
        document.write('<div id="popupDiv" style="display: none;"></div>')
    }

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


    function showtrail(width, height, title, description, imgUrl)
    {
        var     thefloater = document.getElementById("trailimageDiv");
        var     thefloatImg = document.getElementById("trailimageImg");
        var     thefloatTitle = document.getElementById("trailimageTitle");
        var     thefloatDescription = document.getElementById("trailimageDescription");
        
        imgWidth = width;
        imgHeight = height;
        thefloatImg.style.width =  width + "px";
        thefloatImg.style.height =  height + "px";
        thefloatImg.src =  imgUrl;
        thefloatTitle.innerHTML =  title;
        thefloatDescription.innerHTML =  description;
        thefloater.style.display="block";
        document.onmousemove = function (e) { followmouse (e, offsetfrommouse); };
    }


    function findPosition (anElement)
    {
        var curleft = 0;
        var curtop = 0;
        var result = {};

        while (anElement)
        {
          curleft += anElement.offsetLeft;
          curtop += anElement.offsetTop;
          anElement = anElement.offsetParent;
        }
        
        result.x = curleft;
        result.y = curtop;
        
        return result;
    }
    
    
    function showpopupFixed(relativeTo, offset, width, theHTML)
    {
        var     thefloater = document.getElementById("popupDiv");
        var     thePosition = findPosition (relativeTo);
        
        //offsetfrommouse[0] = -width / 2;
        thefloater.style.width =  width + "px";
        thefloater.innerHTML =  theHTML;
        thefloater.style.display="block";
        followmousecoords (thePosition.x ,thePosition.y, thefloater, offset);
        //thefloater.style.left = (thePosition.x + offset.x) + "px";
        //thefloater.style.top = (thePosition.y + offset.y) + "px";
    }


    function showpopup(width, theHTML, offsets)
    {
        var     thefloater = document.getElementById("popupDiv");
        
        //offsetfrommouse[0] = width / 2;
        thefloater.style.width =  width + "px";
        thefloater.innerHTML =  theHTML;
        thefloater.style.display="block";
        document.onmousemove = function (e) { followmousePopup (e, offsets ? offsets : offsetfrommouse); };        
    }


    function hidetrail()
    {
        var     thefloater = document.getElementById("trailimageDiv");
        thefloater.style.display="none"
        document.onmousemove=""
    }


    function hidepopup()
    {
        var     thefloater = document.getElementById("popupDiv");
        thefloater.style.display="none"
        document.onmousemove=""
    }


    function followmouse(e, offsets)
    {
        if (typeof e != "undefined")
        {
            followmousecoords (e.pageX, e.pageY, document.getElementById("trailimageDiv"), offsets);
        }
        else if (typeof window.event !="undefined")
        {
            followmousecoords (truebody().scrollLeft+event.clientX, truebody().scrollTop+event.clientY, document.getElementById("trailimageDiv"), offsets);
        }
    }


    function followmousePopup(e, offsets)
    {
        if (typeof e != "undefined")
        {
            followmousecoords (e.pageX, e.pageY, document.getElementById("popupDiv"), offsets);
        }
        else if (typeof window.event !="undefined")
        {
            followmousecoords (truebody().scrollLeft+event.clientX, truebody().scrollTop+event.clientY, document.getElementById("popupDiv"), offsets);
        }
    }


    function followmousecoords (x ,y, thefloater, offset)
    {
        var xcoord=offset.x + x;
        var ycoord=offset.y + y;
        var debugText = "";
        
        if (xcoord + $(thefloater).innerWidth() < $(window).scrollLeft() + $(window).innerWidth())
        {
            thefloater.style.left = xcoord + "px";
            debugText += "NORMAL_X:" + xcoord + "<br>";
        }
        else
        {
            thefloater.style.left = (x - offset.x - $(thefloater).innerWidth()) + "px";
            debugText += "FLIP_X:" + x + " " + offset.x + " " + $(thefloater).innerWidth() + "<br>";
        }
        
        if (ycoord + $(thefloater).innerHeight() < $(window).scrollTop() + $(window).innerHeight())
        {
            thefloater.style.top = ycoord + "px";
            debugText += "NORMAL_Y:" + ycoord + "<br>";
        }
        else
        {
            thefloater.style.top = (y - offset.y - $(thefloater).innerHeight()) + "px";
            debugText += "FLIP_Y:" + y + " " + offset.y + " " + $(thefloater).innerHeight() + "<br>";
        }
        
        /*if (console)
        {
          console.log ("" + xcoord + " " + ycoord + ": clientHeight" + thefloater.clientHeight + " docHeight:" + docheight);
        }*/
        document.getElementById("trailimageDebug").innerHTML = debugText;        
    }