var seeHeatmap = false;
// Heatmap über die Seite legen, hierbei wird die Heatmap in einem
// 250x250-Raster gekachelt
function hm_loadHeatmap()
{
	seeHeatmap = true;
  // URL ermitteln, wie in hc.php
	var url = location.href;
	
	// container2 overflow:auto
	document.getElementById("wrapper").style.overflowY='auto';
	document.getElementById("wrapper").style.overflowX='hidden';
	
	// Fenstergröße ermitteln
	/* from: http://www.quirksmode.org/viewport/compatibility.html#link2 */
	var width, height;
	var test1 = document.body.scrollHeight;
	var test2 = document.body.offsetHeight
	if (test1 > test2)
	{
		width = document.body.scrollWidth;
		height = document.body.scrollHeight;
	}
	else
	{
		width = document.body.offsetWidth;
		height = document.body.offsetHeight;
	}
  /* --- */
	
	// Body finden
	var body = document.getElementsByTagName('body')[0];
	var wrapperContainer = document.getElementById("wrapper");
	wrapperContainer.style.position = "relative";
	wrapperContainer.style.overflow = "hidden";
	var y = document.createElement('div');
	y.id = 'heatmapcontainer';
	y.style.overflow ="hidden";
	y.style.left = '0px';
	y.style.top = '0px';
	y.style.position ="absolute";

  y.style.width = $('#wrapper').width()+'px';
	y.style.height = $('#wrapper').height()+'px';
	wrapperContainer.appendChild(y);
	var heatmapcontainer = document.getElementById("heatmapcontainer");
	
	var jetzt = new Date();
	var filename = jetzt.getTime();
	
	// Kacheln erzeugen
	for (var x = 0; x < width; x += 250)
	{
		for (var y = 0; y < height; y += 250)
		{
			// Kachel durch ein absolut positioniertes <div> mit
			// Hintergrundgrafik darstellen
			var div = document.createElement('div');
			$.ajax({
        url: 'heatmap/hi.php?filename='+filename+'&offsetX=' + x + '&offsetY=' + y + '&url=' + url,
        success: function(data) {          
        
        }
      });
      //div.style.backgroundImage = 'url(/heatmap/img-generate/'+filename+'-' + x + '-' + y + '.png)';
			div.style.position = 'absolute';
			div.style.width = '250px';
			div.style.height = '250px';
			div.style.left = x + 'px';
			div.style.top = y + 'px';
			var img =document.createElement("IMG");
		  img.src= "/heatmap/img-generate/"+filename+"-" + x + "-" + y + ".png";
		  img.id = "heatmapimage-"+x+"-"+y;
      div.appendChild(img);
			heatmapcontainer.appendChild(div);
		}
	}
	
	// settimeout refresh image
	setTimeout ( refreshHeatmapImage, 3000 );
}
// Optional: Heatmap direkt beim Laden der Seite anzeigen
//window.onload = hm_loadHeatmap;

function refreshHeatmapImage(){
  var jetzt = new Date();
	var zeit = jetzt.getTime();
  var x = $('#heatmapcontainer img').length;
  for(i=0;i<x;i++){
    var imageid = $('#heatmapcontainer img')[i].id;
    var imagesrc = $('#'+imageid).attr("src")+'?time='+zeit;
    $('#'+imageid).attr("src",imagesrc);
  }
}