/**
 * File vc_colors.js.
 * Visual Composer extensions for color controls.
 */

 
//
// colorselect
var colorselect = new function() {
    
    this.init = function() {
        $("div[data-param_type='colorselect'], div[data-param_type='shadow']").each( function() {
            if ($(this).data('initialized') && $(this).data('initialized') == 'yes') return;
            
            colorselect.initColor(this);

            $(this).find('.color_thumb').each(function() {
                if (!$(this).hasClass('no_thumb')) {
                    var col = root['--'+$(this).data('colormod').replace('_','')].value;
                    var title = $(this).attr('title')+col;
                    $(this).attr('title', title);
                    $(this).find(".color_th").css('background-color', col)
                }
                $(this).on('click', function() {
                    colorselect.setColor(this);
                });
            });

            $(this).find(".vc_color-control").each(function() { 
                var $alpha,$alpha_output,$pickerContainer,$control=$(this),value=$control.val().replace(/\s+/g,""),alpha_val=100;
                value.match(/rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/)&&(alpha_val=100*parseFloat(value.match(/rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/)[1])),
                $control.wpColorPicker({
                    clear:function(event,ui){$alpha.val(100),$alpha_output.val("100%")},
                    change:_.debounce(function(){$(this).trigger("change")},10)
                }),
                $pickerContainer=$control.closest(".wp-picker-container"),
                $('<div class="vc_alpha-container"><label>'+theme_wordings.vc.alpha.replace('%s', '<output class="rangevalue">'+alpha_val+'%</output>')+'</label><input type="range" min="1" max="100" value="'+alpha_val+'" name="alpha" class="vc_alpha-field"></div>').appendTo($pickerContainer.addClass("vc_color-picker").find(".iris-picker")),
                $alpha=$pickerContainer.find(".vc_alpha-field"),
                $alpha_output=$pickerContainer.find(".vc_alpha-container output"),
                $alpha.on("change keyup",function(){
                    var alpha_val,iris,color_picker;
                    alpha_val=parseFloat($alpha.val()),
                    iris=$control.data("a8c-iris"),
                    color_picker=$control.data("wp-wpColorPicker"),
                    $alpha_output.val($alpha.val()+"%"),
                    iris._color._alpha=alpha_val/100,
                    $control.val(iris._color.toString()),
                    color_picker.toggler.css({backgroundColor:$control.val()})
                }).val(alpha_val).trigger("change"),
                $alpha.on('change',function(){colorselect.setColorCustom($control);})
            });
            $(this).find('.vc_color-control').on('input change', function() {
                colorselect.setColorCustom(this);
            });
            $(this).data('initialized', 'yes');
        });
    }
    this.initColor = function(el) {
        if ($(el).find('.color_wrapper').data('old')) {
            // get old data
            var data = $(el).find('.color_wrapper').data('old');
            // console.log(data);
            var values = {
                'color': vc.edit_element_block_view.currentModelParams[data.color],
                'ccolor': vc.edit_element_block_view.currentModelParams[data.ccolor],
            }
            // console.log(values);
            // set converted values
            if (values['color'] == 'color_custom') {
                $(el).find('.vc_color-control').val(values['ccolor']);
                $(el).find('.vc_color-control').trigger("change");
            }
            colorselect.setColor($(el).find('.color_thumb[data-colormod="'+values['color']+'"]'));
        }
    }
    this.setColor = function(el) {
        var value = $(el).data('colormod');
        // console.log("selected color: "+value);
        if ($(el).hasClass("selected")) return;
        var wrapper = $(el).closest('.edit_form_line');
        $(wrapper).find(".selected").removeClass("selected");
        $(el).addClass("selected");
        if (value == "color_custom") {
            $(wrapper).find('.color_custom').show();
            var cvalue = $(wrapper).find('.vc_color-control').val();
            $(wrapper).find('.colorselect_value').val(cvalue);
        }
        else {
            $(wrapper).find('.color_custom').hide();
            $(wrapper).find('.colorselect_value').val(value);
        }
        $(wrapper).find('.colorselect_value').trigger("change");
    }
    this.setColorCustom = function(el) {
        var value = $(el).val();
        // console.log("selected custom color: "+value);
        $(el).closest('.edit_form_line').find('.colorselect_value').val(value);
        $(el).closest('.edit_form_line').find('.colorselect_value').trigger("change");
    }
}

//
// colorgradient
var colorgradient = new function() {
    
    this.dragging = {
        selected: false,
        active: false,
        initialX: 0,
        colors: false
    };

    this.init = function() {

        $("div[data-param_type='colorgradient']").each( function() {
            // console.log("making gradient control ...");
            
            // initGradient(this);
            colorgradient.setup(this);
            $(this).find('.gradient_color').each(function() {
                $(this).on('touchstart mousedown', colorgradient.dragStart);
            });
            $(this).find('.gradient_holder .gradient_thumb').on('click', colorgradient.item.add);

            $(this).find('.gradient_item_details .item_hide').on('click', function() {
                colorgradient.item.toggleDetails(this);
            });
            $(this).find('.gradient_item_details .item_close').on('click', function() {
                colorgradient.item.remove(this);
            });

            $(this).find('.gradient_item_colors .color_thumb').on('click', function() {
                colorgradient.item.setColor(this);
            });
            $(this).find(".vc_color-control").each(function() { 
                var $alpha,$alpha_output,$pickerContainer,$control=$(this),value=$control.val().replace(/\s+/g,""),alpha_val=100;
                value.match(/rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/)&&(alpha_val=100*parseFloat(value.match(/rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/)[1])),
                $control.wpColorPicker({
                    clear:function(event,ui){$alpha.val(100),$alpha_output.val("100%")},
                    change:_.debounce(function(){$(this).trigger("change")},10)
                }),
                $pickerContainer=$control.closest(".wp-picker-container"),
                $('<div class="vc_alpha-container"><label>'+theme_wordings.vc.alpha.replace('%s', '<output class="rangevalue">'+alpha_val+'%</output>')+'</label><input type="range" min="1" max="100" value="'+alpha_val+'" name="alpha" class="vc_alpha-field"></div>').appendTo($pickerContainer.addClass("vc_color-picker").find(".iris-picker")),
                $alpha=$pickerContainer.find(".vc_alpha-field"),
                $alpha_output=$pickerContainer.find(".vc_alpha-container output"),
                $alpha.on("change keyup",function(){
                    var alpha_val,iris,color_picker;
                    alpha_val=parseFloat($alpha.val()),
                    iris=$control.data("a8c-iris"),
                    color_picker=$control.data("wp-wpColorPicker"),
                    $alpha_output.val($alpha.val()+"%"),
                    iris._color._alpha=alpha_val/100,
                    $control.val(iris._color.toString()),
                    color_picker.toggler.css({backgroundColor:$control.val()})
                }).val(alpha_val).trigger("change")
                $alpha.on('change',function(){colorgradient.item.setCustomcolor($control);})
            });
            $(this).find('.vc_color-control').on('input change', function() {
                colorgradient.item.setCustomcolor(this);
            });
            
            $(this).find('.gradient_type').on('change', function() {
                colorgradient.updateType(this);
            });
            $(this).find('.gradient_angle').on('input change', function() {
                colorgradient.updateAngle(this);
            });
            $(this).find('.gradient_scroll').on('change', function() {
                colorgradient.updateScroll(this);
            });
            
        });

    }
    this.setup = function(el) {
        // console.log("init colorpickers ...");
        $(el).find('.color_thumb').each(function() {
            if (!$(this).hasClass('no_thumb')) {
                if ($(this).data('colormod')) {
                    var col = root['--'+$(this).data('colormod').replace('_','')].value;
                    var title = $(this).attr('title')+col;
                    $(this).attr('title', title);
                    $(this).find(".color_th").css('background-color', col);
                }
            }
        });
        // console.log("get color array ...");
        var colors = [];
        $(el).find('.gradient_color').each(function() {
            var colorvar = color = $(this).data('color');
            // console.log(color);
            if (color == "") color = "transparent";
            if (color.indexOf("color_") == 0) color = root["--"+color.replace('_', '')]['value'];

            $(this).find('.color_thumb').css('background-color', color);
            var position = $(this).data('position');
            $(this).css('left', position+'%');
            $(this).attr('title', theme_wordings.vc.position.replace('%s', position+'%')); 
            colors.push( { colorvar: colorvar, color: color, position: position } );
        });
        $(el).find('.gradient_holder').data('colors', colors);
        colorgradient.draw(el);
    }
    this.draw = function(el) {
        // console.log("drawing gradient ......");
        // angle
        var scroll = $(el).find('.gradient_scroll').val();
        var type = angle = $(el).find('.gradient_type').val();
        if (angle == "" || angle == "top") angle = 180;
        else if (angle == "bottom") angle = 0;
        else if (angle == "left") angle = 90;
        else if (angle == "right") angle = 270;
        else angle = $(el).find('.gradient_angle').val();
        // colors
        var colors = false;
        if (colorgradient.dragging !== undefined && colorgradient.dragging['active']) colors = colorgradient.dragging['colors'];
        else colors = $(el).find('.gradient_holder').data('colors');
        // sort colors
        var colors_clone = colors.concat().sort(function(a, b) {
            return (a['position']*1.0) >= (b['position']*1.0) ? 1 : -1;
        });
        // make gradient
        var gradient = "";
        var items = "";
        for (var i=0; i<colors_clone.length; i++) {
            gradient += ', '+colors_clone[i]['color']+' '+colors_clone[i]['position']+'%';
            items += '|'+colors_clone[i]['colorvar']+':'+colors_clone[i]['position'];
        }
        // render
        $(el).find('.gradient_holder .gradient_thumb').css('background-image', 'linear-gradient(90deg'+gradient+')');
        $(el).find('.gradient_wrapper .gradient_thumb').css('background-image', 'linear-gradient('+angle+'deg'+gradient+')');
        $(el).find('.gradient_wrapper .gradient_thumb').css('background-attachment', scroll);
        $(el).find('.gradient_wrapper .gradient_code').html('linear-gradient('+angle+'deg'+gradient+')');
        // save/dev
        $(el).find('.gradient_value').val(scroll+'|'+type+'|'+angle+items);
        $(el).find('.gradient_dev').val(scroll+'|'+type+'|'+angle+items);
    }

    this.updateType = function(el) {
        var value = $(el).val();
        if (value == "angle") $(el).next().css('display','block');
        else $(el).next().css('display','none');
        colorgradient.draw($(el).closest('.edit_form_line'));
    }
    this.updateAngle = function(el) {
        var value = $(el).val();
        $(el).prev().html(value+"°");
        colorgradient.draw($(el).closest('.edit_form_line'));
    }
    this.updateScroll = function(el) {
        colorgradient.draw($(el).closest('.edit_form_line'));
    }

    this.dragStart = function(e) {
        // console.log("start draggin ...");
        // select item
        colorgradient.item.select(e.target);
        // set draggin helper
        colorgradient.dragging['active'] = colorgradient.dragging['selected'];
        if (e.type === "touchstart") colorgradient.dragging['initialX'] = e.touches[0].clientX;
        else colorgradient.dragging['initialX'] = e.clientX;
        colorgradient.dragging['initialX'] -= $(colorgradient.dragging['active']).css('left').replace('px', '');
        colorgradient.dragging['colors'] = $(colorgradient.dragging['active']).closest('.gradient_holder').data('colors');
        $(colorgradient.dragging['active']).addClass('dragging');
        // enable events
        $(document).on('selectstart', colorgradient.disableSelect);
        $(document).on('touchend mouseup', colorgradient.dragEnd);
        $(colorgradient.dragging['active']).closest('.edit_form_line').on('touchmove mousemove', colorgradient.drag);
    }
    this.drag = function(e) {
        // console.log("draggin ...");
        e.preventDefault();
        if (e.type === "touchmove") var x = e.touches[0].clientX - colorgradient.dragging['initialX'];
        else var x = e.clientX - colorgradient.dragging['initialX'];
        // calculate new Position
        var max = $(colorgradient.dragging['active']).parent().width();
        if (x >= 0 && x <= max) {
            var position = ((x/max)*100.0).toFixed(1);
            colorgradient.item.setPosition(position);
            colorgradient.item.movePosition(position);
            colorgradient.item.updatePosition(position);
        }
    }
    this.disableSelect = function(e) {
        if (colorgradient.dragging['active']) {
            // console.log("select stopped ...");
            e.preventDefault();
        }
    }
    this.dragEnd = function(e) {
        if (colorgradient.dragging['active']) {
            // console.log("end draggin ...");
            // disable events
            $(document).off('selectstart', colorgradient.disableSelect);
            $(document).off('touchend mouseup', colorgradient.dragEnd);
            $(colorgradient.dragging['active']).closest('.edit_form_line').off('touchmove mousemove', colorgradient.drag);
            // save colors
            $(colorgradient.dragging['active']).closest('.gradient_holder').data('colors', colorgradient.dragging['colors']);
            // reset draggin helper
            $(colorgradient.dragging['active']).removeClass('dragging');
            colorgradient.dragging['active'] = false;
            colorgradient.dragging['initialX'] = 0;
        }
    }

    this.item = new function() {

        this.add = function(e) {
            // console.log("click to add color ...");
            if (colorgradient.dragging['colors'].length > 50) {
                alert(theme_wordings.vc.gradient_max);
            }
            else {
                var x = e.pageX - $(e.target).offset().left;
                var max = $(e.target).width();
                var position = ((x/max)*100.0).toFixed(1);
                var item = $("<span class='gradient_color' data-color='"+"color_11"+"' data-position='"+position+"' ><span class='color_grid'></span><span class='color_thumb'></span></span>");
                $(e.target).next().append(
                    item.on('touchstart mousedown', colorgradient.dragStart)
                );
                colorgradient.setup($(e.target).closest('.edit_form_line'));
                colorgradient.item.select(item);
            }
        }
        this.remove = function(el) {
            // console.log("removing color ...");
            if (colorgradient.dragging['colors'].length < 3) {
                alert(theme_wordings.vc.gradient_min);
            }
            else if (confirm(theme_wordings.vc.gradient_del)) {
                $(colorgradient.dragging['selected']).remove();
                $(el).closest('.gradient_item').slideUp();
                colorgradient.dragging['selected'] = false;
                colorgradient.setup($(el).closest('.edit_form_line'));
            }
        }
        this.select = function(el) {

            if (!colorgradient.dragging['selected']) $(el).closest('.gradient_holder').next().slideDown();
            if (colorgradient.dragging['selected'] != $(el).closest('.gradient_color')) {
                $(colorgradient.dragging['selected']).removeClass('active');
                colorgradient.dragging['selected'] = $(el).closest('.gradient_color');
                $(colorgradient.dragging['selected']).addClass('active');
                var pos = $(colorgradient.dragging['selected']).data('position');
                colorgradient.item.movePosition(pos);

                var color = $(colorgradient.dragging['selected']).data('color');
                if (color.indexOf("color_") == 0) {
                    // var col = root["--"+color.replace('_', '')]['value'];
                    // $(colorgradient.dragging['selected']).closest('.gradient_holder').next().find('.vc_color-control').val(col);
                    // $(colorgradient.dragging['selected']).closest('.gradient_holder').next().find('.vc_color-control').trigger("change");
                    var tmp = color.replace('color_', '').split('');
                    var index = ((tmp[0]-1)*3)+(tmp[1]*1);
                    $(colorgradient.dragging['selected']).closest('.gradient_holder').next().find('.color_thumb[data-color='+index+']').trigger("click");
                }
                else if (color == "") {
                    $(colorgradient.dragging['selected']).closest('.gradient_holder').next().find('.color_thumb[data-color=0]').trigger("click");
                }
                else {
                    $(colorgradient.dragging['selected']).closest('.gradient_holder').next().find('.vc_color-control').val(color);
                    $(colorgradient.dragging['selected']).closest('.gradient_holder').next().find('.vc_color-control').trigger("change");
                    $(colorgradient.dragging['selected']).closest('.gradient_holder').next().find('.color_thumb[data-color=19]').trigger("click");
                }
            }

        }
        this.toggleDetails = function(el) {
            // console.log("toggle details ...");
            $(el).closest('.gradient_item').find('.gradient_item_colors').slideToggle();
        }

        this.setColor = function(el) {
            // console.log("change item color ...");
            var value = $(el).data('colormod');
            // console.log("selected color: "+value);
            if ($(el).hasClass("selected")) return;
            var wrapper = $(el).closest('.gradient_item_colors');
            $(wrapper).find(".selected").removeClass("selected");
            $(el).addClass("selected");
            if (value == "color_custom") {
                $(wrapper).find('.color_custom').show();
                colorgradient.item.setCustomcolor($(wrapper).find('.vc_color-control'));
            }
            else {
                $(wrapper).find('.color_custom').hide();
                if (colorgradient.dragging && colorgradient.dragging['selected']) {
                    $(el).closest('.edit_form_line').find('.gradient_color').eq($(colorgradient.dragging['selected']).index()).data('color', value);
                    colorgradient.setup($(el).closest('.edit_form_line'));
                }
            }
        }
        this.setCustomcolor = function(el) {
            var value = $(el).val();
            // console.log(value);
            if (colorgradient.dragging && colorgradient.dragging['selected']) {
                $(el).closest('.edit_form_line').find('.gradient_color').eq($(colorgradient.dragging['selected']).index()).data('color', value);
                colorgradient.setup($(el).closest('.edit_form_line'));
            }
        }

        this.getPosition = function(newposition) {
            var newVal = prompt(theme_wordings.vc.gradient_pos, newposition);
            if (newVal != null && !isNaN(newVal)) {
                if (newVal > 100) newVal = 100;
                if (newVal < 0) newVal = 0;
                $(colorgradient.dragging['selected']).closest('.edit_form_line').find('.gradient_color').eq($(colorgradient.dragging['selected']).index()).data('position', newVal);
                colorgradient.item.movePosition(newVal);
                colorgradient.setup($(colorgradient.dragging['selected']).closest('.edit_form_line'));
            }
        }
        this.setPosition = function(newposition) {
            $(colorgradient.dragging['selected']).data('position', newposition);
            $(colorgradient.dragging['selected']).css('left', newposition+'%');
            $(colorgradient.dragging['selected']).attr('title', 'Position: '+newposition+'%');
        }
        this.movePosition = function(newposition) {
            var max = $(colorgradient.dragging['selected']).parent().width();
            var position = max*(newposition/100.0);
            var translate = -173;
            if (position < 173) translate = -position;
            else if (position > (max-193)) translate = max-position-366;
            
            $(colorgradient.dragging['selected']).closest('.gradient_holder').next().css('margin-left', newposition+"%");
            $(colorgradient.dragging['selected']).closest('.gradient_holder').next().css('transform', "translateX("+translate+"px)");
            $(colorgradient.dragging['selected']).closest('.gradient_holder').next().find('.item_position > span').html(
                $('<span style="background: #fff;">'+newposition+'</span>').on('click', function() { colorgradient.item.getPosition(newposition) })
            );
        }
        this.updatePosition = function(newposition) {
            // console.log("update gradient ...");
            var index = $(colorgradient.dragging['selected']).index();
            colorgradient.dragging['colors'][index]['position'] = newposition;
            colorgradient.draw($(colorgradient.dragging['selected']).closest('.edit_form_line'));
        }

    }

}

//
// shadow
var shadowcontrol = new function() {
    
    this.init = function() {
        $("div[data-param_type='shadow']").each( function() {
            
            shadowcontrol.setup(this);
            $(this).find('.shadow_option input').each(function() {
                shadowcontrol.setOption(this);
                $(this).on('input change', function() {
                    shadowcontrol.setOption(this);
                    shadowcontrol.draw($(this).closest('.edit_form_line'));
                });
            });
            $(this).find('.shadow_type select').on('input', function() {
                shadowcontrol.draw($(this).closest('.edit_form_line'));
            });
            $(this).find('.shadow_color .colorselect_value').on('input change', function() {
                shadowcontrol.draw($(this).closest('.edit_form_line'));
            });
            shadowcontrol.draw($(this).find('.edit_form_line'));

        });
        
        $(".vc_shortcode-param[data-param_type='close_preview']").each( function() {
            $(this).find('.edit_form_line').html(
                "<div class='popup_close_preview'>"+
                    "<div class='close_popup_wrapper'>"+
                        "<span class='close_popup'></span>"+
                    "</div>"+
                "</div>");
            var values = $(this).data('param_settings').values;
            if (typeof values !== 'undefined') {
                for (var i=0; i<values.length; i++) {
                    $(".vc_shortcode-param[data-vc-shortcode-param-name='"+values[i]+"'] .wpb_vc_param_value").on('input change', function() {
                        shadowcontrol.updateClosePreview(this);
                    });
                }
                shadowcontrol.updateClosePreview(this);
            }
        });
    }

    this.updateClosePreview = function(el) {
        var preview = $(el).closest('.vc_edit-form-tab').find(".vc_shortcode-param[data-param_type='close_preview']");
        var values = preview.data('param_settings').values;
        var data = {};
        for (var i=0; i<values.length; i++) {
            var control = $("div[data-vc-shortcode-param-name='"+values[i]+"']");
            // console.log(control);
            var input = control.find('.wpb_vc_param_value');
            var value = input.val();
            if (input.prop('type') == "checkbox") {
                value = 'false';
                if (input.prop('checked'))
                    value = 'true';
            }
            if (value.indexOf('color_') > -1) {
                var tmp = value.split('color_');
                value = root['--color'+tmp[1]]['value'];
            }
            data[values[i]] = value;
        }
        if (data.as_box == 'false') {
            data.padding = '0px';
            data.border_radius = '0px';
            data.color_bg = 'transparent';
            data.color_bg_hover = 'transparent';
        }
        // console.log(data);
        document.documentElement.style.setProperty('--POPalign', data.align.replace('_', ''));
        document.documentElement.style.setProperty('--POPsize', data.size+'px');
        document.documentElement.style.setProperty('--POPwidth', data.width+'px');
        document.documentElement.style.setProperty('--POPcolor', data.color);
        document.documentElement.style.setProperty('--POPcolor_hover', data.color_hover);
        document.documentElement.style.setProperty('--POPpadding', data.padding+'px');
        document.documentElement.style.setProperty('--POPborder_radius', data.border_radius+'px');
        document.documentElement.style.setProperty('--POPcolor_bg', data.color_bg);
        document.documentElement.style.setProperty('--POPcolor_bg_hover', data.color_bg_hover);
    }
    
    this.setup = function(el) {
        if ($(el).find('.shadow_setup').data('old')) {
            // get old data
            var data = $(el).find('.shadow_setup').data('old');
            // console.log(data);
            var values = { type: "", x: 2, y: 2, blur: 4, spread: 0, color: "color_61", opacity: 1 };
            for (var key in data) {
                // console.log(key+": "+data[key]);
                if (vc.edit_element_block_view.currentModelParams[data[key]])
                    values[key] = vc.edit_element_block_view.currentModelParams[data[key]];
            }
            if (values.colorold != undefined) values.color = values.colorold;
            // console.log(values);
            $(el).find('.shadow_type .type').val(values.type);
            $(el).find('.shadow_option .horizontal').val(values.x.replace('px',''));
            $(el).find('.shadow_option .vertical').val(values.y.replace('px',''));
            $(el).find('.shadow_option .blur').val(values.blur.replace('px',''));
            $(el).find('.shadow_option .spread').val(values.spread.replace('px',''));
            $(el).find('.shadow_option .opacity').val(100);
            
            if (values.color.indexOf('color_') == 0)
                colorselect.setColor($(el).find('.color_thumb[data-colormod="'+values.color+'"]'));
            else {
                colorselect.setColor($(el).find('.color_thumb[data-colormod="color_custom"]'));
                $(el).find('.vc_color-control').val(values.color);
                $(el).find('.vc_color-control').trigger("change");
            }
            shadowcontrol.draw(el);
        }
    }

    this.setOption = function(el) {
        var value = $(el).val();
        var label = $(el).prev().data("label");
        var unit = $(el).prev().data("unit");
        // console.log(label+": "+value+unit);
        $(el).prev().html(label+": "+value+unit);
    }

    this.draw = function(el) {
        var type = $(el).find('.shadow_type .type').val();
        var horizontal = $(el).find('.shadow_option .horizontal').val();
        var vertical = $(el).find('.shadow_option .vertical').val();
        var blur = $(el).find('.shadow_option .blur').val();
        var spread = $(el).find('.shadow_option .spread').val();
        var color = $(el).find('.shadow_color .colorselect_value').val();
        if (color == "") color = "transparent";
        var opacity = $(el).find('.shadow_option .opacity').val();

        var shadow = type;
        if (horizontal == 0 && vertical == 0 && blur == 0 && spread == 0)
            shadow = 'none';
        else {
            if (type != "") shadow += "+";
            shadow += horizontal+"px+"+vertical+"px+"+blur+"px+"+spread+"px+"+color+"+"+opacity;
        }
        $(el).find('.shadow_value').val(shadow);
        $(el).find('.shadow_value').trigger("change");
        $(el).find('.value_dev').val(shadow);
        // preview
        shadow = shadowcontrol.makeValue(shadow);
        $(el).find('.shadow_holder').css('box-shadow', shadow);
        // console.log (shadow);
    }
    this.makeValue = function(newval) {
        // calculate box-shadow color
        if (newval != 'none') {
            var shadow = newval.split('+');
            var color = shadow[shadow.length-2];
            var opacity = shadow[shadow.length-1];

            if (color == 'transparent' || color == "") {
                color = { r:0, g:0, b:0, a:0 };
            }
            else {
                if (color.indexOf('color_') > -1) {
                    var tmp = color.split('color_');
                    color = root['--color'+tmp[1]]['value'];
                }
                var col = shadowcontrol.hex2rgba(color);
                if (!col) {
                    if (color == 'transparent') col = { r:0, g:0, b:0, a:0 };
                    else col = shadowcontrol.rgb2rgba(color);
                }
                col.a = (col.a * (opacity / 100.0)).toFixed(2);
                color = col;
            }
            var shadowcolor = 'rgba('+color.r+','+color.g+','+color.b+','+color.a+')';
            shadow.pop();
            shadow.pop();
            shadow.push(shadowcolor);
            return shadow.join(' ');
        }
        return newval;
    }
    this.hex2rgba = function(hex) {
        // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
        var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        hex = hex.replace(shorthandRegex, function(m, r, g, b) {
            return r + r + g + g + b + b;
        });
        // decode hex
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16),
            a: 1
        } : false;
    }
    this.rgb2rgba = function(rgb) {
        // console.log(rgb);
        var tmp = rgb.split('(');
        tmp = tmp[1].split(')');
        tmp = tmp[0].split(',');
        if (tmp.length == 3) return { r: tmp[0], g: tmp[1], b: tmp[2], a: 1 };
        if (tmp.length == 4) return { r: tmp[0], g: tmp[1], b: tmp[2], a: tmp[3] };
        return false;
    }

}

// jQuery(document).ready(function($) {
jQuery(function($) {

    // new param_types
    colorselect.init();
    colorgradient.init();
    shadowcontrol.init();
    console.log("VC colors: loaded");

});

