//preload images parameters
var counter = 1;
var totalImg = 0;
var loading = document.getElementById('loading');
var loading_info = document.getElementById('loading-info');
var pro_bar = document.getElementById('pro-bar');
//tempporary img holder 
var img_holder = document.getElementById('img-holder');
//screen obj
var iniScreen = document.getElementById('iniScreen');
var appScreen = document.getElementById('appScreen');
var app_footer = document.getElementById('app-footer');
//grid view obj
var grid_view = document.getElementById('grid-view');
var grid_list = document.getElementById('grid-list');
//grid view obj
var page_view = document.getElementById('page-view');
var page_row = document.getElementById('page-row');
//other btn and info box
var btn_category = document.getElementById('btn-category');
var tip = document.getElementById('tip');
var popup_box = document.getElementById('popup-box');
var email_link = document.getElementById('email-link');
var indicator = document.getElementById('indicator');
var indi_bar = document.getElementById('indi-bar');
//ads obj
var ads_google = document.getElementById('ads-google');
var ads_admob = document.getElementById('ads-admob');

//load template img
var cate_id = "";
var xmlData; //save xml tree

//all category img array
var cate_img_array;

//generate template
var mailStr = new Array();
var temp_id = ""; //for the selected template page id
var temp_code = new Array();








function startApp() {
	if (!window.navigator.standalone) {
		hideAddress();
		
		iniScreen.style.height = "416px";
		app_footer.style.top = "395px";
		grid_view.style.height = "296px";
		page_view.style.height = "325px";
	} else {
		appScreen.style.height = "460px";
		ads_google.style.top = "410px";
		ads_admob.style.top = "410px";
		
		grid_view.style.height = "340px";
		page_view.style.height = "365px";
		tip.style.top = "387px";
	}
	addLog('Colour Mail');
	iniScreen.style.display = "block";
	//appScreen.style.display = "none";
	appScreen.style.visibility = "hidden";
	loading.style.display = "block";
	btn_category.style.display = "none";
	indicator.style.display = "none";
	
	ads_google.style.visibility = "visible";
	ads_admob.style.visibility = "hidden";
	
	page_row.addEventListener("webkitTransitionEnd", onTransEnd, false);
	grid_list.addEventListener("webkitTransitionEnd", onTransEnd, false);
	
	cate_img_array = document.getElementById('cate-list').innerHTML.split(",");
	totalImg = cate_img_array.length;
	loadCateImg();
}

/* -----------------------------------------------------------------
	Preload all category images and show grid view
	
	NB:  "img.onload =" must be before "img.src ="
--------------------------------------------------------------------*/

function loadCateImg() {
	/* using HTML DOM to load - Will load images one by one */
	
	var imgObj = document.createElement("img");
	imgObj.onload = onCateImgLoad;
	
	imgObj.setAttribute("src","img/temp/"+cate_img_array[counter-1]+"/icon.jpg");
	imgObj.setAttribute("id","im-cate-"+counter);
	imgObj.setAttribute("style",'display:none;');	
	img_holder.appendChild(imgObj);
}

function onCateImgLoad() {
	counter++;	

	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";
		loadCateImg();
		
	} else {
		counter = 1;
		pro_bar.style.width = "0px";
		loading.style.display = "none";
		loading_info.innerHTML = "Loading ... ";
		showGridView();
	}
}

function showGridView() {
	var cate_line = 0;
	for (j = 1; j <= totalImg; j++) {
		cate_line = (j-j%4)/4;
		var divObj = document.createElement("div");
		if (j%4 == 0) {
			divObj.setAttribute('style','left:'+String(24+3*74)+'px; top:'+String((cate_line-1)*65)+'px; background-image:url('+document.getElementById('im-cate-'+String(j)).src+')');
		} else{
			divObj.setAttribute('style','left:'+String(24+(j%4-1)*74)+'px; top:'+String(cate_line*65)+'px; background-image:url('+document.getElementById('im-cate-'+String(j)).src+')');
		}
		divObj.setAttribute('id',cate_img_array[j-1]);
		divObj.className = "category-icon";
		divObj.setAttribute("onclick","showTemplate('"+cate_img_array[j-1]+"')");
		grid_list.appendChild(divObj);	
	}
	
	grid_view.addEventListener("touchstart",startTouchGrid,false);
	grid_view.addEventListener("touchmove",moveTouchGrid,false);
	grid_view.addEventListener("touchend",endTouchGrid,false);
	
	var total_cate_line = 0;
	if (totalImg%4 == 0) {
		total_cate_line = totalImg/4;
	} else {
		total_cate_line = (totalImg-totalImg%4)/4+1;
	}
	
	gd_height = total_cate_line*65; //total height of grid list
	tip.innerHTML = "Touch scroll to see all categories";
	tip.style.top = "45px";
	
	img_holder.innerHTML = ""; //clear temporary img holder
	
	iniScreen.style.display = "none";
	//appScreen.style.display = "block";
	appScreen.style.visibility = "visible";
	grid_view.style.display = "block";
	page_view.style.display = "none";
	
	window.location.href = "#1";
}

//move or select from grid
var gd_startY = 0;
var gd_endY = 0;
var gd_height = 0;
var gd_top = 0;
var dY = 0;

var startT = 0;
var endT = 0;

function startTouchGrid(e) {
	e.preventDefault();
	gd_startY = e.targetTouches[0].pageY;
	gd_top = Number(grid_list.style.top.substr(0,grid_list.style.top.length-2));
	
	startT = new Date().getTime();
}

function moveTouchGrid(e) {
	e.preventDefault();
	gd_endY = e.targetTouches[0].pageY; //if evt.targetTouches[0].pageY has value, then it is move behaviour, or it is tap behaviour
	
	if (e.targetTouches[0].pageY) {
		dY = gd_endY-gd_startY;
		grid_list.style.top = String(gd_top+dY)+'px';
	}
}

function endTouchGrid(e) {
	e.preventDefault();
	
	
	
	if (gd_endY == 0) {
		//console.log(e.target.id);
		if (e.target.id != "grid-view") {
			showTemplate(e.target.id);
		}
		
		grid_view.removeEventListener("touchstart",startTouchGrid,false);
		grid_view.removeEventListener("touchmove",moveTouchGrid,false);
		grid_view.removeEventListener("touchend",endTouchGrid,false);
	} else {
		gd_endY = 0;
		
		endT = new Date().getTime();
		dT = endT-startT;
		
		gd_view_height = Number(grid_view.style.height.substr(0,grid_view.style.height.length-2));
		if (gd_top+dY < -gd_height+gd_view_height) {
			grid_list.style.webkitTransition = "top 300ms";
			grid_list.style.top = String(-gd_height+gd_view_height)+'px';
		} else if (gd_top+dY > 0) {
			grid_list.style.webkitTransition = "top 300ms";
			grid_list.style.top = '0px';
		} else {
			 if (dT < 300) {
			
				grid_list.style.webkitTransition = "top "+String(600-dT)+"ms cubic-bezier(0, 0, 0, 1.0)";
				var currTop = Number(grid_list.style.top.substr(0,grid_list.style.top.length-2));
				if (currTop+2.2*dY < -gd_height+gd_view_height) {
					grid_list.style.top = String(-gd_height+gd_view_height)+'px';
				} else if ((currTop+2.2*dY > 0)) {
					grid_list.style.top = '0px';
				} else {
					grid_list.style.top = String(currTop+2.2*dY)+"px";
				}
			}
		}
	}
	window.location.href = "#1";
}


/* ----------------------------------------------

When click a template category, load dat.xml, then load all template images, finially show page row

------------------------------------------------- */
function showTemplate(id) {
	window.location.href = "#1";
	
	grid_view.style.display = "none";
	page_view.style.display = "block";
	btn_category.style.display = "none";
	tip.style.display = "none";
	indicator.style.display = "none";
	
	ads_google.style.visibility = "hidden";
	ads_admob.style.visibility = "visible";
	
	cate_id = id;
	
	xmlData = null;
	loadData(id); //load xml template info
}

//load xml template info
function loadData(id) {
	xmlHttp = GetXmlHttpObject();
	if (xmlHttp == null) {
		alert ("Browser does not support HTTP Request");
		return;
	}
	
	var url = "img/temp/"+id+"/dat.xml";
	xmlHttp.onreadystatechange = afterLoadData;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);	
}

function afterLoadData() {
	if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        if (xmlHttp.status == 200) {	
			xmlData = xmlHttp.responseXML;
			loading.style.display = "block";
			loadTempImg(); // load images according to xml data
        } else {
            alert("There was a problem retrieving the XML data:\n" + xmlHttp.statusText+"\n"+xmlData);
        }
    }
}

function loadTempImg() {
	/* using XML DOM to load - Will load images one by one */
	
	var imgs = xmlData.getElementsByTagName("img");
	totalImg = imgs.length;
	
	var imgObj = document.createElement("img");
	imgObj.onload = onTempImgLoad;
	
	imgObj.setAttribute("src","img/temp/"+cate_id+"/"+imgs[counter-1].getAttribute("src"));
	imgObj.setAttribute("id","im-"+counter);
	imgObj.setAttribute("style",'display:none;');	
	img_holder.appendChild(imgObj);
}

function onTempImgLoad() {
	counter++;
	
	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";
		loadTempImg();
	} else {
		counter = 1;
		pro_bar.style.width = "0px";
		loading_info.innerHTML = "Loading ... ";
		loading.style.display = "none";
		
		showPageView();
	}
}

//show all template pages
function showPageView() {
	window.location.href = "#1";
	
	var items = xmlData.getElementsByTagName("item");
	var imgs = xmlData.getElementsByTagName("img");
	var imgs2 = xmlData.getElementsByTagName("img2");
	
	for (i = 1; i <= 12; i++) {
		var bgdurl = "";
		var tmparr = window.location.href.split("/");
		tmparr.pop();
		bgdurl = tmparr.join("/");
		bgdurl += "/img/temp/"+cate_id+"/";	//absolute url for email
		
		var img = "<img src='"+bgdurl+imgs[i-1].getAttribute("src")+"' style='"+imgs[i-1].getAttribute("style")+"' />";
		var imgObj = document.getElementById('im-'+String(i));
		imgObj.setAttribute("style",imgs[i-1].getAttribute("style"));
		
		var img2 = "";
		if (imgs2.length != 0) {   // if img2 existed, this is for new dat.xml, if not, img2 is still empty string
			if (imgs2[i-1].getAttribute("src") != "") {
				img2 = "<img src='"+bgdurl+imgs2[i-1].getAttribute("src")+"' style='"+imgs2[i-1].getAttribute("style")+"' />";
			}
		}
		
		
		
		var bgdcolor = items[i-1].getAttribute("bgdcolor");
		var color = items[i-1].getAttribute("color");
		var font = items[i-1].getAttribute("font");
		var corner = items[i-1].getAttribute("corner");
		var size = items[i-1].getAttribute("size");
		var text = items[i-1].getAttribute("text");
		var lineNum = items[i-1].getAttribute("lineNum");
		var lineTNum = "0";
		if (items[i-1].getAttribute("lineTNum") != null) {
			lineTNum = items[i-1].getAttribute("lineTNum");
		}
		var lineTop = "";
		for (j = 1; j <= Number(lineTNum); j++) {
			lineTop += "<br>";
		}
		text = lineTop+text;
		for (j = 1; j <= lineNum; j++) {
			text += "<br>";
		}
		if (font == "Courier New") {
			text += "<br>";
		}
		var bgdimg = "";
		if (items[i-1].getAttribute("bgdimg") != null) {
			bgdimg = items[i-1].getAttribute("bgdimg");
		}
	
		
		var style = '';
		var cnt_template = '';
	
		style = 'padding: 8px; position:relative; width:280px; ';
		
		if (font != 'Zapfino') {
			style += 'line-height:22px; ';
		} else {
			style += 'line-height:60px; ';
		}
		
		style = style+'background-color: '+bgdcolor+'; ';
		if (bgdimg != "") {
			style = style+'background-image: url('+bgdurl+bgdimg+'); ';
		}		
		style = style+'color: '+color+'; ';
		if (font == "Georgia") {
			style = style+'font-family: '+font+'; font-style:italic; ';
		} else {
			style = style+'font-family: '+font+'; ';
		}
		style = style+'font-size: '+size+'px; ';
		style = style+'-webkit-border-radius: '+corner+'; ';
		style = style+'-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.8);';
		
		cnt_template = '<div style="'+style+'"><div>'+text+'<br></div>'+img+img2+'</div>';
		mailStr[i] = "mailto:?";
		mailStr[i] += "body="+encodeURI(cnt_template);
		temp_code[i] = cnt_template;
		
		
		var temp_page_holder = document.createElement('div');
		temp_page_holder.id = 'temp_'+i;
		temp_page_holder.className = "temp_page_holder";
		temp_page_holder.setAttribute('style',"left:"+String(320*(i-1))+"px;");

		
		var temp_page = document.createElement('div');
		temp_page.setAttribute('style', style+" left:12px;");
		temp_page.innerHTML = '<div>'+text+'<br></div>'+img2;
		temp_page.appendChild(imgObj);
		
		
		temp_page_holder.appendChild(temp_page);
		page_row.appendChild(temp_page_holder);
		
		//console.log(mailStr[i]);
	}
	page_view.addEventListener("touchstart",startTouchPage,false);
	page_view.addEventListener("touchmove",moveTouchPage,false);
	page_view.addEventListener("touchend",endTouchPage,false);
	
	page_row.style.left = "10px";
	
	btn_category.style.display = "block";
	
	tip.innerHTML = "Touch move to view templates, tap to choose";
	tip.style.display = "block";
	tip.style.top = "80px";
	
	indicator.style.display = "block";
	indi_bar.style.left = "0px";
	
	img_holder.innerHTML = ""; //clear temporary img holder
}

//scroll and select page
var pg_startX = 0;
var pg_endX = 0;
var pg_width = Math.round(320*11*0.7)-85; //total width of the page_row
var pg_left = 0;
var dX = 0

var startT1 = 0;
var endT1 = 0;

function startTouchPage(e) {
	e.preventDefault();
	pg_startX = e.targetTouches[0].pageX;
	pg_left = Number(page_row.style.left.substr(0,page_row.style.left.length-2));
	
	startT1 = new Date().getTime();
}


function moveTouchPage(e) {
	e.preventDefault();
	pg_endX = e.targetTouches[0].pageX; //if evt.targetTouches[0].pageX has value, then it is move behaviour, or it is tap behaviour
	
	if (e.targetTouches[0].pageY) {
		dX = pg_endX-pg_startX;
		
		var pg_view_width = Number(page_view.style.width.substr(0,page_view.style.width.length-2));
		page_row.style.left = String(pg_left+dX)+'px';
		if (pg_left+dX >= -pg_width+pg_view_width && pg_left+dX <= 10){     
			var barX = Math.round(Math.abs(pg_left+dX)*80/Math.abs(-pg_width+pg_view_width));
			indi_bar.style.left = String(barX)+"px";
		} else if (pg_left+dX > 10) {
			indi_bar.style.left = "0px";
		} else {
			indi_bar.style.left = "80px";
		}
	}
}


function endTouchPage(e) {
	e.preventDefault();
	
	if (pg_endX == 0) {
		//console.log(e.target.parentNode.parentNode.id);
		if (e.target.parentNode.parentNode.id || e.target.parentNode.parentNode.parentNode.id) {
			//console.log(e.target.parentNode.parentNode.id+", "+e.target.parentNode.parentNode.parentNode.id);
			id_str1 = e.target.parentNode.parentNode.id;
			id_str2 = e.target.parentNode.parentNode.parentNode.id;
			temp_id = "";
			if (id_str1.indexOf("temp") != -1) {
				temp_id = e.target.parentNode.parentNode.id;
				//document.getElementById(temp_id).style.webkitTransform = "scale(1.1)";
			} else if (id_str2.indexOf("temp") != -1) {
				temp_id = e.target.parentNode.parentNode.parentNode.id;				
				//document.getElementById(temp_id).style.webkitTransform = "scale(1.1)";
			} else {
				window.location.href = "#1";
				return;	
			}
			
			var mail_id = temp_id.split("_")[1];
			
			email_link.href = mailStr[Number(mail_id)];
			document.getElementById("large-preview").innerHTML =  temp_code[Number(mail_id)];
			popup_box.style.display = "block";
			
			page_view.removeEventListener("touchstart",startTouchPage,false);
			page_view.removeEventListener("touchmove",moveTouchPage,false);
			page_view.removeEventListener("touchend",endTouchPage,false);
			
		}
		
	} else {
		pg_endX = 0;
		
		endT1 = new Date().getTime();
		dT = endT1-startT1;
		
		var pg_view_width = Number(page_view.style.width.substr(0,page_view.style.width.length-2));

		if (pg_left+dX > 10) {
			page_row.style.webkitTransition = "left 300ms";
			page_row.style.left = '10px';
		} else if (pg_left+dX < -pg_width+pg_view_width) {
			page_row.style.webkitTransition = "left 300ms";
			page_row.style.left = String(-pg_width+pg_view_width)+'px';
		} else {
			if (dT < 300) {
			
				page_row.style.webkitTransition = "left "+String(500-dT)+"ms cubic-bezier(0, 0, 0, 1.0)";
				var currLeft = Number(page_row.style.left.substr(0,page_row.style.left.length-2));
				if (currLeft+2.2*dX < -pg_width+pg_view_width) {
					page_row.style.left = String(-pg_width+pg_view_width)+'px';
				} else if ((currLeft+2.2*dX > 0)) {
					page_row.style.left = '0px';
				} else {
					page_row.style.left = String(currLeft+2.2*dX)+"px";
				}
			}
		}
	}
	window.location.href = "#1";
}

function onTransEnd(e) {
	e.target.style.webkitTransition = "none";
	//console.log(e.target.id);
}

//close popup box
function closePopup() {
	window.location.href = "#1";
	popup_box.style.display = "none";
	document.getElementById(temp_id).style.webkitTransform = "none";
	
	page_view.addEventListener("touchstart",startTouchPage,false);
	page_view.addEventListener("touchmove",moveTouchPage,false);
	page_view.addEventListener("touchend",endTouchPage,false);	
}

//back to grid view
function backToGridView() {
	page_view.style.display = "none";
	btn_category.style.display = "none";
	indicator.style.display = "none";
	grid_view.style.display = "block";
	page_row.innerHTML = "";
	
	tip.innerHTML = "Touch scroll to see all categories";
	tip.style.top = "45px";
	
	ads_google.style.visibility = "visible";
	ads_admob.style.visibility = "hidden";
	
	grid_view.addEventListener("touchstart",startTouchGrid,false);
	grid_view.addEventListener("touchmove",moveTouchGrid,false);
	grid_view.addEventListener("touchend",endTouchGrid,false);
}



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