function ColorPicker(container, offsetLeft, offsetTop, imageURL, width ,height, outputId, defaultColor) {	
	var cp = document.createElement("canvas");	
	cp.width = width;	
	cp.height = height;	
	var cpContext = cp.getContext("2d");	
	var matrix = [];	
	var offsetLeft = offsetLeft;	
	var offsetTop = offsetTop;		
	
	this.isMouseDown = false;
	
	var cpImage = new Image();	
	cpImage.src = imageURL;	
	cpImage.onload = function() {		
		cpContext.drawImage(this, 0, 0);				
		matrix = cpContext.getImageData(0, 0, cp.width, cp.height);	
	}
	
	function toHex(n) {		
		var res = n.toString(16).toUpperCase();		
		if (n < 10) res = "0" + res;		
		return res;	
	}		
	
	cp.onmousedown = function(e) {		
		this.isMouseDown = true;	
	}
	
	cp.onmouseup = function(e) {		
		if (!this.isMouseDown) return;		
		
		var posX = e.pageX - offsetLeft;		
		var posY = e.pageY - offsetTop;		
		var base = posY*matrix.width*4+posX*4;

		if (matrix.data[base] >= 0) {			
			hexField.value = "#"+toHex(matrix.data[base]) + toHex(matrix.data[base+1]) + toHex(matrix.data[base+2]);		
		}	
	}
	
	var picker = document.createElement("div");	
	picker.style.width = width+"px";
	
	var hexField = document.createElement("input");	
	hexField.type = "text";	
	hexField.maxLength = 7;	
	hexField.style.width = width+"px";	
	hexField.style.padding = 0;	
	hexField.style.border = "none";	
	hexField.style.position = "relative";	
	hexField.style.top = "-6px";	
	hexField.id = outputId;	
	hexField.value = defaultColor;
	
	picker.appendChild(cp);	
	picker.appendChild(hexField);	
	container.appendChild(picker);
}