var title_bar = document.getElementById("title-bar");
var app_pages = document.getElementById("app-pages");
var main_list = document.getElementById("main-list");
var sub_list = document.getElementById("sub-list");
var doc_view = document.getElementById("doc-view");
var doc_page = document.getElementById('doc-page');
var btn_export = document.getElementById('btn-export');
var export_link = document.getElementById('export-link');
var msg_box = document.getElementById('msg-box');
var admob_ads = document.getElementById('admob_ads');
var google_ads = document.getElementById('google_ads');
var footer = document.getElementById("footage");

var url = ""; //url of the template
doc_view.addEventListener('webkitTransitionEnd', loadDoc, false);

function startApp() {
	getMainDocsList();
	
	if (window.navigator.standalone) {
		admob_ads.style.top = "390px";
		google_ads.style.top = "390px";
		footer.style.top = "440px";
		app_pages.style.height = "345px";
		doc_view.style.height = "315px";
	}
}

function getMainDocsList() {
	main_list.innerHTML = "";
	for (i = 0; i < doctype.length; i++) {
		var btn = document.createElement("div");
		btn.setAttribute("id", "m_"+doctype[i]);
		btn.setAttribute("class", "list-item");
		btn.setAttribute("ontouchstart", "touchStart(event)");
		btn.setAttribute("ontouchmove", "touchMove(event)");
		btn.setAttribute("ontouchend", "touchEnd(event)");
		btn.setAttribute("onclick", "getSubList('"+doctype[i]+"')");
		btn.innerHTML = doctype[i];
		main_list.appendChild(btn);
	
	}
}

function getSubList(q) {
	var sub_array = eval("sub_"+q);
	sub_list.innerHTML = "";
	for (i = 0; i < sub_array.length; i++) {
		var btn = document.createElement("div");
		btn.setAttribute("id", "s_"+q+"-"+sub_array[i]);
		btn.setAttribute("class", "list-item");
		btn.setAttribute("ontouchstart", "touchStart(event)");
		btn.setAttribute("ontouchmove", "touchMove(event)");
		btn.setAttribute("ontouchend", "touchEnd(event)");
		btn.setAttribute("onclick", "getDoc('"+q+"-"+sub_array[i]+"')");
		btn.innerHTML = sub_array[i];
		sub_list.appendChild(btn);
	}
	
	main_list.style.left = "-320px";
	sub_list.style.left = "0px";
	doc_view.style.left = "320px";
	sub_list.style.top = "40px";
	
	title_bar.innerHTML = "<span style='color:#333;' onclick='backToMainList()'>- Docs Categories</span> :: "+q;
	
	admob_ads.style.visibility = "hidden";
	google_ads.style.visibility = "visible";
}

function getDoc(q) {
	var str_array = q.split("-");
	
	url = "db/"+str_array[0]+"/";
	var file_name = str_array[1].split(" ").join("_")+".htm";
	url += file_name;
	
	main_list.style.left = "-640px";
	sub_list.style.left = "-320px";
	doc_view.style.left = "0px";
	doc_page.style.display = "none";
	
	title_bar.innerHTML = "<span style='color:#333;' onclick='backToSubList(\""+str_array[0]+"\")'>- "+str_array[0]+"</span> :: "+str_array[1];
	
	admob_ads.style.visibility = "visible";
	google_ads.style.visibility = "hidden";
	
}

function loadDoc() {
	if (url != "") {
		msg_box.style.display = "block";
		loadTemplate(url);	
	}
}

function backToMainList() {
	main_list.style.left = "0px";
	sub_list.style.left = "320px";
	doc_view.style.left = "640px";
	main_list.style.top = "40px";
	
	title_bar.innerHTML = "Docs Categories</span>";
	
	admob_ads.style.visibility = "visible";
	google_ads.style.visibility = "hidden";
}

function backToSubList(q) {
	main_list.style.left = "-320px";
	sub_list.style.left = "0px";
	doc_view.style.left = "320px";
	btn_export.style.marginLeft = "160px";
	sub_list.style.top = "40px";
	
	title_bar.innerHTML = "<span style='color:#333;' onclick='backToMainList()'>- Docs Categories</span> :: "+q;
	
	admob_ads.style.visibility = "hidden";
	google_ads.style.visibility = "visible";
}


//touch and click events

/*
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 touchStart(evt){
	evt.preventDefault();
	
	var obj = evt.target;
	var id_tmp;
	
	if (obj.id) {
		id_tmp = obj.id.split("_");
	} else {
		id_tmp = obj.parentNode.id.split("_");
	}
	
	if (id_tmp[0] == "m") {
		target_list = main_list;
	} else if (id_tmp[0] == "s") {
		target_list = sub_list;
	} else {
		target_list = doc_page;
	}
	
	startY = evt.targetTouches[0].pageY;
	objY = Number(target_list.style.top.substr(0,target_list.style.top.length-2));
	objH = target_list.offsetHeight;
}

function touchMove(evt){
	evt.preventDefault();
	btnEndY = evt.targetTouches[0].pageY;
	if (evt.targetTouches[0].pageY) {
		dY = evt.targetTouches[0].pageY-startY;
		
		if (!window.navigator.standalone) {
			if (target_list.id != "doc-page") {
				if (objH > 260) {
					if (objY+dY >= -objH+300 && objY+dY <= 40){
						target_list.style.top = String(objY+dY)+'px';
					} else if (objY+dY < -objH+300) {
						target_list.style.top = String(-objH+300)+'px';
					} else {
						target_list.style.top = '40px';
					}
				}
			} else {
				if (objH > 260) {
					if (objY+dY >= -objH+258 && objY+dY <= 25){
						target_list.style.top = String(objY+dY)+'px';
					} else if (objY+dY < -objH+258) {
						target_list.style.top = String(-objH+258)+'px';
					} else {
						target_list.style.top = '25px';
					}
				}
			}
		} else {
			if (target_list.id != "doc-page") {
				if (objH > 305) {
					if (objY+dY >= -objH+345 && objY+dY <= 40){
						target_list.style.top = String(objY+dY)+'px';
					} else if (objY+dY < -objH+345) {
						target_list.style.top = String(-objH+345)+'px';
					} else {
						target_list.style.top = '40px';
					}
				}
			} else {
				if (objH > 305) {
					if (objY+dY >= -objH+303 && objY+dY <= 25){
						target_list.style.top = String(objY+dY)+'px';
					} else if (objY+dY < -objH+303) {
						target_list.style.top = String(-objH+303)+'px';
					} else {
						target_list.style.top = '25px';
					}
				}
			}	
		}
	}
	
}

function touchEnd(evt){
	var obj;
	
	if (evt.target.id) {
		obj = evt.target;
	} else {
		obj = evt.target.parentNode;
	}
	
	if (btnEndY == 0){
		var id_tmp = obj.id.split("_");
		if (id_tmp[0] == "m") {
			getSubList(id_tmp[1]);
		} else if (id_tmp[0] == "s") {
			getDoc(id_tmp[1]);
		} 
	} else {
		btnEndY = 0;
	}
	window.location.href = "#1";
}

/* 
	
xmlHttp object used to load external template files saved in txt format
	
*/

//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 loadTemplate(url) {
	xmlHttp = GetXmlHttpObject();
	if (xmlHttp == null) {
		alert ("Browser does not support HTTP Request");
		return;
	}
	
	xmlHttp.onreadystatechange = processResponse;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
}

function processResponse() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
		msg_box.style.display = "none";
        url = "";
		if (xmlHttp.status == 200) {		
			doc_page.innerHTML = xmlHttp.responseText;
			doc_page.style.height = "auto";
			btn_export.style.marginLeft = "95px";
			doc_page.style.display = "block";
			
			//generate email string
			var body_str = doc_page.innerHTML;
			var subject_str = "Created from iDocs";
	
			export_link.setAttribute("href","mailto:?subject="+encodeURIComponent(subject_str)+"&body="+encodeURIComponent(body_str));
        } else {
           	doc_page.innerHTML = "<div style='padding:5px;'>This template is coming soon, please try to view it later.</div>";
			doc_page.style.height = "300px";
			doc_page.style.display = "block";
			
			export_link.setAttribute("href","#");
        }
		doc_page.style.top = "25px";
		
		
    }
}