function changePix( xl, yl ){
	ic = document.getElementById("instructions");
	ic.innerHTML = "drawing...";
	ch = document.getElementById("dropper").checked;
	fs = document.getElementById("fillsquare").checked;
	es = document.getElementById("emptysquare").checked;
	dl = document.getElementById("drawline").checked;
	if ( ch ){
			eval("rc = document.getElementById('px"+xl+"_"+yl+"r').value;");
			eval("gc = document.getElementById('px"+xl+"_"+yl+"g').value;");
			eval("bc = document.getElementById('px"+xl+"_"+yl+"b').value;");
			r.setValue(rc);
			g.setValue(gc);
			b.setValue(bc);
	} else {
		if ( fs ){
			fx = document.getElementById("firstclickx").value;
			fy = document.getElementById("firstclicky").value;
			if ( fx !=99 && fy != 99 )
			{
				if (fx <= xl ){
					for ( i = fx; i<=xl; i++ ){
						if ( fy <= yl ){
							for ( j = fy; j<=yl; j++){
								setPixel( i, j );
							}
						} else {
							for ( j = yl; j<=fy; j++){
								setPixel( i, j );
							}
						} 
					}
				} else {
					for ( i = xl; i<=fx; i++ ){
						if ( fy <= yl ){
							for ( j = fy; j<=yl; j++){
								setPixel( i, j );
							}
						} else {
							for ( j = yl; j<=fy; j++){
								setPixel( i, j );
							}
						} 
					}
				}
				document.getElementById("firstclickx").value = 99;
				document.getElementById("firstclicky").value = 99;
				ic.innerHTML = "Click the first corner of the filled rectangle you want to draw.";
			} else {
				document.getElementById("firstclickx").value = xl;
				document.getElementById("firstclicky").value = yl;
				ic.innerHTML = "Click the second corner of the filled rectangle and it will be drawn.<br />Note: Filled rectangles take a bit of time to draw.";
				setPixel( xl, yl );
			}
		} else {
			if ( es ){
// open rectangle

			fx = document.getElementById("firstclickx").value;
			fy = document.getElementById("firstclicky").value;
			ic.innerHTML = "drawing...";
			if ( fx !=99 && fy != 99 )
			{
				if (fx <= xl ){
					for ( i = fx; i<=xl; i++ ){
						if ( fy <= yl ){
							for ( j = fy; j<=yl; j++){
								if( i==xl || i==fx){
									setPixel( i, j );
								} else {
									if( j==fy || j==yl){
										setPixel( i, j );
									}
								}
							}
						} else {
							for ( j = yl; j<=fy; j++){
								if( i==xl || i==fx){
									setPixel( i, j );
								} else {
									if( j==fy || j==yl){
										setPixel( i, j );
									}
								}
							}
						} 
					}
				} else {
					for ( i = xl; i<=fx; i++ ){
						if ( fy <= yl ){
							for ( j = fy; j<=yl; j++){
								if( i==xl || i==fx){
									setPixel( i, j );
								} else {
									if(j==fy || j==yl){
										setPixel( i, j );
									}
								}
							}
						} else {
							for ( j = yl; j<=fy; j++){
								if( i==xl || i==fx){
									setPixel( i, j );
								} else {
									if(j==fy || j==yl){
										setPixel( i, j );
									}
								}
							}
						} 
					}
				}
				document.getElementById("firstclickx").value = 99;
				document.getElementById("firstclicky").value = 99;
				ic.innerHTML = "Click the first corner of the border rectangle you want to draw.";
			} else {
				document.getElementById("firstclickx").value = xl;
				document.getElementById("firstclicky").value = yl;
				ic.innerHTML = "Click the second corner of the border rectangle and it will be drawn.";
				setPixel( xl, yl );
			}

// end open rectangle

				
			} else {
				if ( dl ){
					fx = document.getElementById("firstclickx").value;
					fy = document.getElementById("firstclicky").value;
					if ( fx !=99 && fy != 99 ){
						drawLine( parseInt(fx), parseInt(fy), parseInt(xl), parseInt(yl) );
						document.getElementById("firstclickx").value = 99;
						document.getElementById("firstclicky").value = 99;
						ic.innerHTML = "Click the first point in the line.";
					} else {
						document.getElementById("firstclickx").value = xl;
						document.getElementById("firstclicky").value = yl;
						ic.innerHTML = "Click the last point to draw the line.";
						setPixel( xl, yl );
					}
				} else {
					setPixel( xl, yl );
				}
			}
		}
	}
}
function setPixel( xl, yl ){
		rc = document.getElementById("red-slider-input").value;
		bc = document.getElementById("blue-slider-input").value;
		gc = document.getElementById("green-slider-input").value;
		eval("document.getElementById('bigPixel_"+xl+"_"+yl+"').style.background = 'rgb("+rc+","+gc+","+bc+")';");
		eval("document.getElementById('pixel_"+xl+"_"+yl+"').style.backgroundColor = 'rgb("+rc+","+gc+","+bc+")';");
		eval("document.getElementById('px"+xl+"_"+yl+"r').value = "+rc+";");
		eval("document.getElementById('px"+xl+"_"+yl+"g').value = "+gc+";");
		eval("document.getElementById('px"+xl+"_"+yl+"b').value = "+bc+";");
}
function instruct(func){
	ic = document.getElementById("instructions");
	ch = document.getElementById("dropper");
	fs = document.getElementById("fillsquare");
	es = document.getElementById("emptysquare");
	dl = document.getElementById("drawline");
	document.getElementById("firstclickx").value = 99;
	document.getElementById("firstclicky").value = 99;
	if (ch.checked==false && fs.checked==false && es.checked==false && dl.checked==false){
		ic.innerHTML = "Click to draw pixels in the selected color.";
	} else {
		switch ( func ) {
			case "drop":
			fs.checked=false;
			es.checked=false;
			dl.checked=false;
			ic.innerHTML = "Set color by clicking on a pixel in the image.";
			break;
			case "fill":
			ch.checked=false;
			es.checked=false;
			dl.checked=false;
			ic.innerHTML = "Click the first corner of the filled rectangle you want to draw.";
			break;
			case "empty":
			ch.checked=false;
			fs.checked=false;
			dl.checked=false;
			ic.innerHTML = "Click the first corner of the border rectangle you want to draw.";
			break;
			case "line":
			ch.checked=false;
			fs.checked=false;
			es.checked=false;
			ic.innerHTML = "Click the first point in the line.";
			break;
		}
	}
}

function drawLine(x1, y1, x2, y2) {
	var steep = Math.abs(y2 - y1) > Math.abs(x2 - x1);

	if (steep) {
		t = y1;
		y1 = x1;
		x1 = t;

		t = y2;
		y2 = x2;
		x2 = t;
	}

	var deltaX = Math.abs(x2 - x1);
	var deltaY = Math.abs(y2 - y1);

	var error = 0;
	var deltaErr = deltaY;
	var xStep;
	var yStep;

	var x = x1;
	var y = y1;

	if (x1 < x2) {
		xStep = 1;
	}
	else {
		xStep = -1;
	}
	
	if(y1 < y2) {
		yStep = 1;
	}
	else {
		yStep = -1;
	}

	if(steep) {
		setPixel(parseInt(y), parseInt(x));
	}
	else {
		setPixel(parseInt(x), parseInt(y));
	}

	while(x != x2) {
		x = x + xStep;
		error = error + deltaErr;
		if(2 * error >= deltaX) {
			y = y + yStep;
			error = error - deltaX;
		}

		if(steep) {
			setPixel(parseInt(y), parseInt(x));
		}
		else {
			setPixel(parseInt(x), parseInt(y));
		}
	}
}