From e58f9cae280e3c5ac55702bbecac63faf05ec1fb Mon Sep 17 00:00:00 2001
From: Matt Pass <matt@mattpass.com>
Date: Sat, 4 May 2013 13:48:33 +0100
Subject: [PATCH] overPopup flag, canvas display & hex/RGB convert

New flag to determin if we are over a popup or not, won't hide popup on
click if we are
drawCanvasImage function added, takes img node, creates a new canvas and
on load of a JS img object, puts the same image into the canvas, scaled
to same size. This then has 2 functions applied to update RGB and Hex
values and BG colors as the mouse moves and also on click sets another
set
rgbToHex and toHex functions added to help return hex values on demand
---
 lib/ice-coder.js | 51 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/lib/ice-coder.js b/lib/ice-coder.js
index 832d9df..a33bb1b 100644
--- a/lib/ice-coder.js
+++ b/lib/ice-coder.js
@@ -27,6 +27,7 @@ var ICEcoder = {
 	serverQueueItems: [],		// Array of URLs to call in order
 	stickyTab: false,		// Target variable for the sticky tab window
 	pluginIntervalRefs: [],		// Array of plugin interval refs
+	overPopup: false,		// Indicates if we're over a popup or not
 	ready: false,			// Indicates if ICEcoder is ready for action
 
 	// Set our aliases
@@ -1240,6 +1241,56 @@ var ICEcoder = {
 		}
 	},
 
+	// Draw a canvas image based on actual img node image src
+	drawCanvasImage: function (imgThis) {
+		var canvas = document.getElementById('canvasPicker').getContext('2d');
+		var img = new Image();
+		img.src = imgThis.src;
+		img.onload = function() {
+			document.getElementById('canvasPicker').width = imgThis.width;
+			document.getElementById('canvasPicker').height = imgThis.height;
+			canvas.drawImage(img,0,0,imgThis.width,imgThis.height);
+		}
+
+		// Show pointer colors on mouse move over canvas
+		document.getElementById('canvasPicker').onmousemove = function(event) {
+			// get mouse x & y
+			var x = event.pageX - this.offsetLeft;
+			var y = event.pageY - this.offsetTop;
+			// get image data & then RGB values
+			var imgData = canvas.getImageData(x, y, 1, 1).data;
+			var R = imgData[0];
+			var G = imgData[1];
+			var B = imgData[2];
+			var rgb = R+','+G+','+B;
+	 		// Get hex from RGB value
+			var hex = top.ICEcoder.rgbToHex(R,G,B);
+			// set the values & BG colours of the input boxes
+			document.getElementById('rgbMouseXY').value = rgb;
+			document.getElementById('hexMouseXY').value = '#' + hex;
+			document.getElementById('hexMouseXY').style.backgroundColor = document.getElementById('rgbMouseXY').style.backgroundColor = '#' + hex;
+		};
+		// Set pointer colors on clicking canvas
+		document.getElementById('canvasPicker').onclick = function() {
+			document.getElementById('rgb').value = document.getElementById('rgbMouseXY').value;
+	  		document.getElementById('hex').value = document.getElementById('hexMouseXY').value;
+			document.getElementById('hex').style.backgroundColor = document.getElementById('rgb').style.backgroundColor = document.getElementById('hex').value;
+		}
+	},
+
+	// Convert RGB values to Hex
+	rgbToHex: function(R,G,B) {
+		return top.ICEcoder.toHex(R)+top.ICEcoder.toHex(G)+top.ICEcoder.toHex(B);
+	},
+
+	// Return numbers as hex equivalent
+	toHex: function(n) {
+		n = parseInt(n,10);
+		if (isNaN(n)) return "00";
+		n = Math.max(0,Math.min(n,255));
+		return "0123456789ABCDEF".charAt((n-n%16)/16)  + "0123456789ABCDEF".charAt(n%16);
+	},
+
 	// Insert new color value
 	insertColorValue: function(color) {
 		var cM, cursor;