var ColorSelect = function (el, r, g, b) {
		createMethodReference(this, CElement)();
		
		this.el = el;
		this.el.className = 'colorselect';
		this.rgb = [r, g, b];
		
		this.overview = n('div');
		this.overview.className = 'colorselect-overview';
		this.el.appendChild(this.overview);
		
		this.ruler = n('div', null, 3);
		this.picker = n('div', null, 3);
		this.values = n('div', null, 3);
		this.values_i = n('input', null, 3);

		this.values[0].innerHTML = 'R: ';
		this.values[1].innerHTML = 'G: ';
		this.values[2].innerHTML = 'B: ';

		this.values_i[2].style.marginLeft = '1px';

		var direct_i = createMethodReference(this, function () {
			if (isNaN(parseInt(this.values_i[0].value, 10)))
				this.values_i[0].value = 0;
			if (isNaN(parseInt(this.values_i[1].value, 10)))
				this.values_i[1].value = 0;
			if (isNaN(parseInt(this.values_i[2].value, 10)))
				this.values_i[2].value = 0;
				
			this.rgb = [
				Math.min(255, Math.max(0, parseInt(this.values_i[0].value, 10))),
				Math.min(255, Math.max(0, parseInt(this.values_i[1].value, 10))),
				Math.min(255, Math.max(0, parseInt(this.values_i[2].value, 10)))
			];

			this.updateColor(true);
		});

		for (var i = 0; i < 3; i ++) {
			this.ruler[i].className = 'colorselect-ruler colorselect-ruler-'+i;
			this.picker[i].className = 'colorselect-picker';
			this.values_i[i].className = 'text';
			this.values_i[i].style.height = '11px';
			this.values_i[i].style.width = '25px';
			
			this.el.appendChild(this.ruler[i]);
			this.ruler[i].appendChild(this.picker[i]);
			this.el.appendChild(this.values[i]);
			this.values[i].appendChild(this.values_i[i]);
			attachEvent(this.values_i[i], 'keyup', direct_i);
			
			var br = n('div');
			br.className = 'clear';
			this.el.appendChild(br);
			
			attachEvent(this.picker[i], 'mousedown', createMethodReference({t:this, i:i}, function (e) {
				if (e.preventDefault) 
					e.preventDefault();
					
				this.t.drag_start(this.i);
			}));
			attachEvent(document, 'mouseup', createMethodReference(this, this.drag_end));
			attachEvent(document, 'mousemove', createMethodReference(this, this.drag_move));
			
			this.picker[i].style.marginLeft = Math.round(this.rgb[i]/255 * 235) + 'px';
			
			this.ruler[i].style.cssFloat = 'left';
			this.values[i].style.cssFloat = 'left';
			this.values[i].style.textIndent = '5px';
		}
		this.updateColor();
		
		this.dragid = null;
		this.mouse = getMouseXY();
	};
	ColorSelect.prototype = clone(CElement.prototype);
	
	ColorSelect.prototype.drag_start = function (i) {
		this.dragid = i;
		this.mouse = getMouseXY();
	};
	
	ColorSelect.prototype.drag_end = function () {
		this.dragid = null;
	};
	
	ColorSelect.prototype.drag_move = function () {
		if (this.dragid !== null) {
			var m = getMouseXY();
			var prefix = parseInt(this.picker[this.dragid].style.marginLeft);
			prefix = Math.max(0, Math.min(240-5, prefix + (m.x - this.mouse.x)));
			
			this.picker[this.dragid].style.marginLeft = prefix + 'px';
			this.rgb[this.dragid] = Math.round(255 * prefix/235);
			this.updateColor();
		}
		this.mouse = getMouseXY();
	};
	
	ColorSelect.prototype.updateColor = function (updatePicker) {
		this.overview.style.backgroundColor = 'rgb('+this.rgb[0]+', '+this.rgb[1]+', '+this.rgb[2]+')';
		this.values_i[0].value = this.rgb[0];
		this.values_i[1].value = this.rgb[1];
		this.values_i[2].value = this.rgb[2];

		if (updatePicker) {
			this.picker[0].style.marginLeft = Math.round(this.rgb[0]/255 * 235) + 'px';
			this.picker[1].style.marginLeft = Math.round(this.rgb[1]/255 * 235) + 'px';
			this.picker[2].style.marginLeft = Math.round(this.rgb[2]/255 * 235) + 'px';
		}

		this.callEvent('color-changed');
	};
	
	ColorSelect.prototype.setHex = function (hex) {
		hex = hex.replace(/^#/, '');
		this.rgb = [
			Math.min(255, Math.max(0, parseInt(hex.substr(0, 2), 16))),
			Math.min(255, Math.max(0, parseInt(hex.substr(2, 2), 16))),
			Math.min(255, Math.max(0, parseInt(hex.substr(4, 2), 16)))
		];
		this.overview.style.backgroundColor = 'rgb('+this.rgb[0]+', '+this.rgb[1]+', '+this.rgb[2]+')';
		
		for (var i = 0; i < 3; i ++) {
			this.picker[i].style.marginLeft = Math.min(235, Math.round(this.rgb[i]/255 * 235)) + 'px';
		}
		this.updateColor();
	};
	
	ColorSelect.prototype.getRgb = function (prefix) {
		prefix = parseInt(prefix);
		if (prefix === 0 || isNaN(prefix))
			return this.rgb;
			
		return [
			Math.min(255, Math.max(0, this.rgb[0]+prefix)), 
			Math.min(255, Math.max(0, this.rgb[1]+prefix)), 
			Math.min(255, Math.max(0, this.rgb[2]+prefix))
		];
	};
	
	ColorSelect.prototype.getHex = function (prefix) {
		prefix = parseInt(prefix);
		if (isNaN(prefix))
			prefix = 0;
			
		var rgb = this.getRgb(prefix);
		return (rgb[0] < 16 ? '0' : '') + rgb[0].toString(16)+ (rgb[1] < 16 ? '0' : '')+(rgb[1]).toString(16)+((rgb[2]) < 16 ? '0' : '')+(rgb[2]).toString(16);
	};