var nameStr = document.getElementById('str');
var signature = document.getElementById('signature');
var loadinfo = document.getElementById('loadinfo');

var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
var page3 = document.getElementById('page3');
var page4 = document.getElementById('page4');

var colorSet = document.getElementById('color-set');
var fontSet = document.getElementById('font-set');

//color chooser
var colorArray = document.getElementById('colorarray');
var color = document.getElementById("color");


var colorR = 0;
var colorG = 0;
var colorB = 0;

var cvs = document.getElementById('canvas');
cvs.width = 300;
cvs.height = 140;
var ctx = cvs.getContext("2d");

var cvs_color = "#333";
var pad = document.getElementById('write-pad');

pad.setAttribute("ontouchstart", "touchStart(event)");
pad.setAttribute("ontouchmove", "touchMove(event)");
pad.setAttribute("ontouchend", "touchEnd(event)");

var color_obj = document.getElementById('c-black');

var ads1 = document.getElementById('ads1');
var ads2 = document.getElementById('ads2');


//color array functions
function getColorArray() {
	var r = new Array('0','53','102','153','204','255');
	var g = new Array('0','53','102','153','204','255');
	var b = new Array('0','53','102','153','204','255');
	
	for (i = 0; i <= 5; i++) {
		for (j = 0; j <= 5; j++) {
			for (k = 0; k <= 5; k++) {
				var divObj = document.createElement('div');
				divObj.setAttribute('id','#'+r[i]+"_"+g[j]+"_"+b[k]);
							
				
				var style = "";
				if (i <= 2) {
					style += "left:"+String(i*6*15+k*15+5)+"px; top:"+String(j*13+5)+"px; ";
				} else {
					style += "left:"+String((i-3)*6*15+k*15+5)+"px; top:"+String(6*13+j*13+5)+"px; ";
				}
				style += "background-color:rgb("+r[i]+","+g[j]+","+b[k]+"); ";
				divObj.setAttribute('style',style);
				colorArray.appendChild(divObj);
			}
		}
	}
	colorArray.setAttribute('ontouchstart',"startColor(event)");
	colorArray.setAttribute('ontouchmove',"showColor(event)");	
	colorArray.setAttribute('ontouchend',"setColor(event)");	
	
	
	
}

function startColor(e) {
	e.preventDefault();
}

function showColor(e) {
	e.preventDefault();
	
	var r = new Array('0','53','102','153','204','255');
	var g = new Array('0','53','102','153','204','255');
	var b = new Array('0','53','102','153','204','255');
	
	var x = e.targetTouches[0].pageX-25;
	var y = e.targetTouches[0].pageY-188;
	
	var i;
	
	var j;
	if (Math.ceil(x/15)%6 == 0) {
		j = 5;
	} else {
		j = Math.ceil(x/15)%6-1;
	}
	var k;
	if (Math.floor(y/13) <= 5) {
		k = Math.floor(y/13);
		if (Math.floor(Math.ceil(x/15)%6) == 0) {
			i = Math.floor(Math.ceil(x/15)/6)-1;
		} else if (Math.floor(Math.ceil(x/15)/6) <= 2) {
			i = Math.floor(Math.ceil(x/15)/6);
		}
	} else {
		k = Math.floor(y/13)-6;
		if (Math.floor(Math.ceil(x/15)%6) == 0) {
			i = Math.floor(Math.ceil(x/15)/6)-1+3;
		} else if (Math.floor(Math.ceil(x/15)/6) <= 2) {
			i = Math.floor(Math.ceil(x/15)/6)+3;
		}
	}
	
	//console.log("i:"+i+"; j:"+j+"; k:"+k);
	
	rgb = r[i]+","+g[k]+","+b[j];
	
	colorR = r[i];
	colorG = g[k];
	colorB = b[j];
	
	color.style.backgroundColor = "rgb("+rgb+")";
}




//select from the main menu
function onSelMenu(q) {
	if (q == 1) {
		page1.style.left = "-320px";
		page2.style.left = "0px";
		page3.style.left = "320px";
		
		ads1.style.visibility = "visible";
		ads2.style.visibility = "hidden";
	} else {
		page1.style.left = "320px";
		page4.style.left = "0px";
		
		ads1.style.visibility = "hidden";
		ads2.style.visibility = "visible";
	}
}

//touch end call back
function setColor(e) {
	e.preventDefault();
	
	if (nameStr.value == '') {
		alert('Please input your name at first.');
		return;
	}
	
	colorSet.style.left = "-320px";
	fontSet.style.left = "0px";	
	
	window.location.href = "#1";
}

//when tap color well directly
function tapColor(obj) {
	if (nameStr.value == '') {
		alert('Please input your name at first.');
		return;
	}
	
	var str = obj.style.backgroundColor;
	str = str.substring(4,str.length-1);
	
	var rgb = str.split(",");
	colorR = rgb[0];
	colorG = rgb[1];
	colorB = rgb[2];
	
	colorSet.style.left = "-320px";
	fontSet.style.left = "0px";	
	
	window.location.href = "#1";
}


var timer;
function setFont(fontId) {
	page1.style.left = "-640px";
	page2.style.left = "-320px";
	page3.style.left = "0px";
	window.location.href = "#1";
	
	var img = document.createElement('img');
	timer = setInterval(onImgLoad, 50);
	
	img.setAttribute("id","sign-img");
	img.setAttribute("style","display:none");
	img.setAttribute("src", "phpwrite.php?str="+nameStr.value+"&font="+String(fontId-1)+"&r="+colorR+"&g="+colorG+"&b="+colorB+"&mode=1");
	//img.setAttribute("onclick", 'location.href="phpwrite.php?str='+nameStr.value+'&font='+String(fontId-1)+'&r='+colorR+'&g='+colorG+'&b='+colorB+'&mode=1"');
	img.className = "signature";

	signature.appendChild(img);
	loadinfo.style.display = "block";
}

function onImgLoad() {
	if (document.getElementById('sign-img') != null) {
		document.getElementById('sign-img').onload = show;
		clearInterval(timer);
	}
}

function show() {
	loadinfo.style.display = "none";
	document.getElementById('sign-img').style.display = "block";
}

function goback() {	
	page1.style.left = "0px";
	page2.style.left = "320px";
	page3.style.left = "640px";
	page4.style.left = "-320px";
	
	colorSet.style.left = "0px";
	fontSet.style.left = "320px";
	
	colorR = 0;
	colorG = 0;
	colorB = 0;
	signature.innerHTML = "";
	window.location.href = "#1";
	
	clearImg();
}

function changeFont() {
	signature.innerHTML = "";
	page2.style.left = "0px";
	page3.style.left = "320px";
	colorSet.style.left = "-320px";
	fontSet.style.left = "0px";	
	window.location.href = "#1";
}


/*
Using touch events objects to capture finger position

*/

var p1x,p1y,p2x,p2y,p3x,p3y;

function touchStart(evt){
	evt.preventDefault();
	var x = evt.targetTouches[0].pageX-10;
	var y = evt.targetTouches[0].pageY-158;
	
	
	//ctx.beginPath();
	ctx.lineWidth = 2;
	ctx.lineCap = "round";
	ctx.lineJoin = "round";
	ctx.miterLimit = 10;
	//ctx.shadowBlur = 3;
	ctx.shadowOffsetX = 1;
	ctx.shadowOffsetY = 1;
	ctx.strokeStyle = cvs_color;
	ctx.shadowColor = "rgba(200, 200, 200, 0.2)";
	
	ctx.beginPath();
	
	
	p1x = x;
	p1y = y;
	p3x = x;
	p3y = y;
	p2x = x;
	p2y = y;
}

function touchMove(evt){
	evt.preventDefault();
	var x = evt.targetTouches[0].pageX-10;
	var y = evt.targetTouches[0].pageY-158;
	
	p3x = p2x;
	p3y = p2y;
	p2x = p1x;
	p2y = p1y;
	p1x = x;
	p1y = y;
	
	
	drawCurve(p1x,p1y,p2x,p2y,p3x,p3y);
	//ctx.lineTo(x,y);
	//ctx.stroke();
}

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




//draw actions

function drawCurve(p1x,p1y,p2x,p2y,p3x,p3y) {
    
    //NSLog(@"%@",drawPadContext);
	var mid1x = (p1x+p2x)*0.5;
	var mid1y = (p1y+p2y)*0.5;
    var mid2x = (p3x+p2x)*0.5;
	var mid2y = (p3y+p2y)*0.5;
    
	ctx.moveTo(mid2x, mid2y);
    ctx.quadraticCurveTo(p2x, p2y, mid1x, mid1y);
    // Use QuadCurve is the key
    ctx.stroke();
    
}











function cvsColorChange(c, obj) {
	cvs_color = c;

	color_obj.className = "color-sq";
	obj.className = "color-sq color-active";
	color_obj = obj;

	window.location.href = "#1";
}

function saveImg() {
	//scale image
	var saveCvs = document.getElementById("cvs-resize");
	var saveCtx = saveCvs.getContext("2d");
	saveCvs.width = 180;
	saveCvs.height = 84;
	saveCtx.drawImage(cvs,0,0,180,84);
	
	//save image
	var imgData = saveCvs.toDataURL();
	var saveImg = document.getElementById('cvs-img');
	saveImg.src = imgData;
	
	var howto_use = document.getElementById('howto-use');
	cvs.style.visibility = "hidden";
	saveImg.style.visibility = "visible";
	howto_use.style.visibility = "visible";
	
	window.location.href = "#1";
}

function clearImg() {
	var howto_use = document.getElementById('howto-use');
	var saveImg = document.getElementById('cvs-img');
	
	cvs.style.visibility = "visible";
	saveImg.style.visibility = "hidden";
	howto_use.style.visibility = "hidden";
	
	cvs.width = cvs.width;
	ctx.clearRect (0, 0, 300, 140);
	
	window.location.href = "#1";
}