var CROSSHAIRS_LOCATION = 'colorpicker2/selector.gif';
var HUE_SLIDER_LOCATION = 'colorpicker2/hue.png';
var HUE_SLIDER_ARROWS_LOCATION = 'colorpicker2/arrows.png';
var SAT_VAL_SQUARE_LOCATION = 'colorpicker2/bg.png';
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)
        {
            RemoveEventListener(document, 'mouseup', upHandler);
            RemoveEventListener(document, 'mousemove', moveHandler);
            AddEventListener(node, 'mousedown', mouseDown);
        }
        AddEventListener(document, 'mouseup', upHandler);
        AddEventListener(document, 'mousemove', moveHandler);
        RemoveEventListener(node, 'mousedown', mouseDown);
        if (ev.preventDefault) ev.preventDefault();
    }
    AddEventListener(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 AddEventListener(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 RemoveEventListener(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);
        }
    }
}
AddEventListener(window, 'unload', cleanupEventListeners);

// This copyright statement applies to the following two functions,
// which are taken from MochiKit.
//
// Copyright 2505 Bob Ippolito <bob@redivi.com>
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject
// to the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
// 
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
// BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
// ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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};
}

// The real code begins here.
var huePositionImg = document.createElement('img');
huePositionImg.galleryImg = false;
huePositionImg.width = 38;
huePositionImg.height = 11;
huePositionImg.src = HUE_SLIDER_ARROWS_LOCATION;
huePositionImg.style.position = 'absolute';

var hueSelectorImg1 = document.createElement('img');
hueSelectorImg1.galleryImg = false;
hueSelectorImg1.width = 30;
hueSelectorImg1.height = 250;
hueSelectorImg1.src = HUE_SLIDER_LOCATION;
hueSelectorImg1.style.display = 'block';

var satValImg = document.createElement('img');
satValImg.galleryImg = false;
satValImg.width = 250;
satValImg.height = 250;
satValImg.src = SAT_VAL_SQUARE_LOCATION;
satValImg.style.display = 'block';

var crossHairsImg = document.createElement('img');
crossHairsImg.galleryImg = false;
crossHairsImg.width = 13;
crossHairsImg.height = 13;
crossHairsImg.src = CROSSHAIRS_LOCATION;
crossHairsImg.style.position = 'absolute';




function makeColorSelector()
{
    var rgb, hsv
    

    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);
        previewDiv.style.background = hex;
        if ( document.getElementById('rInput') )
            document.getElementById('rInput').value = Math.round(rgb.r * 255);
        if ( document.getElementById('gInput') )
            document.getElementById('gInput').value = Math.round(rgb.g * 255);
        if ( document.getElementById('bInput') )
            document.getElementById('bInput').value = Math.round(rgb.b * 255);

        satValDiv.style.background = hueHex;
        crossHairs.style.left = ((hsv.v*249)-10).toString() + 'px';
        crossHairs.style.top = (((1-hsv.s)*249)-10).toString() + 'px';
        huePos.style.top = ((hsv.h*249)-5).toString() + 'px';
    }
    function rgbChanged()
    {
        hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
        colorChanged();
    }
    function hsvChanged()
    {
        rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);
        colorChanged();
    }
    
    var colorSelectorDiv = document.createElement('div');
    colorSelectorDiv.style.padding = '15px 15px 0 15px';
    colorSelectorDiv.style.position = 'relative';
    colorSelectorDiv.style.height = '265px';
    colorSelectorDiv.style.width = '250px';
    
    var satValDiv = document.createElement('div');
    satValDiv.style.position = 'relative';
    satValDiv.style.width = '250px';
    satValDiv.style.height = '250px';
    //satValDiv.style.border = '1px solid black';
    var newSatValImg = fixPNG(satValImg);
    satValDiv.appendChild(newSatValImg);
    var crossHairs = crossHairsImg.cloneNode(false);
    satValDiv.appendChild(crossHairs);
    function satValDragged(x, y)
    {
        hsv.s = 1-(y/249);
        hsv.v = (x/249);
        hsvChanged();
    }
    trackDrag(satValDiv, satValDragged)
    colorSelectorDiv.appendChild(satValDiv);

    var hueDiv = document.createElement('div');
    hueDiv.style.position = 'absolute';
    hueDiv.style.left = '280px';
    hueDiv.style.top = '15px';
    hueDiv.style.width = '30px';
    hueDiv.style.height = '250px';
    //hueDiv.style.border = '1px solid black';
    var huePos = fixPNG(huePositionImg);

    hueDiv.appendChild(hueSelectorImg1.cloneNode(false));
    hueDiv.appendChild(huePos);
    function hueDragged(x, y)
    {
        hsv.h = y/249;
        hsvChanged();
    }
    trackDrag(hueDiv, hueDragged);
    colorSelectorDiv.appendChild(hueDiv);
    
    var previewDiv = document.createElement('div');
    previewDiv.style.height = '50px'
    previewDiv.style.width = '50px';
    previewDiv.style.position = 'absolute';
    previewDiv.style.top = '15px';
    previewDiv.style.left = '333px';
    previewDiv.style.border = '1px solid black';
    colorSelectorDiv.appendChild(previewDiv);
    
    var rgbDiv = document.createElement('div');
    rgbDiv.style.position = 'absolute';
    rgbDiv.style.top = '75px';
    rgbDiv.style.left = '333px';
    rgbDiv.style.width = '200px';

    var qs = new Querystring();

    rgbDiv.appendChild(document.createTextNode('R: '));
    var rInput = document.createElement('input');
    rInput.style.width = '23px';
    rInput.id = 'rInput';
    rInput.value = qs.get('r');
    if ( rInput.value == '' || isNaN(rInput.value) || rInput.value < 0 || rInput.value > 255 )
        rInput.value = 255;
    AddEventListener(rInput, 'change', inputDataChanged);
    rgbDiv.appendChild(rInput);
    
    rgbDiv.appendChild(document.createTextNode(' G: '));
    var gInput = document.createElement('input');
    gInput.style.width = '23px';
    gInput.id = 'gInput';
    gInput.value = qs.get('g');
    if ( gInput.value == '' || isNaN(gInput.value) || gInput.value < 0 || gInput.value > 255 )
        gInput.value = 255;
    AddEventListener(gInput, 'change', inputDataChanged);
    rgbDiv.appendChild(gInput);
    
    rgbDiv.appendChild(document.createTextNode(' B: '));
    var bInput = document.createElement('input');
    bInput.style.width = '23px';
    bInput.id = 'bInput';
    bInput.value = qs.get('b');
    if ( bInput.value == '' || isNaN(bInput.value) || bInput.value < 0 || bInput.value > 255 )
        bInput.value = 255;
    AddEventListener(bInput, 'change', inputDataChanged);
    rgbDiv.appendChild(bInput);

    rgbDiv.appendChild(document.createElement('br'));

    var tolerantieDiv = document.createElement('div');
    var str = '<table border="0"><tr><td>'+lcl_tolerantie+':</td><td><input type="radio" name="tolerantie" id="tol-laag" value="L"';
    if ( qs.get('t') == 'L' )
        str += ' checked="checked" ';
    str += '/><label for="tol-laag">'+lcl_laag+'</label></td></tr>';
    str += '<tr><td>&nbsp;</td><td><input type="radio" name="tolerantie" id="tol-normaal" value="N"';
    if ( qs.get('t') == 'N' || qs.get('t') == null || qs.get('t') == '' )
        str += ' checked="checked" ';
    str += '/><label for="tol-normaal">'+lcl_normaal+'</label></td></tr>';
    str += '<tr><td>&nbsp;</td><td><input type="radio" name="tolerantie" id="tol-hoog" value="H"';
    if ( qs.get('t') == 'H' )
        str += ' checked="checked" ';
    str += '/><label for="tol-hoog">'+lcl_hoog+'</label></td></tr>';
    str += '</table>';
    tolerantieDiv.innerHTML = str;
    
    rgbDiv.appendChild(tolerantieDiv);
    
    rgbDiv.appendChild(document.createElement('br'));
    
    function postZoekFrm()
    {
        document.forms.kleurfrm.r.value = Math.round(rgb.r * 255);
        document.forms.kleurfrm.g.value = Math.round(rgb.g * 255);
        document.forms.kleurfrm.b.value = Math.round(rgb.b * 255);
        if ( document.getElementById('tol-laag').checked )
            document.forms.kleurfrm.t.value = 'L';
        else if ( document.getElementById('tol-normaal').checked )
            document.forms.kleurfrm.t.value = 'N';
        else if ( document.getElementById('tol-hoog').checked )
            document.forms.kleurfrm.t.value = 'H';
        document.forms.kleurfrm.submit();
    }
    
    var btn = document.createElement('input');
    btn.type = 'button';
    btn.value = zoeken;
    btn.onmouseup = postZoekFrm;
    rgbDiv.appendChild(btn);
    
    
    function cancelKleurFrm()
    {
        $('content').className = '';
        $('colorpicker').style.display = 'none';
    }
    
    var cancelBtn = document.createElement('input');
    cancelBtn.type = 'button';
    cancelBtn.value = lcl_annuleren;
    cancelBtn.onmouseup = cancelKleurFrm;
    rgbDiv.appendChild(cancelBtn);
    
    colorSelectorDiv.appendChild(rgbDiv);

    function inputDataChanged()
    {
        var qs = new Querystring();
        
        if ( document.getElementById('rInput') )
        {
            var r = document.getElementById('rInput').value;
            if ( r == '' || isNaN(r) || r < 0 || r > 255 )
            {
                document.getElementById('rInput').value = 255;
                r = 255;
            }
        }
        else
        {
            r = qs.get('r');
            if ( r == '' || isNaN(r) || r < 0 || r > 255 )
                r = 255;
        }

        if ( document.getElementById('gInput') )
        {
            var g = document.getElementById('gInput').value;
            if ( g == '' || isNaN(g) || g < 0 || g > 255 )
            {
                document.getElementById('gInput').value = 255;
                g = 255;
            }
        }
        else
        {
            g = qs.get('g');
            if ( g == '' || isNaN(g) || g < 0 || g > 255 )
                g = 255;
        }
        
        if ( document.getElementById('bInput') )
        {
            var b = document.getElementById('bInput').value;
            if ( b == '' || isNaN(b) || b < 0 || b > 255 )
            {
                document.getElementById('bInput').value = 255;
                b = 255;
            }
        }
        else
        {
            b = qs.get('b');
            if ( b == '' || isNaN(b) || b < 0 || b > 255 )
                b = 255;
        }
        
        rgb = {r: r / 255, g: g / 255, b: b / 255}
        rgbChanged();
    }
    inputDataChanged();
    return colorSelectorDiv;
}

function makeColorSelectors(ev)
{
    if ( document.getElementById('colorpicker') )
        document.getElementById('colorpicker').appendChild(makeColorSelector());
}

AddEventListener(window, 'load', makeColorSelectors);


/* Client-side access to querystring name=value pairs
 Version 1.3
 28 May 2008
 
 License (Simplified BSD):
 http://adamv.com/dev/javascript/qslicense.txt
 */
function Querystring(qs) { // optionally pass a querystring to parse
	this.params = {};
	
	if (qs == null) qs = location.search.substring(1, location.search.length);
	if (qs.length == 0) return;
    
    // Turn <plus> back to <space>
    // See: http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4.1
	qs = qs.replace(/\+/g, ' ');
	var args = qs.split('&'); // parse out name/value pairs separated via &
	
    // split out each name=value pair
	for (var i = 0; i < args.length; i++) {
		var pair = args[i].split('=');
		var name = decodeURIComponent(pair[0]);
		
		var value = (pair.length==2)
        ? decodeURIComponent(pair[1])
        : name;
		
		this.params[name] = value;
	}
}

Querystring.prototype.get = function(key, default_) {
	var value = this.params[key];
	return (value != null) ? value : default_;
}

Querystring.prototype.contains = function(key) {
	var value = this.params[key];
	return (value != null);
}