tooltip = null;
document.onmousemove = update_tooltip;
document.open();
/*
document.write("<div style='position:absolute;background-color:696969;-moz-opacity: 0.9;filter: alpha(Opacity=90);' id='pic_details'></div>");
*/
document.write("<div style='position:absolute;' id='pic_details'></div>");
document.close();

function update_tooltip(mouse_event) {
	var posx = 0;
	var posy = 0;
	if (!mouse_event) var mouse_event = window.event;
	if (mouse_event.pageX || mouse_event.pageY) 	{
		posx = mouse_event.pageX;
		posy = mouse_event.pageY;
	}
	else if (mouse_event.clientX || mouse_event.clientY) 	{
		posx = mouse_event.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = mouse_event.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}



    if (tooltip != null) {
    
		var platz=(document.body.clientWidth -150 - posx);
		/*
		showp=document.getElementById('showpos');
		html="x:"+posx+" y:"+posy ;
		html+="<br> rechter Rand: "+document.body.clientWidth ;
		html+="<br>Platz: "+platz;
		showp.innerHTML=html;
		*/

    	if(platz >20){
	        tooltip.style.left = (posx+20) + "px";
	        tooltip.style.top  = (posy+20) + "px";
        }else{
  			tooltip.style.left = (posx-280) + "px";
	        tooltip.style.top  = (posy+20) + "px";
        }

    }
  
}

function show_tooltip(id, inhalt) {

    tooltip = document.getElementById(id);
    	html='';
	
        html ="<table cellpadding='1' cellspacing='0' border='0' bgcolor='#000000' width='150' ><tr><td>";

        html+="<table cellpadding=0 cellspacing=0 border=0 bgcolor=#ffffff width=100% border=0><tr><td>";
        
        html+=inhalt;
                                                
      
        html+="</td>";
		/*
        html+="<td id='showpos'></td>";
        */
		html+="</tr></table>";
        html+="</td></tr></table>";
	
	

    tooltip.innerHTML=html;
    tooltip.style.display = "block"
}

function hide_tooltip() {
    tooltip.style.display = "none";
}