jQuery(document).on("change", "select[id^=TERM_]", function () {
    var $dropOption = $(this).find("option:selected");
    $dropOption.parent().nextAll("input:first").val($dropOption.text() + "|" + $dropOption.val()).trigger('change');
});

var taxonomyValidator = function () {
    taxonomyValidator.prototype.Validate = function (value) {
        var isError = false;
        var errorMessage = ""
        if (value === "|" || value === "" || value == undefined) {
            isError = true;
            errorMessage = "You can't leave this blank.";
        }
        return new SPClientForms.ClientValidation.ValidationResult(isError, errorMessage);
    };
};

var jslinkTemplates = window.jslinkTemplates || {};
jslinkTemplates.Taxonomy = function () {


    var currentlySelectedTerms;
    var internalTermCounter;

    function _editMode(ctx) {
        // register our "get value callback" method
        var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
        formCtx.registerGetValueCallback(formCtx.fieldName, jslinkTemplates.Taxonomy.getValue.bind(null, formCtx.fieldName));

        var validators = new SPClientForms.ClientValidation.ValidatorSet();
        validators.RegisterValidator(new taxonomyValidator());
        formCtx.registerValidationErrorCallback(formCtx.fieldName,
            function (errorResult) {
                SPFormControl_AppendValidationErrorMessage("TAX_" + formCtx.fieldName, errorResult);
            }
        );

        formCtx.registerClientValidator(formCtx.fieldName, validators); 

        _loadField(formCtx.fieldName, ctx.CurrentFieldSchema.SspId, ctx.CurrentFieldSchema.TermSetId, ctx.CurrentFieldValue);

        return "<select id='TAX_" + formCtx.fieldName + "' style='display:block; width:100%;' termindex='0'><option>Loading...</option></select>" +
            "<input type='hidden' id='TAXVALUE_" + formCtx.fieldName + "' />";
    };

    function _loadField(fieldName, sspId, termSetId, currentValue) {
        //jQuery(document).ready(function () {
        //  jQuery('h3#'+fieldName+' nobr').append("<span id='"+fieldName+"_loading' style='margin-left:8px;display=none;'><img  height='15px' id='TAX_loading' src='/sites/test/Style Library/RAG/Taxonomy/spinner.gif'/></span>");
        //});

        // reset the current terms array
        currentlySelectedTerms = [];

        // wait for the page to render
        jQuery(document).ready(function () {

            var context = new SP.ClientContext.get_current();
            var taxonomySession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);

            var termStore = taxonomySession.get_termStores().getById(sspId);
            var termSet = termStore.getTermSet(termSetId);

            var clonedArray = [];

            if (currentValue && currentValue.length > 0) {
                // pull the Id from the current value
                var currentTermId = currentValue.split("|")[1];
                var currentTerm = termSet.getTerm(currentTermId);

                context.load(currentTerm);
                context.executeQueryAsync(
                    function () {

                        // retrieve the full path .. this will include all of the parent terms too 
                        var fullPath = currentTerm.get_pathOfTerm();

                        // they are semi-colon delimited, so if we perform a split we end up
                        // with an array containing all of the currently selected values
                        currentlySelectedTerms = fullPath.split(";");
                        clonedArray = currentlySelectedTerms.slice();

                        // now we can proceed with rendering...
                        _renderDropDowns(fieldName, sspId, termSetId, clonedArray);
                    },
                    function () {
                        alert("Call failed. Error: " + args.get_message());
                    });
            }
            else {
                // there is no current value, so just go
                _renderDropDowns(fieldName, sspId, termSetId, clonedArray);
            }
        });
    };

    function _renderDropDowns(fieldName, sspId, termSetId, clonedArray) {
        //jQuery("#"+fieldName+"_loading").show();
        var elementId = "#TAX_" + fieldName;

        var context = new SP.ClientContext.get_current();
        var taxonomySession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);

        var termStore = taxonomySession.get_termStores().getById(sspId);
        var termSet = termStore.getTermSet(termSetId);

        var terms = termSet.get_terms();
        context.load(terms);
        context.executeQueryAsync(
            function () {
                jQuery(elementId).empty(); // clear out the existing options

                var html = "<option></option>";

                var termEnumerator = terms.getEnumerator();

                // Unterschiedliche html erstellen, um die Sortierung anzupassen
                var termSetHtml = "";
                var termHtml = "";
                var isNewForm = false;
                if (document.location.pathname.substr(document.location.pathname.length - 12).toLowerCase() == 'newform.aspx') { isNewForm = true }
                while (termEnumerator.moveNext()) {
                    var currentHtml = "";
                    var currentTerm = termEnumerator.get_current();
                    // Filter deprecated Terms bei Neuanlage (NewForm.aspx)
                    if (!isNewForm || !currentTerm.get_isDeprecated()) {
                        currentHtml += "<option value='" + currentTerm.get_id() + "'";

                        // if the current option being rendered is in our array
                        // then make sure the option is selected
                        //if (contains(currentlySelectedTerms, currentTerm.get_name())) {
                        if (clonedArray != undefined) {
                            if (currentTerm.get_name() == clonedArray[0]) {
                                currentHtml += " selected='selected'";
                            }
                        }

                        var termName = currentTerm.get_name();
                        if (currentTerm.get_termsCount() > 0) {
                            currentHtml += ">" + "&#x3E; " + termName + "</option>";
                            termSetHtml += currentHtml;
                        }
                        else {
                            currentHtml += ">" + termName + "</option>";
                            termHtml += currentHtml;
                        }
                    }
                }

                html += termSetHtml + termHtml;

                // add the options
                jQuery(elementId).append(html).change(function () {
                    var $dropOption = $(this).find("option:selected");
                    $dropOption.parent().nextAll("input:first").val($dropOption.text() + "|" + $dropOption.val()).trigger('change');
                });
                //jQuery("#"+fieldName+"_loading").hide();

                // check if we selected one of them
                var selectedOption = jQuery(elementId + " option[selected='selected']");
                if (selectedOption.length > 0) {
                    // simulate the same "sender.target" property used in a click event
                    var newSender = {
                        'target': selectedOption[0],
                        'fieldName': fieldName
                    };
                    // recursively render the child drop downs
                    _selectTerm(newSender, clonedArray);
                }

                jQuery(elementId + " option").click(jslinkTemplates.Taxonomy.selectTerm);
                var $dropOption = jQuery(elementId + " option:selected")
                $dropOption.parent().nextAll("input:first").val($dropOption.text() + "|" + $dropOption.val()).trigger('change');
            },
            function (x, args) {
                alert("Call failed. Error: " + args.get_message());
            }
        );
    };

    function contains(a, obj) {
        for (var i = 0; i < a.length; i++) {
            if (a[i] === obj) {
                return true;
            }
        }
        return false;
    }

    function _selectTerm(sender, clonedArray) {
        var termId = jQuery(sender.target).val();
        var termLabel = jQuery(sender.target).text();

        // kill off any existing child-drop-downs (recursively)
        // before we re-render them below
        var selectElement = jQuery(sender.target).parent()[0];
        removeChildDropDowns(selectElement);

        var termIndex = 0;
        var selParent = jQuery(sender.target).parent("[id^=TERM_]");
        if (selParent.length > 0) {
            termIndex = parseInt(selParent.attr("termindex")) + 1;
        }

        if (termId == "") {
            jQuery(sender.target).parent().siblings("input").val("")
            return;
        }

        // update the hidden input field with the currently selected value
        // this should be in the value LABEL|GUID
        //jQuery(sender.target).parent().siblings("input").val(termLabel + "|" + termId);


        var context = new SP.ClientContext.get_current();
        var taxonomySession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);

        var term = taxonomySession.getTerm(termId);
        var childTerms = term.get_terms();

        context.load(term);
        context.load(childTerms);
        context.executeQueryAsync(
            function () {
                // only execute if it has child terms
                if (term.get_termsCount() > 0) {
                    // start off with a select containing a blank option
                    //jQuery("#"+sender.fieldName+"_loading").show();
                    var html = "<select style='display:block; margin-top: 5px; width:100%;' id='TERM_" + termId + "' termindex='" + termIndex + "'>"; //<option></option>
                    var termEnumerator = childTerms.getEnumerator();
                    var termSetHtml = "";
                    var termHtml = "";
                    var isNewForm = false;
                    if (document.location.pathname.substr(document.location.pathname.length - 12).toLowerCase() == 'newform.aspx') { isNewForm = true }
                    while (termEnumerator.moveNext()) {
                        var currentHtml = "";
                        var currentTerm = termEnumerator.get_current();
                        // Filter deprecated Terms bei Neuanlage (NewForm.aspx)
                        if (!isNewForm || !currentTerm.get_isDeprecated()) {
                            currentHtml += "<option value='" + currentTerm.get_id() + "'";

                            // if the current option being rendered is in our array
                            // then make sure the option is selected
                            //if (contains(currentlySelectedTerms, currentTerm.get_name())) {
                            if (clonedArray != undefined) {
                                if (currentTerm.get_name() == clonedArray[termIndex + 1]) {
                                    currentHtml += " selected='selected'";
                                }
                            }

                            var termName = currentTerm.get_name();
                            if (currentTerm.get_termsCount() > 0) {
                                currentHtml += ">" + "&#x3E; " + termName + "</option>";
                                termSetHtml += currentHtml;
                            }
                            else {
                                currentHtml += ">" + termName + "</option>";
                                termHtml += currentHtml;
                            }
                        }
                    }

                    html += termSetHtml + termHtml;

                    // add the new drop-downs
                    jQuery(sender.target).parent().after(html);
                    //jQuery("#"+sender.fieldName+"_loading").hide();


                    // check if we selected one of them when we added them
                    var selectedOption = jQuery('#TERM_' + termId + " option[selected='selected']");
                    if (selectedOption.length == 0 & (clonedArray == undefined || clonedArray.length == 0)) {
                        selectedOption = jQuery('#TERM_' + termId + " option:first").attr('selected', 'selected');
                    }
                    if (selectedOption.length > 0) {
                        // store current selection data
                        selectedOption.parent().nextAll("input:first").val(selectedOption.text() + "|" + selectedOption.val()).trigger('change');
                        // simulate the same "sender.target" property used in a click event
                        var newSender = {
                            'target': selectedOption[0]
                        };
                        // recursively render the child drop downs
                        _selectTerm(newSender, clonedArray);
                    }

                    // and add a click event
                    jQuery("#TERM_" + termId + " option").click(jslinkTemplates.Taxonomy.selectTerm);
                }
                var $newDropOption = jQuery("#TERM_" + termId + " option:selected")
                if ($newDropOption.length == 0) {
                    $newDropOption = jQuery("#TERM_" + termId + " option:first")
                }
                var $input = $newDropOption.parent().nextAll("input:first")
                $input.val($newDropOption.text() + "|" + $newDropOption.val()).trigger('change');
            },
            function (x, args) {
                alert("Call failed. Error: " + args.get_message());
            }
        );
    };

    function removeChildDropDowns(selectElement) {

        // the ~ means "any following siblings" and ignores any siblings
        // further up the chain
        jQuery("#" + selectElement.id + " ~ select").remove();
    };

    function _getValue(fieldName) {
        // retrieve value from the relevant hidden input
        var hiddenValue = jQuery("#TAXVALUE_" + fieldName).val();

        // return it
        return hiddenValue;
    };


    return {
        editMode: _editMode,
        selectTerm: _selectTerm,
        getValue: _getValue,
        loadField: _loadField
    }
}();