$(document).ready(function()
{
    $.setAjaxForm('#setColorForm', function(response)
    {
        if(response.result == 'success' && response.region)
        {
            updateRegion(response.region);
            $.zui.closeModal();
        }
    });

    var colorList = ['#FFFFFF', '#E01B1B', '#F7B500', '#288427'];
    var selectedColor = $('input[name=color]').val();
    if(selectedColor && $.inArray(selectedColor, colorList) == -1) colorList.unshift(selectedColor);
    colorList.forEach(function(color, index)
    {
        var itemClass = color == $('input[name=color]').val() ? 'color-picker-item checked' : 'color-picker-item';
        var colorItem = "<div class='" + itemClass  + "' data-color='" + color  + "' style='background: " + color  + "'>";
        colorItem += "<i class='icon icon-check'></i>";
        colorItem += "</div>";
        $('#color-picker').append(colorItem);
    });
    
    $('.color-picker-item').click(function()
    {
        var color = $(this).attr('data-color');
        $('input[name=color]').val(color);
        $(this).addClass('checked');
        $(this).siblings().removeClass('checked');
    }) 
})
