<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
		 <title></title>
	</head>
	<body>
		<canvas id="a" width="600" height="600" style="border:solid"></canvas>
		<script lang="Javascript">
			function ev_mouseclick (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;
				}

				for(var i=0;i<colorBoxes.length;i++){
					for(var j=0;j<colorBoxes[i].tickBoxGroups.length;j++){
						for(var q=0;q<colorBoxes[i].tickBoxGroups[j].length;q++){
							colorBoxes[i].tickBoxGroups[j][q].checkIfClicked(mx, my);
						}
					}				
				}

				drawAll();
			}
			
			function color(x, y, color)
			{
				this.x=x+0.5;
				this.y=y+0.5;
				this.width=200;
				this.height=230;
				this.color=color;
				this.hexString="00";
				this.tickBoxGroups=new Array();
				var tickBoxOffset=22;
				var tickBoxGroupMargin=2;
				var tickBoxGroupXOffset=this.x+5;
				var tickBoxGroupYOffset=this.y+46;				
				
				for(var j=0;j<2;j++){
					this.tickBoxGroups[j]=new Array();
					this.tickBoxGroups[j].x=tickBoxGroupXOffset;
					this.tickBoxGroups[j].y=tickBoxGroupYOffset;
					this.tickBoxGroups[j].width=4*tickBoxOffset+tickBoxGroupMargin*2;
					this.tickBoxGroups[j].height=100;
					var tickX=tickBoxGroupXOffset+3;
					var tickY=tickBoxGroupYOffset+15;
					tickBoxGroupXOffset+=this.tickBoxGroups[j].width+5;
					var tickValue=8;
					for(var i=0;i<4;i++){
						this.tickBoxGroups[j].push(new tickBox(tickX, tickY, tickValue));
						tickValue=tickValue*0.5;
						tickX+=tickBoxOffset;
					}
				}
			}
			
			color.prototype.draw=function()
			{
				context.fillStyle=this.color;
				context.fillRect(this.x, this.y, this.width, this.height);
				context.fillStyle="#000000";
				for(var i=0;i<this.tickBoxGroups.length;i++){
					context.strokeRect(this.tickBoxGroups[i].x, this.tickBoxGroups[i].y, this.tickBoxGroups[i].width, this.tickBoxGroups[i].height);
				}

				for(var i=0;i<this.tickBoxGroups.length;i++){
					for(var j=0;j<this.tickBoxGroups[i].length;j++){
						this.tickBoxGroups[i][j].draw();

						context.fillStyle = "#000000";
						context.font = "bold 12px Arial";
						context.textAlign="center";
						context.textBaseline="bottom";
						var value=this.tickBoxGroups[i][j].value;
						if(i<1) value*=16;
						context.fillText(value, this.tickBoxGroups[i][j].x+this.tickBoxGroups[i][j].width*0.5, this.tickBoxGroups[i][j].y-16);
	
					}
						context.font = "22px Arial";
						context.textAlign="center";
						context.textBaseline="hanging";
						context.fillStyle="#000000";
						var sum=calcTickBoxGroup(this.tickBoxGroups[i]);
						var hexSum=convertDecToHex(sum);
						context.fillText("Dec: "+sum, this.tickBoxGroups[i].x+this.tickBoxGroups[i].width*0.5, this.tickBoxGroups[i].y+45);	
						context.fillText("Hex: "+hexSum, this.tickBoxGroups[i].x+this.tickBoxGroups[i].width*0.5, this.tickBoxGroups[i].y+45+23);
				}
				
				var sum2=calcDoubleTickBoxGroup(this.tickBoxGroups[0], this.tickBoxGroups[1]);
				var hexSum2=convertDecToHex(sum2);
				if(hexSum2.length<2) hexSum2="0"+hexSum2;
				this.hexString=hexSum2;
				context.font = "28px Arial";
				context.fillText("Dec: "+sum2, this.x+this.width*0.5, this.y+this.height*0.7);	
				context.fillText("Hex: "+this.hexString, this.x+this.width*0.5, this.y+this.height*0.7+28);		
			}
			
			function tickBox(x, y, value)
			{
				this.x=x;
				this.y=y;
				this.width=20;
				this.height=20;
				this.isTicked=false;
				this.value=value;
			}
			
			tickBox.prototype.checkIfClicked=function(mx, my)
			{
				if(mx>this.x && mx<=this.x+this.width && my>this.y && my<=this.y+this.height){
					if(this.isTicked) this.isTicked=false;
					else this.isTicked=true;
				}
			}
			
			tickBox.prototype.draw=function()
			{
				context.save();
				context.font = "12px Arial";
				context.textAlign="center";
				context.textBaseline="middle";
				if(this.isTicked) {
					context.fillStyle = "#000000";
					context.fillRect(this.x, this.y, this.width, this.height);
					context.fillStyle = "#FFFFFF";
					context.fillText("1", this.x+this.width*0.5, this.y+this.height*0.5);	
				} else {
					context.fillStyle = "#FFFFFF";
					context.fillRect(this.x, this.y, this.width, this.height);
					context.fillStyle = "#000000";
					context.fillText("0", this.x+this.width*0.5, this.y+this.height*0.5);	
				}
				context.strokeRect(this.x, this.y, this.width, this.height);
				context.fillStyle = "#000000";
				context.textBaseline="bottom";
				context.fillText(this.value, this.x+this.width*0.5, this.y);
				context.restore();
			}
			
			function drawAll()
			{
				context.clearRect(0,0,acanvas.width,acanvas.height);

				var hexString="#";
				for(var i=0;i<colorBoxes.length;i++){
					colorBoxes[i].draw();
					hexString+=colorBoxes[i].hexString;
				}
				context.font = "28px Arial";
				context.textAlign="center";
				context.textBaseline="middle";
				context.fillText(hexString, acanvas.width*0.5, acanvas.height*0.45);	
				context.fillStyle=hexString;
				context.fillRect(0,acanvas.height*0.5,acanvas.width,acanvas.height*0.5);
			}

			function calcTickBoxGroup(tBGrp)
			{
				var value=0;
				for(var i=0;i<tBGrp.length;i++){
					if(tBGrp[i].isTicked)
						value+=tBGrp[i].value;
				}
				return value;
			}
			
			function calcDoubleTickBoxGroup(tBGrp2, tBGrp1)
			{
				var value=calcTickBoxGroup(tBGrp1);
				for(var i=0;i<tBGrp2.length;i++){
					if(tBGrp2[i].isTicked)
						value+=tBGrp2[i].value*16;
				}
				return value;
			}
			
			function convertDecToHex(decValue)
			{
				return decValue.toString(16).toUpperCase();
			}
			
			var acanvas=document.getElementById('a');
			var context=acanvas.getContext("2d");		

			acanvas.addEventListener('click', ev_mouseclick, false);
			
			var colorBoxes=new Array();
			colorBoxes[0]=new color(0,0,"#FF3333");
			colorBoxes[1]=new color(acanvas.width*0.333,0,"#33FF33");
			colorBoxes[2]=new color(acanvas.width*0.667,0,"#3333FF");
			
			drawAll();
			
		</script>
	
	
</body></html>