anchor.diff:      var stepOrder = 0;
       var img = "";
       <%}%>
  -    
  -    
  -    var idpNumber = 0;
  -    var reqPathAuth = 0;
  -    var localAuthNumber = 0;
  -    
  -    jQuery(document).ready(function () {
  -        
  -        $("#createApp").click(function () {
  -            showAllErrors();
  -        });
  -        
  -        var addTemplate = $("#addTemplate");
  -        var myCodeMirror = CodeMirror.fromTextArea(scriptTextArea, {
  -            theme: "mdn-like",
  -            keyMap: "sublime",
  -            mode: "javascript",
  -            lineNumbers: true,
  -            lineWrapping: true,
  -            lineWiseCopyCut: true,
  -            pasteLinesPerSelection: true,
  -            extraKeys: {
  -                "Ctrl-Space": "autocomplete",
  -                "F11": function (myCodeMirror) {
  -                    myCodeMirror.setOption("fullScreen", !myCodeMirror.getOption("fullScreen"));
  -                },
  -                "Esc": function (myCodeMirror) {
  -                    if (myCodeMirror.getOption("fullScreen")) myCodeMirror.setOption("fullScreen", false);
  -                },
  -                "Shift-Ctrl-F": function (myCodeMirror) {
  -                    CodeMirror.commands["selectAll"](myCodeMirror);
  -                    autoFormatSelection(myCodeMirror);
  -                }
  -            },
  -            indentWithTabs: true,
  -            autoCloseBrackets: true,
  -            matchBrackets: true,
  -            gutters: ["CodeMirror-lint-markers", "CodeMirror-linenumbers", "CodeMirror-foldgutter"],
  -            foldGutter: true,
  -            lint: true,
  -            showCursorWhenSelecting: true,
  -            styleActiveLine: true,
  -        });
  -        
  -        function showAllErrors() {
  -            myCodeMirror.operation(function () {
  -                var warnCount = 0;
  -                var errorCount = 0;
  -                JSHINT(myCodeMirror.getValue());
  -                for (var i = 0; i < JSHINT.errors.length; ++i) {
  -                    var err = JSHINT.errors[i];
  -                    if (!err) {
  -                        continue;
  -                    } else if (err.code.lastIndexOf("W", 0) === 0) {
  -                        warnCount++;
  -                    } else {
  -                        errorCount++;
  -                    }
  -                }
  -                
  -                if (errorCount > 0) {
  -                    CARBON.showConfirmationDialog('This script will not be evaluated since is has Errors, But it will be saved. ' +
  -                        'Do you want to continue? ',
  -                        submitFormWithoutCheck, null);
  -                } else if (warnCount > 0) {
  -                    CARBON.showConfirmationDialog('This script will not be evaluated since is has Warnings, But it will be saved. ' +
  -                        'Do you want to continue? ',
  -                        submitFormWithoutCheck, null);
  -                } else {
  -                    submitForm();
  -                }
  -            });
  -        }
  -        
  -        function submitFormWithoutCheck() {
  -            $("#enableScript").prop("checked", false);
  -            $("#configure-auth-flow-form").submit();
  -        }
  -        
  -        function submitForm() {
  -            $("#configure-auth-flow-form").submit();
  -        }
  -        
  -        $(".CodeMirror").append('<div id="toggleEditorSize" class="maximizeIcon" title="Toggle Full Screen"></div>');
  -        
  -        $("#toggleEditorSize").click(function () {
  -            if (myCodeMirror.getOption("fullScreen")) {
  -                $(this).addClass("maximizeIcon");
  -                $(this).removeClass("minimizeIcon");
  -                myCodeMirror.setOption("fullScreen", false);
  -                $("#codeMirrorTemplate").show();
  -            } else {
  -                $(this).addClass("minimizeIcon");
  -                $(this).removeClass("maximizeIcon");
  -                myCodeMirror.setOption("fullScreen", true);
  -                $("#codeMirrorTemplate").hide();
  -            }
  -        });
  -        
  -        function getSelectedRange() {
  -            return {from: myCodeMirror.getCursor(true), to: myCodeMirror.getCursor(false)};
  -        }
  -        
  -        function autoFormatSelection(cm) {
  -            var range = getSelectedRange();
  -            cm.autoFormatRange(range.from, range.to);
  -        }
  -        
  -        jQuery('#ReqPathAuth').hide();
  -        jQuery('#authenticationConfRow').hide();
  -        jQuery('#advanceAuthnConfRow').hide();
  -        jQuery('#permissionConfRow').hide();
  -        jQuery('#conditional_script_dropdown').hide();
  -        jQuery('body').delegate("h2.trigger", 'click', bindHeadingCollapse);
  -        
  -        function bindHeadingCollapse() {
  -            if (jQuery(this).next().is(":visible")) {
  -                this.className = "active " + this.className;
  -            } else {
  -                this.className = this.className.replace(/\bactive\b/g, "");
  -            }
  -            jQuery(this).next().slideToggle("fast");
  -            
  -            var $el = $(this);
  -            var $container = $el.siblings('ul');
  -            if ($el === $("#template_list .type > h2")) {
  -                $container.slideToggle(function () {
  -                    if ($container.css('display') == 'none') {
  -                        $el.addClass('active');
  -                    }
  -                    else {
  -                        $el.removeClass('active');
  -                    }
  -                });
  -            }
  -            return false; //Prevent the browser jump to the link anchor
  -        }
  -        
  -        jQuery('#stepsAddLink').click(function () {
  -            stepOrder++;
  -            jQuery('#stepsConfRow .steps').append(jQuery('<h2 id="step_head_' + stepOrder +
  -                '" class="sectionSeperator trigger active step_heads" style="background-color: beige; clear: both;"><input type="hidden" value="' + stepOrder + '" name="auth_step" id="auth_step"><a class="step_order_header" href="#">Step ' + stepOrder + '</a><a onclick="deleteStep(this);return false;" href="#" class="icon-link" style="background-image: url(images/delete.gif);float:right;width: 9px;"></a></h2><div class="toggle_container sectionSub step_contents" style="margin-bottom:10px;" id="step_dev_' + stepOrder + '"> <div style="padding-bottom: 5px"><table class="carbonFormTable"><tr><td><input type="checkbox" style="vertical-align: middle;" id="subject_step_' + stepOrder + '" name="subject_step_' + stepOrder + '" class="subject_steps" onclick="setSubjectStep(this)"><label for="subject_step_' + stepOrder + '" style="cursor: pointer;">Use subject identifier from this step</label></td></tr><tr><td><input type="checkbox" style="vertical-align: middle;" id="attribute_step_' + stepOrder + '" name="attribute_step_' + stepOrder + '" class="attribute_steps" onclick="setAttributeStep(this)" ><label for="attribute_step_' + stepOrder + '" style="cursor: pointer;">Use attributes from this step</label></td></tr></table></div><h2 id="local_auth_head_' + stepOrder + '" class="sectionSeperator trigger active" style="background-color: floralwhite;"><a href="#">Local Authenticators</a></h2><div class="toggle_container sectionSub" style="margin-bottom:10px;" id="local_auth_head_dev_' + stepOrder + '"><table class="styledLeft" width="100%" id="local_auth_table_' + stepOrder + '"><thead><tr><td><select name="step_' + stepOrder + '_local_oauth_select" style="float: left; min-width: 150px;font-size:13px;"><%=localAuthTypes.toString()%></select><a id="localOptionAddLinkStep_' + stepOrder + '" onclick="addLocalRow(this,' + stepOrder + ');return false;" class="icon-link claimMappingAddLinkss claimMappingAddLinkssLocal" style="background-image:url(images/add.gif);">Add Authenticator</a></td></tr></thead></table> </div><%if (enabledIdpType.length() > 0) { %> <h2 id="fed_auth_head_' + stepOrder + '" class="sectionSeperator trigger active" style="background-color: floralwhite;"><a href="#">Federated Authenticators</a></h2><div class="toggle_container sectionSub" style="margin-bottom:10px;" id="fed_auth_head_dev_' + stepOrder + '"><table class="styledLeft" width="100%" id="fed_auth_table_' + stepOrder + '"><thead> <tr><td><select name="idpAuthType_' + stepOrder + '" style="float: left; min-width: 150px;font-size:13px;"><%=enabledIdpType.toString()%></select><a id="claimMappingAddLinkss" onclick="addIDPRow(this,' + stepOrder + ');return false;" class="icon-link claimMappingAddLinkssIdp" style="background-image:url(images/add.gif);">Add Authenticator</a></td></tr></thead></table></div><%}%></div>'));
  -            if (!$('#stepsConfRow').is(":visible")) {
  -                $(jQuery('#stepsConfRow')).toggle();
  -            }
  -            if (stepOrder == 1) {
  -                $('#subject_step_' + stepOrder).attr('checked', true);
  -                $('#attribute_step_' + stepOrder).attr('checked', true);
  -            }
  -        });
  -        
  -        populateTemplates();
  -        
  -        function populateTemplates() {
  -            var templates = $.parseJSON('<%=templatesJson%>');
  -            $.each(templates, function (category, categoryTemplates) {
  -
  -                var tempType = '<li class="type"><h2  class = "sectionSeperator trigger">' +
  -                    '<a href="#" title="' + category + '">' + category + '</a></h2></li>';
  -                var details = '<ul class="normal details">';
  -                
  -                $.each(categoryTemplates, function (i, template) {
  -                    details += '<li class="name"><a class="templateName" href="#" data-toggle="template-link" ' +
  -                        'data-type-name="' + template.name + '" title="' + template.name + '"><img src="' + template.img + '"/>' +
  -                        '<span>' + template.name + '</span></a><span  title="' + template.help + '" class="helpLink">' +
  -                        '<img  style="float:right;" src="./images/help-small-icon.png"></span></li>';
  -                });
  -                details += '</ul>';
  -                $(tempType).appendTo('#template_list').append(details);
  -            });
  -            
  -            $('[data-toggle=template-link]').click(function (e) {
  -                e.preventDefault();
  -                var typeName = $(this).data('type-name');
  -                var data;
  -                var tempName;
  -                var templateObj = null;
  -                
  -                $.each(templates, function (category, categoryTemplates) {
  -                    $.each(categoryTemplates, function (i, template) {
  -                        if (template.name === typeName) {
  -                            data = template.code.join("\n");
  -                            tempName = template.name;
  -                            templateObj = template;
  -                        }
  -                    });
  -                });
  -    
  -                if (templateObj === null) {
  -                    return;
  -                }
  -                
  -                var cursor = doc.getCursor();
  -                var line = doc.getLine(cursor.line); // get the line contents
  -                var pos = {
  -                    line: cursor.line,
  -                    ch: line.length - 1
  -                };
  -                
  -                var editorContent = doc.getValue();
  -                var authNTemplateInfoTemplate = $('#template-info')[0].innerHTML;
  -                var compiledTemplate = Handlebars.compile(authNTemplateInfoTemplate);
  -                var renderedTemplateInfo = compiledTemplate(templateObj);
  -                showPopupConfirm(renderedTemplateInfo, templateObj.title, 350, "OK", "Cancel", doReplaceRange, null);
  -                
  -                function doReplaceRange() {
  -                    myCodeMirror.setValue("");
  -                    doc.replaceRange('\n// ' + tempName + ' from Template...\n\n' + data + '\n\n// End of ' + tempName + '.......\n', pos);
  -                    highlightNewCode();
  -                    removeExistingSteps();
  -                    addNewSteps(templateObj);
  -                }
  -                if (editorContent.length === 0) {
  -                    $('#template-replace-warn').hide();
  -                }
  -            });
  -
  -            function addNewSteps(templateObj) {
  -                var steps = templateObj.authenticationSteps;
  -                for (var i = 1; i <= steps; i++) {
  -                    var stepConfig = templateObj.defaultAuthenticators[i.toString()];
  -                    if (stepConfig !== null) {
  -                        $('#stepsAddLink').click();
  -                        $.each(stepConfig.local, function (idx, value) {
  -                            if ($.inArray(value, localAuthenticators) > -1) {
  -                                $("'select[name=step_" + i + "_local_oauth_select] option[value=" + value + "]'")
  -                                    .attr('selected', 'selected');
  -                                $('#localOptionAddLinkStep_' + i).click();
  -                            }
  -                        });
  -                    }
  -                }
  -            }
  -
  -            function removeExistingSteps() {
  -                for (var i = $('.step_heads').length; i > 0; i--) {
  -                    $('#subject_step_' + stepOrder).removeAttr('checked');
  -                    $('#attribute_step_' + stepOrder).removeAttr('checked');
  -                    $('#step_head_' + stepOrder).children('.icon-link').click();
  -                }
  -                stepOrder = 0;
  -            }
  -            
  -            function highlightNewCode() {
  -                var coordinates = myCodeMirror.coordsChar(myCodeMirror.cursorCoords());
  -                var coordinatesLTB = myCodeMirror.cursorCoords();
  -                mark = myCodeMirror.markText(cursorCoordsBeforeChange, coordinates, {className: "highlight1"});
  -                $('.CodeMirror-scroll').animate({scrollTop: coordinatesLTB.bottom}, 500, 'linear');
  -                setTimeout(function () {
  -                    mark.clear();
  -                }, 2000);
  -            }
  -        }
  -        
  -        /**
  -         * Temporary function that serves as the local popup customization till carbon-kernel release
  -         * This has also been moved to proper codebase in carbon.ui as this is reusable.
  -         */
  -        function showPopupConfirm(htmlMessage, title, windowHeight, okButton, cancelButton, callback, windowWidth) {
  -            if (!isHTML(htmlMessage)) {
  -                htmlMessage = htmlEncode(htmlMessage);
  -            }
  -            var strDialog = "<div id='dialog' title='" + title + "'><div id='popupDialog'></div>" + htmlMessage + "</div>";
  -            var requiredWidth = 750;
  -            if (windowWidth) {
  -                requiredWidth = windowWidth;
  -            }
  -            var func = function () {
  -                jQuery("#dcontainer").html(strDialog);
  -                if (okButton) {
  -                    jQuery("#dialog").dialog({
  -                        close: function () {
  -                            jQuery(this).dialog('destroy').remove();
  -                            jQuery("#dcontainer").empty();
  -                            return false;
  -                        },
  -                        buttons: {
  -                            "OK": function () {
  -                                if (callback && typeof callback == "function")
  -                                    callback();
  -                                jQuery(this).dialog("destroy").remove();
  -                                jQuery("#dcontainer").empty();
  -                                return false;
  -                            },
  -                            "Cancel": function () {
  -                                jQuery(this).dialog('destroy').remove();
  -                                jQuery("#dcontainer").empty();
  -                                return false;
  -                            },
  -                        },
  -                        height: windowHeight,
  -                        width: requiredWidth,
  -                        minHeight: windowHeight,
  -                        minWidth: requiredWidth,
  -                        modal: true
  -                    });
  -                } else {
  -                    jQuery("#dialog").dialog({
  -                        close: function () {
  -                            jQuery(this).dialog('destroy').remove();
  -                            jQuery("#dcontainer").empty();
  -                            return false;
  -                        },
  -                        height: windowHeight,
  -                        width: requiredWidth,
  -                        minHeight: windowHeight,
  -                        minWidth: requiredWidth,
  -                        modal: true
  -                    });
  -                }
  -                
  -                if (okButton) {
  -                    $('.ui-dialog-buttonpane button:contains(OK)').attr("id", "dialog-confirm_ok-button");
  -                    $('#dialog-confirm_ok-button').html(okButton);
  -                }
  -                if (cancelButton) {
  -                    $('.ui-dialog-buttonpane button:contains(Cancel)').attr("id", "dialog-confirm_cancel-button");
  -                    $('#dialog-confirm_cancel-button').html(cancelButton);
  -                }
  -                
  -                
  -                jQuery('.ui-dialog-titlebar-close').click(function () {
  -                    jQuery('#dialog').dialog("destroy").remove();
  -                    jQuery("#dcontainer").empty();
  -                    jQuery("#dcontainer").html('');
  -                });
  -                
  -            };
  -            if (!pageLoaded) {
  -                jQuery(document).ready(func);
  -            } else {
  -                func();
  -            }
  -            
  -            function isHTML(str) {
  -                var a = document.createElement('div');
  -                a.innerHTML = str;
  -                
  -                for (var c = a.childNodes, i = c.length; i--;) {
  -                    if (c[i].nodeType == 1) return true;
  -                }
  -                
  -                return false;
  -            }
  -        }
  -        
  -        var cursorCoordsBeforeChange, cursorCoordsAfterChange, mark, startLine;
  -        var doc = myCodeMirror.getDoc();
  -        var editorContent = doc.getValue();
  -        
  -        myCodeMirror.on("change", function (instance, ch) {
  -            cursorCoordsAfterChange = myCodeMirror.coordsChar(myCodeMirror.cursorCoords());
  -            
  -        });
  -        myCodeMirror.on("beforeChange", function (instance, changeObj) {
  -            cursorCoordsBeforeChange = myCodeMirror.coordsChar(myCodeMirror.cursorCoords());
  -            startLine = cursorCoordsBeforeChange.line;
  -        });
  -        myCodeMirror.on('inputRead', function onChange(editor, input) {
  -            if (input.text[0] === ';' || input.text[0] === ' ') {
  -                return;
  -            }
  -            CodeMirror.commands.autocomplete(myCodeMirror, null, {completeSingle: false})
  -        });
  -        
  -        var contentToggle = 0;
  -        
  -        $("#enableScript").click(function () {
  -            checkScriptEnabled();
  -        });
  -        
  -        $("#editorRow").hide();
  -        checkScriptEnabled();
  -        
  -        function checkScriptEnabled() {
  -            var scriptEnabled = $("#enableScript").is(":checked");
  -            var stepConfigTrigger = $(".authentication_step_config_head");
  -            var editorRow = $("#editorRow");
  -            
  -            if (scriptEnabled) {
  -                stepConfigTrigger.addClass('active');
  -                editorRow.slideDown('fast');
  -            }
  -            
  -            if (editorContent.length == 0) {
  -                contentToggle = 1;
  -            } else {
  -                contentToggle = 0;
  -            }
  -            showHideTemplateList();
  -        }
  -        
  -        addTemplate.click(function (e) {
  -            showHideTemplateList();
  -            e.preventDefault();
  -        });
  -        
  -        function showHideTemplateList() {
  -            var codeMirror = $("#codeMirror");
  -            var templates = $('#codeMirrorTemplate');
  -            
  -            if (contentToggle == 0) {
  -                addTemplate.css("background-image", "url(images/templates.png)");
  -                templates.animate({width: 25}, {duration: 50, queue: false});
  -                codeMirror.animate({marginRight: 26}, {duration: 125, queue: false});
  -                contentToggle = 1;
  -            }
  -            else {
  -                addTemplate.css("background-image", "url(images/template-close.png)");
  -                codeMirror.animate({marginRight: 212}, {duration: 125, queue: false});
  -                templates.animate({width: 210}, {duration: 50, queue: false});
  -                contentToggle = 0;
  -            }
  -        }
  -        
  -    });
  -    
  -    var deletePermissionRows = [];
  -    
  -    function deletePermissionRow(obj) {
  -        if (jQuery(obj).parent().prev().children()[0].value != '') {
  -            deletePermissionRows.push(jQuery(obj).parent().prev().children()[0].value);
  -        }
  -        jQuery(obj).parent().parent().remove();
  -        if ($(jQuery('#permissionAddTable tr')).length == 1) {
  -            $(jQuery('#permissionAddTable')).toggle();
  -        }
  -    }
  -    
  -    function deleteStepRow(obj) {
  -        stepOrder--;
  -        jQuery(obj).parent().parent().remove();
  -        if ($(jQuery('#permissionAddTable tr')).length == 1) {
  -            $(jQuery('#permissionAddTable')).toggle();
  -        }
  -    }
  -    
  -    function deleteIDPRow(obj) {
  -        idpNumber--;
  -        jQuery(obj).parent().parent().remove();
  -        if ($(jQuery('#permissionAddTable tr')).length == 1) {
  -            $(jQuery('#permissionAddTable')).toggle();
  -        }
  -    }
  -    
  -    function deleteStep(obj) {
  -        
  -        var currentStep = parseInt($(obj).parent().find('input[name="auth_step"]').val());
  -        var subjectStep = $('#step_dev_' + currentStep).find('#subject_step_' + currentStep).prop("checked");
  -        var attributeStep = $('#step_dev_' + currentStep).find('#attribute_step_' + currentStep).prop("checked");
  -        if (subjectStep || attributeStep) {
  -            CARBON.showWarningDialog("You can't delete a step which is configured for Attribute selection or Subject identifier.");
  -            return false;
  -        }
  -        
  -        stepOrder--;
  -        jQuery(obj).parent().next().remove();
  -        jQuery(obj).parent().remove();
  -        if ($('.step_heads').length > 0) {
  -            var newStepOrderVal = 1;
  -            $.each($('.step_heads'), function () {
  -                var oldStepOrderVal = parseInt($(this).find('input[name="auth_step"]').val());
  -                
  -                //Changes in header
  -                $(this).attr('id', 'step_head_' + newStepOrderVal);
  -                $(this).find('input[name="auth_step"]').val(newStepOrderVal);
  -                $(this).find('.step_order_header').text('Step ' + newStepOrderVal);
  -                
  -                //Changes in content
  -                var contentDiv = $('#step_dev_' + oldStepOrderVal);
  -                if (contentDiv.length > 0) {
  -                    contentDiv.attr('id', 'step_dev_' + newStepOrderVal);
  -                    
  -                    var subjectStepInput = contentDiv.find('#subject_step_' + oldStepOrderVal);
  -                    subjectStepInput.attr('id', 'subject_step_' + newStepOrderVal);
  -                    subjectStepInput.attr('name', 'subject_step_' + newStepOrderVal);
  -                    contentDiv.find('label[for="subject_step_' + oldStepOrderVal + '"]').attr('for', 'subject_step_' + newStepOrderVal);
  -                    
  -                    var attributeStepInput = contentDiv.find('#attribute_step_' + oldStepOrderVal);
  -                    attributeStepInput.attr('id', 'attribute_step_' + newStepOrderVal);
  -                    attributeStepInput.attr('name', 'attribute_step_' + newStepOrderVal);
  -                    contentDiv.find('label[for="attribute_step_' + oldStepOrderVal + '"]').attr('for', 'attribute_step_' + newStepOrderVal);
  -                    
  -                    contentDiv.find('#local_auth_head_' + oldStepOrderVal).attr('id', 'local_auth_head_' + newStepOrderVal);
  -                    contentDiv.find('#local_auth_head_dev_' + oldStepOrderVal).attr('id', 'local_auth_head_dev_' + newStepOrderVal);
  -                    contentDiv.find('#local_auth_table_' + oldStepOrderVal).attr('id', 'local_auth_table_' + newStepOrderVal);
  -                    contentDiv.find('select[name="step_' + oldStepOrderVal + '_local_oauth_select"]').attr('name', 'step_' + newStepOrderVal + '_local_oauth_select');
  -                    if (contentDiv.find('input[name="step_' + oldStepOrderVal + '_local_auth"]').length > 0) {
  -                        $.each(contentDiv.find('input[name="step_' + oldStepOrderVal + '_local_auth"]'), function () {
  -                            $(this).attr('name', 'step_' + newStepOrderVal + '_local_auth');
  -                        });
  -                    }
  -                    contentDiv.find('.claimMappingAddLinkssLocal').attr('onclick', '');
  -                    contentDiv.find('.claimMappingAddLinkssLocal').unbind();
  -                    var tempStepOrderVal = newStepOrderVal;
  -                    contentDiv.find('.claimMappingAddLinkssLocal').click(function () {
  -                        addLocalRow(this, tempStepOrderVal);
  -                        return false;
  -                    });
  -                    
  -                    
  -                    if (contentDiv.find('#fed_auth_head_' + oldStepOrderVal).length > 0) {
  -                        contentDiv.find('#fed_auth_head_' + oldStepOrderVal).attr('id', 'fed_auth_head_' + newStepOrderVal);
  -                        contentDiv.find('#fed_auth_head_dev_' + oldStepOrderVal).attr('id', 'fed_auth_head_dev_' + newStepOrderVal);
  -                        contentDiv.find('#fed_auth_table_' + oldStepOrderVal).attr('id', 'fed_auth_table_' + newStepOrderVal);
  -                        contentDiv.find('select[name="idpAuthType_' + oldStepOrderVal + '"]').attr('name', 'idpAuthType_' + newStepOrderVal);
  -                        contentDiv.find('.claimMappingAddLinkssIdp').attr('onclick', '');
  -                        contentDiv.find('.claimMappingAddLinkssIdp').unbind();
  -                        contentDiv.find('.claimMappingAddLinkssIdp').click(function () {
  -                            addIDPRow(this, tempStepOrderVal);
  -                            return false;
  -                        });
  -                        var authnName = "";
  -                        if (contentDiv.find('input[name="step_' + oldStepOrderVal + '_fed_auth"]').length > 0) {
  -                            $.each(contentDiv.find('input[name="step_' + oldStepOrderVal + '_fed_auth"]'), function () {
  -                                $(this).attr('name', 'step_' + newStepOrderVal + '_fed_auth');
  -                                authnName = $(this).val();
  -                            });
  -                            $.each(contentDiv.find('select[name="step_' + oldStepOrderVal + '_idp_' + authnName + '_fed_authenticator"]'), function () {
  -                                $(this).attr('name', 'step_' + newStepOrderVal + '_idp_' + authnName + '_fed_authenticator');
  -                            });
  -                        }
  -                    }
  -                }
  -                
  -                newStepOrderVal++;
  -            });
  -        }
  -    }
  -    
  -    function deleteLocalAuthRow(obj) {
  -        localAuthNumber--;
  -        jQuery(obj).parent().parent().remove();
  -        if ($(jQuery('#permissionAddTable tr')).length == 1) {
  -            $(jQuery('#permissionAddTable')).toggle();
  -        }
  -    }
  -    
  -    function addLocalRow(obj, stepId) {
  -        //var stepId = jQuery(obj).parent().children()[0].value;
  -        var selectedObj = jQuery(obj).prev().find(":selected");
  -        var selectedAuthenticatorName = selectedObj.val();
  -        var selectedAuthenticatorDisplayName = selectedObj.text();
  -        if (!validateAuthenticators('step_' + stepId + '_local_auth', selectedAuthenticatorName)) {
  -            return false;
  -        }
  -        
  -        jQuery(obj)
  -            .parent()
  -            .parent()
  -            .parent()
  -            .parent()
  -            .append(
  -                jQuery('<tr><td><input name="step_' + stepId + '_local_auth" id="" type="hidden" value="' + selectedAuthenticatorName + '" />' + selectedAuthenticatorDisplayName + '</td><td class="leftCol-small" ><a onclick="deleteLocalAuthRow(this);return false;" href="#" class="icon-link" style="background-image: url(images/delete.gif)"> Delete </a></td></tr>'));
  -    }
  -    
  -    function addIDPRow(obj, stepID) {
  -        var selectedObj = jQuery(obj).prev().find(":selected");
  -        var selectedIDPName = selectedObj.val();
  -        if (!validateAuthenticators('step_' + stepID + '_fed_auth', selectedIDPName)) {
  -            return false;
  -        }
  -        
  -        //var stepID = jQuery(obj).parent().children()[1].value;
  -        var dataArray = selectedObj.attr('data').split('%fed_auth_sep_%');
  -        var valuesArray = selectedObj.attr('data-values').split('%fed_auth_sep_%');
  -        var newRow = '<tr><td><input name="step_' + stepID + '_fed_auth" id="" type="hidden" value="' + selectedIDPName + '" />' + selectedIDPName + ' </td><td> <select name="step_' + stepID + '_idp_' + selectedIDPName + '_fed_authenticator" style="float: left; min-width: 150px;font-size:13px;">';
  -        for (var i = 0; i < dataArray.length; i++) {
  -            newRow += '<option value="' + valuesArray[i] + '">' + dataArray[i] + '</option>';
  -        }
  -        newRow += '</select></td><td class="leftCol-small" ><a onclick="deleteIDPRow(this);return false;" href="#" class="icon-link" style="background-image: url(images/delete.gif)"> Delete </a></td></tr>';
  -        jQuery(obj)
  -            .parent()
  -            .parent()
  -            .parent()
  -            .parent()
  -            .append(
  -                jQuery(newRow));
  -    }
  -    
  -    function validateAuthenticators(itemName, authenticatorName) {
  -        if ($('[name=' + itemName + ']').length > 0) {
  -            var isNew = true;
  -            $.each($('[name=' + itemName + ']'), function () {
  -                if ($(this).val() == authenticatorName) {
  -                    CARBON.showWarningDialog('Authenticator "' + authenticatorName + '" is already added.');
  -                    isNew = false;
  -                    return false;
  -                }
  -            });
  -            if (!isNew) {
  -                return false;
  -            }
  -        }
  -        return true;
  -    }
  -    
  -    function setSubjectStep(element) {
  -        $.each($('.subject_steps'), function () {
  -            $(this).attr('checked', false);
  -        });
  -        $(element).attr('checked', true);
  -    }
  -    
  -    function setAttributeStep(element) {
  -        $.each($('.attribute_steps'), function () {
  -            $(this).attr('checked', false);
  -        });
  -        $(element).attr('checked', true);
  -    }
  -
  +    var templates = $.parseJSON('<%=templatesJson%>');
  +
  +    function addNewUIStep(){
  +        stepOrder++;
  +        jQuery('#stepsConfRow .steps').append(jQuery('<h2 id="step_head_' + stepOrder +
  +            '" class="sectionSeperator trigger active step_heads" style="background-color: beige; clear: both;"><input type="hidden" value="' + stepOrder + '" name="auth_step" id="auth_step"><a class="step_order_header" href="#">Step ' + stepOrder + '</a><a href="#" class="delete_step icon-link" style="background-image: url(images/delete.gif);float:right;width: 9px;"></a></h2><div class="toggle_container sectionSub step_contents" style="margin-bottom:10px;" id="step_dev_' + stepOrder + '"> <div style="padding-bottom: 5px"><table class="carbonFormTable"><tr><td><input type="checkbox" style="vertical-align: middle;" id="subject_step_' + stepOrder + '" name="subject_step_' + stepOrder + '" class="subject_steps" onclick="setSubjectStep(this)"><label for="subject_step_' + stepOrder + '" style="cursor: pointer;">Use subject identifier from this step</label></td></tr><tr><td><input type="checkbox" style="vertical-align: middle;" id="attribute_step_' + stepOrder + '" name="attribute_step_' + stepOrder + '" class="attribute_steps" onclick="setAttributeStep(this)" ><label for="attribute_step_' + stepOrder + '" style="cursor: pointer;">Use attributes from this step</label></td></tr></table></div><h2 id="local_auth_head_' + stepOrder + '" class="sectionSeperator trigger active" style="background-color: floralwhite;"><a href="#">Local Authenticators</a></h2><div class="toggle_container sectionSub" style="margin-bottom:10px;" id="local_auth_head_dev_' + stepOrder + '"><table class="styledLeft" width="100%" id="local_auth_table_' + stepOrder + '"><thead><tr><td><select name="step_' + stepOrder + '_local_oauth_select" style="float: left; min-width: 150px;font-size:13px;"><%=localAuthTypes.toString()%></select><a id="localOptionAddLinkStep_' + stepOrder + '" onclick="addLocalRow(this,' + stepOrder + ');return false;" class="icon-link claimMappingAddLinkss claimMappingAddLinkssLocal" style="background-image:url(images/add.gif);">Add Authenticator</a></td></tr></thead></table> </div><%if (enabledIdpType.length() > 0) { %> <h2 id="fed_auth_head_' + stepOrder + '" class="sectionSeperator trigger active" style="background-color: floralwhite;"><a href="#">Federated Authenticators</a></h2><div class="toggle_container sectionSub" style="margin-bottom:10px;" id="fed_auth_head_dev_' + stepOrder + '"><table class="styledLeft" width="100%" id="fed_auth_table_' + stepOrder + '"><thead> <tr><td><select name="idpAuthType_' + stepOrder + '" style="float: left; min-width: 150px;font-size:13px;"><%=enabledIdpType.toString()%></select><a id="claimMappingAddLinkss" onclick="addIDPRow(this,' + stepOrder + ');return false;" class="icon-link claimMappingAddLinkssIdp" style="background-image:url(images/add.gif);">Add Authenticator</a></td></tr></thead></table></div><%}%></div>'));
  +        if (!$('#stepsConfRow').is(":visible")) {
  +            $(jQuery('#stepsConfRow')).toggle();
  +        }
  +        if (stepOrder == 1) {
  +            $('#subject_step_' + stepOrder).attr('checked', true);
  +            $('#attribute_step_' + stepOrder).attr('checked', true);
  +        }
  +    }
   </script>
  -
  -<fmt:bundle basename="org.wso2.carbon.identity.application.mgt.ui.i18n.Resources">
  -    <div id="middle">
  -    <h2>
  -        <fmt:message key='breadcrumb.advanced.auth.step.config.for'/><%=Encode.forHtmlContent(spName)%>
  -    </h2>
  -    <div id="workArea">
  -        <form id="configure-auth-flow-form" method="post" name="configure-auth-flow-form" method="post"
  -              action="configure-authentication-flow-finish-ajaxprocessor.jsp">
  -            <input type=hidden name=spName value='<%=Encode.forHtmlAttribute(spName)%>'/>
  -            
  -            
  -            <h2 id="authentication_step_config_head" class="sectionSeperator trigger">
  -                <a href="#"><fmt:message key="title.config.authentication.steps"/></a>
  -            </h2>
  -            
  -            <div class="toggle_container sectionSub" style="margin-bottom:10px;" id="stepsConfRow">
  -                <table>
  -                    <tr>
  -                        <td><a id="stepsAddLink" class="icon-link"
  -                               style="background-image:url(images/add.gif);margin-left:0"><fmt:message
  -                            key='button.add.step'/></a></td>
  -                    </tr>
  -                </table>
  -                <div class="steps">
  -                    
  -                    <%
  -                        if (steps != null && steps.length > 0) {
  -                            for (AuthenticationStep step : steps) {
  -                    %>
  -                    
  -                    <h2 id="step_head_<%=step.getStepOrder()%>" class="sectionSeperator trigger active step_heads"
  -                        style="background-color: beige; clear: both;">
  -                        <input type="hidden" value="<%=step.getStepOrder()%>" name="auth_step" id="auth_step"/>
  -                        <a class="step_order_header" href="#">Step <%=step.getStepOrder()%>
  -                        </a>
  -                        <a onclick="deleteStep(this);return false;" href="#" class="icon-link"
  -                           style="background-image: url(images/delete.gif);float:right;width: 9px;"></a>
  -                    </h2>
  -                    <div class="toggle_container sectionSub step_contents" style="margin-bottom:10px;display: none;"
  -                         id="step_dev_<%=step.getStepOrder()%>">
  -                        <div style="padding-bottom: 5px">
  -                            <table class="carbonFormTable">
  -                                <tr>
  -                                    <td><input type="checkbox" style="vertical-align: middle;"
  -                                               id="subject_step_<%=step.getStepOrder()%>"
  -                                               name="subject_step_<%=step.getStepOrder()%>" class="subject_steps"
  -                                               onclick="setSubjectStep(this)" <%=step.getSubjectStep() ? "checked" : "" %>><label
  -                                        for="subject_step_<%=step.getStepOrder()%>" style="cursor: pointer;">Use subject
  -                                        identifier from this step</label></td>
  -                                </tr>
  -                                <tr>
  -                                    <td><input type="checkbox" style="vertical-align: middle;"
  -                                               id="attribute_step_<%=step.getStepOrder()%>"
  -                                               name="attribute_step_<%=step.getStepOrder()%>" class="attribute_steps"
  -                                               onclick="setAttributeStep(this)" <%=step.getAttributeStep() ? "checked" : "" %>><label
  -                                        for="attribute_step_<%=step.getStepOrder()%>" style="cursor: pointer;">Use
  -                                        attributes from this step</label></td>
  -                                </tr>
  -                            </table>
  -                        </div>
  -                        <h2 id="local_auth_head_<%=step.getStepOrder()%>" class="sectionSeperator trigger active"
  -                            style="background-color: floralwhite;">
  -                            <a href="#">Local Authenticators</a>
  -                        </h2>
  -                        <div class="toggle_container sectionSub" style="margin-bottom:10px;"
  -                             id="local_auth_head_dev_<%=step.getStepOrder()%>">
  -                            <table class="styledLeft" width="100%" id="local_auth_table_<%=step.getStepOrder()%>">
  -                                <thead>
  -                                <tr>
  -                                    <td>
  -                                        <select name="step_<%=step.getStepOrder()%>_local_oauth_select"
  -                                                style="float: left; min-width: 150px;font-size:13px;">
  -                                            <%=localAuthTypes.toString()%>
  -                                        </select>
  -                                        <a id="localOptionAddLinkStep_<%=step.getStepOrder()%>"
  -                                           onclick="addLocalRow(this,'<%=step.getStepOrder()%>');return false;"
  -                                           class="icon-link claimmappingAddLinkss claimMappingAddLinkssLocal"
  -                                           style="background-image:url(images/add.gif);">Add Authenticator
  -                                        </a>
  -                                    </td>
  -                                </tr>
  -                                </thead>
  -                                <%
  -                                    LocalAuthenticatorConfig[] lclAuthenticators = step.getLocalAuthenticatorConfigs();
  -                                    
  -                                    if (lclAuthenticators != null && lclAuthenticators.length > 0) {
  -                                        int i = 0;
  -                                        for (LocalAuthenticatorConfig lclAuthenticator : lclAuthenticators) {
  -                                            if (lclAuthenticator != null) {
  -                                %>
  -                                <tr>
  -                                    <td>
  -                                        <input name="step_<%=step.getStepOrder()%>_local_auth" id="" type="hidden"
  -                                               value="<%=Encode.forHtmlAttribute(lclAuthenticator.getName())%>"/>
  -                                        <%=Encode.forHtmlContent(lclAuthenticator.getDisplayName())%>
  -                                    </td>
  -                                    <td class="leftCol-small">
  -                                        <a onclick="deleteLocalAuthRow(this);return false;" href="#" class="icon-link"
  -                                           style="background-image: url(images/delete.gif)"> Delete </a>
  -                                    </td>
  -                                </tr>
  -                                <%
  -                                            }
  -                                        }
  -                                    }
  -                                %>
  -                            </table>
  -                        </div>
  -                        
  -                        <%if (federatedIdPs != null && federatedIdPs.length > 0 && (enabledIdpType.length() > 0 || (step.getFederatedIdentityProviders() != null && step.getFederatedIdentityProviders().length > 0))) { %>
  -                        <h2 id="fed_auth_head_<%=step.getStepOrder()%>" class="sectionSeperator trigger active"
  -                            style="background-color: floralwhite;">
  -                            <a href="#">Federated Authenticators</a>
  -                        </h2>
  -                        
  -                        <div class="toggle_container sectionSub" style="margin-bottom:10px;"
  -                             id="fed_auth_head_dev_<%=step.getStepOrder()%>">
  -                            <table class="styledLeft" width="100%" id="fed_auth_table_<%=step.getStepOrder()%>">
  -                                <thead>
  -                                <tr style="<%=enabledIdpType.length() > 0 ? "" : "display:none"%>">
  -                                    <td>
  -                                        <select name="idpAuthType_<%=step.getStepOrder()%>"
  -                                                style="float: left; min-width: 150px;font-size:13px;">
  -                                            <%=enabledIdpType.toString()%>
  -                                        </select>
  -                                        <a id="claimMappingAddLinkss"
  -                                           onclick="addIDPRow(this,'<%=step.getStepOrder()%>');return false;"
  -                                           class="icon-link claimMappingAddLinkssIdp"
  -                                           style="background-image:url(images/add.gif);">Add Authenticator</a>
  -                                    </td>
  -                                </tr>
  -                                </thead>
  -                                <%
  -                                    
  -                                    IdentityProvider[] fedIdps = step.getFederatedIdentityProviders();
  -                                    if (fedIdps != null && fedIdps.length > 0) {
  -                                        int j = 0;
  -                                        for (IdentityProvider idp : fedIdps) {
  -                                            if (idp != null) {
  -                                %>
  -                                
  -                                <tr>
  -                                    <td>
  -                                        <input name="step_<%=step.getStepOrder()%>_fed_auth" id="" type="hidden"
  -                                               value="<%=Encode.forHtmlAttribute(idp.getIdentityProviderName())%>"/>
  -                                        <%=Encode.forHtmlContent(idp.getIdentityProviderName()) %>
  -                                    </td>
  -                                    <td>
  -                                        <select
  -                                            name="step_<%=step.getStepOrder()%>_idp_<%=Encode.forHtmlAttribute(idp.getIdentityProviderName())%>_fed_authenticator"
  -                                            style="float: left; min-width: 150px;font-size:13px;"><%=stepIdpAuthenticators.get(step.getStepOrder() + "_" + idp.getIdentityProviderName())%>
  -                                        </select>
  -                                    </td>
  -                                    <td class="leftCol-small">
  -                                        <a onclick="deleteIDPRow(this);return false;" href="#" class="icon-link"
  -                                           style="background-image: url(images/delete.gif)"> Delete </a>
  -                                    </td>
  -                                </tr>
  -                                <%
  -                                            }
  -                                        }
  -                                    }
  -                                %>
  -                            </table>
  -                        </div>
  -                        <% } %>
  -                    
  -                    </div>
  -                    
  -                    <% }
  -                    } %>
  -                </div>
  -                <div class="script-select-container"  <%= !isConditionalAuthenticationEnabled ? "hidden" : "" %> >
  -                    <label class="noselect">
  -                        <input id="enableScript" name="enableScript" type="checkbox" value="true" <%
  -                            if (appBean.getServiceProvider().getLocalAndOutBoundAuthenticationConfig() != null) {
  -                                if (appBean.getServiceProvider().getLocalAndOutBoundAuthenticationConfig().getAuthenticationScriptConfig() != null) {
  -                                    if (appBean.getServiceProvider().getLocalAndOutBoundAuthenticationConfig()
  -                                        .getAuthenticationScriptConfig().getEnabled() && isConditionalAuthenticationEnabled) { %>
  -                               checked="checked"  <% }
  -                        }
  -                        }%>/> Enable Script Based Conditional Authentication
  -                    </label>
  -                </div>
  -            </div>
  -            
  -            <div style="clear:both"></div>
  -            <!-- sectionSub Div -->
  -            <br/>
  -            <h2 id="authentication_step_config_head" class="sectionSeperator trigger active"
  -                <%=!isConditionalAuthenticationEnabled ? "hidden" : "" %> >
  -                <a href="#">Script Based Conditional Authentication</a>
  -            </h2>
  -            
  -            <div class="toggle_container sectionSub" <%=!isConditionalAuthenticationEnabled ? "hidden" : "" %>
  -                 id="editorRow">
  -                <div style="position: relative;">
  -                    <div class="sectionSub step_contents" id="codeMirror">
  -<textarea id="scriptTextArea" name="scriptTextArea"
  -          placeholder="Write custom JavaScript or select from templates that match a scenario..."
  -          style="height: 500px;width: 100%; display: none;"><%
  -    if (appBean.getServiceProvider().getLocalAndOutBoundAuthenticationConfig() != null) {
  -        if (appBean.getServiceProvider().getLocalAndOutBoundAuthenticationConfig().getAuthenticationScriptConfig() != null) {
  -            out.print(appBean.getServiceProvider().getLocalAndOutBoundAuthenticationConfig().getAuthenticationScriptConfig().getContent());
  -        }
  -    }
  -%></textarea>
  -                    </div>
  -                    <div id="codeMirrorTemplate" class="step_contents">
  -                        <div class="add-template-container vertical-text">
  -                            <a id="addTemplate" class="icon-link noselect">Templates</a>
  -                        </div>
  -                        <div class="template-list-container">
  -                            <ul id="template_list"></ul>
  -                        </div>
  -                    </div>
  -                </div>
  -            </div>
  -            <div style="clear:both"></div>
  -            <div class="buttonRow" style=" margin-top: 10px;">
  -                <input id="createApp" type="button" value="<fmt:message key='button.update.service.provider'/>"/>
  -                <input type="button" value="<fmt:message key='button.cancel'/>"
  -                       onclick="javascript:location.href='configure-service-provider.jsp?display=auth_config&spName=<%=Encode.forUriComponent(spName)%>'"/>
  -            </div>
  -        </form>
  -    </div>
  -    
  -    <script id="template-info" type="text/x-handlebars-template">
  -        <div id='messagebox-template-summary' class="messagebox-warning-custom" style="height: auto;">
  -            <h2>{{title}}</h2>
  -            <br/>
  -            {{#if summary}}
  -            <p>{{summary}}</p>
  -            <br/>
  -            {{/if}}
  -            {{#if preRequisites}}
  -            <h3>Prerequisites</h3>
  -            <ul>
  -                {{#each preRequisites}}
  -                <li>{{this}}</li>
  -                {{/each}}
  -            </ul>
  -            <br/>
  -            {{/if}}
  -            {{#if parametersDescription}}
  -            <h3>Parameters</h3>
  -            <table>
  -                <tbody>
  -                {{#each parametersDescription}}
  -                <tr>
  -                    <td><i>{{@key}}</i></td>
  -                    <td>{{this}}</td>
  -                </tr>
  -                {{/each}}
  -                </tbody>
  -            </table>
  -            <br/>
  -            {{/if}}
  -            {{#if defaultStepsDescription}}
  -            <h3>Default Steps</h3>
  -            <ul>
  -                {{#each defaultStepsDescription}}
  -                <li>{{@key}} : {{this}}</li>
  -                {{/each}}
  -            </ul>
  -            <br/>
  -            {{/if}}
  -            {{#if helpLink}}
  -            <h3>Help/Reference</h3>
  -            <a href="{{helpLink}}">{{helpLink}}</a>
  -            {{/if}}
  -            <div id="template-replace-warn" class="error-msg">
  -                <p>The template code will replace the existing scripts in the editor. Any of your current
  -                    changes will be lost. Click "OK" to continue.</p>
  -            </div>
  -        </div>
  -    </script>
  -
  -
  -</fmt:bundle>
  +<script src="./js/configure-authentication-flow.js"></script>
positive.code: 
  %>
  
  <script>
      var stepOrder = 0;
      <%if(steps != null){%>
      var stepOrder = <%=steps.length%>;
  
negative.code:     templatesJson = StringEscapeUtils.escapeJavaScript(templatesJson);
  
  %>
  
  <%
      
  