function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

window.onload = function()
{
    // Create the tooltip.
    var tt = document.createElement('div');
    tt.style.width = '355px';
    tt.style.height = '205px';

    var content = document.createElement('div');
    content.style.padding = '122px 32px 0 102px';
    content.style.color = '#b4a78c';
    content.style.font = '10px Verdana';
	
    var txt = document.createTextNode('Click to learn more!');

	//var hitArea = document.getElementsByTagName('img')[0];
	var hitArea = document.getElementById('junkyTip');
	//var posX = (findPosX(hitArea) + 355 / 2) - (document.getElementById('content-container').clientWidth / 2) + "px";
	//var posY = (findPosY(hitArea) + 205 / 2) - document.body.scrollTop + "px";
//	var posX = findPos(hitArea)[0] / 2 - 355 + "px";
//	var posY = findPos(hitArea)[1] / 2 - 205 / 2 + "px";

var posX = "-90px";
var posY = "80px";
	
    content.appendChild(txt);    
    tt.appendChild(content);
	
	tt.style.left = posX;
	tt.style.top = posY;
    tt.style.backgroundColor = 'blue';
    tt.style.position = 'absolute';
    tt.style.display = 'none';
    tt.visible = false;
    tt.style.background = 'url(/images/toolTipBG.gif) 0 0 no-repeat';

    //document.body.appendChild(tt);
	hitArea.parentNode.style.position = "relative";
	hitArea.parentNode.appendChild(tt);
    
    document.onmousemove = function(e)
    {
        var e = e || window.event; 
        document.mouseX = e.pageX || e.clientX + document.body.scrollLeft || 0; 
        document.mouseY = e.pageY || e.clientY + document.body.scrollTop || 0;
    }  
    
    hitArea.onmouseover = function(e)
    {
        tt.style.display = 'block';
    }
    hitArea.onmouseout = function(e)
    {
        var e = e || window.event;
	    var target = (window.event) ? e.srcElement : e.target;
	    var relatedTarget = (e.relatedTarget) ? e.relatedTarget : e.toElement;

        // Filter out some mouseouts.
        if (relatedTarget == tt) return;
        var tmp = relatedTarget;
        while (tmp = tmp.parentNode)
        {
    		if (tmp == target) return;
    		else if (tmp == tt) return;
    	}

        tt.style.display = 'none';
    }
    

    tt.onmouseout = function(e)
    {
        var e = e || window.event;
	    var target = (window.event) ? e.srcElement : e.target;
	    var relatedTarget = (e.relatedTarget) ? e.relatedTarget : e.toElement;

        // Filter out some mouseouts.
        if (relatedTarget == hitArea) return;
        else if (relatedTarget == tt) return;
        var tmp = relatedTarget;
        while (tmp = tmp.parentNode)
        {
    		if (tmp == target) return;
    		else if (tmp == tt) return;
    		else if (tmp == hitArea) return;
    	}

        tt.style.display = 'none';
    }
}
