if (typeof(ColorPicker) == "undefined")
ColorPicker = { };
ColorPicker.CROSSHAIRS_LOCATION = '/img/colorpicker/crosshairs.png';
ColorPicker.HUE_SLIDER_LOCATION = '/img/colorpicker/h.png';
ColorPicker.HUE_SLIDER_ARROWS_LOCATION = '/img/colorpicker/position.png';
ColorPicker.SAT_VAL_SQUARE_LOCATION = '/img/colorpicker/sv.png';
ColorPicker.eventListeners = [];
ColorPicker.colorInputs = [];
ColorPicker.currentColorInput = undefined;
ColorPicker.initImages = function()
{
ColorPicker.initImages = function(){}
ColorPicker.huePositionImg = document.createElement('img');
ColorPicker.huePositionImg.galleryImg = false;
ColorPicker.huePositionImg.width = 35;
ColorPicker.huePositionImg.height = 11;
ColorPicker.huePositionImg.src = ColorPicker.HUE_SLIDER_ARROWS_LOCATION;
ColorPicker.huePositionImg.style.position = 'absolute';
ColorPicker.hueSelectorImg = document.createElement('img');
ColorPicker.hueSelectorImg.galleryImg = false;
ColorPicker.hueSelectorImg.width = 35;
ColorPicker.hueSelectorImg.height = 200;
ColorPicker.hueSelectorImg.src = ColorPicker.HUE_SLIDER_LOCATION;
ColorPicker.hueSelectorImg.style.display = 'block';
ColorPicker.satValImg = document.createElement('img');
ColorPicker.satValImg.galleryImg = false;
ColorPicker.satValImg.width = 200;
ColorPicker.satValImg.height = 200;
ColorPicker.satValImg.src = ColorPicker.SAT_VAL_SQUARE_LOCATION;
ColorPicker.satValImg.style.display = 'block';
ColorPicker.crossHairsImg = document.createElement('img');
ColorPicker.crossHairsImg.galleryImg = false;
ColorPicker.crossHairsImg.width = 21;
ColorPicker.crossHairsImg.height = 21;
ColorPicker.crossHairsImg.src = ColorPicker.CROSSHAIRS_LOCATION;
ColorPicker.crossHairsImg.style.position = 'absolute';
}
ColorPicker.hexToRgb = function(hex_string, default_)
{
if (default_ == undefined)
{
default_ = null;
}
if (hex_string.substr(0, 1) == '#')
{
hex_string = hex_string.substr(1);
}
var r;
var g;
var b;
if (hex_string.length == 3)
{
r = hex_string.substr(0, 1);
r += r;
g = hex_string.substr(1, 1);
g += g;
b = hex_string.substr(2, 1);
b += b;
}
else if (hex_string.length == 6)
{
r = hex_string.substr(0, 2);
g = hex_string.substr(2, 2);
b = hex_string.substr(4, 2);
}
else
{
return default_;
}
r = parseInt(r, 16);
g = parseInt(g, 16);
b = parseInt(b, 16);
if (isNaN(r) || isNaN(g) || isNaN(b))
{
return default_;
}
else
{
return {r: r / 255, g: g / 255, b: b / 255};
}
}
ColorPicker.rgbToHex = function(r, g, b, includeHash)
{
r = Math.round(r * 255);
g = Math.round(g * 255);
b = Math.round(b * 255);
if (includeHash == undefined)
{
includeHash = true;
}
r = r.toString(16);
if (r.length == 1)
{
r = '0' + r;
}
g = g.toString(16);
if (g.length == 1)
{
g = '0' + g;
}
b = b.toString(16);
if (b.length == 1)
{
b = '0' + b;
}
return ((includeHash ? '#' : '') + r + g + b).toUpperCase();
}
ColorPicker.arVersion = navigator.appVersion.split("MSIE");
ColorPicker.version = parseFloat(ColorPicker.arVersion[1]);
ColorPicker.fixPNG = function(myImage)
{
if ((this.version >= 5.5) && (this.version < 7) && (document.body.filters))
{
var node = document.createElement('span');
node.id = myImage.id;
node.className = myImage.className;
node.title = myImage.title;
node.style.cssText = myImage.style.cssText;
node.style.setAttribute('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + myImage.src + "\', sizingMethod='scale')");
node.style.fontSize = '0';
node.style.width = myImage.width.toString() + 'px';
node.style.height = myImage.height.toString() + 'px';
node.style.display = 'inline-block';
return node;
}
else
{
return myImage.cloneNode(false);
}
}
ColorPicker.trackDrag = function(node, handler)
{
var cp = this;
function fixCoords(x, y)
{
var nodePageCoords = cp.pageCoords(node);
x = (x - nodePageCoords.x) + document.documentElement.scrollLeft;
y = (y - nodePageCoords.y) + document.documentElement.scrollTop;
if (x < 0) x = 0;
if (y < 0) y = 0;
if (x > node.offsetWidth - 1) x = node.offsetWidth - 1;
if (y > node.offsetHeight - 1) y = node.offsetHeight - 1;
return {x: x, y: y};
}
function mouseDown(ev)
{
var coords = fixCoords(ev.clientX, ev.clientY);
var lastX = coords.x;
var lastY = coords.y;
handler(coords.x, coords.y);
function moveHandler(ev)
{
var coords = fixCoords(ev.clientX, ev.clientY);
if (coords.x != lastX || coords.y != lastY)
{
lastX = coords.x;
lastY = coords.y;
handler(coords.x, coords.y);
}
}
function upHandler(ev)
{
cp.myRemoveEventListener(document, 'mouseup', upHandler);
cp.myRemoveEventListener(document, 'mousemove', moveHandler);
cp.myAddEventListener(node, 'mousedown', mouseDown);
}
cp.myAddEventListener(document, 'mouseup', upHandler);
cp.myAddEventListener(document, 'mousemove', moveHandler);
cp.myRemoveEventListener(node, 'mousedown', mouseDown);
if (ev.preventDefault) ev.preventDefault();
}
this.myAddEventListener(node, 'mousedown', mouseDown);
node.onmousedown = function(e) { return false; };
node.onselectstart = function(e) { return false; };
node.ondragstart = function(e) { return false; };
}
ColorPicker.findEventListener = function(node, event, handler)
{
var i;
for (i in this.eventListeners)
{
if (this.eventListeners[i].node == node && this.eventListeners[i].event == event
&& this.eventListeners[i].handler == handler)
{
return i;
}
}
return null;
}
ColorPicker.myAddEventListener = function(node, event, handler)
{
if (this.findEventListener(node, event, handler) != null)
{
return;
}
if (!node.addEventListener)
{
node.attachEvent('on' + event, handler);
}
else
{
node.addEventListener(event, handler, false);
}
this.eventListeners.push({node: node, event: event, handler: handler});
}
ColorPicker.removeEventListenerIndex = function(index)
{
var eventListener = this.eventListeners[index];
delete this.eventListeners[index];
if (!eventListener.node.removeEventListener)
{
eventListener.node.detachEvent('on' + eventListener.event,
eventListener.handler);
}
else
{
eventListener.node.removeEventListener(eventListener.event,
eventListener.handler, false);
}
}
ColorPicker.myRemoveEventListener = function(node, event, handler)
{
this.removeEventListenerIndex(this.findEventListener(node, event, handler));
}
ColorPicker.cleanupEventListeners = function()
{
var i;
for (i = this.eventListeners.length; i > 0; i--)
{
if (this.eventListeners[i] != undefined)
{
this.removeEventListenerIndex(i);
}
}
}

ColorPicker.hsvToRgb = function(hue, saturation, value)
{
var red;
var green;
var blue;
if (value == 0.0)
{
red = 0;
green = 0;
blue = 0;
}
else
{
var i = Math.floor(hue * 6);
var f = (hue * 6) - i;
var p = value * (1 - saturation);
var q = value * (1 - (saturation * f));
var t = value * (1 - (saturation * (1 - f)));
switch (i)
{
case 1: red = q; green = value; blue = p; break;
case 2: red = p; green = value; blue = t; break;
case 3: red = p; green = q; blue = value; break;
case 4: red = t; green = p; blue = value; break;
case 5: red = value; green = p; blue = q; break;
case 6:  case 0: red = value; green = t; blue = p; break;
}
}
return {r: red, g: green, b: blue};
}
ColorPicker.rgbToHsv = function(red, green, blue)
{
var max = Math.max(Math.max(red, green), blue);
var min = Math.min(Math.min(red, green), blue);
var hue;
var saturation;
var value = max;
if (min == max)
{
hue = 0;
saturation = 0;
}
else
{
var delta = (max - min);
saturation = delta / max;
if (red == max)
{
hue = (green - blue) / delta;
}
else if (green == max)
{
hue = 2 + ((blue - red) / delta);
}
else
{
hue = 4 + ((red - green) / delta);
}
hue /= 6;
if (hue < 0)
{
hue += 1;
}
if (hue > 1)
{
hue -= 1;
}
}
return {
h: hue,
s: saturation,
v: value
};
}
ColorPicker.pageCoords = function(node)
{
var x = node.offsetLeft;
var y = node.offsetTop;
var parent = node.offsetParent;
while (parent != null)
{
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
return {x: x, y: y};
}
ColorPicker.makeColorSelector = function()
{
var rgb, hsv
ColorPicker.initImages();
function colorChanged()
{
var hex = ColorPicker.rgbToHex(rgb.r, rgb.g, rgb.b);
var hueRgb = ColorPicker.hsvToRgb(hsv.h, 1, 1);
var hueHex = ColorPicker.rgbToHex(hueRgb.r, hueRgb.g, hueRgb.b);
ColorPicker.currentColorInput.value = hex;
ColorPicker.currentColorInput.previousSibling.style.background = hex;
satValDiv.style.background = hueHex;
crossHairs.style.left = ((hsv.v*199)-10).toString() + 'px';
crossHairs.style.top = (((1-hsv.s)*199)-10).toString() + 'px';
huePos.style.top = ((hsv.h*199)-5).toString() + 'px';
}
function rgbChanged()
{
hsv = ColorPicker.rgbToHsv(rgb.r, rgb.g, rgb.b);
colorChanged();
}
function hsvChanged()
{
rgb = ColorPicker.hsvToRgb(hsv.h, hsv.s, hsv.v);
colorChanged();
}
var colorSelectorDiv = document.createElement('div');
colorSelectorDiv.style.padding = '15px';
colorSelectorDiv.style.position = 'relative';
colorSelectorDiv.style.width = '250px';
colorSelectorDiv.className = "colorSelectorDiv"
var satValDiv = document.createElement('div');
satValDiv.style.position = 'relative';
satValDiv.style.width = '200px';
satValDiv.style.height = '200px';
var newSatValImg = this.fixPNG(this.satValImg);
satValDiv.appendChild(newSatValImg);
var crossHairs = this.crossHairsImg.cloneNode(false);
satValDiv.appendChild(crossHairs);
function satValDragged(x, y)
{
hsv.s = 1-(y/199);
hsv.v = (x/199);
hsvChanged();
}
this.trackDrag(satValDiv, satValDragged)
colorSelectorDiv.appendChild(satValDiv);
var hueDiv = document.createElement('div');
hueDiv.style.position = 'absolute';
hueDiv.style.left = '230px';
hueDiv.style.top = '15px';
hueDiv.style.width = '35px';
hueDiv.style.height = '200px';
var huePos = this.fixPNG(this.huePositionImg);
hueDiv.appendChild(this.hueSelectorImg.cloneNode(false));
hueDiv.appendChild(huePos);
function hueDragged(x, y)
{
hsv.h = y/199;
hsvChanged();
}
this.trackDrag(hueDiv, hueDragged);
colorSelectorDiv.appendChild(hueDiv);
function inputBoxChanged()
{
rgb = ColorPicker.hexToRgb(ColorPicker.currentColorInput.value, {r: 0, g: 0, b: 0});
rgbChanged();
}
for (var i = 0; i < this.colorInputs.length; i++)
{
var node = this.colorInputs[i];
var update = function(e)
{
var t;
if (!e) var e = window.event;
if (e.target) t = e.target;
else if (e.srcElement) t = e.srcElement;
if (t.nodeType == 3)  t = t.parentNode;
ColorPicker.setCurrentColorInput(t);
inputBoxChanged()
}
this.myAddEventListener(node, 'change', update);
this.myAddEventListener(node, 'focus', update);
var previewDiv = document.createElement('div');
previewDiv.className = (this.currentColorInput == node) ? 'previewDiv previewDivActive' : 'previewDiv'
 var rgb = this.hexToRgb(node.value, {r: 0, g: 0, b: 0});
previewDiv.style.background = this.rgbToHex(rgb.r,rgb.g,rgb.b);
colorSelectorDiv.appendChild(previewDiv);
node.parentNode.insertBefore(previewDiv, node);
}
inputBoxChanged();
return colorSelectorDiv;
}
ColorPicker.makeColorSelectors = function(ev)
{
var inputNodes = document.getElementsByTagName('input');
var i;
for (i = 0; i < inputNodes.length; i++)
{
var node = inputNodes[i];
if (node.className != 'color')
{
continue;
}
this.colorInputs.push(node);
}
if (this.colorInputs.length > 0)
{
this.setCurrentColorInput(this.colorInputs[0]);
var parent = document.getElementById("colorSelector");
var selector = this.makeColorSelector();
parent.appendChild(selector);
}
}
ColorPicker.setCurrentColorInput = function(node)
{
if (this.currentColorInput && this.currentColorInput.previousSibling)
{
this.currentColorInput.previousSibling.className = 'previewDiv'
}
if (node.previousSibling && node.previousSibling.className == 'previewDiv')
{
node.previousSibling.className = 'previewDiv previewDivActive'
}
this.currentColorInput = node;
}
ColorPicker.myAddEventListener(window, 'load', function(ev) {ColorPicker.makeColorSelectors(ev);});
ColorPicker.myAddEventListener(window, 'unload', function(ev) {ColorPicker.cleanupEventListeners(ev)});