var input;

var display;



var rgb = new Array();

var hsv = new Array();

var hex = new Array();

var offset = new Array();

var H,S,V,sliderX,sliderY,dotX,dotY;



var isdrag=false;

var nn6=document.getElementById&&!document.all;



function mypickcolor(inputid, displayid, link) {

	input = inputid;

	display = displayid;



	offset = findPos(link);

	$("#ColourMod").css({ left: offset[0] + "px", top: offset[1] + "px" });

	$("#ColourMod").show();





	/*****************************/

	//Assign Javascript Functions

	/*****************************/



	if (nn6)

	document.getElementById('cmHex').type = "search";



	document.getElementById('cmCloseButton').href="javascript:;";

	document.getElementById('cmHex').onkeyup = hexUpdate;





	$("#cmHex").attr("value", $(inputid).attr("value"));

	hexUpdate();



	$("#ColourMod").mousedown(function(e){selectmouse(e);});

	$(document).mouseup(function(e){ unselectmouse(e); });

}





function findPos(obj) {

	var curleft = curtop = 0;

	if (obj.offsetParent) {

		curleft = obj.offsetLeft

		curtop = obj.offsetTop

		while (obj = obj.offsetParent) {

			curleft += obj.offsetLeft

			curtop += obj.offsetTop

		}

	}

	return [curleft,curtop];

}





function selectmouse(e) {

	document.body.style.cursor = 'pointer';

	mouseX = nn6 ? e.clientX : event.clientX;

	mouseY = nn6 ? e.clientY : event.clientY;



	so = scrollOffset();

	if (!so[1]) so[1] = 0;

	if (!so[0]) so[0] = 0;



	if ($.browser.safari) {

		dotX = mouseX - 24 - document.getElementById('ColourMod').offsetLeft;

		dotY = mouseY - 53 - document.getElementById('ColourMod').offsetTop;

		sliderX = mouseX - 185 - document.getElementById('ColourMod').offsetLeft;

		sliderY = mouseY - 52 - document.getElementById('ColourMod').offsetTop;

	} else {

		dotX = mouseX - 24 - document.getElementById('ColourMod').offsetLeft + so[0];

		dotY = mouseY - 53 - document.getElementById('ColourMod').offsetTop + so[1];

		sliderX = mouseX - 185 - document.getElementById('ColourMod').offsetLeft + so[0];

		sliderY = mouseY - 52 - document.getElementById('ColourMod').offsetTop + so[1];

	}

	//Check to see if mouse is in the selection area

	if (0 <= dotX && dotX <= 150 && 0 <= dotY && dotY <= 150) {

		isdrag = true;

		document.getElementById("cmBlueDot").style.left = dotX + "px";

		document.getElementById("cmBlueDot").style.top = dotY + "px";



		arrowY = replaceString(document.getElementById("cmBlueArrow").style.top,'px','');



		H = Math.round(YToH(arrowY));

		S = XToS(dotX);

		V = YToV(dotY);



		document.getElementById("cmHue").value = H;

		rgb = HSVToRGB(H,S,V);

		hex = RGBToHex(rgb['red'],rgb['green'],rgb['blue']);



		update(hex);

		//changecss(cssclass,csselement,hex,"hex",csscookie,cssform);

		//changecss(input)



		document.onmousemove = dragSV;



	} else if (0 <= sliderX && sliderX <= 35 && 0 <= sliderY && sliderY <= 150) {

		isdrag = true;

		document.getElementById("cmBlueArrow").style.top = dotY + "px";



		sliderY = replaceString(document.getElementById("cmBlueArrow").style.top,'px','');

		dotX = replaceString(document.getElementById('cmBlueDot').style.left,'px','');

		dotY = replaceString(document.getElementById('cmBlueDot').style.top,'px','');



		H = YToH(sliderY);

		S = XToS(dotX);

		V = YToV(dotY);



		rgb = HSVToRGB(H,'100','100');

		hex = RGBToHex (rgb['red'],rgb['green'],rgb['blue']);

		document.getElementById("cmSatValBg").style.backgroundColor = "#"+hex;





		document.getElementById("cmHue").value = H;



		rgb = HSVToRGB(H, S, V);



		hex = RGBToHex (rgb['red'],rgb['green'],rgb['blue']);



		update(hex);



		document.onmousemove = dragH;

	} else if (0 <= dotX && dotX <= 150 && dotY < 0) {

		isdrag = true;

		dotX = mouseX - document.getElementById('ColourMod').offsetLeft + so[0];

		dotY = mouseY - document.getElementById('ColourMod').offsetTop + so[1];

		document.onmousemove = dragCM;



	}

}



function unselectmouse(e) {

	isdrag=false;

	document.body.style.cursor = 'auto';

}



function hexUpdate() {

	hex = $("#cmHex").attr("value");



	rgb = HexToRGB(hex);

	hsv = RGBToHSV(rgb['red'],rgb['green'],rgb['blue']);

	document.getElementById('cmHue').value = hsv['hue'];



	sliderY = HToY(hsv['hue']);

	dotX = SToX(hsv['sat']);

	dotY = VToY(hsv['val']);



	$("#cmBlueArrow").css("top", sliderY + "px");

	$("#cmBlueDot").css({left: dotX + "px", top: dotY + "px"});

	$("#cmColorContainer").css("background-color", "#" + hex);



	rgb = HSVToRGB(hsv['hue'],'100','100');

	hex = RGBToHex (rgb['red'],rgb['green'],rgb['blue']);



	$("#cmSatValBg").css("background-color", "#" + hex);



	$(input).attr("value", hex);

	$(display).css("background-color", "#" + hex);

	$("#cmColorContainer").css("background-color", "#" + hex);

}







/***********************/

//Default Color Selection

/***********************/







function dragSV(e) {

	if (isdrag) {

		mouseX = nn6 ? e.clientX : event.clientX;

		mouseY = nn6 ? e.clientY : event.clientY;



		so = scrollOffset();

		if (!so[1])	so[1] = 0;

		if (!so[0])	so[0] = 0;

		if ($.browser.safari) {

			xlimit = mouseX - 24 - document.getElementById('ColourMod').offsetLeft;

			ylimit = mouseY - 53 - document.getElementById('ColourMod').offsetTop;

		} else {

			xlimit = mouseX - 24 - document.getElementById('ColourMod').offsetLeft + so[0];

			ylimit = mouseY - 53 - document.getElementById('ColourMod').offsetTop + so[1];

		}



		if (xlimit<= 0)

		xlimit = 0;

		else if (xlimit >= 150)

		xlimit = 150;

		if (ylimit<= 0)

		ylimit = 0;

		else if (ylimit >= 150)

		ylimit = 150;



		document.getElementById("cmBlueDot").style.left = xlimit + "px";

		document.getElementById("cmBlueDot").style.top = ylimit + "px";



		H = document.getElementById('cmHue').value;

		S = XToS(xlimit);

		V = YToV(ylimit);



		rgb = HSVToRGB(H, S, V);

		hex = RGBToHex (rgb['red'],rgb['green'],rgb['blue']);



		update(hex);

	}

}



function dragH(e) {

	if (isdrag) {

		mouseY = nn6 ? e.clientY : event.clientY;



		so = scrollOffset();

		if (!so[1])	so[1] = 0;

		if (!so[0])	so[0] = 0;



		if ($.browser.safari) {

			sliderY = mouseY - 52 - document.getElementById('ColourMod').offsetTop;

		} else {

			sliderY = mouseY - 52 - document.getElementById('ColourMod').offsetTop + so[1];

		}



		if (sliderY < 0)

		sliderY = 0;

		if (sliderY > 150)

		sliderY = 150;



		document.getElementById("cmBlueArrow").style.top = sliderY + "px";

		H = YToH(sliderY);

		rgb = HSVToRGB(H,'100','100');

		hex = RGBToHex (rgb['red'],rgb['green'],rgb['blue']);

		document.getElementById("cmSatValBg").style.backgroundColor = "#"+hex;



		dotX = replaceString(document.getElementById('cmBlueDot').style.left,'px','');

		dotY = replaceString(document.getElementById('cmBlueDot').style.top,'px','');



		S = XToS($("#cmBlueDot").width());

		V = YToV(dotY);



		rgb = HSVToRGB(H, S, V);

		hex = RGBToHex (rgb['red'],rgb['green'],rgb['blue']);



		update(hex);

	}

}



function dragCM(e) {

	if (isdrag) {

		mouseX = nn6 ? e.clientX : event.clientX;

		mouseY = nn6 ? e.clientY : event.clientY;



		so = scrollOffset();

		if (!so[1])

		so[1] = 0;

		if (!so[0])

		so[0] = 0;



		xlimit = mouseX - dotX + so[0];

		ylimit = mouseY - dotY + so[1];



		document.getElementById("ColourMod").style.left = xlimit + "px";

		document.getElementById("ColourMod").style.top = ylimit + "px";

	}

}



function replaceString (string, find, replace) {

	return string.replace(find,replace);

}











/****************************************/

//Default Coordinate Conversion Functions

/****************************************/





function XToS (dotX) {

	return (dotX/1.5);

}



function YToV (dotY) {

	return (100-(dotY/1.5));

}

function SToX (S) {

	return S*1.5;

}



function VToY (V) {

	return (-V+100)*1.5;

}



function HToY (H) {

	return (H/360)*150;



}



function YToH (sliderY) {

	return (sliderY/150)*360;

}







/***************************/

//Color Conversion Functions

/***************************/



function HSVToRGB(H, S, V) {

	H = H/360;

	S = S/100;

	V = V/100;



	if (S <= 0) {

		V = Math.round(V*255);

		rgb['red'] = V;

		rgb['green'] = V;

		rgb['blue'] = V;

		return rgb;

	} else {

		if (H >= 1.0) {

			H = 0;

		}

		H = 6 * H;

		F = H - Math.floor(H);

		P = Math.round(255 * V * (1.0 - S));

		Q = Math.round(255 * V * (1.0 - (S * F)));

		T = Math.round(255 * V * (1.0 - (S * (1.0 - F))));

		V = Math.round(255 * V);

		switch (Math.floor(H)) {

			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;

		}

		rgb['red'] = R;

		rgb['green'] = G;

		rgb['blue'] = B;

		return rgb;

	}

}



function RGBToHex(R,G,B) {

	return (toHex(R)+toHex(G)+toHex(B));

}



function toHex(N) {

	if (N==null)

	return "00";

	N=parseInt(N);

	if (N==0 || isNaN(N))

	return "00";

	N=Math.max(0,N);

	N=Math.min(N,255);

	N=Math.round(N);

	return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);

}







function HexToRGB(H) {

	hexR = H.substr(0,2);

	rgb['red'] = parseInt((hexR).substring(0,2),16);

	hexG = H.substr(2,2);

	rgb['green'] = parseInt((hexG).substring(0,2),16);

	hexB = H.substr(4,2);

	rgb['blue'] = parseInt((hexB).substring(0,2),16);

	return rgb;

}



function RGBToHSV (R,G,B) {

	var max = Math.max(R,G,B);

	var min = Math.min(R,G,B);

	var delta = max-min;

	V = Math.round((max / 255) * 100);

	if(max != 0){

		S = Math.round(delta/max * 100);

	}else{

		S = 0;

	}



	if(S == 0){

		H = 0;

	}else{

		if(R == max){

			H = (G - B)/delta;

		}else if(G == max){

			H = 2 + (B - R)/delta;

		}else if(B == max){

			H = 4 + (R - G)/delta;

		}

		H = Math.round(H * 60);

		if(H > 360){

			H = 360;

		}

		if(H < 0){

			H += 360;

		}

	}

	hsv['hue'] = H;

	hsv['sat'] = S;

	hsv['val'] = V;

	return hsv;

}



function update(value) {

	$("#cmHex").attr("value", value);

	$(input).attr("value", value);

	$(display).css("background-color", "#" + value);

	$("#cmColorContainer").css("background-color", "#" + value);

}