(function ($) {
    "use strict";

    // Global Variables
    var MAX_HEIGHT = 100;

    $.fn.outerHTML = function() {
      return jQuery('<div />').append(this.eq(0).clone()).html();
    };

    $.fn.nesDrag = function(action, options) {

        var rootElem=this;
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "#556b2f",
            backgroundColor: "white"
        }, options);


        // Private Functions
        function debug(e) {
            console.log(e);
        }

        function dump(arr,level) {
            var dumped_text = "";
            if(!level) level = 0;
    
            //The padding given at the beginning of the line.
            var level_padding = "";
            for(var j=0;j<level+1;j++) level_padding += "    ";
    
            if(typeof(arr) == 'object') { //Array/Hashes/Objects
                for(var item in arr) {
                    var value = arr[item];
    
                    if(typeof(value) == 'object') { //If it is an array,
                        dumped_text += level_padding + "'" + item + "' ...\n";
                        dumped_text += dump(value,level+1);
                    } else {
                        dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
                    }
                }
            } else { //Strings/Chars/Numbers etc.
                dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
            }
            return dumped_text;
        }

        if ( action === "init") {
            
            $(rootElem).wrap("<div class='nesdrag'></div>");
            $(rootElem).nestedSortable({
                forcePlaceholderSize: true,
                handle: 'div',
                items: 'li',
                isTree: true,
                toleranceElement: '> div',
                helper: 'clone',
                opacity: .6,
                placeholder: 'placeholder',
                revert: 250,
                tabSize: 25,
                tolerance: 'pointer',
                maxLevels: 4,
                isTree: true,
                expandOnHover: 2000,
                startCollapsed: false,
                isAllowed: function (placeholder, placeholderParent, currentItem) { 
                    
                    if(typeof placeholderParent != "undefined" && $(placeholderParent).hasClass("item")){ 
                        //console.log("1");
                        return false; 
                    }

                    if($(currentItem).hasClass("group") && $(placeholder).parent().children('.item').length>0){
                        //console.log("2");
                        return false;
                    }

                    if($(currentItem).hasClass("item") && $(placeholder).parent().children('.group').length>0){
                        //console.log("3");
                        return false;
                    }
                    manageButtons(rootElem);               
                    
                    //devo gestire lo spostamento anche del blocco gruppo o item nascosto
                    console.log($(currentItem));
                    return true;
                }
            });
            manageButtons(rootElem);
            setInterval(function(){ manageButtons(rootElem); }, 4000);
            
        }
        /*function manageOlBug(){
            $('.group,.item').parent().each(function(id,elem){
                if($(elem).children("ol").length==0){
                    console.log("ol not exists");
                    $(elem).append("<ol></ol>");
                }  
            });
        }*/
    };
})(jQuery);

function generateRandomString(length)
{
    var text = "";
    var possible = "abcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < length; i++ ) text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}
function generateRandomInteger(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}
function openPopup(elem){
    var box_id=$(elem).parent().parent().attr("id");
    var content=$('.'+box_id).html();

    $('#ex1').html(content);
    $('#ex1').dialog();
     $('.jquery-modal.blocker.behind').remove();

}
function openPopupItem(elem){
    var box_id=$(elem).parent().parent().attr("id").replace("item_","");
    var content=$('.item_'+box_id).html();
    
    $('#ex1').html(content);
    $('#ex1').dialog();

}
function addGroupPopupContent(id,group){

    var group_title='gruppo '+id;
    var group_static="";
    var group_hidden="";
    var group_multiple="";
    var group_is_badge="";
    var group_image="";

    if(group){
        group_title=group.title;
        group_image=group.image;
        if(group.static=="1") group_static="checked";
        if(group.hidden=="1") group_hidden="checked";
        if(group.multiple=="1") group_multiple="checked";
        if(group.is_badge=="1") group_is_badge="checked";
    }

    var infoBox="<span class='see_info' rounded_button'><a href=\"#\">?</a></span>";
    var infoNode=$(infoBox);

    //id=id.replace("group_","");

    infoNode.attr('onclick','$("#ex2").html("Titolo del gruppo"); $("#ex2").dialog();');

    var elemPopup=' <li class="group_'+id+' group"><p><label for="groups['+id+'][title]">Titolo '+infoNode.outerHTML()+'</label> <input type="text" name="groups['+id+'][title]" class="group_title" value="'+group_title+'" onchange="$(this).attr(\'value\',$(this).val())">';
    elemPopup+='<input type="hidden" name="groups['+id+'][code]" class="group_code" value="'+id+'">';
    infoNode.attr('onclick','$("#ex2").html("0 = cancellabile, 1 =  non cancellabile"); $("#ex2").dialog();');
    elemPopup+='<br/><label for="groups['+id+'][static]">Statico '+infoNode.outerHTML()+'</label> <input type="checkbox" name="groups['+id+'][static]" class="group_static" '+group_static+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))">';

    infoNode.attr('onclick','$("#ex2").html("0=visibile a tutti,1=visibile solo aagli admin in una vista particolare"); $("#ex2").dialog();');
    elemPopup+='<br/><label for="groups['+id+'][hidden]">Nascosto '+infoNode.outerHTML()+'</label> <input type="checkbox" name="groups['+id+'][hidden]" class="group_hidden" '+group_hidden+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))">';

    infoNode.attr('onclick','$("#ex2").html("Immagine del badge"); $("#ex2").dialog();');
    elemPopup+='<br/><label for="groups['+id+'][image]">Immagine del badge '+infoNode.outerHTML()+'</label> <input type="text" onchange="$(this).attr(\'value\',$(this).val())" name="groups['+id+'][image]" class="group_image" value="'+group_image+'">';

    infoNode.attr('onclick','$("#ex2").html("0=non è un badge,1 è un badge"); $("#ex2").dialog();');
    elemPopup+='<br/><label for="groups['+id+'][is_badge]">Corrisponde ad un badge '+infoNode.outerHTML()+'</label> <input type="checkbox" name="groups['+id+'][is_badge]" class="group_is_badge" '+group_is_badge+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))">';

    infoNode.attr('onclick','$("#ex2").html("0=campo singolo,1=campo multiplo"); $("#ex2").dialog();');
    elemPopup+='<br><label for="groups['+id+'][multiple]">Multiplo '+infoNode.outerHTML()+'</label> <input type="checkbox" name="groups['+id+'][multiple]" class="group_multiple" '+group_multiple+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))"><br/>';
   
    elemPopup+='<input type="button" value="Save" onclick="saveGroup(this,\''+id+'\')">';
    $('.popupData').append(elemPopup);
}
function escapeRegExp(str) {
    return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}

function replaceAll(str, find, replace) {
  return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

function cloneItem(id){
    var randNumber=generateRandomInteger(50000,120000000);
    clone_item_text=$('.item_'+id).html();
    clone_item_list=$('#item_'+id).html();

    var clone_item_list='<li id="item_'+randNumber+'" class="item">'+clone_item_list+'</li>';

    var origin_string="items["+id+"]";
    var destination_string="items["+randNumber+"]";
    clone_item_text=replaceAll(clone_item_text,origin_string,destination_string);
    clone_item_text="<li class='item_"+randNumber+"'>"+clone_item_text+"</li>";
    $('.item_'+id).parent().append($(clone_item_text));
    $('.item_'+randNumber).find('input[value="Save"]').attr("onclick","saveItem(this,"+randNumber+")");
    $('#item_'+id).parent().append($(clone_item_list));
}

function addItemPopupContent(id,item){

    var item_type="";
    var item_labels="";
    var item_options="";
    var item_values="";
    var item_badge_type="";
    var item_placeholder="";
    var item_static="";
    var item_required="";
    var item_image="";
    var item_image_type="";
    var item_prices="";
    var item_texts="";
    var item_code=generateRandomInteger(50000,120000000);

    //nuovi
    var item_is_searchable="";
    var item_is_index="";
    var item_is_searchable_fe="";
    var item_is_contact="";
    var item_is_only_frontend="";
    var item_minimum_salary_trigger="";
    var item_revalidation_trigger="";
    var item_is_on_frontend="";
    var item_is_on_frontend_view="";
    var item_is_and="";
    var item_placeholder_fe="";
    var item_labels_fe="";
    var item_is_on_email="";
    var item_hint_message="";

    if(item){
        item_title=item.title;
        item_code=item.code;
        item_type=item.type;
        item_labels=item.labels;
        item_options=item.options;
        item_values=item.values;
        if(item.placeholder!=null) item_placeholder=item.placeholder;
        item_image=item.image;
        item_prices=item.prices;
        item_texts=item.texts;
        if(item.badgeType=="1") item_badge_type="checked";
        if(item.static=="1") item_static="checked";
        if(item.required=="1") item_required="checked";
        if(item.image_type=="1") item_image_type="checked";

        //nuovi
        if(item.is_searchable=="1") item_is_searchable="checked";
        if(item.is_index=="1") item_is_index="checked";
        if(item.is_searchable_fe=="1") item_is_searchable_fe="checked";
        if(item.is_contact=="1") item_is_contact="checked";
        if(item.is_on_frontend=="1") item_is_on_frontend="checked";
        if(item.is_only_frontend=="1") item_is_only_frontend="checked";
        if(item.is_and=="1") item_is_and="checked";
        item_is_on_frontend_view=item.is_on_frontend_view;

        if(item.minimum_salary_trigger!=null) item_minimum_salary_trigger=item.minimum_salary_trigger;
        if(item.revalidation_trigger=="1") item_revalidation_trigger="checked";

        if(item.placeholder!=null) item_placeholder=item.placeholder;
        if(item.placeholder_fe!=null) item_placeholder_fe=item.placeholder_fe;
        if(item.labels_fe!=null) item_labels_fe=item.labels_fe;
        if(item.is_on_email=="1") item_is_on_email="checked";

        if(item.hint_message!=null) item_hint_message=item.hint_message;

    }


    var infoBox="<span class='see_info' rounded_button'><a href=\"#\">?</a></span>";
    var infoNode=$(infoBox);

    //id=id.replace("item_","");
    
    //if(item && item.randIdx) idx=item.randIdx;
    /*else*/ idx=id;

    var elemPopup=' <li class="item_'+idx+'"><p><br/>';
    
    infoNode.attr('onclick','$("#ex2").html("0 checkbox  Defines a checkbox<br/>1 color Defines a color picker<br/>2 date  Defines a date control (year, month and day (no time))<br/>'+
        '3 datetime  Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone)<br/>'+
        '4 email Defines a field for an e-mail address<br/>5 file  Defines a file-select field and a Browse... button (for file uploads)<br/>'+
        '6 image Defines an image as the submit button<br/>7 month Defines a month and year control (no time zone)<br/>'+
        '8 number    Defines a field for entering a number<br/>9 radio Defines a radio button<br/>'+
        '10 range    Defines a control for entering a number whose exact value is not important (like a slider control)<br/>'+
        '11 tel  Defines a field for entering a telephone number<br/>13 single_line_text Defines a text input<br/>'+
        '14 time   Defines a control for entering a time (no time zone)<br/>15 url  Defines a field for entering a URL<br/>'+
        '16 week Defines a week and year control (no time zone)<br/>17 badge_skill Define an input skill in badge definition form<br/>'+
        '18 text A textarea<br/>19 a select field<br/>20 multi-checkbox a multi checkbox field");  $("#ex2").dialog();');
    elemPopup+="<label>Codice: "+item_code+"</label><br/>";
    elemPopup+='<label for="items['+id+'][type]">Tipo '+infoNode.outerHTML()+'</label> <input type="text" name="items['+id+'][type]" value="'+item_type+'" onchange="$(this).attr(\'value\',$(this).val())"><br/>';
    
    elemPopup+='<input type="hidden" name="items['+id+'][code]" class="item_code" value="'+item_code+'">';

    infoNode.attr('onclick','$("#ex2").html("pattern tipo label1#@#label2#@#label3 ..., riferito alla label che precede il campo"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][labels]">Label '+infoNode.outerHTML()+'</label> <input  class="item_labels" type="text" name="items['+id+'][labels]" value="'+item_labels+'" onchange="$(this).attr(\'value\',$(this).val())"><br/>';

    infoNode.attr('onclick','$("#ex2").html("badget_type - 0 se la badge skill è obbligatoria, 1 altrimenti, ..."); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][options]">Opzioni generiche '+infoNode.outerHTML()+'</label> <input type="text" name="items['+id+'][options]" value="'+item_options+'" onchange="$(this).attr(\'value\',$(this).val())"><br/>';
    
    infoNode.attr('onclick','$("#ex2").html("pattern tipo: value1#@#value2#@#valuel3 ...., riferito ai valori associati al campo"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][values]">Valori '+infoNode.outerHTML()+'</label> <input type="text" name="items['+id+'][values]" value="'+item_values+'" onchange="$(this).attr(\'value\',$(this).val())"><br/>';

    infoNode.attr('onclick','$("#ex2").html("pattern tipo: text1#@#text2#@#textl3 ...., riferito alle stringhe di testo poste a descrizione delle opzioni della select o radio"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][texts]">Stringhe '+infoNode.outerHTML()+'</label> <input class="item_texts"  type="text" name="items['+id+'][texts]" value="'+item_texts+'" onchange="$(this).attr(\'value\',$(this).val())"><br/>';
        
    infoNode.attr('onclick','$("#ex2").html("valore riempitivo del campo"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][placeholder]">Placeholder '+infoNode.outerHTML()+'</label> <input  class="item_placeholder" type="text" name="items['+id+'][placeholder]" value="'+item_placeholder+'" onchange="$(this).attr(\'value\',$(this).val())" value=""><br/>';

    infoNode.attr('onclick','$("#ex2").html("0 basic, 1 plus"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][badge_type]">Questa è una skill plus del badge? '+infoNode.outerHTML()+'</label> <input type="checkbox" name="items['+id+'][badge_type]" '+item_badge_type+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))"><br/>';

    infoNode.attr('onclick','$("#ex2").html("0 cancellabile, 1 statico"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][static]">Statico '+infoNode.outerHTML()+'</label> <input type="checkbox" name="items['+id+'][static]" '+item_static+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))"><br/>';

    //nuovi

    infoNode.attr('onclick','$("#ex2").html("0 altrimenti, 1 è nella ricerca lato BE(candidato)(non ancora usato)"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][is_searchable]">Ricerca BE '+infoNode.outerHTML()+'</label> <input type="checkbox" name="items['+id+'][is_searchable]" '+item_is_searchable+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))"><br/>';

    infoNode.attr('onclick','$("#ex2").html("0 altrimenti, 1 è indicizzato nel DB"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][is_index]">Indice nel DB '+infoNode.outerHTML()+'</label> <input type="checkbox" name="items['+id+'][is_index]" '+item_is_index+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))"><br/>';

    infoNode.attr('onclick','$("#ex2").html("0 altrimenti, 1 è nella ricerca lato FE(annuncio)"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][is_searchable_fe]">Ricerca FE(annuncio) '+infoNode.outerHTML()+'</label> <input type="checkbox" name="items['+id+'][is_searchable_fe]" '+item_is_searchable_fe+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))"><br/>';

    infoNode.attr('onclick','$("#ex2").html("0 altrimenti, 1 informazione di contatto"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][is_contact]">Campo di contatto '+infoNode.outerHTML()+'</label> <input type="checkbox" name="items['+id+'][is_contact]" '+item_is_contact+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))"><br/>';

    infoNode.attr('onclick','$("#ex2").html("0 altrimenti, 1 Presente sul FE(annuncio)"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][is_on_frontend]">Presente sul FE(annuncio) '+infoNode.outerHTML()+'</label> <input type="checkbox" name="items['+id+'][is_on_frontend]" '+item_is_on_frontend+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))"><br/>';

    infoNode.attr('onclick','$("#ex2").html("0 altrimenti, 1 Presente solo su FE(annuncio)"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][is_only_frontend]">Presente solo su FE(annuncio) '+infoNode.outerHTML()+'</label> <input type="checkbox" name="items['+id+'][is_only_frontend]" '+item_is_only_frontend+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))"><br/>';

    infoNode.attr('onclick','$("#ex2").html("0 OR, 1 AND"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][is_and]">Matching AND (OR viceversa)'+infoNode.outerHTML()+'</label> <input type="checkbox" name="items['+id+'][is_and]" '+item_is_and+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))"><br/>';

    infoNode.attr('onclick','$("#ex2").html("Il campo dell\'annuncio, o del curriculum, viene restituito in visualizzazione (0 = NO curriculum NO annuncio; 1 = SI curriculum SI annuncio; 2 = SI annuncio NO curriculum; 3 = NO annuncio SI curriculum)"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][is_on_frontend_view]">Presente in visualizzazione sul FE '+infoNode.outerHTML()+'</label> <input type="number" min="0" max="4" name="items['+id+'][is_on_frontend_view]" value="'+item_is_on_frontend_view+'" onchange="$(this).attr(\'value\',$(this).val())"><br/>';


    infoNode.attr('onclick','$("#ex2").html("Se valorizzato indica il testo da visualizzare vicino al campo all\'atto della compilazione, corrisponde ad un alert in merito ad un possibile aumento di salario minimo del candidato"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][minimum_salary_trigger]">Possibile aumento del salario minimo del candidato '+infoNode.outerHTML()+'</label> <input type="text" name="items['+id+'][minimum_salary_trigger]" value="'+item_minimum_salary_trigger+'" onchange="$(this).attr(\'value\',$(this).val())"><br/>';

    infoNode.attr('onclick','$("#ex2").html("0 altrimenti, 1 genera una rivalidazione nella modifica del Curriculum lato FE"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][revalidation_trigger]">Genera una rivalidazione '+infoNode.outerHTML()+'</label> <input type="checkbox" name="items['+id+'][revalidation_trigger]" '+item_revalidation_trigger+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))"><br/>';




    infoNode.attr('onclick','$("#ex2").html("0 altrimenti, 1 Contenuto nella email inviata alla famiglia con il c.v. del candidato"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][is_on_email]">Inviato tramite email alla famiglia(email con il candidato) '+infoNode.outerHTML()+'</label> <input type="checkbox" name="items['+id+'][is_on_email]" '+item_is_on_email+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))"><br/>';


    infoNode.attr('onclick','$("#ex2").html("valore riempitivo del campo sul frontend(annuncio)"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][placeholder_fe]">Placeholder nell\'annuncio '+infoNode.outerHTML()+'</label> <input  class="item_placeholder_fe" type="text" name="items['+id+'][placeholder_fe]" value="'+item_placeholder_fe+'" onchange="$(this).attr(\'value\',$(this).val())" value=""><br/>';

    infoNode.attr('onclick','$("#ex2").html("pattern tipo label1#@#label2#@#label3 ..., riferito alla label che precede il campo sul frontend(annuncio)"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][labels_fe]">Label nell\'annuncio '+infoNode.outerHTML()+'</label> <input  class="item_labels_fe" type="text" name="items['+id+'][labels_fe]" value="'+item_labels_fe+'" onchange="$(this).attr(\'value\',$(this).val())" value=""><br/>';



    /*-----------------*/

    elemPopup+='<label for="items['+id+'][required]">Obbligatorio</label> <input type="checkbox" name="items['+id+'][required]"  '+item_required+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))"><br/>';

    infoNode.attr('onclick','$("#ex2").html("immagine badge salvata in base64 - size 64x64"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][image]">Immagine '+infoNode.outerHTML()+'</label> <input type="text" name="items['+id+'][image]" value="'+item_image+'" onchange="$(this).attr(\'value\',$(this).val())"><br/>';
    
    infoNode.attr('onclick','$("#ex2").html("0 = base 64 di immagine,1 = classe fontello"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][image_type]">Tipo immagine '+infoNode.outerHTML()+'</label> <input type="checkbox" name="items['+id+'][image_type]"  '+item_image_type+' onchange="$(this).attr(\'checked\',$(this).prop(\'checked\'))"><br/>';

    infoNode.attr('onclick','$("#ex2").html("pattern tipo 12#@#0#@#5, riferito al numero di crediti associato alle opzioni del campo, dove gli zeri sono opzioni senza prezzo"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][prices]">Prezzi '+infoNode.outerHTML()+'</label> <input type="text" name="items['+id+'][prices]" value="'+item_prices+'" onchange="$(this).attr(\'value\',$(this).val())"><br/>';


    infoNode.attr('onclick','$("#ex2").html("Testo del tooltip o help"); $("#ex2").dialog();');
    elemPopup+='<label for="items['+id+'][hint_message]">Messaggio di help '+infoNode.outerHTML()+'</label> <input type="text" name="items['+id+'][hint_message]" value="'+item_hint_message+'" onchange="$(this).attr(\'value\',$(this).val())"><br/>';

    elemPopup+='<input type="button" value="Save" onclick="saveItem(this,\''+id+'\')">';
    $('.popupData').append(elemPopup);
}
function manageButtons(rootElem){

    //console.log("manageButtons"); 
    $(rootElem).find("div.menuDiv").each(function(id,elem){
        var canAddGroups="";
        var canAddItems="";
        //console.log($(elem).parent());
        var num_groups=$(elem).parent().children("ol").children(".group").length;
        var num_items=$(elem).parent().children("ol").children(".item").length;

        if(num_groups>0) canAddGroups="active";
        if(num_items>0) canAddItems="active";
        if((num_groups+num_items)==0) canAddGroups=canAddItems="active";

        $(elem).find(".add_item,.add_group,.see_group,.remove_group").remove();

        $(elem).append("<span class='remove_group rounded_button'>X</span>");
        $(elem).append("<span class='add_item "+canAddItems+" rounded_button'>+i</span>");
        $(elem).append("<span class='add_group "+canAddGroups+" rounded_button'>+g</span>");
        $(elem).append("<span class='see_group rounded_button'><a href='#ex1'>op</a></span>");
    });

    $(rootElem).find(".add_group.active").unbind("click");
    $(rootElem).find(".add_group.active").each(function(id,elem){
        $(elem).click(function(){
            console.log("add group");
            
            var randNumber=generateRandomInteger(50000,120000000);
            addGroupPopupContent(randNumber);
            var new_group='<li id="group_'+randNumber+'" class="group"><div class="menuDiv">New Group</div><ol><div class="dummy" data-id="0"></div></ol></li>';
            $(elem).parent().parent().children("ol").append(new_group);
            manageButtons(rootElem);
        });
    });
    
    $(rootElem).find(".remove_group").unbind("click");
    $(rootElem).find(".remove_group").each(function(id,elem){
        $(elem).click(function(){
            if($(elem).parent().parent().find("ol").children("li").length == 0){ 
                parent_id=$(elem).parent().parent().attr("id");
                $(elem).parent().parent().remove();
                $('.'+parent_id).remove();
            }else{
                alert("Non puoi cancellare il gruppo perchè possiede degli elementi all'interno");
            }
        });
    });

    $(rootElem).find(".remove_item").unbind("click");
    $(rootElem).find(".remove_item").each(function(id,elem){
        $(elem).click(function(){
            if($(elem).parent().parent().find("ol").children().length == 0){ 
                parent_id=$(elem).parent().parent().attr("id");
                $(elem).parent().parent().remove();
                $('.'+parent_id).remove();
            }else{
                alert("Non puoi cancellare il gruppo perchè possiede degli elementi all'interno");
            }
        });
    });
    $(rootElem).find(".clone_item").unbind("click");
    $(rootElem).find(".clone_item").click(function(){
        id=$(this).parent().parent().attr("id").replace("item_","");
        console.log(id);
        cloneItem(id);
    });

    $(rootElem).find(".add_item.active").unbind("click");
    $(rootElem).find(".add_item.active").each(function(id,elem){
        $(elem).click(function(){
            console.log("add item");
            var randNumber=generateRandomInteger(50000,120000000);
            addItemPopupContent(randNumber);
            var new_item='<li id="item_'+randNumber+'" class="item"><div>New Item <span class="see_item_'+randNumber+' see_item rounded_button"><a href=\'#ex1\'>op</a></span>';
            new_item+='<span class="remove_item rounded_button">X</span> <span class="clone_item rounded_button">C</span>';
            new_item+='</div></li>';
            $(elem).parent().parent().children("ol").append(new_item);
            manageButtons(rootElem);
            $('.see_item_'+randNumber).click(function(id,elem){
                console.log(randNumber);
                openPopupItem(this);
            });
        });
    });

    $(rootElem).find(".see_group").unbind("click");
    $(rootElem).find(".see_group").each(function(id,elem){
        $(elem).click(function(){
            openPopup(this);
        });
    });
    $(rootElem).find(".see_item").unbind("click");
    $(rootElem).find(".see_item").each(function(id,elem){
        $(elem).click(function(){
            openPopupItem(this);
        });
    });
       
}