var GradeCount=0;
drawMenuTable();
drawInputTable();
var follow = document.getElementById("menubar");
var inputElem = document.getElementById("inputBox");
follow.y=50;
inputElem.y=200;
setInterval('play()',30);
	
	
var isIE=false;
if (navigator.appName=="Microsoft Internet Explorer") {isIE = true};
var isHighLight=false;

function drawMenuTable(){
	document.writeln('<table bgcolor="#FFFFE0" id="menubar" align="left" border="0.5" bordercolor="#ffc9c9" style="position:absolute;top:50px;right:20px;padding:2px;color: #FFFFE0;border: 1px solid #666666;text-align:center;color:#000000;cursor:default;font-size: 10pt;">');
	document.writeln('<tr>');
	document.writeln('<td align="center"><span id="menuTitle" style="font-size:8pt;font-weight: bold;">Annotation <br />tool</span></td><td><div style="border: 1px solid black;font-size: 12pt;padding:0;margin:0;cursor:pointer;width:20px;height: 20px;" onmouseover="this.style.backgroundColor=\'#CCC\';" onmouseout="this.style.backgroundColor=\'\';" id="toggleFlag" onclick="toggleMenuTable(\'toggleArea\', \'menuTitle\', this)">+</div></td></tr>');
	document.writeln('<tr><td colspan="2"><table id="toggleArea" style="display:none" width="100%">');

	document.writeln('<tr><td colspan="2" align="center" style="font-size:smaller;">');
	var temp='http://tlh-image.lias.nccu.edu.tw:80/~dspace/cckate/showgrade.php?&url='+encodeURIComponent(location.href);

	if (GradeCount == 0)
		document.writeln("Nobody rate this page");
	else if (GradeCount == 1)
		document.writeln("<a Onclick=\"window.open('"+temp+"');\">This page has "+GradeCount+" grade</a>");
	else
		document.writeln("<a Onclick=\"window.open('"+temp+"');\">This page has "+GradeCount+" grades</a>");
	currenturl = '"http://tlh-image.lias.nccu.edu.tw:80/~dspace/cckate/setgrade.php?url=' +location.href+'"';
	document.writeln('<tr><td colspan="2" style="border-bottom:1px solid black;margin-bottom: 5px;"><a href='+ currenturl +?PHPSESSID=1021d50ebf29e9491b550ac86354047d' target="_blank">Rate this page!</a></td></tr>');
	document.writeln('</td></tr><tr><td width="50%" style="padding-top: 5px;"><button OnClick="highlight();" style="font-size:10pt;width: 100%;">Highlight</button></td>');
	temp='http://tlh-image.lias.nccu.edu.tw:80/~dspace/cckate/showall.php?&url='+encodeURIComponent(location.href);
	document.writeln("<td width=\"50%\" style=\"padding-top: 5px;\"><button OnClick=\"window.open('"+temp+"');\" style=\"font-size:10pt;width: 100%;\">Browser</button></td></tr>");
			document.writeln('<tr><td width="50%"><button OnClick="underLine();"  style="width: 100%;" DISABLED>UnderLine</td>');
	document.writeln('<td width="50%"><button OnClick="showInputBox();" style="width: 100%;font-size: 10pt;" DISABLED>Add Comment</button></td></tr>');
	document.writeln('<tr><td colspan="2">');
	document.writeln('<Form action="http://tlh-image.lias.nccu.edu.tw:80/~dspace/cckate/login.php" method="post" target="_parent"><input type="hidden" name="PHPSESSID" value="1021d50ebf29e9491b550ac86354047d" />');
	document.writeln('<input type="hidden" id="targeturl" name="url" value="'+location.href+'" />');
	document.writeln('<table width="100%" style="text-align:center;font-size: smaller;"><tr><td>Account</td><td>Password</td></tr><tr><td align="center" width="50%">');
	document.writeln('<input type="text" name="account" value="" size="5" style="width: 80%" /></td>');
	document.writeln('<td align="center" width="50%">');
	document.writeln('<input type="password" name="password" value="" size="5" style="width: 80%" /></td></tr>');
	document.writeln('<tr><td><input type="submit" value="Login" /></td>');
	document.writeln('<td><a href="http://tlh-image.lias.nccu.edu.tw:80/~dspace/cckate/CreateAccount.php" target="dum_annotation_registration" style="font-size: 12pt; color: black">Register</a></td>');
	document.writeln('</tr></table></Form></td></tr>');	
		document.writeln('</table></td></tr>');
	document.writeln('</table>');
}

function drawInputTable(){
	document.writeln('<table id="inputBox" style="display:none;position:absolute;top:200px;left:300px;border:1px solid black;" bgcolor="#fff3f3">');
	document.writeln('<tr>');
	document.writeln('<td>');
	document.writeln('<Form action="http://tlh-image.lias.nccu.edu.tw:80/~dspace/cckate/savenote.php" method="post" target="_parent"><input type="hidden" name="PHPSESSID" value="1021d50ebf29e9491b550ac86354047d" />');
	document.writeln('Add an <select name="type"><option value =1>Explanation</option>');
  document.writeln('<option value =2>Synonym</option>');
  document.writeln('<option value =3>Comment</option>');
  document.writeln('<option value =4>Hyperlink</option></select> for this word: <br />[<span id="textdo"></span>]<BR/>');
	document.writeln('<div align="center" style="margin:0;"><textarea name="Content" rows="7" cols="30" style="width:95%;"></textarea></div><BR/>');
	document.writeln('<input type="hidden" name="preText" value="" />');
	document.writeln('<input type="hidden" name="tailText" value="" />');
	document.writeln('<input type="hidden" id="keyword" name="keyword" value="" />');
	document.writeln('<input type="hidden" id="targeturl" name="url" value="" />');
	document.writeln('<input type="hidden" id="ParentID" name="ParentID" value="0" />');
	document.writeln("<div align=\"center\" style=\"margin:0;padding:0;margin-bottom: 5px;\"><input type=\"submit\" value=\"Submit\" onclick=\"hideme('inputBox')\" />");
	document.writeln("<button onclick=\"hideme('inputBox');return false;\" >Close</button></div>");
	document.writeln('</Form>');

	document.writeln('</td>');
	document.writeln('</tr>');
	document.writeln('</table>');
	
}

//Hide Note inputTextArea
function hideme(myid)
{
	document.getElementById(myid).style.visibility='hidden';
}

function showInputBox()
{
	getSelectTxt();
	var inputElem = document.getElementById("inputBox");
	inputElem.style.display = '';
} 

function ShowThisWord()
{
	redirect();
}
//Copy the select word
function getSelectTxt()
{
	isShow=true;
	if(isIE)
	{
		if (document.selection.type!="none")
		{
			sel = document.selection.createRange();
			document.getElementById("textdo").innerHTML = sel.text;
			document.getElementById("keyword").value = sel.text;
			document.getElementById("targeturl").value = location.href;
			var str=sel.text;
			if(str.length > 30)
			{
				hideme("inputBox");
				isShow=false;
				alert("["+str+"]\n\nSelect over 30 charactors ,please select again!");
			}
			else if(str.length==0)
			{ 
				hideme("inputBox");
				isShow=false;
				alert("you did not select any charactor");
			}
			for(var i=0;i<keywordAr.length;i++)
			{
				if(str.indexOf(keywordAr[i].toString())!=-1)
				{
					hideme("inputBox");
					var answer = confirm("["+str+"]There is already exist comment.\n\nare you sure to add an new comment");
					if(answer)
					{
						document.getElementById("keyword").value=keywordAr[i].toString();
						document.getElementById("ParentID").value=IdNumberAr[i].toString();
						isShow=true;
						break;
					}
					else					{
						isShow=false;
						break;					}
				}
			}
		}
	}
	else
	{
		selection=window.getSelection();
		if(selection)
		{
			range=selection.getRangeAt(0);
		}
		else
		{
			range=document.selection.createRange();
		}
		document.getElementById("textdo").innerHTML = range.toString();
		document.getElementById("keyword").value = range.toString();
		document.getElementById("targeturl").value = location.href;
		var str=range.toString();
		if(str.length>30)
		{
			hideme("inputBox");
			isShow=false;
			alert("["+str+"]\n\nSelect over 30 charactors ,please select again!");
		} 
		else if(str.length==0)
		{ 
			hideme("inputBox");
			isShow=false;
			alert("you did not select any charactor");
		}
		for(var i=0;i<keywordAr.length;i++)
		{
			if(str.indexOf(keywordAr[i].toString())!=-1 )
			{
				hideme("inputBox");
				var answer = confirm("["+str+"]There is already exist comment.\n\nare you sure to add an new comment");
				if(answer)
				{
					document.getElementById("keyword").value=keywordAr[i].toString();
					document.getElementById("ParentID").value=IdNumberAr[i].toString();
					isShow=true;
					break;
				}
				else
				{
					isShow=false;
					break;
				}
			}
		}
	}
	if(isShow)
	{
		document.getElementById("inputBox").style.display="";
		document.getElementById("inputBox").style.visibility='visible';
	}
}

function underLine()
{ 
	if(isIE)
	{
		sel = document.selection.createRange();
		document.getElementById("targeturl").value = location.href;
		var str=sel.text;
	}
	else
	{
		selection=window.getSelection();
		if(selection)
		{
			range=selection.getRangeAt(0);
		}
		else
		{
			range=document.selection.createRange();
		}
		var str=range.toString();
	}
   if(str.indexOf("\n")!=-1)
   {
      alert('your selection include line feed,add fail');
      return;
   }
	if(str.length>0)
	{
	   var hc = function(s){return document.createElement(s);}
    	var urlText = hc('input');   
    	with(urlText){name='url';value=location.href;type='hidden';}
    	var selectText = hc('input');
    	with(selectText){name='selText';value=str;}type='hidden';
    	var form  = hc('form');
    	with(form)
      {
        name='myForm';
        style.display = 'none';
        appendChild(urlText);
        appendChild(selectText);
        method = 'POST';
        action = 'http://tlh-image.lias.nccu.edu.tw:80/~dspace/cckate/SaveUnderline.php';
    	}
    	for (var i = document.childNodes.length - 1; i >= 0 ; --i)
      {
        if (document.childNodes[i].nodeType == 1)
         {
            document.childNodes[i].appendChild(form);
            break;   
      	}   
   	}
     form.submit();
   }
}

function redirect()
{
	if(isIE)
	{
		if (document.selection.type!="none")
		{
			sel = document.selection.createRange();
			var str=sel.text;
			for(var i=0;i<keywordAr.length;i++)
			{
				if(str.indexOf(keywordAr[i].toString())!=-1)
				{
					//hideme("inputBox");
					isShow=false;
					window.open('http://tlh-image.lias.nccu.edu.tw:80/~dspace/cckate/showall.php?keyword='+encodeURIComponent(keywordAr[i])+'&url='+encodeURIComponent(location.href),'','');
					break;
				}
			}
		}
	}
	else
	{
		selection=window.getSelection();
		if(selection)
		{
			range=selection.getRangeAt(0);
		}
		else
		{
			range=document.selection.createRange();
		}
		var str=range.toString();
		for(var i=0;i<keywordAr.length;i++)
		{
			if(str.indexOf(keywordAr[i].toString())!=-1 )
			{
				isShow=false;
				window.open('http://tlh-image.lias.nccu.edu.tw:80/~dspace/cckate/showall.php?keyword='+encodeURIComponent(keywordAr[i])+'&url='+encodeURIComponent(location.href),'','');
				break;
			}
		}
	}
}
   
//Show Not Tip
function showtip(current,e,text){
 if (document.getElementsByTagName('ggyy')){
  thetitle=text.split('<br>')
 if (thetitle.length>1){
  thetitles=''
  for (i=0;i<thetitle.length;i++)
   thetitles+=thetitle[i]
   current.title=thetitles
 }
 else
  current.title=text
 }
 else if (document.layers){
  document.tooltip.document.write('<layer bgColor="white" style="border:1px solid black;font-size:12px;">'+text+'</layer>')
  document.tooltip.document.close()
  document.tooltip.left=e.pageX+5
  document.tooltip.top=e.pageY+5
  document.tooltip.visibility="show"
 }
}

//Hide tip
function hidetip(){
 if (document.layers)
 document.tooltip.visibility="hidden";
}

function replaceAll()
{
	}
var keywordAr=new Array()
var IdNumberAr=new Array()

//replace keyword
function replaceKeyWord(a,keywd,notewd,type)
{
	var a;
	for (var i=0;i<a.childNodes.length;i++)
	{	
		if (a.childNodes[i].nodeType==3)
		{	
			//alert([a.childNodes[i].nodeValue, keywd, notewd, type]);
			if(a.childNodes[i].nodeValue.indexOf(keywd)!=-1)
			{

				var sssppp = a.childNodes[i].nodeValue.split(keywd);
				var op = document.createElement("h");
				for (var j=0;j<sssppp.length-1;j++)
				{

					if(type==4)
					{
						oob=document.createElement("ggyy");
						ob = document.createElement("a");
						ob.href=notewd;
						ob.target="_blank";
					}
					else
					{
						oob=document.createElement("b");
						ob = document.createElement("ggyy");
						var temp='http://tlh-image.lias.nccu.edu.tw:80/~dspace/cckate/showall.php?keyword='+encodeURIComponent(keywd)+'&url='+encodeURIComponent(location.href)
						ob.onclick=function(){window.open(temp);}
					}
					ob.onmouseover=function(event){showtip(this,event,notewd);};
					ob.onmouseout=function(){hidetip();};
					var oText = document.createTextNode(sssppp[j]);
					ob.appendChild(document.createTextNode(keywd));
					oob.appendChild(ob);
					op.appendChild(oText);
					op.appendChild(oob);
				}
 				op.appendChild(document.createTextNode(sssppp[sssppp.length-1]));
 				a.replaceChild(op,a.childNodes[i]);
			}
 		}
 		else
 		{
 			if(a.childNodes[i].nodeType==1) replaceKeyWord(a.childNodes[i],keywd,notewd,type);
 		}
	}	
}

//draw underline
function drawUnderline(a,textword)
{
	var a;
	//		alert([a.childNodes.length, textword]);
	for (var i=0;i<a.childNodes.length;i++)
	{	
		if (a.childNodes[i].nodeType==3)
		{	

			if(a.childNodes[i].nodeValue.indexOf(textword)!=-1)
			{
				var sssppp = a.childNodes[i].nodeValue.split(textword);
				var op = document.createElement("undrl");
				op.appendChild(document.createTextNode(sssppp[0]));
				ob =document.createElement("u");
				ob.appendChild(document.createTextNode(textword));
				op.appendChild(ob);
				op.appendChild(document.createTextNode(sssppp[1]));
 				a.replaceChild(op,a.childNodes[i]);
			}
 		}
 		else
 		{
 			if(a.childNodes[i].nodeType==1)drawUnderline(a.childNodes[i],textword);
 		}
	}	
}

function highlight()
{

	if(isHighLight)
	{

		var yyy;
		var spanobj=document.getElementsByTagName("ggyy");
		for (yyy in spanobj)
		{
			if(spanobj[yyy].style!=null)spanobj[yyy].style.background="";
		}
		isHighLight=false;
	}
	else
	{
		var yyy;
		var spanobj=document.getElementsByTagName("ggyy");
		for (yyy in spanobj)
		{
			if(spanobj[yyy].style!=null)spanobj[yyy].style.background="#FFFF00";
		}
		isHighLight=true;
	}
	
}

function play()
{

	var follow_y = (typeof(follow.y) == 'string' ? eval(follow.y) : follow.y);
	if(follow.offsetTop != (document.documentElement.scrollTop + follow_y))
	{
		var dy = (document.documentElement.scrollTop + follow_y - follow.offsetTop) * 0.15;
		dy = (dy > 0 ? 1 : -1) * Math.ceil(Math.abs(dy));
		follow.style.top = follow.offsetTop + dy + 'px';
	}
	
	var inputElem_y = (typeof(inputElem.y) == 'string' ? eval(inputElem.y) : inputElem.y);
	if(inputElem.offsetTop != (document.documentElement.scrollTop + inputElem_y))
	{
		var dEy = (document.documentElement.scrollTop + inputElem_y - inputElem.offsetTop) * 0.15;
		dEy = (dEy > 0 ? 1 : -1) * Math.ceil(Math.abs(dEy));
		inputElem.style.top = inputElem.offsetTop + dEy + 'px';
	}	
	follow.style.display = '';
}

replaceAll();

//-------------------------------------------
//Pudding Function

function toggleMenuTable(toggleID, titleID, flag)
{
	//var ob = document.getElementById(id)
	if (document.getElementById(toggleID).style.display == "none")
	{
		document.getElementById(toggleID).style.display = "block";
		document.getElementById(titleID).style.fontSize = "12pt";
		//document.getElementById(titleID).style.paddingRight = "10px";
		document.getElementById(titleID).innerHTML = "Annotation tool";
		flag.innerHTML = "-";
	}
	else
	{
		document.getElementById(toggleID).style.display = "none";
		document.getElementById(titleID).style.fontSize = "8pt";
		//document.getElementById(titleID).style.paddingRight = "0";
		document.getElementById(titleID).innerHTML = "Annotation <br />tool";
		flag.innerHTML = "+";
	}
}