"use strict";

// Directive for display errors bootstrap style on forms
app.directive("showErrors", function () {
    return {
        restrict: "A",
        require: "^form",
        link: function (scope, el, attrs, formCtrl) {
            // Find the text box element, which has the 'name' attribute
            var inputEl = el[0].querySelector("[name]");

            // Convert the native text box element to an angular element
            var inputNgEl = angular.element(inputEl);
            var inputName = inputNgEl.attr("name");

            // only apply the has-error class after the user leaves the text box
            inputNgEl.bind("blur", function () {
                el.toggleClass("has-error has-feedback", formCtrl[inputName].$invalid);
                $(inputEl).toggleClass("invalidBackground", formCtrl[inputName].$invalid);
                $(inputEl).toggleClass("validBackground", !formCtrl[inputName].$invalid);
                if (formCtrl[inputName].$invalid) {
                    if (inputName === "CustomPositionID") {
                        $(el).append('<span class="glyphicon glyphicon-remove form-control-feedback noTop"></span>');
                    }
                    else {
                        $(el).append('<span class="glyphicon glyphicon-remove form-control-feedback"></span>');
                    }
                }
                else {
                    var glyphRemove = $(el).find(".glyphicon-remove");
                    if (glyphRemove)
                        glyphRemove.remove();
                }
            })
        }
    }
});