// JavaScript Document
var v_view = document.getElementById('v_view');
var h_view = document.getElementById('h_view');
var footage = document.getElementById('footage');
var cnt_result = document.getElementById('cnt_result');
var cnt_list = document.getElementById('cnt_list');
var cnt_list_container = document.getElementById('cnt_list_container');
var menu = document.getElementById('menu');

var h_table = document.getElementById('table');
var h_table_ext = document.getElementById('table_ext');
var h_result = document.getElementById('cnt_result2');

var loading = document.getElementById('loading');
var loading_info = document.getElementById('loading-info');
var pro_bar = document.getElementById('pro-bar');
var imgPath = new Array(); // save all images' paths
var counter = 1;

var ads_g = document.getElementById('ads-g');
var ads_admob = document.getElementById('ads-admob');
var ads_g_active = false;


//start app here
function startApp() {
	if (!window.navigator.standalone) {
		hideAddress();
	} 
	if (window.navigator.onLine) {
		addLog('Periodic Table');
	}
	loadXML();
}


//detect orientation
function updateOrientation() {
	if (window.orientation == -90 || window.orientation == 90) {
		document.getElementById('viewport').setAttribute("content","width = device-width, height = 268, maximum-scale = 1.0, user-scalable = no");
		loading.style.display = "none";
		v_view.style.display = "none";
		h_view.style.display = "block";
		footage.style.display = "none";
		window.location.href = "#2";
		ads_g.style.display = "none";
		ads_admob.style.display = "none";
	} else {
		document.getElementById('viewport').setAttribute("content","width = device-width, height = 416, maximum-scale = 1.0, user-scalable = no");
		loading.style.display = "none";
		v_view.style.display = "block";
		h_view.style.display = "none";	
		footage.style.display = "block";
		window.location.href = "#1";
		if (window.navigator.standalone) {
			if (ads_g_active) {
				ads_g.style.display = "none";
				ads_admob.style.display = "block";
				ads_g_active = false;
			} else {
				ads_g.style.display = "block";
				ads_admob.style.display = "none";
				ads_g_active = true;
			}
		} else {
			ads_g.style.display = "none";
			ads_admob.style.display = "none";
		}
	}
}


//load xml data
var xmlHttp; //get xmlHTTP object

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;
}

function loadXML() {
	xmlHttp = GetXmlHttpObject();
	if (xmlHttp == null) {
		alert ("Browser does not support HTTP Request");
		return;
	}
	
	var url = "db/elements.xml";
	xmlHttp.onreadystatechange = processResponse;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
}

var xmlData; //save xml tree
// Process xmlHttp response
function processResponse() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        if (xmlHttp.status == 200  || xmlHttp.status == 0) {	
			xmlData = xmlHttp.responseXML;
			getList();
        } else {
            alert("There was a problem retrieving the XML data. error code: " + xmlHttp.status);
        }
    }
}

//list by atomic number
function getList() {
	var tmp = "";
	var items_id = xmlData.getElementsByTagName("p_e");
	var items_name = xmlData.getElementsByTagName("name");
	var items_fullname = xmlData.getElementsByTagName("fullname");
	var items_img = xmlData.getElementsByTagName("img");
	
	var j = 0;
	for (var i = 0; i < items_id.length; i++) {
		
		var btn = document.createElement("div");
		btn.setAttribute("id", items_name[i].childNodes[0].nodeValue);
		btn.setAttribute("class", "listitem");
		btn.setAttribute("ontouchstart", "touchStart(event)");
		btn.setAttribute("ontouchmove", "touchMove(event)");
		btn.setAttribute("ontouchend", "touchEnd(event)");
		
		tmp = items_id[i].childNodes[0].nodeValue+" "+items_name[i].childNodes[0].nodeValue;
		tmp = tmp+" ("+items_fullname[i].childNodes[0].nodeValue+")";
		btn.innerHTML = tmp;
		
		cnt_list_container.appendChild(btn);
		
		if (items_img[i].childNodes[0].nodeValue == "1") {
			j++;
			imgPath[j] = items_name[i].childNodes[0].nodeValue;
		}

	}
	menu.innerHTML = '<input id="q" type="search" width="250" maxlength="2" onfocus="this.value=\'\'" />&nbsp;&nbsp;<input type="button" value="Search" onclick="getItem(document.getElementById(\'q\').value)" />';
	window.location.href = "#1";
	loadImg();
}

//preload all images
function loadImg() {
	/* using HTML DOM to load - Will load images one by one */
	
	var imgObj = document.createElement("img");
	imgObj.onload = onImgLoad;
	
	imgObj.setAttribute("src","db/img/"+imgPath[counter]+".jpg");
	imgObj.setAttribute("id","im-"+imgPath[counter]);
	imgObj.setAttribute("style",'float:left; margin-right: 5px; display:none;');	
	loading.appendChild(imgObj);
}

function onImgLoad() {
	counter++;
	var totalImg = imgPath.length-1;
	
	if (counter <= totalImg) {		
		loading_info.innerHTML = "Loading ... "+Math.round(counter*100/totalImg)+"%";
		pro_bar.style.width = String(Math.round(counter*100/totalImg)*200/100)+"px";
		loadImg();
	} else {
		//loading_info.innerHTML = "All images are loaded.";
		updateOrientation();
	}
}




//get element details
function getItem(str) {
	if (str == "") {
		return;	
	}
	
	var tmp = "";
	var items = xmlData.getElementsByTagName("element");
	var items_name = xmlData.getElementsByTagName("name");
	for (var i = 0; i < items.length; i++) {
		if(items_name[i].childNodes[0].nodeValue.toLowerCase() == str.substring(0,2).toLowerCase()) {
			var itemName = items_name[i].childNodes[0].nodeValue;
			var itemFullname = items[i].getElementsByTagName("fullname")[0].childNodes[0].nodeValue;
			var itemMass = items[i].getElementsByTagName("mass")[0].childNodes[0].nodeValue;
			var itemMPoint = items[i].getElementsByTagName("m_point")[0].childNodes[0].nodeValue;
			var itemBPoint = items[i].getElementsByTagName("b_point")[0].childNodes[0].nodeValue;
			var itemPE = items[i].getElementsByTagName("p_e")[0].childNodes[0].nodeValue;
			var itemN = items[i].getElementsByTagName("n")[0].childNodes[0].nodeValue;
			var itemDens = items[i].getElementsByTagName("density")[0].childNodes[0].nodeValue;
			var itemColor = items[i].getElementsByTagName("color")[0].childNodes[0].nodeValue;
			var itemImg = items[i].getElementsByTagName("img")[0].childNodes[0].nodeValue;
			
			//show content
			menu.innerHTML = "<b>"+itemName+" ("+itemFullname+")</b>";

			tmp = tmp+"<div class='result_txt'>";
			if (itemImg != "0") {
				tmp = tmp+"<span id='img-box'></span>";
			} 
			tmp = tmp+"Atomic number: "+itemPE+"<br>";
			tmp = tmp+"Atomic mass: "+itemMass+"<br>";
			if (itemMPoint != "unknown") {
				tmp = tmp+"Melting point: "+itemMPoint+"&deg;C<br>";
			} else {
				tmp = tmp+"Melting point: "+itemMPoint+"<br>";
			}
			if (itemBPoint != "unknown") {
				tmp = tmp+"Boiling point: "+itemBPoint+"&deg;C<br>";
			} else {
				tmp = tmp+"Boiling point: "+itemBPoint+"<br>";
			}
			tmp = tmp+"Protons/Electrons: "+itemPE+"<br>";
			tmp = tmp+"Neutrons: "+itemN+"<br>";
			if (itemDens != "unknown") {
				tmp = tmp+"Density at 293 K: "+itemDens+" g/cm<sup>3</sup><br>";
			} else {
				tmp = tmp+"Density at 293 K: "+itemDens+"<br>";
			}
			tmp = tmp+"Color: "+itemColor+"</div>";
			//ads
			tmp = tmp+"<div class='ads'>";
			tmp = tmp+"<a href='http://www.google.com/cse?cx=partner-pub-5042102399833742%3Af5dcn3-8x3c&ie=ISO-8859-1&q="+itemFullname+"&sa=Search' target='_blank' class='ads-link'>See <b>"+itemFullname+"</b> in google</a>";
			tmp = tmp+"</div>";		

			break;
		}
	}
	
	//put the used photo back to hidden area
	var img_box = document.getElementById("img-box");
	if (img_box != null) {
		img_box.childNodes[0].style.display = "none";
		loading.appendChild(img_box.childNodes[0]);
	}
	
	if (tmp != "") {
		cnt_result.innerHTML = tmp;
		if (itemImg != "0") {
			var imgObj = document.getElementById("im-"+itemName);
			imgObj.style.display = "block";
			document.getElementById('img-box').appendChild(imgObj);
		}
	} else {
		cnt_result.innerHTML = "<div class='result_txt' style='color:#f00;'>Sorry, can't find the element you inputted. Please check it and try again. Note, only symbol name are accepted.</div>";
	}
	cnt_result.className = "slide_end";
	window.location.href = "#1";
}

function backToList() {
	menu.innerHTML = '<input id="q" type="search" width="250" onfocus="this.value=\'\'" />&nbsp;&nbsp;<input type="button" value="Search" onclick="getItem(document.getElementById(\'q\').value)" />';
	cnt_result.className = "slide_ini";
	window.location.href = "#1";
}


//touch move or click event
var startY;
var dY;
var objY;
var objH;
var moved = 0;

function touchStart(evt){
	evt.preventDefault();
	
	objY = Number(cnt_list_container.style.top.substr(0,cnt_list_container.style.top.length-2));
	objH = cnt_list_container.offsetHeight;
	
	startY = evt.targetTouches[0].pageY;
}

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

function touchEnd(evt){
	var obj = evt.target;
	if (obj.id) {
		if (moved == 0) {
			getItem(obj.id);			
		} else {
			moved = 0;	
		}
	} else {
		if (moved == 0) {
			getItem(obj.parentNode.id);			
		} else {
			moved = 0;	
		}
	}
	
}


// horizontal functions

//show transition metal table
function showTableExt() {
	h_table.className = "div180";
	h_table_ext.className = "div0";
	h_result.style.visibility = 'hidden';
	window.location.href = "#2";
}

//show main table
function showTable() {
	h_table.className = "div0";
	h_table_ext.className = "div-180";
	h_result.style.visibility = 'hidden';
	window.location.href = "#2";
}

function backToTable() {
	h_result.innerHTML = "";
	h_result.style.visibility = 'hidden';
	window.location.href = "#2";
}

function searchItem(str) {
	var tmp = "";
	var items = xmlData.getElementsByTagName("element");
	var items_name = xmlData.getElementsByTagName("name");
	for (var i = 0; i < items.length; i++) {
		if(items_name[i].childNodes[0].nodeValue == str) {
			var itemName = items_name[i].childNodes[0].nodeValue;
			var itemFullname = items[i].getElementsByTagName("fullname")[0].childNodes[0].nodeValue;
			var itemMass = items[i].getElementsByTagName("mass")[0].childNodes[0].nodeValue;
			var itemMPoint = items[i].getElementsByTagName("m_point")[0].childNodes[0].nodeValue;
			var itemBPoint = items[i].getElementsByTagName("b_point")[0].childNodes[0].nodeValue;
			var itemPE = items[i].getElementsByTagName("p_e")[0].childNodes[0].nodeValue;
			var itemN = items[i].getElementsByTagName("n")[0].childNodes[0].nodeValue;
			var itemDens = items[i].getElementsByTagName("density")[0].childNodes[0].nodeValue;
			var itemColor = items[i].getElementsByTagName("color")[0].childNodes[0].nodeValue;
			var itemImg = items[i].getElementsByTagName("img")[0].childNodes[0].nodeValue;
			
			//show content
			var tmp = "";
			tmp = tmp+"<div class='result_txt2' style='padding-bottom:8px'>&nbsp;<font size='4'>"+itemName+"</font> ("+itemFullname+", "+itemPE+")&nbsp;&nbsp;&nbsp;<a href='http://en.wikipedia.org/wiki/"+itemFullname+"' target='_blank'><u>wiki it</u></a></div>";
			tmp = tmp+"<div class='result_txt2'>&nbsp;Atomic mass: "+itemMass+"<br>";
			if (itemMPoint != "unknown") {
				tmp = tmp+"&nbsp;Melting point: "+itemMPoint+"&deg;C<br>";
			} else {
				tmp = tmp+"&nbsp;Melting point: "+itemMPoint+"<br>";
			}
			if (itemBPoint != "unknown") {
				tmp = tmp+"&nbsp;Boiling point: "+itemBPoint+"&deg;C<br>";
			} else {
				tmp = tmp+"&nbsp;Boiling point: "+itemBPoint+"<br>";
			}
			tmp = tmp+"&nbsp;Protons/Electrons: "+itemPE+"<br>";
			tmp = tmp+"&nbsp;Neutrons: "+itemN+"<br>";
			if (itemDens != "unknown") {
				tmp = tmp+"&nbsp;Density at 293 K: "+itemDens+" g/cm<sup>3</sup><br>";
			} else {
				tmp = tmp+"&nbsp;Density at 293 K: "+itemDens+"<br>";
			}
			tmp = tmp+"&nbsp;Color: "+itemColor+"</div>";
			//ads
			tmp = tmp+"<div class='ads2'>See more:&nbsp;&nbsp;&nbsp;";
			tmp = tmp+"<a href='http://www.google.com/cse?cx=partner-pub-5042102399833742%3Af5dcn3-8x3c&ie=ISO-8859-1&q=periodic+table&sa=Search' target='_blank' class='ads-link2'>Periodic Table</a>";
			tmp = tmp+"</div>";
			//close btn
			tmp = tmp+"<div style='position:absolute; width:30px; height:30px; top:5px; right:5px; background-image:url(img/close.png); background-repeat:no-repeat; background-position: 12px 3px; cursor:pointer;' onclick='backToTable()'></div>";	
			break;
		}
	}
	if (tmp != "") {
		h_result.innerHTML = tmp;
		h_result.style.visibility = 'visible';		
	}
	window.location.href = "#2";
}