var offsetxpoint=-60;
var offsetypoint=20;
var ie=document.all;
var ns6=document.getElementById && !document.all;
var showtip=false;
var tipbox=document.getElementById("annotation");

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

function anno(maintext,line2,line3,line4){

if (ns6||ie){

 var FragDiv = document.createElement("div");
 var tText=document.createElement("div");
 tText.className = "anno_text";
 tText.appendChild(document.createTextNode(maintext));
 FragDiv.appendChild(tText);
   
 if (typeof line2!="undefined"){
    var tPinyin = document.createElement("div");
    tPinyin.className = "anno_pinyin";
    tPinyin.appendChild(document.createTextNode(line2));
    FragDiv.appendChild(tPinyin);
 }
  
 if (typeof line3!="undefined"){
    var tZhuyin=document.createElement("div");
    tZhuyin.className = "anno_zhuyin";
    tZhuyin.appendChild(document.createTextNode(line3));
    FragDiv.appendChild(tZhuyin);
 }
  
 if (typeof line4!="undefined"){
    var tEnglish=document.createElement("div");
    tEnglish.className = "anno_english";
    tEnglish.appendChild(document.createTextNode(line4));
    FragDiv.appendChild(tEnglish);
 }
 FragDiv.zindex=100;
 document.getElementById("annotation").innerHTML=FragDiv.innerHTML;

 showtip=true;
 return false;
}
}

function updateposition(e){
if (showtip){

    var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
    var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
    var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20;
    var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20;

    var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000

    if (rightedge<tipbox.offsetWidth){
        tipbox.style.left=ie? ietruebody().scrollLeft+event.clientX-tipbox.offsetWidth+"px" : window.pageXOffset+e.clientX-tipbox.offsetWidth+"px";}
    else if (curX<leftedge){
        tipbox.style.left="5px";
    }
else{
    tipbox.style.left=curX+offsetxpoint+"px";
    }

if (bottomedge<tipbox.offsetHeight){
    tipbox.style.top=ie? ietruebody().scrollTop+event.clientY-tipbox.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipbox.offsetHeight-offsetypoint+"px";
}
else{
     tipbox.style.top=curY+offsetypoint+"px";
     tipbox.style.visibility="visible";
    }
}
}

function hideanno(){
if (ns6||ie){
    showtip=false;
    tipbox.style.visibility="hidden";
}

}

document.onmousemove=updateposition;