var CROSSHAIRS_LOCATION =           'crosshairs.png';
var HUE_SLIDER_LOCATION =           'h.png';
var HUE_SLIDER_ARROWS_LOCATION =    'position.png';
var SAT_VAL_SQUARE_LOCATION =       'sv.png';

window.onerror = CloseWin;

var huePositionImg = document.createElement('img');
huePositionImg.src = HUE_SLIDER_ARROWS_LOCATION;
huePositionImg.style.position = 'absolute';

var hueSelectorImg = document.createElement('img');
hueSelectorImg.src = HUE_SLIDER_LOCATION;
hueSelectorImg.style.position = 'absolute';

var satValImg = document.createElement('img');
satValImg.src = SAT_VAL_SQUARE_LOCATION;

var crossHairsImg = document.createElement('img');
crossHairsImg.src = CROSSHAIRS_LOCATION;
crossHairsImg.style.position = 'absolute';

var csTable;
var iBox = document.createElement('INPUT');  iBox.value = '#4c6847'; 
var containerDiv;
var whichBox;
var satValDiv;
var newSatValImg;
var crossHairs;
var hueDiv;
var huePos;

function makeColorSelector()
{
    var inputNodes = document.getElementsByTagName('div');
    var i;
    for (i = 0; i < inputNodes.length; i++)
    {
        containerDiv = inputNodes[i];
        if (containerDiv.className == 'colorDiv')  // finds it in the DOM
        {
			var selector = makeCStable();
			containerDiv.appendChild(selector);
			break;
        }
    }
}

function makeCStable()
{
    colorSelectorDiv = document.createElement('div');
    colorSelectorDiv.style.padding = '0px';
    colorSelectorDiv.style.backgroundColor = '#ffffff';
    colorSelectorDiv.style.position = 'relative';
    
    satValDiv = document.createElement('div');
    satValDiv.style.position = 'relative';
    satValDiv.style.width = '200px';
    satValDiv.style.height = '200px';
    trackDrag(satValDiv, satValDragged)

    newSatValImg = fixPNG(satValImg);
    satValDiv.appendChild(newSatValImg);
   
    crossHairs = crossHairsImg.cloneNode(false);
    satValDiv.appendChild(crossHairs);

    hueDiv = document.createElement('div');
    hueDiv.style.position = 'relative';
    hueDiv.style.width = '35px';
    hueDiv.style.height = '200px';
    trackDrag(hueDiv, hueDragged);
    
    huePos = fixPNG(huePositionImg);
    hueDiv.appendChild(hueSelectorImg.cloneNode(false));
    hueDiv.appendChild(huePos);

	// a table to contain everything
	csTable = document.createElement('TABLE'); csTable.onclick=function(e) {e=e?e:event; e.cancelBubble=true};
	csTable.cellSpacing='0';
	csTable.cellPadding='0';
	csTable.border='2';
	
	var csTbody = document.createElement('TBODY');
	var csTR1 = document.createElement('TR');
	var csTD1 = document.createElement('TD'); csTD1.colSpan='2'; csTD1.width='100%'; csTD1.className='Label'; csTD1.id='topbar';
	var csTR2 = document.createElement('TR');
	var csTD21 = document.createElement('TD');
	var csTD22 = document.createElement('TD');
	
	var csDragHeader = document.createTextNode(" Color Selector");  
	var csDragHeaderSpan = document.createElement('SPAN');  csDragHeaderSpan.id='dragheaderspan'; 
	var csSpacerText = document.createTextNode("     ");  
	var csSpacerSpan = document.createElement('SPAN');  csSpacerSpan.id='spacerspan'; 
	//csSpacerSpan.style.color="#339966";
	var csCloseText = document.createTextNode("(hide)");
	var csCloseSpan = document.createElement('SPAN');  csCloseSpan.className='TinyLabel2'; csCloseSpan.id='closespan'; 
	csDragHeaderSpan.appendChild(csDragHeader);
	csSpacerSpan.appendChild(csSpacerText);
	csCloseSpan.appendChild(csCloseText);
	
	csTable.appendChild(csTbody);  // csTable is a global var
	csTbody.appendChild(csTR1);
	csTbody.appendChild(csTR2);
	csTR1.appendChild(csTD1);
	csTR2.appendChild(csTD21);
	csTR2.appendChild(csTD22);

	csTD1.appendChild(csDragHeaderSpan);
	csTD1.appendChild(csSpacerSpan);
	csTD1.appendChild(csCloseSpan);
	csTD21.appendChild(satValDiv);
	csTD22.appendChild(hueDiv);

	csCloseSpan.onclick=function(e) {e=e?e:event; document.getElementById('colorDiv').style.visibility='hidden'; e.cancelBubble=true};
	csCloseSpan.onmousedown=function(e) {e=e?e:event; e.cancelBubble=true};
	csTD1.onmousedown=function(e) {e=e?e:event; MD(e,'colorDiv'); e.cancelBubble=true};
//	csTD1.onmouseover=function() {csTD1.style.cursor='move'};
	//csTD1.onmouseover=function() {csTD1.style.cursor='move'; resetcur (event); csTD1.style.backgroundColor='#77aa00'};
	//csTD1.onmouseout=function() {csTD1.style.backgroundColor='#56564c'};
	
	csTD1.onmouseover=function() {this.style.cursor='move'; this.style.backgroundColor='#77aa00';};
	csTD1.onmouseout=function() {this.style.backgroundColor='#56564c'};
	//csSpacerSpan.onmouseover = function() {csSpacerSpan.style.backgroundColor='#77aa00'};
	csCloseSpan.onmouseover=function() {csCloseSpan.style.cursor='default'};

    return csTable;
}
//  sub functions
var rgb, hsv;
function inputBoxChanged(which)
{
	whichBox = which;
	rgb = hexToRgb(iBox.value, {r: 0, g: 0, b: 0});
	rgbChanged();
}
function rgbChanged()
{
	hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
	colorChanged();
}

function hsvChanged()
{
	rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);
	colorChanged();
}
function satValDragged(x, y)
{
	hsv.s = 1-(y/199);
	hsv.v = (x/199);
	hsvChanged();
}
function hueDragged(x, y)
{
	hsv.h = y/199;
	hsvChanged();
}
function colorChanged()
{	
	var hex = rgbToHex(rgb.r, rgb.g, rgb.b);
	var hueRgb = hsvToRgb(hsv.h, 1, 1);
	var hueHex = rgbToHex(hueRgb.r, hueRgb.g, hueRgb.b);
	iBox.value = hex;

	if (whichBox != undefined)
	{
		if (whichBox != 'body')
		{
			parent.document.getElementById("ColorText"+whichBox).style.backgroundColor = hex.substring(1,7);
		}
		if (whichBox == 'body')
		{
			parent.document.body.bgColor = 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 CloseWin()
{
    this.window.close();
}

function hexToRgb(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};
    }
}

function rgbToHex(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();
}

var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);

function fixPNG(myImage)
{
    if ((version >= 5.5) && (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);
    }
}

function trackDrag(node, handler)
{
    function fixCoords(x, y)
    {
        var nodePageCoords = 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)
        {
            myRemoveEventListener(document, 'mouseup', upHandler);
            myRemoveEventListener(document, 'mousemove', moveHandler);
            myAddEventListener(node, 'mousedown', mouseDown);
        }
        myAddEventListener(document, 'mouseup', upHandler);
        myAddEventListener(document, 'mousemove', moveHandler);
        myRemoveEventListener(node, 'mousedown', mouseDown);
        if (ev.preventDefault) ev.preventDefault();
    }
    myAddEventListener(node, 'mousedown', mouseDown);
    node.onmousedown = function(e) { return false; };
    node.onselectstart = function(e) { return false; };
    node.ondragstart = function(e) { return false; };
}

var eventListeners = [];

function findEventListener(node, event, handler)
{
    var i;
    for (i in eventListeners)
    {
        if (eventListeners[i].node == node && eventListeners[i].event == event
         && eventListeners[i].handler == handler)
        {
            return i;
        }
    }
    return null;
}

function myAddEventListener(node, event, handler)
{
    if (findEventListener(node, event, handler) != null)
    {
        return;
    }

    if (!node.addEventListener)
    {
        node.attachEvent('on' + event, handler);
    }
    else
    {
        node.addEventListener(event, handler, false);
    }

    eventListeners.push({node: node, event: event, handler: handler});
}

function removeEventListenerIndex(index)
{
    var eventListener = eventListeners[index];
    delete eventListeners[index];
    
    if (!eventListener.node.removeEventListener)
    {
        eventListener.node.detachEvent('on' + eventListener.event,
                                       eventListener.handler);
    }
    else
    {
        eventListener.node.removeEventListener(eventListener.event,
                                               eventListener.handler, false);
    }
}

function myRemoveEventListener(node, event, handler)
{
    removeEventListenerIndex(findEventListener(node, event, handler));
}

function cleanupEventListeners()
{
    var i;
    for (i = eventListeners.length; i > 0; i--)
    {
        if (eventListeners[i] != undefined)
        {
            removeEventListenerIndex(i);
        }
    }
}
myAddEventListener(window, 'unload', cleanupEventListeners);

function hsvToRgb(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: // fall through
            case 0: red = value; green = t; blue = p; break;
        }
    }
    return {r: red, g: green, b: blue};
}

function rgbToHsv(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
    };
}

function pageCoords(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};
}

function removeChildrenFromNode(node)
{
	if(node != undefined && node !== null)
	{
		var len = node.childNodes.length;
   
		while (node.hasChildNodes())
		{
			node.removeChild(node.firstChild);
		}
	}
}

//window.onload=doit;

function doit() 
{
makeColorSelector('body');
}

// myAddEventListener(window, 'load', makeColorSelector('body'));