var UID = {
    _current: 0,
    getNew: function(){
        this._current++;
        return this._current;
    }
};

HTMLElement.prototype.dotStyle = function(element,prop,value){
    var _this = this;
    var _sheetId = "dotStyles";
    var _head = document.head || document.getElementsByTagName('head')[0];
    var _sheet = document.getElementById(_sheetId) || document.createElement('style');
    _sheet.id = _sheetId;
    var className = "dotStyles" + UID.getNew();

    _this.className +=  " "+className;

    _sheet.innerHTML += " ."+className+":"+element+"{"+prop+":"+value+"}";
    _head.appendChild(_sheet);
    return this;
};

let etiquette_obj = {
    bevel: {
        left: false,
        right: false
    },
    dot: {
        left: false,
        right: false
    },
    color: {
        etiquette: {
            id: '',
            hexa: ''
        },
        dot_left: {
            id: '',
            hexa: ''
        },
        dot_right: {
            id: '',
            hexa: ''
        }
    }
}
let default_etiquette_color = '#78909C';

let box_body = $('.etiq_body'),
    box_left = $('.etiq_left'),
    box_right = $('.etiq_right'),
    box_further = $('.etiq_compl');

let form_etiq_achat = $('#form_etiq_achat'),
    form_etiq_fab = $('#form_etiq_fab'),
    form_etiq_liv = $('#form_etiq_liv'),
    form_etiq_mag = $('#form_etiq_mag');

let input_achat_select_etiq_color = $('#edit_etiq_achat_kanban_transfert_couleurEtiquetteAchat'),
    input_achat_bevel_left = $('#edit_etiq_achat_kanban_transfert_biseauAchatGauche'),
    input_achat_bevel_right = $('#edit_etiq_achat_kanban_transfert_biseauAchatDroit'),
    input_achat_dot_left = $('#edit_etiq_achat_kanban_transfert_pastilleGAchat'),
    input_achat_dot_right = $('#edit_etiq_achat_kanban_transfert_pastilleDAchat'),
    input_achat_dot_color_left = $('#edit_etiq_achat_kanban_transfert_couleurPastilleGAchat'),
    input_achat_dot_color_right = $('#edit_etiq_achat_kanban_transfert_couleurPastilleDAchat'),
    input_achat_further_etiq = $('#edit_etiq_achat_kanban_transfert_etiquetteComplementaireAchat'),

    input_fab_select_etiq_color = $('#edit_etiq_fab_kanban_transfert_couleurEtiquetteFab'),
    input_fab_bevel_left = $('#edit_etiq_fab_kanban_transfert_biseauFabGauche'),
    input_fab_bevel_right = $('#edit_etiq_fab_kanban_transfert_biseauFabDroit'),
    input_fab_dot_left = $('#edit_etiq_fab_kanban_transfert_pastilleGFab'),
    input_fab_dot_right = $('#edit_etiq_fab_kanban_transfert_pastilleDFab'),
    input_fab_dot_color_left = $('#edit_etiq_fab_kanban_transfert_couleurPastilleGFab'),
    input_fab_dot_color_right = $('#edit_etiq_fab_kanban_transfert_couleurPastilleDFab'),
    input_fab_further_etiq = $('#edit_etiq_fab_kanban_transfert_etiquetteComplementaireFab'),

    input_liv_select_etiq_color = $('#edit_etiq_liv_kanban_transfert_couleurEtiquetteLiv'),
    input_liv_bevel_left = $('#edit_etiq_liv_kanban_transfert_biseauLivGauche'),
    input_liv_bevel_right = $('#edit_etiq_liv_kanban_transfert_biseauLivDroit'),
    input_liv_dot_left = $('#edit_etiq_liv_kanban_transfert_pastilleGLiv'),
    input_liv_dot_right = $('#edit_etiq_liv_kanban_transfert_pastilleDLiv'),
    input_liv_dot_color_left = $('#edit_etiq_liv_kanban_transfert_couleurPastilleGLiv'),
    input_liv_dot_color_right = $('#edit_etiq_liv_kanban_transfert_couleurPastilleDLiv'),
    input_liv_further_etiq = $('#edit_etiq_liv_kanban_transfert_etiquetteComplementaireLiv'),

    input_mag_select_etiq_color = $('#edit_etiq_mag_kanban_transfert_couleurEtiquetteMag'),
    input_mag_bevel_left = $('#edit_etiq_mag_kanban_transfert_biseauMagGauche'),
    input_mag_bevel_right = $('#edit_etiq_mag_kanban_transfert_biseauMagDroit'),
    input_mag_dot_left = $('#edit_etiq_mag_kanban_transfert_pastilleGMag'),
    input_mag_dot_right = $('#edit_etiq_mag_kanban_transfert_pastilleDMag'),
    input_mag_dot_color_left = $('#edit_etiq_mag_kanban_transfert_couleurPastilleGMag'),
    input_mag_dot_color_right = $('#edit_etiq_mag_kanban_transfert_couleurPastilleDMag'),
    input_mag_further_etiq = $('#edit_etiq_mag_kanban_transfert_etiquetteComplementaireMag')
;

// Enable btn save
enableButton('form_etiq_achat', 'edit_etiq_achat_kanban_transfert_submit', true);
enableButton('form_etiq_fab', 'edit_etiq_fab_kanban_transfert_submit', true);
enableButton('form_etiq_liv', 'edit_etiq_liv_kanban_transfert_submit', true);
enableButton('form_etiq_mag', 'edit_etiq_mag_kanban_transfert_submit', true);


initPage();
$(input_achat_select_etiq_color).change(function () {
   let val = $(this).val();
   if (val){
       let id = val.split('_')[0],
           hexa = val.split('_')[1];

       etiquette_obj.color.etiquette.id = id;
       etiquette_obj.color.etiquette.hexa = hexa;
       fillColorEtiquette();
   } else {
       $(box_body).css("background-color", default_etiquette_color);
       $(box_right).css("background-color", default_etiquette_color);
       $(box_left).css("background-color", default_etiquette_color);
   }
});
$(input_fab_select_etiq_color).change(function () {
    let val = $(this).val();
    if (val){
        let id = val.split('_')[0],
            hexa = val.split('_')[1];

        etiquette_obj.color.etiquette.id = id;
        etiquette_obj.color.etiquette.hexa = hexa;
        fillColorEtiquette();
    } else {
        $(box_body).css("background-color", default_etiquette_color);
        $(box_right).css("background-color", default_etiquette_color);
        $(box_left).css("background-color", default_etiquette_color);
    }
});
$(input_liv_select_etiq_color).change(function () {
    let val = $(this).val();
    if (val){
        let id = val.split('_')[0],
            hexa = val.split('_')[1];

        etiquette_obj.color.etiquette.id = id;
        etiquette_obj.color.etiquette.hexa = hexa;
        fillColorEtiquette();
    } else {
        $(box_body).css("background-color", default_etiquette_color);
        $(box_right).css("background-color", default_etiquette_color);
        $(box_left).css("background-color", default_etiquette_color);
    }
});
$(input_mag_select_etiq_color).change(function () {
    let val = $(this).val();
    if (val){
        let id = val.split('_')[0],
            hexa = val.split('_')[1];

        etiquette_obj.color.etiquette.id = id;
        etiquette_obj.color.etiquette.hexa = hexa;
        fillColorEtiquette();
    } else {
        $(box_body).css("background-color", default_etiquette_color);
        $(box_right).css("background-color", default_etiquette_color);
        $(box_left).css("background-color", default_etiquette_color);
    }
});


$(input_achat_bevel_left).change(function () {
    etiquette_obj.bevel.left = !etiquette_obj.bevel.left;
    toggleBevel('left');
});
$(input_fab_bevel_left).change(function () {
    etiquette_obj.bevel.left = !etiquette_obj.bevel.left;
    toggleBevel('left');
});
$(input_liv_bevel_left).change(function () {
    etiquette_obj.bevel.left = !etiquette_obj.bevel.left;
    toggleBevel('left');
});
$(input_mag_bevel_left).change(function () {
    etiquette_obj.bevel.left = !etiquette_obj.bevel.left;
    toggleBevel('left');
});

$(input_achat_bevel_right).change(function () {
    etiquette_obj.bevel.right = !etiquette_obj.bevel.right;
    toggleBevel('right');
});
$(input_fab_bevel_right).change(function () {
    etiquette_obj.bevel.right = !etiquette_obj.bevel.right;
    toggleBevel('right');
});
$(input_liv_bevel_right).change(function () {
    etiquette_obj.bevel.right = !etiquette_obj.bevel.right;
    toggleBevel('right');
});
$(input_mag_bevel_right).change(function () {
    etiquette_obj.bevel.right = !etiquette_obj.bevel.right;
    toggleBevel('right');
});


$(input_achat_dot_left).change(function () {
    etiquette_obj.dot.left = !etiquette_obj.dot.left;
    if (etiquette_obj.dot.left) $(input_achat_dot_color_left).attr('disabled', false);
    else $(input_achat_dot_color_left).attr('disabled', 'disabled');
    toggleDot('left');
    if ($(input_achat_dot_color_left).val()) {
        setObjectColor($(input_achat_dot_color_left).val(), 'left');
        fillColorDot('left');
    }
});
$(input_fab_dot_left).change(function () {
    etiquette_obj.dot.left = !etiquette_obj.dot.left;
    if (etiquette_obj.dot.left) $(input_fab_dot_color_left).attr('disabled', false);
    else $(input_fab_dot_color_left).attr('disabled', 'disabled');
    toggleDot('left');
    if ($(input_fab_dot_color_left).val()) {
        setObjectColor($(input_fab_dot_color_left).val(), 'left');
        fillColorDot('left');
    }
});
$(input_liv_dot_left).change(function () {
    etiquette_obj.dot.left = !etiquette_obj.dot.left;
    if (etiquette_obj.dot.left) $(input_liv_dot_color_left).attr('disabled', false);
    else $(input_liv_dot_color_left).attr('disabled', 'disabled');
    toggleDot('left');
    if ($(input_liv_dot_color_left).val()) {
        setObjectColor($(input_liv_dot_color_left).val(), 'left');
        fillColorDot('left');
    }
});
$(input_mag_dot_left).change(function () {
    etiquette_obj.dot.left = !etiquette_obj.dot.left;
    if (etiquette_obj.dot.left) $(input_mag_dot_color_left).attr('disabled', false);
    else $(input_mag_dot_color_left).attr('disabled', 'disabled');
    toggleDot('left');
    if ($(input_mag_dot_color_left).val()) {
        setObjectColor($(input_mag_dot_color_left).val(), 'left');
        fillColorDot('left');
    }
});
$(input_achat_dot_right).change(function () {
    etiquette_obj.dot.right = !etiquette_obj.dot.right;
    if (etiquette_obj.dot.right)  $(input_achat_dot_color_right).attr('disabled', false);
    else $(input_achat_dot_color_right).attr('disabled', 'disabled');
    toggleDot('right');
    if ($(input_achat_dot_color_right).val()) {
        setObjectColor($(input_achat_dot_color_right).val(), 'right');
        fillColorDot('right');
    }
});
$(input_fab_dot_right).change(function () {
    etiquette_obj.dot.right = !etiquette_obj.dot.right;
    if (etiquette_obj.dot.right) $(input_fab_dot_color_right).attr('disabled', false);
    else $(input_fab_dot_color_right).attr('disabled', 'disabled');
    toggleDot('right');
    if ($(input_fab_dot_color_right).val()) {
        setObjectColor($(input_fab_dot_color_right).val(), 'right');
        fillColorDot('right');
    }
});
$(input_liv_dot_right).change(function () {
    etiquette_obj.dot.right = !etiquette_obj.dot.right;
    if (etiquette_obj.dot.right) $(input_liv_dot_color_right).attr('disabled', false);
    else $(input_liv_dot_color_right).attr('disabled', 'disabled');
    toggleDot('right');
    if ($(input_liv_dot_color_right).val()) {
        setObjectColor($(input_liv_dot_color_right).val(), 'right');
        fillColorDot('right');
    }
});
$(input_mag_dot_right).change(function () {
    etiquette_obj.dot.right = !etiquette_obj.dot.right;
    if (etiquette_obj.dot.right) $(input_mag_dot_color_right).attr('disabled', false);
    else $(input_mag_dot_color_right).attr('disabled', 'disabled');
    toggleDot('right');
    if ($(input_mag_dot_color_right).val()) {
        setObjectColor($(input_mag_dot_color_right).val(), 'right');
        fillColorDot('right');
    }
});

$(input_achat_dot_color_left).change(function () {
    let val = $(this).val();
    if (val){
        setObjectColor(val, 'left');
        if (etiquette_obj.dot.left) fillColorDot('left');
    }
});
$(input_fab_dot_color_left).change(function () {
    let val = $(this).val();
    if (val){
        setObjectColor(val, 'left');
        if (etiquette_obj.dot.left) fillColorDot('left');
    }
});
$(input_liv_dot_color_left).change(function () {
    let val = $(this).val();
    if (val){
        setObjectColor(val, 'left');
        if (etiquette_obj.dot.left) fillColorDot('left');
    }
});
$(input_mag_dot_color_left).change(function () {
    let val = $(this).val();
    if (val){
        setObjectColor(val, 'left');
        if (etiquette_obj.dot.left) fillColorDot('left');
    }
});

$(input_achat_dot_color_right).change(function () {
    let val = $(this).val();
    if (val){
        setObjectColor(val, 'right');
        if (etiquette_obj.dot.right) fillColorDot('right');
    }
});
$(input_fab_dot_color_right).change(function () {
    let val = $(this).val();
    if (val){
        setObjectColor(val, 'right');
        if (etiquette_obj.dot.right) fillColorDot('right');
    }
});
$(input_liv_dot_color_right).change(function () {
    let val = $(this).val();
    if (val){
        setObjectColor(val, 'right');
        if (etiquette_obj.dot.right) fillColorDot('right');
    }
});
$(input_mag_dot_color_right).change(function () {
    let val = $(this).val();
    if (val){
        setObjectColor(val, 'right');
        if (etiquette_obj.dot.right) fillColorDot('right');
    }
});

$(input_achat_further_etiq).change(function () {
    $(box_further).toggle();
});
$(input_fab_further_etiq).change(function () {
    $(box_further).toggle();
});
$(input_liv_further_etiq).change(function () {
    $(box_further).toggle();
});
$(input_mag_further_etiq).change(function () {
    $(box_further).toggle();
});

$('.btn_swap_etiq').click(function () {
    $('.btn_swap_etiq').removeClass('active');
    $(this).addClass('active');
    $('.section_form_etiq').addClass('hide');

    $('#etiq_title').html($('#btn_etiq_'+getActiveSectionName()).text());

    let target_section = $(this).data('target');
    $(target_section).removeClass('hide');
    initDefaultEtiq();
    initWithObject(name);
});

function initDefaultEtiq() {
    $(box_left).css('background-color', default_etiquette_color);
    $(box_right).css('background-color', default_etiquette_color);
    $(box_body).css('background-color', default_etiquette_color);
    if ($(box_left).hasClass('etiq_left_dot')) toggleDot('left');
    if ($(box_right).hasClass('etiq_right_dot')) toggleDot('right');
    if ($(box_right).hasClass('etiq_right_bevel')) toggleBevel('right');
    if ($(box_left).hasClass('etiq_left_bevel')) toggleBevel('left');
    if (etiquette_obj.color.dot_left.id && $(box_left).hasClass('etiq_left_dot')) {
        etiquette_obj.color.dot_left.hexa = "#000000";
        fillColorDot('left');
    }
    if (etiquette_obj.color.dot_right.id && $(box_right).hasClass('etiq_right_dot')){
        etiquette_obj.color.dot_right.hexa = "#000000";
        fillColorDot('right');
    }
    $('.etiq_compl').hide();
    resetForm();
}

function resetForm() {
    $(form_etiq_achat).trigger("reset");
    $(form_etiq_fab).trigger("reset");
    $(form_etiq_liv).trigger("reset");
    $(form_etiq_mag).trigger("reset");
}

function setObjectColor(value, orientation){
    let color_id = value.split('_')[0],
        color_hexa = value.split('_')[1];
    if (orientation === 'left'){
        etiquette_obj.color.dot_left.id = color_id;
        etiquette_obj.color.dot_left.hexa = color_hexa;
    } else {
        etiquette_obj.color.dot_right.id = color_id;
        etiquette_obj.color.dot_right.hexa = color_hexa;
    }

}

function initPage() {
    $(input_achat_dot_color_right).attr('disabled', 'disabled');
    $(input_fab_dot_color_right).attr('disabled', 'disabled');
    $(input_liv_dot_color_right).attr('disabled', 'disabled');
    $(input_mag_dot_color_right).attr('disabled', 'disabled');
    $(input_achat_dot_color_left).attr('disabled', 'disabled');
    $(input_fab_dot_color_left).attr('disabled', 'disabled');
    $(input_liv_dot_color_left).attr('disabled', 'disabled');
    $(input_mag_dot_color_left).attr('disabled', 'disabled');
    initWithObject();
}

function getActiveSectionName() {
    let result = 'achat';
    {% if active_section == 'f' %}
        result = 'fab';
    {% elseif active_section == 'l' %}
        result = 'liv';
    {% elseif active_section == 'm' %}
        result = 'mag'
    {% endif %}
    return result;
}

function initWithObject() {
    let etiq_name = getActiveSectionName();

    if (etiq_name == 'achat'){
        {% if kanban.couleurEtiquetteAchat and kanban.couleurEtiquetteAchat.id %}
            etiquette_obj.color.etiquette.id = {{ kanban.couleurEtiquetteAchat.id }};
            etiquette_obj.color.etiquette.hexa = "{{ kanban.couleurEtiquetteAchat.valeur }}";
            fillColorEtiquette();
        {% endif %}
        {% if kanban.biseauAchat %}
            {% if kanban.biseauAchat == 1 %}
                etiquette_obj.bevel.left = true;
                toggleBevel('left');
            {% elseif kanban.biseauAchat == 2 %}
                etiquette_obj.bevel.right = true;
                toggleBevel('right');
            {% elseif kanban.biseauAchat == 3 %}
                etiquette_obj.bevel.left = true;
                toggleBevel('left');
                etiquette_obj.bevel.right = true;
                toggleBevel('right');
            {% endif %}
        {% endif %}
        {% if kanban.couleurPastilleDAchat and kanban.couleurPastilleDAchat.id %}
            $(input_achat_dot_color_right).attr('disabled', false);
            etiquette_obj.dot.right = true;
            toggleDot('right');
            etiquette_obj.color.dot_right.id = {{ kanban.couleurPastilleDAchat.id }};
            etiquette_obj.color.dot_right.hexa = "{{ kanban.couleurPastilleDAchat.valeur }}";
            fillColorDot('right');
        {% endif %}
        {% if kanban.couleurPastilleGAchat and kanban.couleurPastilleGAchat.id %}
            $(input_achat_dot_color_left).attr('disabled', false);
            etiquette_obj.dot.left = true;
            toggleDot('left');
            etiquette_obj.color.dot_left.id = {{ kanban.couleurPastilleGAchat.id }};
            etiquette_obj.color.dot_left.hexa = "{{ kanban.couleurPastilleGAchat.valeur }}";
            fillColorDot('left');
        {% endif %}
        {% if kanban.etiquetteComplementaireAchat > 0 %}
            $(box_further).fadeIn();
        {% endif %}
    }
    if (etiq_name == 'fab'){
        {% if kanban.couleurEtiquetteFab and kanban.couleurEtiquetteFab.id %}
            etiquette_obj.color.etiquette.id = {{ kanban.couleurEtiquetteFab.id }};
            etiquette_obj.color.etiquette.hexa = "{{ kanban.couleurEtiquetteFab.valeur }}";
            fillColorEtiquette();
        {% endif %}
        {% if kanban.biseauFab %}
            {% if kanban.biseauFab == 1 %}
                etiquette_obj.bevel.left = true;
                toggleBevel('left');
            {% elseif kanban.biseauFab == 2 %}
                etiquette_obj.bevel.right = true;
                toggleBevel('right');
            {% elseif kanban.biseauFab == 3 %}
                etiquette_obj.bevel.left = true;
                toggleBevel('left');
                etiquette_obj.bevel.right = true;
                toggleBevel('right');
            {% endif %}
        {% endif %}
        {% if kanban.couleurPastilleDFab and kanban.couleurPastilleDFab.id %}
            $(input_fab_dot_color_right).attr('disabled', false);
            etiquette_obj.dot.right = true;
            toggleDot('right');
            etiquette_obj.color.dot_right.id = {{ kanban.couleurPastilleDFab.id }};
            etiquette_obj.color.dot_right.hexa = "{{ kanban.couleurPastilleDFab.valeur }}";
            fillColorDot('right');
        {% endif %}
        {% if kanban.couleurPastilleGFab and kanban.couleurPastilleGFab.id %}
            $(input_fab_dot_color_left).attr('disabled', false);
            etiquette_obj.dot.left = true;
            toggleDot('left');
            etiquette_obj.color.dot_left.id = {{ kanban.couleurPastilleGFab.id }};
            etiquette_obj.color.dot_left.hexa = "{{ kanban.couleurPastilleGFab.valeur }}";
            fillColorDot('left');
        {% endif %}
        {% if kanban.etiquetteComplementaireFab > 0 %}
            $(box_further).fadeIn();
        {% endif %}
    }
    if (etiq_name == 'liv'){
        {% if kanban.couleurEtiquetteLiv and kanban.couleurEtiquetteLiv.id %}
            etiquette_obj.color.etiquette.id = {{ kanban.couleurEtiquetteLiv.id }};
            etiquette_obj.color.etiquette.hexa = "{{ kanban.couleurEtiquetteLiv.valeur }}";
            fillColorEtiquette();
        {% endif %}
        {% if kanban.biseauLiv %}
            {% if kanban.biseauLiv == 1 %}
                etiquette_obj.bevel.left = true;
                toggleBevel('left');
            {% elseif kanban.biseauLiv == 2 %}
                etiquette_obj.bevel.right = true;
                toggleBevel('right');
            {% elseif kanban.biseauLiv == 3 %}
                etiquette_obj.bevel.left = true;
                toggleBevel('left');
                etiquette_obj.bevel.right = true;
                toggleBevel('right');
            {% endif %}
        {% endif %}
        {% if kanban.couleurPastilleDLiv and kanban.couleurPastilleDLiv.id %}
            $(input_liv_dot_color_right).attr('disabled', false);
            etiquette_obj.dot.right = true;
            toggleDot('right');
            etiquette_obj.color.dot_right.id = {{ kanban.couleurPastilleDLiv.id }};
            etiquette_obj.color.dot_right.hexa = "{{ kanban.couleurPastilleDLiv.valeur }}";
            fillColorDot('right');
        {% endif %}
        {% if kanban.couleurPastilleGLiv and kanban.couleurPastilleGLiv.id %}
            $(input_liv_dot_color_left).attr('disabled', false);
            etiquette_obj.dot.left = true;
            toggleDot('left');
            etiquette_obj.color.dot_left.id = {{ kanban.couleurPastilleGLiv.id }};
            etiquette_obj.color.dot_left.hexa = "{{ kanban.couleurPastilleGLiv.valeur }}";
            fillColorDot('left');
        {% endif %}
        {% if kanban.etiquetteComplementaireLiv > 0 %}
            $(box_further).fadeIn();
        {% endif %}
    }
    if (etiq_name == 'mag'){
        {% if kanban.couleurEtiquetteMag and kanban.couleurEtiquetteMag.id %}
        etiquette_obj.color.etiquette.id = {{ kanban.couleurEtiquetteMag.id }};
        etiquette_obj.color.etiquette.hexa = "{{ kanban.couleurEtiquetteMag.valeur }}";
        fillColorEtiquette();
        {% endif %}
        {% if kanban.biseauMag %}
            {% if kanban.biseauMag == 1 %}
            etiquette_obj.bevel.left = true;
            toggleBevel('left');
            {% elseif kanban.biseauMag == 2 %}
            etiquette_obj.bevel.right = true;
            toggleBevel('right');
            {% elseif kanban.biseauMag == 3 %}
            etiquette_obj.bevel.left = true;
            toggleBevel('left');
            etiquette_obj.bevel.right = true;
            toggleBevel('right');
            {% endif %}
        {% endif %}
        {% if kanban.couleurPastilleDMag and kanban.couleurPastilleDMag.id %}
        $(input_liv_dot_color_right).attr('disabled', false);
        etiquette_obj.dot.right = true;
        toggleDot('right');
        etiquette_obj.color.dot_right.id = {{ kanban.couleurPastilleDMag.id }};
        etiquette_obj.color.dot_right.hexa = "{{ kanban.couleurPastilleDMag.valeur }}";
        fillColorDot('right');
        {% endif %}
        {% if kanban.couleurPastilleGMag and kanban.couleurPastilleGMag.id %}
        $(input_liv_dot_color_left).attr('disabled', false);
        etiquette_obj.dot.left = true;
        toggleDot('left');
        etiquette_obj.color.dot_left.id = {{ kanban.couleurPastilleGMag.id }};
        etiquette_obj.color.dot_left.hexa = "{{ kanban.couleurPastilleGMag.valeur }}";
        fillColorDot('left');
        {% endif %}
        {% if kanban.etiquetteComplementaireMag > 0 %}
        $(box_further).fadeIn();
        {% endif %}
    }
}

function fillColorEtiquette() {
    let selected_color = etiquette_obj.color.etiquette.hexa;
    $(box_body).css('background-color',selected_color);
    $(box_left).css('background-color',selected_color);
    $(box_right).css('background-color',selected_color);
}

function fillColorDot(orientation) {
    if (orientation == 'left'){
        $('.etiq_left_dot')[0].dotStyle("after","background-color",etiquette_obj.color.dot_left.hexa);
    } else if (orientation == 'right'){
        $('.etiq_right_dot')[0].dotStyle("before","background-color",etiquette_obj.color.dot_right.hexa);
    }
}

function toggleBevel(orientation) {
    if (orientation == 'left'){
        $(box_left).toggleClass('etiq_left_bevel');
    } else if (orientation == 'right'){
        $(box_right).toggleClass('etiq_right_bevel');
    }
}

function toggleDot(orientation) {
    if (orientation == 'left'){
        $(box_left).toggleClass('etiq_left_dot');
    } else if (orientation == 'right'){
        $(box_right).toggleClass('etiq_right_dot');
    }
}