var moving = false;  //if the mouse is moving
var colorOn = true;  //if we are currently allowed to color
var penSize = 2;     //the current pensize
var penColor = 'black';  //the current color
var numDivs = 0;     //number of divs created
var canvas;
var pos;

// this are for some mouse following that isn't implemented yet
function paintOn()
{
	colorOn = true;
}

// this are for some mouse following that isn't implemented yet
function paintOff()
{
	colorOn = false;
}

// called when the mouse is clicked on the appropriate html element
function startPaint(event, ob)
{
	canvas = document.getElementById('canvas');
	pos = getPos(canvas);

	if(!colorOn)
		return;

	//set up the event object
	var e = event? event : window.event;

	//stop event propagation (broken?)
	if(document.all)
	{
		e.cancelBubble=true;
		e.returnValue = false;
	}
	else
	{
		e.preventDefault();
		e.stopPropagation();
	}

	moving = true;

	//set mouse listeners
	document.onmouseup=stopPaint;
	document.onmousemove=move;

	//paint the first div
	paint(e);

	return false;
}

//called on each mouse movement after the first
function move(event)
{
	if(moving)
	{
		var e = event? event : window.event;

		paint(e);
	}
}

//called when the mouse button is released
function stopPaint(event)
{


	var e = event? event : window.event;

	//clear variables, kill listeners
	moving = false;
	document.onmouseup=null;
	document.onmousemove=null;

	//propagation code that needs to be fixed
	if(document.all)
	{
		e.cancelBubble=false;
		e.returnValue=false;
	}
	else
	{
		//e.preventDefault();
		//e.stopPropagation();
	}
}

//creates a div at x, y
function colorPixel(x,y)
{
	if(outsideBox(x, y, penSize, canvas))
		return;

	var new_pixel = document.createElement('div');

	//set the needed CSS attributes
	new_pixel.style.position = 'absolute';
	new_pixel.style.left = x+"px";
	new_pixel.style.top = y+"px";
	new_pixel.style.width = penSize+"px";
	new_pixel.style.height = penSize+"px";
	new_pixel.style.zIndex = 0;
	new_pixel.style.fontSize = '1px';  //this is a hack for IE
	new_pixel.style.backgroundColor = penColor;

	//attach the div to the canvas
	canvas.appendChild(new_pixel);

	//increment the div counter (to show how inefficient this code is)
	numDivs++;
	var num = document.getElementById('num_divs');
	//num.firstChild.nodeValue = numDivs;
}

//this is a wrapper that might make this code better later
function paint(event)
{
	var e = event? event: window.event;
	var x = e.clientX;
	var y = e.clientY;

	colorPixel(x, y);
}

function outsideBox(x, y, size, canvas)
{
	var num = document.getElementById('num_divs');
	num.firstChild.nodeValue = x + " " + y;
	if(x < pos[0] || y < pos[1])
		return true;
	
	if(x > parseInt(canvas.style.width) + pos[0] - penSize)
		return true;

	if(y > parseInt(canvas.style.height) + pos[1] - penSize)
		return true;
	
	return false;
}

function getPos(element)
{
	var x = 0;
	var y = 0;

	if(element.offsetParent)
	{
		x = element.offsetLeft;
		y = element.offsetTop;
		element = element.offsetParent;
	}

	while(element)
	{
		x += element.offsetLeft;
		y += element.offsetTop;
		element = element.offsetParent;
	}

	return new Array(x,y);
}

function erase()
{
	var divs = canvas.getElementByTagName('div');


}