function setupColumnChoices() {
    var columnchoices = jQuery("#columnchoices");
    var options = jQuery('#columnchoices div');
    options.each(function (index) {
        opt = jQuery(this);
        // remove event handlers
        opt.off("click");
        // This is a disabled group label
        if (!opt.find('span').length) {
            opt.css('color', "red");
            return;
        }
        opt.css('cursor', "move");
        opt.on("click", function (event) {
            var span = jQuery(this).find('span:first-child');
            var id = span.html();

            //span.parent().removeChild(span);
            span.detach();
            // remove html entities so use firstChild.nodeValue instead of innerHTML
            var text = jQuery(this).html();
            jQuery(this).remove();

            var uls = jQuery("#columnmatches");
            if (uls) {
                uls.append("<div id='column" + id + "'>"
                    + "<div class='sortablehandle' style='width:200px;display:inline-block;'>" + text + "</div>"
                    + "<input type='text' value='" + text + "' style=margin-left:20px;' />"
                    + "</div>");
                setupColumnLis();
            }

            setupCustomColumnField("#jevcolumns");
        });

    });
}

var colsbeingsorted = false;

function setupColumnLis() {

    var sortable = document.querySelector('#columnmatches');

    sortable.setAttribute('data-sortable', Sortable.create(sortable, {
        onStart: function (event, ui) {
            colsbeingsorted = true;
        },
        onEnd: function (event, ui) {
            setTimeout(function () {
                colsbeingsorted = false;
                setupCustomColumnField("#jevcolumns");
            }, 200);
        },
        filter: '#columnmatches_heading',
        handle: '.sortablehandle'
    }));

    var lis = jQuery("#columnmatches > div");

    lis.each(function (i) {
        item = jQuery(this);
        if (item.prop("id") == "columnmatches_heading") {
            return;
        }
        item.css("cursor", "pointer");
        // remove event handlers
        item.off("click");

        item.on("click", function (event) {
            if (colsbeingsorted) {
                return;
            }

            if (event.target.nodeName.toUpperCase() == "INPUT") {
                return;
            }

            // remove label input
            var text = jQuery(this).find("input").val();
            jQuery(this).find('input').remove();
            var id = jQuery(this).prop("id").replace("column", "");

            jQuery(this).remove()
            var sel = jQuery("#columnchoices");
            if (sel) {
                sel.append("<div>" + text + "<span style='display:none'>" + id + "</span></div>");

                setupColumnChoices();
            }
            ;
            setupCustomColumnField("#jevcolumns");
        });

        var input = item.find('input');
        if (input.length) {
            input.on('change', function () {
                setupCustomColumnField("#jevcolumns");
            });
        }
    });
}

function setupCustomColumnField(fieldid) {
    // setup custom field
    var customfield = jQuery(fieldid);
    if (!customfield) return;
    customfield.val("");
    var lis = jQuery("#columnmatches div");
    lis.each(function (i) {
        if (!jQuery(this).prop("id")) return;
        if (jQuery(this).prop("id") == "columnmatches_heading") {
            return;
        }
        var item = jQuery(this).clone();
        var input = item.find('input');
        var value = input.val();
        // now remove the input element to just get the field label
        input.remove();
        if (customfield.val() != "") {
            customfield.val(customfield.val() + "||");
        }
        // get the contained div
        item = item.find("div");
        customfield.val(customfield.val() + jQuery(this).prop("id").replace("column", "") + "|" + item.html() + "|" + value);
    });
}
