jsx.ColorPicker = JSX.Class.create('jsx.ColorPicker');
jsx.ColorPicker.prototype =
{
	__target: null,
	
	__colors: [],
	
	__divHolder: null,
	
	__divPreview: null,
	
	__divCodeHex: null,
	
	__divCodeRGB: null,
	
	__decToHex: function($decimal)
	{
		var $chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
		var $return = '';
		
		while(($decimal /= 16) > 16);
		while(($decimal - Math.floor($decimal)) < 1 && ($decimal - Math.floor($decimal)) > 0)
		{
			var $num = Math.floor($decimal);
			$return += $chars[$num];
			$decimal = (($decimal - $num)*16);
			
		}
		$return += $chars[$decimal];
		
		if($return.length == 1) $return += $return;
		return $return;
	},
	
	__changeColor: function($rgb)
	{
		var $key = String($rgb);
		var $hex = this.__colors[$key];
		if(!$hex)
		{
			$hex = this.__decToHex($rgb[0]) + this.__decToHex($rgb[1]) + this.__decToHex($rgb[2]);
			this.__colors[$key] = $hex;
		}
		
		this.__divPreview.style.backgroundColor = 'rgb('+ $rgb +')';
		this.__divCodeHex.innerHTML = '#'+ $hex;
		this.__divCodeRGB.innerHTML = String($rgb);
	},
	
	__selectColor: function($rgb)
	{
		var $hex = '#'+ this.__colors[String($rgb)];
		this.__target.value = $hex;
		
		this.dispatchEvent('onselect', [$hex, $rgb]);
		this.close();
	},
	
	__createCell: function($target, $rgb)
	{
		var $r = $rgb[0];
		var $g = $rgb[1];
		var $b = $rgb[2];
		
		var $cell = JSX.Element.create('div', $target);
			$cell.className = 'cell';
		
		var $color = JSX.Element.create('div', $cell);
			$color.style.backgroundColor = 'rgb('+ $r +', '+ $g +', '+ $b +')';
			//$color.style.color = 'rgb('+ $r +', '+ $g +', '+ $b +')';
			//$color.innerHTML = '.';
		
		var $this = this;
		$cell.onmouseover = function()
		{
			this.className = 'cell mouse_over';
			$this.__changeColor($rgb);
		};
		$cell.onmouseout = function()
		{
			this.className = 'cell';
		};
		$cell.onclick = function()
		{
			$this.__selectColor($rgb);
		}
	},
	
	__construct: function($target)
	{
		JSX.Event.makeBroadcaster(this);
		
		this.__target = $($target);
		
		this.__divHolder = JSX.Element.create('div');
		this.__divHolder.className = 'colorpicker';
		this.__divHolder.style.display = 'none';
		
		var $header = JSX.Element.create('div', this.__divHolder);
			$header.className = 'head';
		
		var $body = JSX.Element.create('div', this.__divHolder);
			$body.className = 'colors';
		
		var $side = JSX.Element.create('div', $body);
			$side.className = 'side';
		
		var $colors = [[0,0,0], [51,51,51], [102,102,102], [153,153,153], [204,204,204], [255,255,255], [255,0,0], [0,255,0], [0,0,255], [255,255,0], [0,255,255], [255,0,255]];
		for(var $i=0; $i<12; $i++)
		{
			this.__createCell($side, $colors[$i]);
			this.__createCell($side, [0, 0, 0]);
		}
		
		for($r=0; $r<256; $r+=51)
		{
			var $block = JSX.Element.create('div', $body);
				$block.className = 'block';
			
			for($b=0; $b<256; $b+=51)
			{
				for($g=0; $g<256; $g+=51)
				{
					this.__createCell($block, [$r, $g, $b]);
				}
			}
		}
		
		this.__divPreview = JSX.Element.create('div', $header);
		this.__divCodeHex = JSX.Element.create('div', $header);
		this.__divCodeRGB = JSX.Element.create('div', $header);
		
		this.__divPreview.className = 'color_preview';
		this.__divCodeHex.className = 'color_hex';
		this.__divCodeRGB.className = 'color_rgb';
		
		var $this = this;
		var $close = JSX.Element.create('a', $header);
			$close.className = 'close';
			$close.href	= '#';
			$close.innerHTML = 'x';
			$close.onclick = function()
			{
				$this.close();
				return false;
			};
	},
	
	setPosition: function($x, $y)
	{
		this.__divHolder.style.left	= $x +'px';
		this.__divHolder.style.top	= $y +'px';
	},
	
	open: function()
	{
		this.__divHolder.style.display = 'block';
	},
	
	close: function()
	{
		this.__divHolder.style.display = 'none';
		
		this.__divPreview.style.background = 'none';
		this.__divCodeHex.innerHTML = '';
		this.__divCodeRGB.innerHTML = '';
	},
	
	toggle: function()
	{
		if(this.__divHolder.style.display != 'block')
		{
			this.open();
		}
		else
		{
			this.close();
		}
	}
};