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) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	
	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 && false) {
		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() {
	$("#cmHex").val($("#cmHex").val().match(/^[a-fA-F0-9]*/));
	hex = $("#cmHex").val();
	
	
	// convert 3-char hex values into full length ones
	if (/^[a-fA-F0-9]{3}$/.test(hex)) {
		hex = hex.substr(0, 1) + hex.substr(0, 1) + hex.substr(1, 1) + hex.substr(1, 1) + hex.substr(2, 1) + hex.substr(2, 1);
	}
		
	if (/^[a-fA-F0-9]{6}$/.test(hex)) {
		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);
	
		// tint the backgroun of the SV box
		svrgb = HSVToRGB(hsv['hue'],100,100);
		svhex = RGBToHex (svrgb['red'],svrgb['green'],svrgb['blue']);
		$("#cmSatValBg").css("background-color", "#" + svhex);
	
		$(input).val(hex);
		$(display).html('#' + hex).css("background-color", "#" + hex);
		if (hsv['val'] > 80) { $(display).css('color', '#000000'); } else { $(display).css('color', '#FFFFFF'); }
		$("#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 && false) {
			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 && false) {
			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;
		
		// start of new data
		
		document.getElementById("cmBlueArrow").style.top = sliderY + "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.getElementById("cmBlueArrow").style.top = sliderY + "px";
		H = YToH(sliderY);
		svrgb = HSVToRGB(H,'100','100');
		svhex = RGBToHex (svrgb['red'],svrgb['green'],svrgb['blue']);
		document.getElementById("cmSatValBg").style.backgroundColor = "#"+svhex;

		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) {
	rgb = HexToRGB(value);
	hsv = RGBToHSV(rgb['red'],rgb['green'],rgb['blue']);

	$("#cmHex").attr("value", value);
	$(input).attr("value", value);
	$(display).css("background-color", "#" + value).html("#" + value);
	if (hsv['val'] > 80) { $(display).css('color', '#000000'); } else { $(display).css('color', '#FFFFFF'); }
	$("#cmColorContainer").css("background-color", "#" + value);
}