var initialised=0;
var canvas;
var canvas_tmp;
var canvas_x;
var canvas_y;
var canvas_width=640;
var canvas_height=480;
var canvas_context;
var canvas_tmp_context;
var mouse_pressed=0;
var last_pos;
var erase=0;
var brush_size=1;
var wank_browser;

function set_eraser() {
	erase=1;
}

function clear_canvas() {
	var answer=confirm("Clear whole image?");
	if(answer) {
		canvas_context.clearRect(0, 0, canvaswidth, canvasheight);
	}
}

function set_linewidth(width) {
	brush_size=width;
	canvas_context.lineWidth=width;
}

function set_palette(r,g,b,a) {
	erase=0;
	canvas_context.strokeStyle="rgba("+r+","+g+","+b+","+a+")";
}

function resize_canvas(x, y) {
	canvas_tmp.width=canvas_width;
	canvas_tmp.height=canvas_height;
        canvas_tmp_context.drawImage(canvas, 0, 0, canvas_width, canvas_height);
	canvas_width=x;
	canvas_height=y;
	//alert('setting canvas size to '+x+','+y);
	canvas.width=canvas_width;
	canvas.height=canvas_height;
	canvas_x=canvas.offsetLeft;
	canvas_y=canvas.offsetTop;
        canvas_context.drawImage(canvas_tmp, 0, 0, canvas_width, canvas_height);
	canvas_tmp.width=0;
	canvas_tmp.height=0;
}

function save() {
	var imgwidth=document.getElementById('image_width');
	imgwidth.value=canvas_width;
	var imgheight=document.getElementById('image_height');
	imgheight.value=canvas_height;
	var imgdata=document.getElementById('image_data');
	var browser_is_ie=document.getElementById('is_ie');
	if(wank_browser) {
		browser_is_ie.value=1;
		var canvasdata=canvas_context.getImageData(0, 0, canvas_width, canvas_height);
                imgdata.value=canvasdata.data
	} else {
		browser_is_ie.value=0;
		imgdata.value=canvas.toDataURL();
	}
}

function get_mouse_pos(e) {
	if(!wank_browser) {
		return { x: e.pageX, y: e.pageY };
	} else {
		return { 
			x: window.event.x+document.documentElement.scrollLeft,
			y: window.event.y+document.documentElement.scrollTop
			//x: window.event.x+document.body.scrollLeft,
			//y: window.event.y+document.body.scrollTop
			};
	}
}

function draw(e) {
	var mouse_pos=get_mouse_pos(e);
	var x=mouse_pos.x-canvas_x;
	var y=mouse_pos.y-canvas_y;
	var lx=last_pos.x-canvas_x;
	var ly=last_pos.y-canvas_y;

	//var xoutput=document.getElementById('output');
	//xoutput.innerHTML="<p>"+x+","+y+"</p>";

	if((x>=0&&x<canvas_width)&&(y>=0&&y<canvas_height)) {
		if(erase) {
			canvas_context.clearRect(x, y, brush_size, brush_size);
		} else {
			canvas_context.beginPath();
			canvas_context.moveTo(lx, ly);
			canvas_context.lineTo(x, y);
			canvas_context.closePath();
			canvas_context.stroke();
		}
	}
	last_pos=mouse_pos;
}

function mouse_up(e) {
	mouse_pressed=0;
}

function mouse_down(e) {
	//alert('mouse_down');
	mouse_pressed=1;
	last_pos=get_mouse_pos(e);
	draw(e);
}

function mouse_moved(e) {
	if(mouse_pressed) {
		draw(e);
	}
}

function canvas_init() {
	//if(initialised) return;
	//alert("calling init();");

	canvas=document.getElementById('canvas_area');
	canvas_context=canvas.getContext('2d');

	canvas_tmp=document.getElementById("canvas_tmp");
	canvas_tmp_context=canvas_tmp.getContext('2d');

	//canvas.width=canvas_width;
	//canvas.height=canvas_height;
	//canvas_x=canvas.offsetLeft;
	//canvas_y=canvas.offsetTop;
	resize_canvas(640, 480);

	//canvas_context.strokeStyle="rgba(0, 0, 200, 1)";
	//canvas_context.lineWidth=1.0;

	set_palette(0, 0, 0, 1);
	set_linewidth(1);

	//try {
	//	alert('ff style');
	//	addEventListener("mousemove", mouse_moved, false);
	//	addEventListener("mousedown", mouse_down, false);
	//	addEventListener("mouseup", mouse_up, false);
	//}
	//catch(err) {
	//	alert('ie style');
	//	attachEvent("onmousemove", mouse_moved);
	//	attachEvent("onmousedown", mouse_down);
	//	attachEvent("onmouseup", mouse_up);
	//}
	if(document.addEventListener) {
		//alert('ff style');
		wank_browser=0;
		addEventListener("mousemove", mouse_moved, false);
		addEventListener("mousedown", mouse_down, false);
		addEventListener("mouseup", mouse_up, false);
	} else {
		//alert('ie style');
		wank_browser=1;
		document.attachEvent("onmousemove", mouse_moved);
		document.attachEvent("onmousedown", mouse_down);
		document.attachEvent("onmouseup", mouse_up);
	}

	//initialised=1;
}