/*
 * Origian code from http://typetester.maratz.com/
 * Modified by Liferay
 */
 
function ColorPicker (src, func) {
	var cp = document.createElement("div");
	var image = document.createElement("img");
	var body = document.getElementsByTagName("body")[0];
	var textInput = null;
	var originalValue = "";
	var self = this;
	
	cp.id = "color-picker-div";
	cp.style.height = "192px";
	cp.style.width = "100px";
	cp.style.position = "absolute";
	cp.style.display = "none";
	cp.style.cursor= "crosshair";
	cp.style.zIndex = 1;
	
	image.style.height = "192px";
	image.style.width = "100px";
	image.src = src;
	
	cp.appendChild(image);

	body.insertBefore(cp, body.childNodes[0]);
	
	/*
	 * Public methods
	 */
	 
	this.hide = function () {
		cp.style.display = "none";
		if (func != null) {
			func();
		}
	}
	
	this.toggle = function (obj) {
		if (cp.style.display == "none") {
			var nwOffset = Coordinates.northwestOffset(obj, true);
			cp.style.left = nwOffset.x + 25 + "px";
			cp.style.top = nwOffset.y + "px";
			cp.style.display = "block";
			// Grab the first input field in the parent node
			textInput = obj.parentNode.getElementsByTagName("INPUT")[0];
			originalValue = textInput.value;
		}
		else {
			self.hide();
		}
	};
	
	
	/*
	 * Private methods
	 */
	 
	var getColor = function (event, obj) {
		var nwOffset = Coordinates.northwestOffset(obj, true);
	
		mousePos.update(event);
	
		var x = mousePos.x - nwOffset.x;
		var y = mousePos.y - nwOffset.y;
	
		var rmax = 0;
		var gmax = 0;
		var bmax = 0;
	
		if (y <= 32) {
			rmax = 255;
			gmax = (y / 32.0) * 255;
			bmax = 0;
		} else if (y <= 64) {
			y = y - 32;
			rmax = 255 - (y / 32.0) * 255;
			gmax = 255;
			bmax = 0;
		} else if (y <= 96) {
			y = y - 64;
			rmax = 0;
			gmax = 255;
			bmax = (y / 32.0) * 255;
		} else if (y <= 128) {
			y = y - 96;
			rmax = 0;
			gmax = 255 - (y / 32.0) * 255;
			bmax = 255;
		} else if (y <= 160) {
			y = y - 128;
			rmax = (y / 32.0) * 255;
			gmax = 0;
			bmax = 255;
		} else {
			y = y - 160;
			rmax = 255;
			gmax = 0;
			bmax = 255 - (y / 32.0) * 255;
		}

		if (x <= 50) {
			var r = Math.abs(Math.floor(rmax * x / 50.0));
			var g = Math.abs(Math.floor(gmax * x / 50.0));
			var b = Math.abs(Math.floor(bmax * x / 50.0));
		} else {
			x -= 50;
			var r = Math.abs(Math.floor(rmax + (x / 50.0) * (255 - rmax)));
			var g = Math.abs(Math.floor(gmax + (x / 50.0) * (255 - gmax)));
			var b = Math.abs(Math.floor(bmax + (x / 50.0) * (255 - bmax)));
		}
	
		return rgb2hex(r, g, b);
	};

	var rgb2hex = function (r, g, b) {
		color = '#';
		color += hex(Math.floor(r / 16));
		color += hex(r % 16);
		color += hex(Math.floor(g / 16));
		color += hex(g % 16);
		color += hex(Math.floor(b / 16));
		color += hex(b % 16);
		return color;
	};

	var hex = function (dec){
		return (dec).toString(16);
	};

	var onEnd = function (event) {
		var color = getColor(event, image);
		originalValue = color;
		textInput.value = color;
		self.hide();
	};

	var onMove = function (event) {
		var color = getColor(event, image);
		textInput.value = color;
		textInput.onchange();
	};

	var reset = function () {
		textInput.value = originalValue;
		textInput.onchange();
	};


	/*
	 * Events
	 */
	 
	image.onmousemove = onMove;
	image.onclick = onEnd;
	image.onmouseout = reset;
}