<html>
	<head>
	</head>
	<body>

	<canvas id='a' width='800' height='800' style='border:solid'>

	</canvas>
	
	<script lang='Javascript'>

		var mx=100,my=100,clickstate=0;
				
function ev_mouseup(ev)
{
		clickstate=0;
}

function ev_mousedown(ev)
{
		clickstate=1;
		
		var xc=50;
		var col="";
		var xcp=120;
		var numb=0;
		for(i=0;i<12;i++){
				if(mx>xc&&mx<xc+40&&my>200&my<240){
						if(bits[i]==0){
								bits[i]=1;
						}else{
								bits[i]=0;
						}				
				}
												
				if(((i+1)%4)==0){
						xc+=80;
						xcp+=230;
				}else{
						xc+=50;
				}
		}
		foo();
}

function distance(x1,y1,x2,y2){
		return Math.sqrt(((x1-x2)*(x1-x2))+((y1-y2)*(y1-y2)));
}

function procent(start,end,coord)
{
		return (coord-start)/(end-start);
}

function ev_mousemove (ev) 
{
	  if (ev.layerX||ev.layerX==0) { // Firefox
		    mx=ev.layerX-acanvas.offsetLeft;
		    my=ev.layerY-acanvas.offsetTop;
	  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
		    mx=ev.offsetX-acanvas.offsetLeft;
		    my=ev.offsetY-acanvas.offsetTop;
	  }
				
}


		var acanvas=document.getElementById('a');
		var context=acanvas.getContext("2d");		

		acanvas.addEventListener('mousemove', ev_mousemove, false);
		acanvas.addEventListener('mouseup', ev_mouseup, false);
		acanvas.addEventListener('mousedown', ev_mousedown, false);
				
		function interpolateline(c1,c2,x1,y1,x2,y2,direct)
		{

		    var lingrad; 

				if(direct==1){
						lingrad = context.createLinearGradient(x1,y1,x2,y1);
				}else{
						lingrad = context.createLinearGradient(x1,y1,x1,y2);
				}

		    lingrad.addColorStop(0, c1);
		    lingrad.addColorStop(0.99, c2);	
				context.lineWidth = 3;
				context.strokeStyle=lingrad;
				context.beginPath();
				context.moveTo(x1,y1);				
				context.lineTo(x2,y2);
				context.stroke();
				
		}
		
		function coordinatesystem()
		{
		
				context.lineWidth = 2;
				context.fillStyle="#000";
				context.strokeStyle="#000";
				
				context.beginPath();
				context.moveTo(50,50);
				context.lineTo(50,500);
				context.lineTo(510,500);
				context.stroke();
				
				context.beginPath();
				context.moveTo(50,50);				
				context.lineTo(42,70);
				context.lineTo(50,65);
				context.lineTo(58,70);
				context.lineTo(50,50);				
				context.stroke();
				context.fill();

				context.beginPath();
				context.moveTo(520,500);				
				context.lineTo(500,492);
				context.lineTo(505,500);
				context.lineTo(500,508);
				context.lineTo(520,500);				
				context.stroke();
				context.fill();
		
		}

		function point(col,x,y)
		{
				context.strokeStyle="#000";
				context.lineWidth = 1;
			
				context.fillStyle=col;
				context.fillRect(x-4,y-4,8,8);		
				context.strokeRect(x-4,y-4,8,8);						
		}

		function box(col,x,y,w)
		{
				context.strokeStyle="#000";
				context.lineWidth = 1.5;
			
				context.fillStyle=col;
				context.fillRect(x,y,w,w);		
				context.strokeRect(x,y,w,w);						
		}
		
		function strickland(col,sx,sy,dx,dy,offs)
		{
				context.lineWidth = 1.5;
				context.strokeStyle=col;
				
				context.moveTo(sx,sy);
				context.lineTo(sx,sy+offs);
				context.lineTo(dx,dy-offs);
				context.lineTo(dx,dy);
				
				context.stroke();			
		}
		
		function procy(sy,ey)
		{
				return sy+((ey-sy)*proc);
		}
		
		function xfory(sx,sy,ex,ey,yk)
		{
				dy=ey-sy;
				dx=ex-sx;
				
				k=dx/dy;
				
				return (((yk-sy)*k)+sx);
		}
		
		var bits=new Array(0,0,0,0,1,1,1,1,0,1,0,1);
		
		function bittono(ind,size,wid)
		{
				no=0;
				
				// For loop for number of bits
				for(var j=0;j<wid;j++){
					no+=(Math.pow(2,j)*bits[(size-ind)-j-1]); 	
				}
				
				return no;
		}

		function notohex(no,size)
		{
				hexno="foo";

				// Base 16 means that the number is at most 15 otherwise 255				
				if(size==16){
						// Limit
						if(no>15) no=15;
						if(no<0) no=0;

						hexno=no.toString(16);
												
				}else{
						if(no>255) no=255;
						if(no<0) no=0;				
				}
				
				return hexno;
		}
		
		function foo()
		{
								
				context.clearRect(0,0,800,800);

				context.lineWidth = 2;
				context.fillStyle="#000";
				context.strokeStyle="#000";

				context.strokeStyle="#BBB";

				var xc=50;
				var col="";
				var xcp=120;
				var bitindex=8;
				var numb=0;
				for(i=0;i<12;i++){

						if(bits[i]==0){
								col="#552";
						}else{
								col="#ff8";
						}

						strickland("abf",xc+20,240,xcp+5+((i%4)*10),300,20);

						box(col,xc,200,40);
						box("#fed",xcp,300,40);
														
						if(((i+1)%4)==0){
								numb=bittono(bitindex,12,4);
								
								context.fillStyle = '#f00';
								context.font = 'italic bold 14px sans-serif';
								context.textBaseline = 'top';

								context.fillText('Dec: '+numb, xcp+50, 304);								
								context.fillText('Hex: '+notohex(numb,16), xcp+50, 324);
								
								bitindex-=4;
								xc+=80;
								xcp+=230;
						}else{
								xc+=50;
						}

				}
				
				setTimeout("foo();",20);
/*
				if(longliney>350){
						context.beginPath();
						context.moveTo(bottomlinex,50);
						context.lineTo(bottomlinex,500);
						context.stroke();								
				}else{
						context.beginPath();
						context.moveTo(toplinex,50);
						context.lineTo(toplinex,500);
						context.stroke();													
				}
				
				context.beginPath();
				context.moveTo(50,longliney);
				context.lineTo(500,longliney);
				context.stroke();

				context.strokeStyle="#000";

				context.beginPath();
				context.moveTo(50,550);
				context.lineTo(500,550);
				context.stroke();
				
				context.beginPath();
				context.moveTo(mx,535);
				context.lineTo(mx,565);
				context.stroke();
								
				coordinatesystem();
												
				interpolateline("#F00","#0F0",300,100,100,450,1);
				interpolateline("#0F0","#00F",100,450,450,350,1);
				interpolateline("#F00","#00F",300,100,450,350,1);

				context.strokeStyle="#000";
				context.lineWidth = 1;
				
				point("#F00",300,100);
				point("#0F0",100,450);
				point("#00F",450,350);
				
				bcolp=procent(100,350,longliney);
				bcolp=Math.round(bcolp*255.0);
				ibcolp=255-bcolp;

				gcolp=procent(450,350,longliney);
				gcolp=Math.round(gcolp*255.0);
				igcolp=255-gcolp;
				
				maincol="rgb("+ipcol+","+pcol+",0)";
				topcol="rgb("+ibcolp+",0,"+bcolp+")";
				bottomcol="rgb(0,"+igcolp+","+gcolp+")";

				if(longliney<350){
					if(!isNaN(bcolp)){
						interpolateline(maincol,topcol,longlinex,longliney,toplinex,longliney,1);
					}
				}else{
					if(!isNaN(bcolp)){
						interpolateline(maincol,bottomcol,longlinex,longliney,bottomlinex,longliney,1);
					}
				}

				point(maincol,longlinex,longliney);	
											
				if(longliney<350){
						point(topcol,toplinex,longliney);
				}else{
						point(bottomcol,bottomlinex,longliney);
				}

*/			
				//setTimeout("foo();",100);
				
	  }
					
	</script>


	</body>
</html>