// ------------------------------------------------------------------------------
//  Constants
// ------------------------------------------------------------------------------
var SelectedColourConstant = "~SelectedColour~";
var SelectedColourControlIdConstant = "~SelectedColourControlId~";


// ------------------------------------------------------------------------------
//  Window Load event
// ------------------------------------------------------------------------------
function colourItem_onclick(elem, imgName, dataItem, hiddenFieldName, mixedColourCheckboxName, maxSelectionCount)
{
    // Get all the relevant controls and initialise the local variables
    var imgItem = elem.getElementsByTagName("div");
    var valueField = document.getElementsByName(dataItem);
    var selectedColoursField = document.getElementById(hiddenFieldName);
    var validSelection = true;


    var tempSelectedValue = selectedColoursField.value.toString();
    
    // Check if the value has been selected
    if(selectedColoursField.value.indexOf(elem.id) == -1)
    {
        var selectedCount = 0;
        var colourIndex = -1;
    
        // Check how many colours have already been selected
        for (var i = 0; i <= maxSelectionCount - 1; i++)
        {
            // Get the index of the next seleced colour
            colourIndex = selectedColoursField.value.indexOf(SelectedColourConstant, colourIndex + 1)
        
            // If another colour has been selected then
            // increment the actual selected colour count
            if (colourIndex > -1)
            {
                selectedCount = selectedCount + 1;
            }
            
        }
        
        // If the maxium number of selected colours have been 
        // selected then stop the next colour from being added 
        // and inform the user
        if(selectedCount == maxSelectionCount)
        {
                alert("Please only select " +
                    maxSelectionCount +
                    " colours. If you would like to change colours then please deselect the colour that you do not want and reselect the colour you do.");
                validSelection = false;
        }
        else
        {
            tempSelectedValue = tempSelectedValue + SelectedColourConstant + valueField[0].value;
            tempSelectedValue = tempSelectedValue + SelectedColourControlIdConstant + elem.id;
        }

        // Make sure that the selection is valid
        if(validSelection)
        {
            // Update the fields background to include the selection tick
            imgItem[0].style.backgroundImage = "url('/Images/Design/tick.png')";
            imgItem[0].style.backgroundRepeat = "no-repeat"
            imgItem[0].style.height = "17px";
            imgItem[0].style.backgroundPosition = "50% 50%";
        
            // Deselect the multiple colour checkbox
            var multiCheckBox = document.getElementById(mixedColourCheckboxName);
            multiCheckBox.checked = false;
        }
    }
    else
    {
        var values = new Array();
        
        // Get all the values into an array
        values = tempSelectedValue.split("~");


        // make sure that there are colours selected
        if(values.length >= 5)
        {
            var deselectionIndex = -1;
            
            // Find the index of the element id in the array
            for(var i = 0; i < values.length; i++)
            {
                if(values[i] == elem.id)
                {
                    deselectionIndex = i;
                    
                    // element found, so no need to carry on looping
                    break;
                }
            }
            
            // Make sure that the item has been found
            if(deselectionIndex > -1)
            {
                // Reset the background
                imgItem[0].style.backgroundImage = "";
                
                // Remove the item from the hidden field string
                tempSelectedValue = tempSelectedValue.replace(
                    "~" + values[deselectionIndex - 3] + 
                    "~" + values[deselectionIndex - 2] + 
                    "~" + values[deselectionIndex - 1] + 
                    "~" + values[deselectionIndex], "");
            }
        }
    }

    // Set the hidden field value to the working variables value
    selectedColoursField.value = tempSelectedValue;
}


// ------------------------------------------------------------------------------
//  Window Load event
// ------------------------------------------------------------------------------
window.onload=function(elem)
{
    var selectedColoursField = document.getElementById(
        "ctl00_pageSidebarContent_FlowerColourPicker_ColourPicker_SelectedColourHiddenField");

    if(selectedColoursField ==  null)
    {
        selectedColoursField = document.getElementById(
            "ctl00_content_ucEditForm_ucTagListEditForm_ColourPicker_SelectedColourHiddenField");
    }

//    var test = jQuery.find('SelectedColourHiddenField')

//    for (var i = 0; i < document.all.length; i++)
//    {
//        if(document.all[i].id.indexOf("SelectedColourHiddenField") > -1)
//        {
//            selectedColoursField = document.all[i];
//            break;
//        }
//    }

    if(selectedColoursField != null)
    {
        SelectColoursAccordingTostring(selectedColoursField.value.toString());
    }
}

// ------------------------------------------------------------------------------
//  Selects the colours in the colour picker according to the supplied string
// ------------------------------------------------------------------------------
function SelectColoursAccordingTostring(string)
{
    if(string != "")
    {
        var values = new Array();

        // Get all the values into an array
        values = string.split("~");

        // make sure that there are colours selected
        if(values.length >= 5)
        {
            // Get the td control and its div
            var Colour1 = document.getElementById(values[4]);
            var imgItem1 = Colour1.getElementsByTagName("div");

            // Add the tick image to the div control
            imgItem1[0].style.backgroundImage = "url('/Images/Design/tick.png')";
            imgItem1[0].style.backgroundRepeat = "no-repeat"
            imgItem1[0].style.height = "17px";
            imgItem1[0].style.backgroundPosition = "50% 50%";

            // Do the same for the second colour
            if(values.length == 9)
            {
                var Colour2 = document.getElementById(values[8]);
                var imgItem2 = Colour2.getElementsByTagName("div");

                imgItem2[0].style.backgroundImage = "url('/Images/Design/tick.png')";
                imgItem2[0].style.backgroundRepeat = "no-repeat"
                imgItem2[0].style.height = "17px";
                imgItem2[0].style.backgroundPosition = "50% 50%";
            }
            
        }
    }
    else
    {
        var table = document.getElementById("ColourPickerTable");
        var items = table.getElementsByTagName("td");
        
        for(var i = 0; i <= items.length - 1; i++)
        {
            var imgItem = items[i].getElementsByTagName("div");
            imgItem[0].style.backgroundImage = "";
        }

    }
    
}

// ------------------------------------------------------------------------------
//  Handles the OnCheckedChanged event of the MixedColoursCheckBox controls
// ------------------------------------------------------------------------------
function MixedColoursCheckBox_OnCheckedChanged(elem, hiddenFieldName)
{
    var selectedColoursField = document.getElementById(hiddenFieldName);
        
    hiddenFieldName.value = "";
    
    SelectColoursAccordingTostring(hiddenFieldName.value);
}

function colourItem_onmouseover(elem) {
  // Place a black border on the cell if the contents are light, a white border if the contents are dark.
  //elem.style.borderStyle = "dotted";
  //var rgb = cp_hex2rgb(this.label);
//  if (rgb[0]+rgb[1]+rgb[2] > 255*3/2)
//    elem.style.borderColor = "black";
//  else
    //elem.style.borderColor = "black";
}

function colourItem_onmouseout(elem) {
  // Remove the border.
    //elem.style.borderColor = elem.style.backgroundColor;
}

function colourItem_hex2rgb(hexcode) {
  // Parse '0088ff' and return the [r, g, b] ints.
  var m = hexcode.match(/^([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])$/);
  if (m) {
    var r = parseInt(m[1], 16);
    var g = parseInt(m[2], 16);
    var b = parseInt(m[3], 16);
    return [r, g, b];
  } else {
    return null;
  }
}