// TODO: REMOVE OBJECT NAME FROM CLASS CODE



function ColorPicker()

{

	this.init()

}



ColorPicker.prototype =

{

	hexa: Array(0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"),

	hue_step: 18,

	sat_step: 10,

	val_step: 10,

	cellsize: 10,

	pick_into: '',

	active_hue: 0,

	current_v: 0,

	saved_v: 0,

	current_s: 0,

	saved_s: 0,

	hue_coords: {x:0, y:0},

	IE: document.all?true:false,

	hue_update: 'off',



	set_hc: function(update)

	{

		this.hue_update=update

	},

	

	hsv2hex: function(h,s,v)

	{

		h=h%360

		s=s/100

		v=v/100



		var r,g,b

		hi=Math.floor((h/60)%6)



		v=v*255

		f=(h/60)-hi

		p=v*(1-s)

		q=v*(1-f*s)

		t=v*(1-(1-f)*s)



		switch (hi)

		{

			case 0:

			r=v; g=t; b=p;

			break;

			case 1:

			r=q; g=v; b=p;

			break;

			case 2:

			r=p; g=v; b=t;

			break;

			case 3:

			r=p; g=q; b=v;

			break;

			case 4:

			r=t; g=p; b=v;

			break;

			case 5:

			r=v; g=p; b=q;

			break;

		}



		r=Math.round(r)

		g=Math.round(g)

		b=Math.round(b)



		return this.rgb2hex(r,g,b);

	},





	rgb2hex: function(r,g,b)

	{

		r = "" + this.hexa[Math.floor(r/16)] + this.hexa[r%16];

		g = "" + this.hexa[Math.floor(g/16)] + this.hexa[g%16];

		b = "" + this.hexa[Math.floor(b/16)] + this.hexa[b%16];

		return '#' + r + g + b;

	},



	rgb2hsv: function(r,g,b)

	{

		var h,s,v



		var maxc=Math.max(r,g)

		maxc=Math.max(maxc,b)



		var minc=Math.min(r,g)

		minc=Math.min(minc,b)



		var delta=maxc-minc



		switch (maxc)

		{

			case r:

			h=60*(g-b)/delta

			if (h<0) h+=360

			break;

			case g:

			h=60*(b-r)/delta+120

			break;

			case b:

			h=60*(r-g)/delta+240

			break;

		}

		s=delta*100/maxc

		v=maxc*100/255



		h=Math.round(h)

		s=Math.round(s)

		v=Math.round(v)



		return Array(h,s,v)

	},



	showpalette: function(h_show,track)

	{

		if (this.hue_update=='off' && track) return;

		for (h=0; h<=360; h+=this.hue_step)

		{

			if (h_show!=h)

			{

				document.getElementById('h'+h).style.display='none';

			}

			else

			{

				document.getElementById('h'+h).style.display='block';

			}

		}

		this.active_hue=h_show

	},



	sc: function(color)

	{

		document.getElementById('sample').style.backgroundColor=color;

		document.getElementById('samplespan').innerHTML='<font color=#000000>'+color+'</font><br><font color=#FFFFFF>'+color+'</font>'

	},



	savecolor: function()

	{

		document.getElementById('saved').style.backgroundColor=document.getElementById('sample').style.backgroundColor;

		document.getElementById('savedspan').innerHTML=document.getElementById('samplespan').innerHTML

		this.saved_v=this.current_v

		this.saved_s=this.current_s

	},



	findPosXY: function(obj)

	{

		var s = { x:0, y:0 };

		while (obj.offsetParent)

		{

			s.x += obj.offsetLeft;

			s.y += obj.offsetTop;

			obj = obj.offsetParent;

		}

		return s;

	},



	setcolor_xy: function(e)

	{

		if (!e) e = window.event;

		if (this.IE)

		{

			tempX = event.clientX + document.body.scrollLeft;

			tempY = event.clientY + document.body.scrollTop;

		}

		else {

			tempX = e.pageX;

			tempY = e.pageY;

		}

		if (tempX < 0){tempX = 0;}

		if (tempY < 0){tempY = 0;}



		this.current_s=newsat=Math.floor((tempX-this.hue_coords.x)/this.cellsize)*this.sat_step

		this.current_v=newval=100-Math.floor((tempY-this.hue_coords.y)/this.cellsize)*this.val_step



		if (newsat<0 || newsat>100 || newval<0 || newval>100) return;

		newcolor=this.hsv2hex(this.active_hue,newsat,newval)

		this.sc(newcolor)

		window.status=newcolor

	},



	init: function()

	{

		document.write("<div id=picker><table id=pickertable><tr><td rowspan=2>")

		var towrite

		for (h=0; h<=360; h+=this.hue_step)

		{

			tempstart=new Date().getTime()



			var display='none';

			if (h==0) display='block';



			document.write('<span id=h'+h+' style=\'display:'+display+';\'><table onclick="colorPicker.savecolor();" id=table'+h+' border=0 cellpadding=0 cellspacing=0><tr>');

			for (v=100; v>=0; v-=this.val_step)

			{

				towrite=''

				for (s=0; s<=100; s+=this.sat_step)

				{

					var hexcolor=this.hsv2hex(h,s,v);

					towrite+='<td bgcolor='+hexcolor+' class=picker_cc>'

				}

				document.write(towrite);



				document.write('<tr>');

			}

			document.write('</table></span>');

		}





		document.write('<td rowspan=2><table border=0 cellpadding=0 cellspacing=0><tr>');

		towrite=''

		for (h=360; h>=0; h-=this.hue_step)

		{

			hexcolor=this.hsv2hex(h,100,100);

			//towrite+='<tr><td onmouseover="colorPicker.showpalette('+h+');window.status=\''+hexcolor+'\'" class=picker_huecc style="background-color: '+hexcolor+'; cursor: pointer;">';

			towrite+='<tr><td onmousedown="colorPicker.showpalette('+h+',false);colorPicker.set_hc(\'on\');" onmouseup=colorPicker.set_hc("off"); onmouseover="colorPicker.showpalette('+h+',true);window.status=\''+hexcolor+'\'" class=picker_huecc style="background-color: '+hexcolor+'; cursor: pointer;">';

		}

		document.write(towrite);

		document.write('</table></td>');



		document.write("<td valign=top align=center>"+

		"<table>"+

		"<tr><td class=picker_sample id=saved>"+

		"<span id=savedspan></span>"+

		"<tr>"+

		"<td class=picker_sample id=sample>"+

		"<span id=samplespan></span>"+

		"</table>"+

		"<tr><td valign=bottom align=center>"+

		"<button type=button onclick=colorPicker.hide(true); title='Pick Color' class=picker_btn>OK</button>"+

		"<button type=button onclick=colorPicker.hide(false); title='Cancel' class=picker_btn><font color=red>X</font></button>"+

		"		</table></div>");



		var picker=document.getElementById('picker')

		picker.style.display='none'

		document.body.appendChild(picker);

		

		document.onmousemove = function(e) { colorPicker.setcolor_xy(e) };

	},



	show: function(element)

	{

		var picker=document.getElementById('picker')

		if (picker.style.display!='none')

		{

			this.hide();

			return

		}

		this.pick_into=element

		elt=document.getElementById(element)



		var eltoffset=$('#'+element).offset()

		$('#picker').css('left',eltoffset.left+10)

		$('#picker').css('top',eltoffset.top+10)

		

		

/*		var coord = this.findPosXY(elt);

		var width = picker.offsetWidth;

		var docWidth = document.body.scrollWidth;

		if (coord.x + width > docWidth) coord.x = docWidth - width - 10;

		if (coord.x < 0) coord.x = 0;

		picker.style.left = (coord.x) + "px";

		picker.style.top = (coord.y + elt.offsetHeight) + "px";

*/		

		// TODO: FIX #FFFFFF AND #000000 HANDLING

		// DETECT HUE FOR HEX COLORS

		color=elt.value

		if (color.substr(0,3)=='rgb') // TODO: REGEX CHECK

		{

			var hsv=Array()

			eval('hsv=colorPicker.rgb2hsv'+color.substr(3))

			var hue=hsv[0]

			this.active_hue=hue-(hue%this.hue_step)

			this.showpalette(this.active_hue,false)

			eval('color=this.rgb2hex'+color.substr(3))



		}

		if (color=='') color='#000000'

		document.getElementById('saved').style.backgroundColor=color

		document.getElementById('savedspan').innerHTML='<font color=#000000>'+color+'</font><br><font color=#FFFFFF>'+color+'</font>'



		document.getElementById('picker').style.display='block'

		document.getElementById('picker').style.position='absolute'



		// REPLACE ACTIVE_HUE WITH 0

		hue_table=document.getElementById('h'+this.active_hue);

		this.hue_coords=this.findPosXY(hue_table)



	},



	hide: function(save)

	{

		document.getElementById('picker').style.display='none'

		if (save)

		{

			document.getElementById(this.pick_into).value=document.getElementById('saved').style.backgroundColor

			document.getElementById(this.pick_into).style.backgroundColor=document.getElementById('saved').style.backgroundColor

			if (this.saved_v>50 && this.saved_s<50)

			{

				document.getElementById(this.pick_into).style.color='#000000'

			}

			else

			{

				document.getElementById(this.pick_into).style.color='#FFFFFF'

			}

		}

	}





}



colorPicker=new ColorPicker();