// JavaScript Document

//get xmlHTTP object
var xmlHttp

function GetXmlHttpObject()
{
	var xmlHttp=null;
	try
	 {
		 // Firefox, Opera 8.0+, Safari
		 xmlHttp=new XMLHttpRequest();
	 }
	catch (e)
	 {
		 //Internet Explorer
		 try
		  {
			  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		  }
		 catch (e)
		  {
			  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
	 }
	return xmlHttp;
}

//generate search list
function getList() 
{ 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	 { 
		 if (xmlHttp.responseText!="")
		 {
			 document.getElementById('cnt_list').innerHTML = xmlHttp.responseText;
			 document.getElementById('cnt_list').style.top = "0px";
			 window.location.href="#1";
		 }
	 } 
	 if (xmlHttp.readyState==3)
	 {
	 	document.getElementById('cnt_list').innerHTML="<div class='listitem'>Loading ...</div>"
	 }
	 if (xmlHttp.readyState==2)
	 {
	 	document.getElementById('cnt_list').innerHTML="<div class='listitem'>Loading ...</div>"
	 }
	 if (xmlHttp.readyState==1)
	 {
	 	document.getElementById('cnt_list').innerHTML="<div class='listitem'>Loading ...</div>"
	 }
}

//search by index
function searchByIndex(str)
{ 
	document.getElementById('cnt_result').innerHTML=""
	document.getElementById('cnt_result').style.display='none'
	document.getElementById('cnt_list_frame').style.display='block'
	closeIndex();
	
	xmlHttp=GetXmlHttpObject()
	if (xmlHttp==null)
	 {
		 alert ("Browser does not support HTTP Request")
		 return
	 }
	var url="phplib/searchlist.php?q_str="+str
	xmlHttp.onreadystatechange=getList
	xmlHttp.open("GET",url,true)
	xmlHttp.send(null)
}

//search by string
function searchByString(str)
{ 
	document.getElementById('cnt_result').innerHTML=""
	document.getElementById('cnt_result').style.display='none'
	document.getElementById('cnt_list_frame').style.display='block'
	
	xmlHttp=GetXmlHttpObject()
	if (xmlHttp==null)
	 {
		 alert ("Browser does not support HTTP Request")
		 return
	 }
	var url="phplib/searchwordlist.php?q_str="+str
	xmlHttp.onreadystatechange=getList
	xmlHttp.open("GET",url,true)
	xmlHttp.send(null)
}

//search single word
function searchOneWord(id)
{ 
	xmlHttp=GetXmlHttpObject()
	if (xmlHttp==null)
	 {
		 alert ("Browser does not support HTTP Request")
		 return
	 }
	var url="phplib/searchword.php?id="+id
	xmlHttp.onreadystatechange=getWordDescr
	xmlHttp.open("GET",url,true)
	xmlHttp.send(null)
}

//show search single word result
function getWordDescr() 
{ 
	document.getElementById('cnt_result').style.display = 'block';
	document.getElementById('cnt_list_frame').style.display = 'none';
	
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	 { 
		 if (xmlHttp.responseText!="")
		 {
			 var arr=xmlHttp.responseText.split("~")
			 var strtmp=""
			 strtmp=strtmp+"<p class='result_maintitle'>"+arr[0]+"</p>"
			 strtmp=strtmp+"<p class='result_title'>Description</p>"
			 strtmp=strtmp+"<div class='result_box'>"+arr[1]+"</div>"
			 if (arr[2]!="")
			 {
			 	strtmp=strtmp+"<p class='result_title'>Differences Between HTML 4.01 and HTML 5</p>"
			 	strtmp=strtmp+"<div class='result_box'>"+arr[2]+"</div>"
			 }
			 if (arr[3]!="")
			 {
			 	strtmp=strtmp+"<p class='result_title'>Notes and Tips</p>"
			 	strtmp=strtmp+"<div class='result_box'>"+arr[3]+"</div>"
			 }
			 if (arr[4]!="")
			 {
			 	strtmp=strtmp+"<p class='result_title'>New attributes in HTML 5</p>"
			 	strtmp=strtmp+"<div class='result_box'>"+arr[4]+"</div>"
			 }
			 if (arr[5]!="")
			 {
			 	strtmp=strtmp+"<p class='result_title'>Example</p>"
			 	strtmp=strtmp+"<p class='result_subtitle'>Source</p>"
				strtmp=strtmp+"<div class='result_code_box'>"+arr[5]+"</div>"
				strtmp=strtmp+"<p class='result_subtitle'>Output</p>"
				strtmp=strtmp+"<div class='result_box'>"+arr[6]+"</div>"
			 }
			 //add ads link
			 strtmp=strtmp+"<div class='ads'>See also:&nbsp;&nbsp;&nbsp;&nbsp;"
			 strtmp=strtmp+"<a href='http://www.google.com/cse?cx=partner-pub-5042102399833742%3Af5dcn3-8x3c&ie=ISO-8859-1&q=HTML+guide&sa=Search' target='_blank'>HTML Guide</a>&nbsp;&nbsp;&nbsp;&nbsp;"
			 strtmp=strtmp+"<a href='http://www.google.com/cse?cx=partner-pub-5042102399833742%3Af5dcn3-8x3c&ie=ISO-8859-1&q=learn+javascript&sa=Search' target='_blank'>Learn Javascript</a>"
			 strtmp=strtmp+"</div>"
			 strtmp=strtmp+"<div style='text-align:center; color:#369;line-height:40px; padding-top:10px; padding-bottom:10px; background-color:#fff;' ontouchend='backToList()'>Back</div>"
			 
			 document.getElementById('cnt_result').innerHTML=strtmp
			 window.location.href="#1"
		 }
	 } 
	 if (xmlHttp.readyState==3)
	 {
		document.getElementById('cnt_result').innerHTML="<div class='listitem'>Loading ...</div>"
	 }
	 if (xmlHttp.readyState==2)
	 {
		document.getElementById('cnt_result').innerHTML="<div class='listitem'>Loading ...</div>"
	 }
	 if (xmlHttp.readyState==1)
	 {
		document.getElementById('cnt_result').innerHTML="<div class='listitem'>Loading ...</div>"
	 }
}

function backToList()
{
	document.getElementById('cnt_result').innerHTML = ""
	document.getElementById('cnt_result').style.display = 'none'
	document.getElementById('cnt_list_frame').style.display = 'block'
}


//trace menu actions
function menuAction(str)
{
	var menu1 = document.getElementById("menu1");
	var menu2 = document.getElementById("menu2");
	var menu3 = document.getElementById("menu3");
	//var menu4 = document.getElementById("menu4");
	
	closeIndex();
	
	menu1.style.color = "#333";
	menu2.style.color = "#333";
	menu3.style.color = "#333";
	//menu4.style.color = "#333";
	menu1.style.fontWeight = "normal";
	menu2.style.fontWeight = "normal";
	menu3.style.fontWeight = "normal";
	//menu4.style.fontWeight = "normal";
	
	if (str=="new")
	{
		searchByString(str)
		menu2.style.color = "#36f";
		menu2.style.fontWeight = "bold";
	}
	else if (str=="all")
	{
		searchByIndex(str)
		menu1.style.color = "#36f";
		menu1.style.fontWeight = "bold";
	}
	else if (str=="HTML")
	{
		searchByString(str)
		menu3.style.color = "#36f";
		menu3.style.fontWeight = "bold";
	}
	else
	{
		searchByIndex(str)
	}
}

function showIndex() {
	var menu4 = document.getElementById("menu4");

	menu4.style.color = "#c00";
	menu4.style.fontWeight = "bold";
	
	var obj = document.getElementById('index');
	obj.style.display = "block";
}

function closeIndex() {
	var menu4 = document.getElementById("menu4");
	
	menu4.style.color = "#333";
	menu4.style.fontWeight = "normal";
	
	var obj = document.getElementById('index');
	obj.style.display = "none";
}




/*
Using touch events objects to capture click or touch scroll event act on button list

if it is click event, touchmove event won't happen

if it is touch event, touchmove event will trigger and give a btnEndY value

*/
var startY;
var dY;
var objY;
var objH;
var btnEndY = 0;
var target_list = null;

function scrollStart(evt){
	evt.preventDefault();
	
	target_list = document.getElementById('cnt_list');
	
	startY = evt.targetTouches[0].pageY;
	objY = Number(target_list.style.top.substr(0,target_list.style.top.length-2));
	objH = target_list.offsetHeight;
}

function scrollMove(evt){
	evt.preventDefault();
	btnEndY = evt.targetTouches[0].pageY;
	if (evt.targetTouches[0].pageY) {
		dY = evt.targetTouches[0].pageY-startY;
		
		if (objH > 260) {
			if (objY+dY >= -objH+260 && objY+dY <= 0){
				target_list.style.top = String(objY+dY)+'px';
			} else if (objY+dY < -objH+260) {
				target_list.style.top = String(-objH+260)+'px';
			} else {
				target_list.style.top = '0px';
			}
		}
	
	}
	
}

function scrollEnd(evt){
	var obj;
	
	if (evt.target.id) {
		obj = evt.target;
	} else {
		obj = evt.target.parentNode;
	}
	
	if (btnEndY == 0){
		searchOneWord(obj.id);
	} else {
		btnEndY = 0;
	}
	window.location.href = "#1";
	closeIndex();
}