/**
 * Initialize custom color selector. 
 * 
 * @access public
 * @return void
 */
function initColorPicker(name, colorList)
{
    if(!colorList) colorList = [];

    var selectedColor = $('input[name=color]').val();
    if(selectedColor && $.inArray(selectedColor.toUpperCase(), colorList) == -1) colorList.unshift(selectedColor);
    colorList.forEach(function(color, index)
    {
        var itemClass = color.color == $('input[name=' + name +']').val() ? 'color-picker-item checked' : 'color-picker-item';
        itemClass += ' backgroup-color-' + color.color;

        var colorItem = "<div class='color-picker-item-box'>";
        colorItem += "<div class='" + itemClass  + "' data-color='" + color.color  + "'>";
        colorItem += "<i class='icon icon-check'></i>";
        colorItem += '</div>';
        colorItem += "<span class='color-picker-item-label'>" + color.label + '</span></div>';
        $('#color-picker').append(colorItem);
    });
    
    $('.color-picker-item').click(function()
    {
        var color = $(this).attr('data-color');
        $('input[name=' + name + ']').val(color);
        $(this).parent().parent().find('.checked').removeClass('checked');
        $(this).addClass('checked');
    }) 
}
