var perline = 8;
var divSet = false;
var curElem;
var colourLevels = Array('2', '4', '6', '8', 'A', 'C', 'E', 'F');
var colourArray = Array();
var doiframe = (browser == "Internet Explorer");
var nocolour = '';
var customMode = false;
//if (document.all) { nocolour = ''; }

function pickColour(elem)
{
    if (!divSet) { setDiv(); }
    var picker = getObj('colourpicker');
    if (doiframe) var iframe = getObj('cpiframe');
    if (elem == curElem && picker.style.display == 'block')
    {
        picker.style.display = 'none';
        if (doiframe) iframe.style.display = 'none';
        return;
    }
    curElem = elem;
    picker.style.top = getAbsoluteOffsetTop(elem) + 20 + "px";
    picker.style.left = getAbsoluteOffsetLeft(elem) + "px";
    customMode = false;
    if (doiframe)
    {
        iframe.style.top = picker.style.top;
        iframe.style.left = picker.style.left;
        iframe.style.width = "262px";
        iframe.style.height = "274px";
        iframe.style.display = 'block';
    }
    picker.style.display = 'block';
}

function relateColour(colour)
{
    if (customMode) return;
    var picker = getObj('colourpicker');
    var hiddenInput = curElem.getElementsByTagName("input")[0];
    var pickerInput = picker.getElementsByTagName("input")[0];
    if (colour == '')
        colour = nocolour;
    curElem.style.backgroundColor = colour;
    hiddenInput.value = colour;
    pickerInput.value = colour;
    
    eval(curElem.getElementsByTagName("span")[0].title);
}

function setColour(colour, noClose)
{
    if (customMode) return;
    var picker = getObj('colourpicker');
    if (colour == '')
        colour = nocolour;
    if (!noClose)
    {
        picker.style.display = 'none';
        if (doiframe)
        {
            var iframe = getObj('cpiframe');
            iframe.style.display = 'none';
        }
    }
    eval(curElem.title);
}

function checkCustom()
{
    var picker = getObj('colourpicker');
    var colourInput = picker.getElementsByTagName("input")[0].value;
    if (customMode)
    {
        if (colourInput == "") customMode = false;
        else
        {
            if (colourInput.length == 7 && colourInput.indexOf("#") == 0)
            {
                customMode = false;
                relateColour(colourInput);
                setColour(colourInput, true);
                customMode = true;
            }
        }
    }
    else
        if (colourInput != "") customMode = true;
}

function setDiv()
{
    if (!document.createElement) { return; }
    var elemDiv = document.createElement('div');
    if (typeof(elemDiv.innerHTML) != 'string') { return; }
    genColours();
    elemDiv.id = 'colourpicker';
    elemDiv.style.position = 'absolute';
    elemDiv.style.display = 'none';
    elemDiv.style.border = 'solid 1px black';
    elemDiv.style.zIndex = 5;
    elemDiv.innerHTML = '<table cellspacing="0" cellpadding="0" style="background-color: white;">'
    + '<tr><td colspan="2">' + getColourTable(0, 8) + '</td>'
    + '<td colspan="2">' + getColourTable(8, 16) + '</td></tr>'
    + '<tr><td colspan="2">' + getColourTable(16, 80) + '</td>'
    + '<td colspan="2">' + getColourTable(80, 144) + '</td></tr>'
    + '<tr><td colspan="2">' + getColourTable(144, 208) + '</td>'
    + '<td colspan="2">' + getColourTable(208, 272) + '</td></tr>'
    + '<tr><td align="center" style="cursor: pointer; border-top: solid 1px black; border-right: solid 1px black" onclick="setColour(\'\')" onmouseover="relateColour(\'\')">None</td>'
    + '<td align="center" style="cursor: pointer; border-top: solid 1px black; border-right: solid 1px black" onclick="setColour(\'transparent\')" onmouseover="relateColour(\'transparent\')">Transparent</td>'
    + '<td align="right" style="border-top: solid 1px black;">Custom :</td>'
    + '<td align="right" style="border-top: solid 1px black;"><input style="border: 0; border-left: solid 1px #CCCCCC;" size="10" maxlength="7" onclick="if (!customMode) this.value = \'\';" onkeyup="checkCustom()" type="text" /></td></tr>'
    + '</table>';
    
    document.body.appendChild(elemDiv);

    if (doiframe)
    {
        var iframeDiv = document.createElement('iframe');
        iframeDiv.id = 'cpiframe';
        iframeDiv.style.position = 'absolute';
        iframeDiv.style.display = 'none';
        iframeDiv.style.border = '0';
        iframeDiv.style.zIndex = 4;
        document.body.appendChild(iframeDiv);
    }
    
    divSet = true;
}

function getColourTable(start, end)
{
    var colours = colourArray;
    var tableCode = '';
    if (end > colours.length) end = colours.length;
    tableCode += '<table cellspacing="0" cellpadding="0" style="cursor: pointer; border-collapse: collapse; float: left">';
    for (i = start; i < end; i++) {
        if (i % perline == 0) { tableCode += '<tr>'; }
        tableCode += '<td onmouseover="relateColour(\'' + colours[i] + '\')" style="width: 15px; height: 15px; border: solid 1px white; background-color: ' + colours[i] + '" onclick="setColour(\'' + colours[i] + '\');"></td>' 
        if (i % perline == perline - 1) { tableCode += '</tr>'; }
    }
    if (i % perline != 0) { tableCode += '</tr>'; }
    tableCode += '</table>';
    return tableCode;
}

function genColours()
{
    for (a = 0; a < 10; a++)
        addColourValue(a,a,a);
    addColourValue('A','A','A');
    addColourValue('B','B','B');
    addColourValue('C','C','C');
    addColourValue('D','D','D');
    addColourValue('E','E','E');
    addColourValue('F','F','F');

    for (a = 0; a < colourLevels.length; a++)
    {
        for (c = 0; c < colourLevels.length; c++)
            addColour(c,a,0);
    }
    
    for (a = 0; a < colourLevels.length; a++)
    {
        for (c = 0; c < colourLevels.length; c++)
            addColour(0,c,a);
    }
    
    for (a = 0; a < colourLevels.length; a++)
    {
        for (c = 0; c < colourLevels.length; c++)
            addColour(a,0,c);
    }
    
    addExtraColours(2, 1, 1);
    addExtraColours(2, 1, 2);
    addExtraColours(1, 2, 1);
    addExtraColours(2, 3, 1);
    addExtraColours(1, 2, 2);
    addExtraColours(1, 1, 2);
    addExtraColours(1, 2, 3);
    addExtraColours(2, 1, 3);

    return colourArray;
}

function addExtraColours(redNum, greenNum, blueNum)
{
    var extraColours = Array('0', '1', '3', '5', '7', '9', 'B', 'D', 'F');
    
    var red = 0; var green = 0; var blue = 0;
    
    for (a = 0; a < extraColours.length - 1; a++)
    {
        var one = a;
        var two = a + 1;
        var three = a + 2;
        
        if (two >= extraColours.length)
            two = extraColours.length - 1;
            
        if (three >= extraColours.length)
            three = extraColours.length - 1;
        
        if (redNum == 1) red = one;
        else if (redNum == 2) red = two;
        else if (redNum == 3) red = three;
        
        if (greenNum == 1) green = one;
        else if (greenNum == 2) green = two;
        else if (greenNum == 3) green = three;
        
        if (blueNum == 1) blue = one;
        else if (blueNum == 2) blue = two;
        else if (blueNum == 3) blue = three;

        addColourValue(extraColours[red], extraColours[green], extraColours[blue]);
    }
}

function addColour(r, g, b) {
    var red = colourLevels[r];
    var green = colourLevels[g];
    var blue = colourLevels[b];
    addColourValue(red, green, blue);
}

function addColourValue(r, g, b) {
    colourArray[colourArray.length] = '#' + r + r + g + g + b + b;
}

function getAbsoluteOffsetTop(obj)
{
    var top = obj.offsetTop;
    var parent = obj.offsetParent;
    while (parent != document.body) {
        top += parent.offsetTop;
        parent = parent.offsetParent;
    }
    return top;
}

function getAbsoluteOffsetLeft(obj)
{
    var left = obj.offsetLeft;
    var parent = obj.offsetParent;
    while (parent != document.body) {
        left += parent.offsetLeft;
        parent = parent.offsetParent;
    }
    return left;
}