tempX=0;
tempY=0;
count=0;
offsetX=13;
offsetY=18;
share=0;
var ctx;
var intervalID;
var canvas_event;
function init(){
	canvas_event = document.getElementById('canvas');
	canvas_event.onmousedown=mouseDown ;
	canvas_event.onmouseup=mouseUp ;
	canvas_event.onmousemove=mouseCoord ;
	ctx = document.getElementById('canvas').getContext('2d');
	replay();
	ctx.strokeStyle = "#000000";
	showColor(ctx.strokeStyle);
	ctx.lineWidth = 4;
	setWidth(ctx.lineWidth);
        ctx.lineJoin = 'round';
	ctx.globalAlpha=1;
	document.getElementById("colorcode").innerHTML = "#000000";
	document.getElementById("bgtest").style.backgroundColor="#000000";
	document.getElementById("alphavalue").innerHTML="1";
	//  ctx.globalAlpha = 0.5;
	}

function sendToServer(url)
{	
	if(share==1)
	{
	var testImg = new Image();
	testImg.src = url;
	}
}

function setSharing(val)
{
	if(val.indexOf("Y") != -1)
	{
		share = 1;
		replay();
	}
	else
	{
		share = 0;
		clear();
	}
}

function drawCurve(event){
	ctx.lineTo(tempX-offsetX,tempY-offsetY);
	var p = tempX-offsetX;
	var q = tempY-offsetY;
	var url= "command.php?action=lineTo&x="+p+"&y="+q;
	sendToServer(url);
	ctx.stroke();
}

function mouseCoord(e, evElement){
	tempX= e.clientX;
	tempY= e.clientY;
}

function mouseDown(e, evElement){
	ctx.beginPath();
	count++;
	var p = tempX-offsetX;
	var q = tempY-offsetY;
	ctx.moveTo(e.clientX-offsetX,e.clientY-offsetY);
	var url= "command.php?action=moveTo&x="+p+"&y="+q;
	sendToServer(url);
	intervalID = setInterval(drawCurve, 100);
}

function setAlpha(val)
{	
	ctx.globalAlpha = val;
	document.getElementById("alphavalue").innerHTML = val;
	var url="command.php?action=alpha&x="+val+"&y="+0;
	sendToServer(url);
}

function mouseUp(e, evElement){
	tempUp(e,evElement);
	clearInterval(intervalID);
	ctx.lineTo(e.clientX-offsetX,e.clientY-offsetY);
	ctx.stroke();
	var url="command.php?action=stroke&x="+0+"&y="+0;
	sendToServer(url);
}

function tempUp(e,evElement)
{
	var p = tempX-offsetX;
	var q = tempY-offsetY;
	var url="command.php?action=lineTo&x="+p+"&y="+q;
	sendToServer(url);
}


function setWidth(val) {
	ctx.lineWidth = val;
	document.getElementById("lwidth").innerHTML = val;
	var url="command.php?action=width&x="+val+"&y="+0;
	sendToServer(url);
}

function showColor(val)
{
	ctx.strokeStyle=val;	
	document.getElementById("colorcode").innerHTML = val;
	document.getElementById("bgtest").style.backgroundColor=val;
	var url="command.php?action=color&x="+val.substr(1)+"&y="+0;
	sendToServer(url);
}
function clear(){
	ctx.clearRect(0,0,700,450);
	var url="command.php?action=clearRect&x="+ctx.lineWidth+"&y="+1;
	sendToServer(url);	
	showColor(ctx.strokeStyle);
	setAlpha(ctx.globalAlpha);
}

function setbg()
{
	ctx.fillStyle = ctx.strokeStyle;
	var vtemp=ctx.strokeStyle;
	ctx.fillRect(0,0,700,450);
	var url="command.php?action=setbg&x="+vtemp.substr(1)+"&y="+0;
	sendToServer(url);
}
function replay_help(text)
{
	var commands = text.split("\n");
	var flag = 1;
	var i;	

	for(i = 0; i < commands.length-1; i++){
		if(commands[i].indexOf("clear") != -1)
			{
			ctx.clearRect(0,0,700,450);
			ctx.strokeStyle = "#000000";
			flag=0;
			}
		else if(commands[i].indexOf("stroke") != -1)
			{
			ctx.stroke();
			flag=0;
			}
		else if(commands[i].indexOf("alpha") != -1)
			{
			var alpha = commands[i].split(" ");
			ctx.globalAlpha=alpha[1];	
			flag=0;

			}
		else if(commands[i].indexOf("color") != -1)
			{
			var color = commands[i].split(" ");
			ctx.strokeStyle="#"+color[1];	
			flag=0;
			}
		else if(commands[i].indexOf("setbg") != -1)
			{
			var color = commands[i].split(" ");
			ctx.fillStyle="#"+color[1];	
			ctx.fillRect(0,0,700,450);
			flag=0;
			}
		else if(commands[i].indexOf("width") != -1)
			{
			var width = commands[i].split(" ");
			ctx.lineWidth=width[1];	
			flag=0;
			}

		else if(flag==0)
		{
			var coordinates = commands[i].split(",");
			ctx.beginPath();
			ctx.moveTo(coordinates[0],coordinates[1]);
			flag=1;
		}	
		else
		{
			var coordinates = commands[i].split(",");
			ctx.lineTo(coordinates[0],coordinates[1]);
			ctx.stroke();	
			flag=1;
		}
		
	}
}
function replay()
{	
	if(share==1)
	{
	ctx.clearRect(0,0,700,450);
	var req = null;
	var text ;
			if (window.XMLHttpRequest)
		{
 			req = new XMLHttpRequest();
			if (req.overrideMimeType) 
			{
				req.overrideMimeType('text/xml');
			}
		} 
		else if (window.ActiveXObject) 
		{
			try {
				req = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e)
			{
				try {
					req = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
        	}
	req.onreadystatechange  = function()
	{ 
        	if(req.readyState  == 4)
	        {
        		if(req.status  == 200) 
				{
				text = req.responseText;
				replay_help(text); 
				}
			else 
				text = req.status+ " " + req.statusText;
		}
	}; 
	req.open("GET", "welcome.txt",  true); 
	req.send(null); 
	}
}