function graphicContext(x, y, width, height)
{
	this.x = x;
	this.y = y;
	this.width = width;
	this.height = height;
	this.htmlBuffer = "";
	this.outlineColor = "";			// default color: transparent
	this.fillColor = "#000000";		// default color: black
	this.outlineWidth = 0;			// default line-width: 1px
	this.depth = 1;
	this.pixelSize = 1;				// brush size

	this.setColor = setColor;		// set drawing color
	this.setOutlineColor = setOutlineColor;	// set drawing color
	this.setFillColor = setFillColor;	// set drawing color

	this.setOutlineWidth = setOutlineWidth;	// set line width
	this.setPixelSize = setPixelSize;


	this.setDepth = setDepth;

	this.draw = draw;		// draw context onto the screen
	this.dump = dump;		// return context in html
	this.clear = clear;
	this.drawPixel = drawPixel;	// draws a pixel at x, y
	this.drawLine = drawLine;
	this.drawRectangle = drawRectangle;

	this.createDiv = createDiv;
}


function setColor(newColor)
{
	this.outlineColor = newColor;
	this.fillColor = newColor;
}

function setOutlineColor(newOutlineColor)
{
	this.outlineColor = newOutlineColor;
}

function setFillColor(newFillColor)
{
	this.fillColor = newFillColor;
}


function setOutlineWidth(newOutlineWidth)
{
	this.outlineWidth = newOutlineWidth;
}

function setPixelSize(newPixelSize)
{
	this.pixelSize = newPixelSize;
}


function dump()
{
	return(this.htmlBuffer);
}

function draw()
{
	document.write(this.htmlBuffer);
}

function clear() { this.htmlBuffer = ""; }

function setDepth(newDepth)
{
	this.depth = newDepth;
}


function drawPixel(x, y)
{
	this.createDiv(x, y, this.pixelSize, this.pixelSize);
}

function drawLine(x1, y1, x2, y2)
{
	// jos viivalla on pituus
	if (x1 != x2 || y1 != y2)
	{
		// jos piste 1 pisteen 2 oikealla puolella, käännetään toisin päin
		if (x1 > x2)
		{
			tmpX = x2;
			tmpY = y2;

			x2 = x1;
			y2 = y1;
			x1 = tmpX;
			y1 = tmpY;
		}

		// pisteiden määrä pisteiden välillä = hypotenuusa
		tmp = Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));

		// lasketaan kulmakerroin x:lle kkX
		kkX = (x2 - x1)/tmp;

		// lasketaan kulmakerroin y:lle kkY
		kkY = (y2 - y1)/tmp;

		tmp = Math.round(tmp+0.5);

		for (i = 0; i < tmp; i++)
		{
//		alert(Math.round(x1+(i*kkX)+0.5) + " " + Math.round(y1+(i*kkY)+0.5));
//		alert("x1=" + x1 + "/x2=" + x2 + "/y1=" + y1 + "/y2=" + y2 + "/i=" + i + "/kkX=" + kkX + "/tmp=" + tmp);
			this.htmlBUffer += this.createDiv(Math.round(x1+(i*kkX)+0.5), Math.round(y1+(i*kkY)+0.5), this.pixelSize, this.pixelSize);
		}
	}
}

function drawRectangle(x, y, width, height)
{
	this.createDiv(x, y, width, height, this.outlineColor, this.fillColor);
}


// private methods

function createDiv(x, y, width, height)
{
	if (this.x + x + width > this.x + this.width) x = (this.x + this.width - width);
	if (this.y + y + height > this.y + this.height) y = (this.y + this.height - height);

	this.htmlBuffer += '<div style="position:absolute; ' +
	                   'left:'+ Math.round(this.x + x) + 'px; ' +
	                   'top:' + Math.round(this.y + y) + 'px; ' +
	                   'width:' + width + 'px; ' +
	                   'height:' + height + 'px; ' +
	                   'clip:rect(0 ' + Math.round(width) + ' ' + Math.round(height) + ' 0)' + '; overflow:hidden; '
	                   ;

	if (this.outlineColor != "") this.htmlBuffer += 'border:' + this.outlineWidth + 'px solid ' + this.outlineColor + '; ';
	if (this.fillColor != "") this.htmlBuffer += 'background-color:' + this.fillColor + '; ';
	if (this.depth > 1) this.htmlBuffer += 'z-index:' + this.depth + '; ';


	this.htmlBuffer += '"></div>\n';

//	alert(this.htmlBuffer + "/x=" + x + "/y=" + y + "/width=" + width + "/this.width=" + this.width + "/this.x=" + this.x);
}