var cp1;
var currentStyleElementId;

function ShowColorPicker(StyleElementId)
{
    var divColorPicker = document.getElementById('ColorPicker');
    var divAlpha = document.getElementById('AlphaBox');
    var inpValue = document.getElementById('color' + StyleElementId);
    var Color = inpValue.value;
    
    currentStyleElementId = StyleElementId;

    divColorPicker.style.display = 'block';
    divAlpha.style.display = 'block';

    divColorPicker.style.top = 113 + 'px';
    
    if (cp1 === undefined)
        cp1 = new Refresh.Web.ColorPicker('cp1', {startHex : Color, startMode : 's'});
    else
    {
        // <sdfukhsdfukhsdfkuhsdfiuhsdf>
        var txtBox = document.getElementById('cp1_Hex');
        txtBox.value = Color;
        //cp1._cvp._hexInput.value = Color;
        
        cp1._cvp.setValuesFromHex();
        cp1.textValuesChanged();
        cp1.show();
        cp1._cvp.setValuesFromHex();
		cp1.mapValueChanged();
		cp1._cvp.setValuesFromHex();
		cp1.textValuesChanged();
		// </sdfukhsdfukhsdfkuhsdfiuhsdf>
    }
}

function ColorPickerOkayClick()
{
    var txtBox = document.getElementById('cp1_Hex');
    var inpValue = document.getElementById('color' + currentStyleElementId);
    inpValue.value = txtBox.value;
    
    var divExample = document.getElementById('example' + currentStyleElementId);
    divExample.style.backgroundColor = '#' + txtBox.value;
    
    CloseColorPicker();
}

function ColorPickerCancelClick()
{
    CloseColorPicker();
}

function CloseColorPicker()
{
    var divColorPicker = document.getElementById('ColorPicker');
    var divAlpha = document.getElementById('AlphaBox');
    
    divColorPicker.style.display = 'none';
    divColorPicker.style.top = '50%';
    divAlpha.style.display = 'none';
    cp1.hide();
}