var frame = document.getElementById('content');
var oriTitle = document.getElementById('inputTitle');
var oriTxt = document.getElementById('inputBox');
var txtContainer = document.getElementById('txtContainer');
var txt = document.getElementById('txt');
var btnbar = document.getElementById('btnbar');
var subbar = document.getElementById('subbar');
var infobar = document.getElementById('infobar');
var btnBgd = document.getElementById('btnBgd');
var email_link = document.getElementById('btn_email');

var selObj;
var sel = false;
var ini1 = false;
var ini2 = false;
var docMode = "P";

var footage = document.getElementById('footage');
var ads1 = document.getElementById('ads1');
var ads2 = document.getElementById('ads2');
var ads_switch = false;

function startApp() {
	ads1.style.display = "block";	
	ads2.style.display = "none";
	footage.style.display = "none";
	ads_switch = false;
}



//reset original text
function goFormat(){
	if (oriTxt.value == "") {
		alert("Please input your text content.");
		return;
	}
	
	frame.style.left = "-320px";
	window.location.href = "#1";
	
	btnbar.style.height = "35px";
	txtContainer.style.height = "250px";
	txtContainer.style.top = "66px";
	subbar.style.visibility = "hidden";
	infobar.innerHTML = "Editing Page";
	docMode = "P";
	txt.className = "txtSel";
	regEvt();
	
	//remove all HTML tags
	var oriTmp = oriTxt.value.replace(/&(lt|gt);/g, function (strMatch, p1){
 		 	return (p1 == "lt")? "<" : ">";
 		});
 	var oriTmp = oriTmp.replace(/<\/?[^>]+(>|$)/g, "");
	//re-format the original text
	var arrTmp = (oriTmp+"\n").split("\n");
	var newTxt = arrTmp.join('<br>');
	
	arrTmp = newTxt.split(" ");
	newTxt = arrTmp.join('</span> <span style="cursor: pointer;" ontouchstart="touchStart(event)" ontouchmove="touchMove(event)" ontouchend="touchEnd(event)">');
	newTxt = '<span style="cursor: pointer;" ontouchstart="touchStart(event)" ontouchmove="touchMove(event)" ontouchend="touchEnd(event)">'+newTxt+'</span>';
	
	arrTmp = newTxt.split("<br>");
	newTxt = "";
	for (i = 0; i < arrTmp.length-1; i++){
		if (arrTmp[i] != ""){
			newTxt += arrTmp[i]+"</span><br><br><span style='cursor: pointer;' ontouchstart='touchStart(event)' ontouchmove='touchMove(event)' ontouchend='touchEnd(event)'>";
		}
	}
	
	txt.innerHTML = newTxt;
	txt.style.top = "0px";
	getEmailLink();
	
	
	//about ads and footer
	ads1.style.display = "none";	
	ads2.style.display = "none";
	footage.style.display = "block";
	
}

//Change to formatting single word
function setFormat(obj){
	btnbar.style.height = "35px";
	txtContainer.style.height = "250px";
	txtContainer.style.top = "66px";
	subbar.style.visibility = "hidden";
	infobar.innerHTML = "Editing Word";
	
	docMode = "W";
	btnBgd.style.visibility = "hidden";
	txt.className = "txtUnSel";
	
	if (!sel){
		obj.style.backgroundColor = "#bbb";
		selObj = obj;
		sel = true;
	}else{
		selObj.style.backgroundColor = "";
		obj.style.backgroundColor = "#bbb";
		selObj = obj;
	}
}

//formatting functions
function setBold(){
	btnbar.style.height = "35px";
	txtContainer.style.height = "250px";
	txtContainer.style.top = "66px";
	subbar.style.visibility = "hidden";
	
	if (docMode == "W") {
		if (sel){
			if (selObj.style.fontWeight == "bold"){
				selObj.style.fontWeight = "normal";
			}else{
				selObj.style.fontWeight = "bold";
			}
		}
	} else {
		goFormat();
		if (txt.style.fontWeight == "bold"){
			txt.style.fontWeight = "normal";
		}else{
			txt.style.fontWeight = "bold";
		}
	}
}


function setItalic(){
	btnbar.style.height = "35px";
	txtContainer.style.height = "250px";
	txtContainer.style.top = "66px";
	subbar.style.visibility = "hidden";
	
	if (docMode == "W") {
		if (sel){
			if (selObj.style.fontStyle == "italic"){
				selObj.style.fontStyle = "normal";
			}else{
				selObj.style.fontStyle = "italic";
			}
		}
	}else{
		goFormat();
		if (txt.style.fontStyle == "italic"){
			txt.style.fontStyle = "normal";
		}else{
			txt.style.fontStyle = "italic";
		}
	}
}

function setUnder(){
	btnbar.style.height = "35px";
	txtContainer.style.height = "250px";
	txtContainer.style.top = "66px";
	subbar.style.visibility = "hidden";
	
	if (docMode == "W") {
		if (sel){
			if (selObj.style.textDecoration == "underline"){
				selObj.style.textDecoration = "none";
			}else{
				selObj.style.textDecoration = "underline";
			}
		}
	}else{
		goFormat();
		if (txt.style.textDecoration == "underline"){
			txt.style.textDecoration = "none";
		}else{
			txt.style.textDecoration = "underline";
		}
	}
}

function setBgdColor(){
	if (!sel){
		btnbar.style.height = "70px";
		txtContainer.style.height = "215px";
		txtContainer.style.top = "101px";
		subbar.style.left = "-640px";
		subbar.style.visibility = "visible";
	}
}

function onBgdColor(c){
	txt.style.backgroundColor = c;

	btnbar.style.height = "35px";
	txtContainer.style.height = "250px";
	txtContainer.style.top = "66px";
	subbar.style.visibility = "hidden";
}

function setColor(){
	btnbar.style.height = "70px";
	txtContainer.style.height = "215px";
	txtContainer.style.top = "101px";
	subbar.style.left = "-320px";
	subbar.style.visibility = "visible";
}

function onColor(c){
	if (docMode == "W") {
		if (sel){
			selObj.style.color = c;
		}
	}else{
		goFormat();
		txt.style.color = c;
	}

	btnbar.style.height = "35px";
	txtContainer.style.height = "250px";
	txtContainer.style.top = "66px";
	subbar.style.visibility = "hidden";
}

function setFont(){
	btnbar.style.height = "70px";
	txtContainer.style.height = "215px";
	txtContainer.style.top = "101px";
	subbar.style.left = "0px";
	subbar.style.visibility = "visible";
}

function onFont(f){
	if (docMode == "W") {
		if (sel){
			selObj.style.fontFamily = f;
			if (f == "Times New Roman" || f == "Marker Felt"){
				selObj.style.fontSize = "17px";
			}else if (f == "Zapfino"){
				selObj.style.fontSize = "12px";
			}else{
				selObj.style.fontSize = "16px";
			}
		}
	}else{
		goFormat();
		txt.style.fontFamily = f;
		if (f == "Times New Roman" || f == "Marker Felt"){
			txt.style.fontSize = "17px";
		}else if (f == "Zapfino"){
			txt.style.fontSize = "13px";
		}else{
			txt.style.fontSize = "16px";
		}
	}

	btnbar.style.height = "35px";
	txtContainer.style.height = "250px";
	txtContainer.style.top = "66px";
	subbar.style.visibility = "hidden";
}

//touch (click) change editing mode to page
function regEvt(){
	txt.addEventListener("touchstart", onSelPage, false);
	txt.addEventListener("touchmove", onPageMove, false);
}

function onPageMove(evt) {
	evt.preventDefault();
}

function onSelPage(evt){
	evt.preventDefault();
	
	btnbar.style.height = "35px";
	txtContainer.style.height = "250px";
	txtContainer.style.top = "66px";
	subbar.style.visibility = "hidden";
	
	txt.className = "txtSel";

	docMode = "P";
	if (sel){
		selObj.style.backgroundColor = "";
		selObj = null;
		sel = false;
	}
	infobar.innerHTML = "Editing Page";
	btnBgd.style.visibility = "visible";
}

//touch move document
var startY;
var dY;
var objY;
var objH;
var moved = 0;

function touchStart(evt){
	evt.preventDefault();
	//unRegEvt();
	
	if (sel){
		selObj.style.backgroundColor = "";
		selObj = null;
		sel = false;
	}
	
	startY = evt.targetTouches[0].pageY;
	objY = Number(txt.style.top.substr(0,txt.style.top.length-2));
	objH = txt.offsetHeight;
}

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

function touchEnd(evt){
	if (moved == 0) {
		setFormat(evt.target.parentNode);
		
	} else {
		moved = 0;	
	}
}

//generate the email link
function getEmailLink(){
	if (sel){
		selObj.style.backgroundColor = "";
		selObj = null;
		sel = false;
	}
	txt.style.left = "0px";
	var tmp = "mailto:?subject="+oriTitle.value+"&body="+encodeURI(txtContainer.innerHTML);	
	txt.style.left = "10px";
	email_link.href = tmp;
}

function goBack() {
	frame.style.left = '0px'; 
	window.location.href = '#1';	
	
	//about ads and footer
	footage.style.display = "none";
	
	if (ads_switch) {
		ads_switch = false;	
		ads1.style.display = "block";	
		ads2.style.display = "none";
	} else {
		ads_switch = true;	
		ads1.style.display = "none";	
		ads2.style.display = "block";
	}
	
	
}