/**
 * @author DavidPardo
 */
//find the position of the first item on screen and store offsets
//find the first item on screen (after body)
var firstElement=document.getElementsByTagName('body')[0].childNodes[1];
//find the offset coordinates
xOffset=findPosX(firstElement);
yOffset=findPosY(firstElement);
if (IE){ // In IE there's a default margin in the page body. If margin's not defined, use defaults
	var marginLeftExplorer  = parseInt(document.getElementsByTagName('body')[0].style.marginLeft);
	var marginTopExplorer   = parseInt(document.getElementsByTagName('body')[0].style.marginTop);
	/*assume default 10px/15px margin in explorer*/
	if (isNaN(marginLeftExplorer)) {marginLeftExplorer=10;}
	if (isNaN(marginTopExplorer)) {marginTopExplorer=15;}
	xOffset=xOffset+marginLeftExplorer;
	yOffset=yOffset+marginTopExplorer;
}
// add the image element to the dom, absolutely positioned
var style="z-index:100;position:absolute;left:"+xOffset+"px;top:"+yOffset+"px";
var bodytag=document.getElementsByTagName('body')[0]
var newdiv = document.createElement('div');
var currentpage=location.href;
var escapedpage=currentpage.replace(/\W/g,'');
newdiv.setAttribute('id','heatmap');
newdiv.innerHTML = '<img src="'+escapedpage+'.final.png" style="'+style+'" >';
bodytag.appendChild(newdiv);