[siap.git] / manager / inc / colorpicker / colorpicker.js

function ColorPicker(tmp_id, tmp_defaultcolor, tmp_output,evt) {\r
	if ($$('div_id')) {\r
\r
		if ($S('plugin').display == 'none') {\r
				toggle('plugin',tmp_defaultcolor);\r
		}\r
		return;\r
	}\r
\r
	if (!tmp_defaultcolor) {\r
		tmp_defaultcolor = 'FFFFFF';\r
	}\r
	\r
	if (agent('msie')) {	\r
		mouseX = event.clientX;\r
		mouseY = event.clientY;\r
	\r
		mouseY++;\r
		mouseY += 4;\r
	} else {\r
		mouseX = 500;\r
		mouseY = 300;\r
	}\r
\r
	inner = '<div id="plugin" onmousedown="HSVslide(\'drag\',\'plugin\',event)" style="Z-INDEX:102; TOP:'+mouseY+'px;left:'+mouseX+'px; DISPLAY: none;">';\r
	inner += '<div id="plugHEX" onmousedown="stop=0; setTimeout(\'stop=1\',100);">#'+ tmp_defaultcolor +'</div><div id="plugCLOSE" onmousedown="toggle(\'plugin\',\''+tmp_defaultcolor+'\')"><font style="color:000000">x</font></div><br>';\r
	inner += '<div id="SV" onmousedown="HSVslide(\'SVslide\',\'plugin\',event)" title="Saturation + Value">';\r
	inner += '<div id="SVslide" style="TOP: -4px; LEFT: -4px;"><br /></div>';\r
	inner += '</div>';\r
	inner += '<form id="H" onmousedown="HSVslide(\'Hslide\',\'plugin\',event)" title="Hue">';\r
	inner += '<div id="Hslide" style="TOP: -7px; LEFT: -8px;"><br /></div>';\r
	inner += '<div id="Hmodel"></div>';\r
	inner += '</form><div id="plugCURI"></div><div id="plugCUR"></div>';\r
	inner += '</div>';\r
\r
	var div = document.createElement('DIV');\r
	div.setAttribute("id", "div_id");\r
	div.setAttribute("style", "z-index: 101");\r
\r
	div.innerHTML = inner;\r
	\r
	document.getElementsByTagName('body')[0].appendChild(div);\r
	\r
	if (!$$('div_all_combo')) {\r
		var div2 = document.createElement('div');\r
		div2.id = 'div_all_combo';\r
		div2.className = 'div_all';\r
		div2.style.display = '';\r
		div2.innerHtml = '&nbsp; ';\r
		div2.onclick = function () {\r
			toggle('plugin',tmp_defaultcolor);\r
		}\r
		document.getElementsByTagName('body')[0].appendChild(div2);\r
	}\r
\r
	$S('plugCUR').background='#'+tmp_defaultcolor;\r
	$S('plugCURI').background='#'+tmp_defaultcolor;\r
	global_output = tmp_output;\r
\r
	//LOAD\r
	loadSV();\r
	if (agent('msie')) {\r
		$S('plugin').display='block';\r
	}\r
}\r
\r
function positionPlugin(e) {\r
	if ($$('plugin')) {\r
		if ($S('plugin').display == 'none') {\r
			mouseY = e.pageY;\r
			mouseY++;\r
			mouseY+=4;\r
			$S('plugin').left=e.pageX;\r
			$S('plugin').top=mouseY;\r
			$S('plugin').display='none';\r
			document.onmousedown = null;\r
		}\r
	}\r
}\r
\r
if (!agent('msie')) {\r
	document.onmousedown=positionPlugin;\r
}\r
\r
// DHTML Color Picker\r
// Programming by Ulyses\r
// ColorJack.com\r
\r
function $S(v) { return($$(v).style); }\r
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }\r
function toggle(v,tmp_defaultcolor) {\r
	if ($S(v).display == 'none') {\r
		$S('div_all_combo').display = '';\r
		$S(v).display = 'block';\r
		$S('plugCURI').background='#'+tmp_defaultcolor;\r
		\r
	} else {\r
		$S('div_all_combo').display = 'none';\r
		$S(v).display = 'none';		\r
	}\r
}\r
function within(v,a,z) { return((v>=a && v<=z)?true:false); }\r
function XY(e,v) { var z=agent('msie')?[event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop]:[e.pageX,e.pageY]; return(z[zero(v)]); }\r
function XYwin(v) { var z=agent('msie')?[document.body.clientHeight,document.body.clientWidth]:[window.innerHeight,window.innerWidth]; return(!isNaN(v)?z[v]:z); }\r
function zero(v) { v=parseInt(v); return(!isNaN(v)?v:0); }\r
\r
/* PLUGIN */\r
\r
var maxValue={'h':360,'s':100,'v':100}, HSV={0:360,1:100,2:100};\r
var hSV=165, wSV=162, hH=163, slideHSV={0:360,1:100,2:100}, zINDEX=15, stop=1;\r
\r
function HSVslide(d,o,e) {\r
\r
	function tXY(e) { tY=XY(e,1)-top; tX=XY(e)-left; }\r
	function mkHSV(a,b,c) { return(Math.min(a,Math.max(0,Math.ceil((parseInt(c)/b)*a)))); }\r
	function ckHSV(a,b) { if(within(a,0,b)) return(a); else if(a>b) return(b); else if(a<0) return('-'+oo); }\r
	function drag(e) { if(!stop) { if(d!='drag') tXY(e);\r
	\r
		if(d=='SVslide') { ds.left=ckHSV(tX-oo,wSV)+'px'; ds.top=ckHSV(tY-oo,wSV)+'px';\r
		\r
			slideHSV[1]=mkHSV(100,wSV,ds.left); slideHSV[2]=100-mkHSV(100,wSV,ds.top); HSVupdate();\r
\r
		}\r
		else if(d=='Hslide') { var ck=ckHSV(tY-oo,hH), j, r='hsv', z={};\r
		\r
			ds.top=(ck-5)+'px'; slideHSV[0]=mkHSV(360,hH,ck);\r
 \r
			for(var i=0; i<=r.length-1; i++) { j=r.substr(i,1); z[i]=(j=='h')?maxValue[j]-mkHSV(maxValue[j],hH,ck):HSV[i]; }\r
\r
			HSVupdate(z); $S('SV').backgroundColor='#'+hsv2hex([HSV[0],100,100]);\r
\r
		}\r
		else if(d=='drag') { ds.left=XY(e)+oX-eX+'px'; ds.top=XY(e,1)+oY-eY+'px'; }\r
\r
	}}\r
\r
	if(stop) { stop=''; var ds=$S(d!='drag'?d:o);\r
\r
		if(d=='drag') { var oX=parseInt(ds.left), oY=parseInt(ds.top), eX=XY(e), eY=XY(e,1); $S(o).zIndex=zINDEX++; }\r
		else { var left=($$(o).offsetLeft+10), top=($$(o).offsetTop+22), tX, tY, oo=(d=='Hslide')?2:4; if(d=='SVslide') slideHSV[0]=HSV[0]; }\r
\r
		document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; }; drag(e);\r
\r
	}\r
}\r
\r
function HSVupdate(v) { \r
\r
	v=hsv2hex(HSV=v?v:slideHSV);\r
	$$('plugHEX').innerHTML='#'+v;\r
	$S('plugCUR').background='#'+v;\r
	$S('div_color_'+global_output).background='#'+v;\r
	\r
	$$(global_output).value=v;\r
	\r
	\r
	return(v);\r
\r
}\r
\r
function loadSV() { var z='';\r
\r
	for(var i=hSV; i>=0; i--) z+="<div style=\"BACKGROUND: #"+hsv2hex([Math.round((360/hSV)*i),100,100])+";\"><br /><\/div>";\r
	\r
	$$('Hmodel').innerHTML=z;\r
	\r
}\r
\r
/* CONVERSIONS */\r
\r
function toHex(v) { v=Math.round(Math.min(Math.max(0,v),255)); return("0123456789ABCDEF".charAt((v-v%16)/16)+"0123456789ABCDEF".charAt(v%16)); }\r
function rgb2hex(r) { return(toHex(r[0])+toHex(r[1])+toHex(r[2])); }\r
function hsv2hex(h) { return(rgb2hex(hsv2rgb(h))); }	\r
\r
function hsv2rgb(r) { // easyrgb.com/math.php?MATH=M21#text21\r
\r
\r
    var R,B,G,S=r[1]/100,V=r[2]/100,H=r[0]/360;\r
\r
    if(S>0) { if(H>=1) H=0;\r
\r
        H=6*H; F=H-Math.floor(H);\r
        A=Math.round(255*V*(1.0-S));\r
        B=Math.round(255*V*(1.0-(S*F)));\r
        C=Math.round(255*V*(1.0-(S*(1.0-F))));\r
        V=Math.round(255*V); \r
\r
        switch(Math.floor(H)) {\r
\r
            case 0: R=V; G=C; B=A; break;\r
            case 1: R=B; G=V; B=A; break;\r
            case 2: R=A; G=V; B=C; break;\r
            case 3: R=A; G=B; B=V; break;\r
            case 4: R=C; G=A; B=V; break;\r
            case 5: R=V; G=A; B=B; break;\r
\r
        }\r
\r
        return([R?R:0,G?G:0,B?B:0]);\r
\r
    }\r
    else return([(V=Math.round(V*255)),V,V]);\r
\r
}
Commit	Line	Data
	1	function ColorPicker(tmp_id, tmp_defaultcolor, tmp_output,evt) {\r
	2	if ($$('div_id')) {\r
	3	\r
	4	if ($S('plugin').display == 'none') {\r
	5	toggle('plugin',tmp_defaultcolor);\r
	6	}\r
	7	return;\r
	8	}\r
	9	\r
	10	if (!tmp_defaultcolor) {\r
	11	tmp_defaultcolor = 'FFFFFF';\r
	12	}\r
	13	\r
	14	if (agent('msie')) { \r
	15	mouseX = event.clientX;\r
	16	mouseY = event.clientY;\r
	17	\r
	18	mouseY++;\r
	19	mouseY += 4;\r
	20	} else {\r
	21	mouseX = 500;\r
	22	mouseY = 300;\r
	23	}\r
	24	\r
	25	inner = '<div id="plugin" onmousedown="HSVslide(\'drag\',\'plugin\',event)" style="Z-INDEX:102; TOP:'+mouseY+'px;left:'+mouseX+'px; DISPLAY: none;">';\r
	26	inner += '<div id="plugHEX" onmousedown="stop=0; setTimeout(\'stop=1\',100);">#'+ tmp_defaultcolor +'</div><div id="plugCLOSE" onmousedown="toggle(\'plugin\',\''+tmp_defaultcolor+'\')"><font style="color:000000">x</font></div><br>';\r
	27	inner += '<div id="SV" onmousedown="HSVslide(\'SVslide\',\'plugin\',event)" title="Saturation + Value">';\r
	28	inner += '<div id="SVslide" style="TOP: -4px; LEFT: -4px;"><br /></div>';\r
	29	inner += '</div>';\r
	30	inner += '<form id="H" onmousedown="HSVslide(\'Hslide\',\'plugin\',event)" title="Hue">';\r
	31	inner += '<div id="Hslide" style="TOP: -7px; LEFT: -8px;"><br /></div>';\r
	32	inner += '<div id="Hmodel"></div>';\r
	33	inner += '</form><div id="plugCURI"></div><div id="plugCUR"></div>';\r
	34	inner += '</div>';\r
	35	\r
	36	var div = document.createElement('DIV');\r
	37	div.setAttribute("id", "div_id");\r
	38	div.setAttribute("style", "z-index: 101");\r
	39	\r
	40	div.innerHTML = inner;\r
	41	\r
	42	document.getElementsByTagName('body')[0].appendChild(div);\r
	43	\r
	44	if (!$$('div_all_combo')) {\r
	45	var div2 = document.createElement('div');\r
	46	div2.id = 'div_all_combo';\r
	47	div2.className = 'div_all';\r
	48	div2.style.display = '';\r
	49	div2.innerHtml = '  ';\r
	50	div2.onclick = function () {\r
	51	toggle('plugin',tmp_defaultcolor);\r
	52	}\r
	53	document.getElementsByTagName('body')[0].appendChild(div2);\r
	54	}\r
	55	\r
	56	$S('plugCUR').background='#'+tmp_defaultcolor;\r
	57	$S('plugCURI').background='#'+tmp_defaultcolor;\r
	58	global_output = tmp_output;\r
	59	\r
	60	//LOAD\r
	61	loadSV();\r
	62	if (agent('msie')) {\r
	63	$S('plugin').display='block';\r
	64	}\r
	65	}\r
	66	\r
	67	function positionPlugin(e) {\r
	68	if ($$('plugin')) {\r
	69	if ($S('plugin').display == 'none') {\r
	70	mouseY = e.pageY;\r
	71	mouseY++;\r
	72	mouseY+=4;\r
	73	$S('plugin').left=e.pageX;\r
	74	$S('plugin').top=mouseY;\r
	75	$S('plugin').display='none';\r
	76	document.onmousedown = null;\r
	77	}\r
	78	}\r
	79	}\r
	80	\r
	81	if (!agent('msie')) {\r
	82	document.onmousedown=positionPlugin;\r
	83	}\r
	84	\r
	85	// DHTML Color Picker\r
	86	// Programming by Ulyses\r
	87	// ColorJack.com\r
	88	\r
	89	function $S(v) { return($$(v).style); }\r
	90	function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }\r
	91	function toggle(v,tmp_defaultcolor) {\r
	92	if ($S(v).display == 'none') {\r
	93	$S('div_all_combo').display = '';\r
	94	$S(v).display = 'block';\r
	95	$S('plugCURI').background='#'+tmp_defaultcolor;\r
	96	\r
	97	} else {\r
	98	$S('div_all_combo').display = 'none';\r
	99	$S(v).display = 'none'; \r
	100	}\r
	101	}\r
	102	function within(v,a,z) { return((v>=a && v<=z)?true:false); }\r
	103	function XY(e,v) { var z=agent('msie')?[event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop]:[e.pageX,e.pageY]; return(z[zero(v)]); }\r
	104	function XYwin(v) { var z=agent('msie')?[document.body.clientHeight,document.body.clientWidth]:[window.innerHeight,window.innerWidth]; return(!isNaN(v)?z[v]:z); }\r
	105	function zero(v) { v=parseInt(v); return(!isNaN(v)?v:0); }\r
	106	\r
	107	/* PLUGIN */\r
	108	\r
	109	var maxValue={'h':360,'s':100,'v':100}, HSV={0:360,1:100,2:100};\r
	110	var hSV=165, wSV=162, hH=163, slideHSV={0:360,1:100,2:100}, zINDEX=15, stop=1;\r
	111	\r
	112	function HSVslide(d,o,e) {\r
	113	\r
	114	function tXY(e) { tY=XY(e,1)-top; tX=XY(e)-left; }\r
	115	function mkHSV(a,b,c) { return(Math.min(a,Math.max(0,Math.ceil((parseInt(c)/b)*a)))); }\r
	116	function ckHSV(a,b) { if(within(a,0,b)) return(a); else if(a>b) return(b); else if(a<0) return('-'+oo); }\r
	117	function drag(e) { if(!stop) { if(d!='drag') tXY(e);\r
	118	\r
	119	if(d=='SVslide') { ds.left=ckHSV(tX-oo,wSV)+'px'; ds.top=ckHSV(tY-oo,wSV)+'px';\r
	120	\r
	121	slideHSV[1]=mkHSV(100,wSV,ds.left); slideHSV[2]=100-mkHSV(100,wSV,ds.top); HSVupdate();\r
	122	\r
	123	}\r
	124	else if(d=='Hslide') { var ck=ckHSV(tY-oo,hH), j, r='hsv', z={};\r
	125	\r
	126	ds.top=(ck-5)+'px'; slideHSV[0]=mkHSV(360,hH,ck);\r
	127	\r
	128	for(var i=0; i<=r.length-1; i++) { j=r.substr(i,1); z[i]=(j=='h')?maxValue[j]-mkHSV(maxValue[j],hH,ck):HSV[i]; }\r
	129	\r
	130	HSVupdate(z); $S('SV').backgroundColor='#'+hsv2hex([HSV[0],100,100]);\r
	131	\r
	132	}\r
	133	else if(d=='drag') { ds.left=XY(e)+oX-eX+'px'; ds.top=XY(e,1)+oY-eY+'px'; }\r
	134	\r
	135	}}\r
	136	\r
	137	if(stop) { stop=''; var ds=$S(d!='drag'?d:o);\r
	138	\r
	139	if(d=='drag') { var oX=parseInt(ds.left), oY=parseInt(ds.top), eX=XY(e), eY=XY(e,1); $S(o).zIndex=zINDEX++; }\r
	140	else { var left=($$(o).offsetLeft+10), top=($$(o).offsetTop+22), tX, tY, oo=(d=='Hslide')?2:4; if(d=='SVslide') slideHSV[0]=HSV[0]; }\r
	141	\r
	142	document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; }; drag(e);\r
	143	\r
	144	}\r
	145	}\r
	146	\r
	147	function HSVupdate(v) { \r
	148	\r
	149	v=hsv2hex(HSV=v?v:slideHSV);\r
	150	$$('plugHEX').innerHTML='#'+v;\r
	151	$S('plugCUR').background='#'+v;\r
	152	$S('div_color_'+global_output).background='#'+v;\r
	153	\r
	154	$$(global_output).value=v;\r
	155	\r
	156	\r
	157	return(v);\r
	158	\r
	159	}\r
	160	\r
	161	function loadSV() { var z='';\r
	162	\r
	163	for(var i=hSV; i>=0; i--) z+="<div style=\"BACKGROUND: #"+hsv2hex([Math.round((360/hSV)*i),100,100])+";\"><br /><\/div>";\r
	164	\r
	165	$$('Hmodel').innerHTML=z;\r
	166	\r
	167	}\r
	168	\r
	169	/* CONVERSIONS */\r
	170	\r
	171	function toHex(v) { v=Math.round(Math.min(Math.max(0,v),255)); return("0123456789ABCDEF".charAt((v-v%16)/16)+"0123456789ABCDEF".charAt(v%16)); }\r
	172	function rgb2hex(r) { return(toHex(r[0])+toHex(r[1])+toHex(r[2])); }\r
	173	function hsv2hex(h) { return(rgb2hex(hsv2rgb(h))); } \r
	174	\r
	175	function hsv2rgb(r) { // easyrgb.com/math.php?MATH=M21#text21\r
	176	\r
	177	\r
	178	var R,B,G,S=r[1]/100,V=r[2]/100,H=r[0]/360;\r
	179	\r
	180	if(S>0) { if(H>=1) H=0;\r
	181	\r
	182	H=6*H; F=H-Math.floor(H);\r
	183	A=Math.round(255V(1.0-S));\r
	184	B=Math.round(255V(1.0-(S*F)));\r
	185	C=Math.round(255V(1.0-(S*(1.0-F))));\r
	186	V=Math.round(255*V); \r
	187	\r
	188	switch(Math.floor(H)) {\r
	189	\r
	190	case 0: R=V; G=C; B=A; break;\r
	191	case 1: R=B; G=V; B=A; break;\r
	192	case 2: R=A; G=V; B=C; break;\r
	193	case 3: R=A; G=B; B=V; break;\r
	194	case 4: R=C; G=A; B=V; break;\r
	195	case 5: R=V; G=A; B=B; break;\r
	196	\r
	197	}\r
	198	\r
	199	return([R?R:0,G?G:0,B?B:0]);\r
	200	\r
	201	}\r
	202	else return([(V=Math.round(V*255)),V,V]);\r
	203	\r
	204	}