(function () {
    "use strict";

    angular.module("enrCircularProgressBarModule", [])
        .directive("enrCircularProgressBar", ["progressBarLibService", "$rootScope", function (progressBarLibService, $rootScope) {
            function link(scope, element) {
                var progressBarElement = element[0];

                // Draw circle
                var circle = new progressBarLibService.Circle(progressBarElement,
                    {
                        color: scope.displayColor,
                        strokeWidth: 6,
                        trailWidth: 6,
                        trailColor: "#e5e5e5",
                        text: {
                            color: "#9b9b9b",
                            value: " "
                        } // value triggers creation of <p> element on which we can attach glyph below.
                    });

                // if displayGlyph is true, show the checkmark icon
                // otherwise, show the play/pause icon
                var statusIcon = circle.text;
                if (scope.displayGlyph === "true")
                    statusIcon.className = "progressbar-glyph zmdi zmdi-check-all";
                else
                    statusIcon.className = "progressbar-glyph zmdi zmdi-pause";

                // Draw progress bar fill
                var deregisterWatch = scope.$watch("displayPercent", function (displayPercent) {
                    // Do nothing if no, or incomplete, data.
                    if (displayPercent === undefined)
                        return;

                    circle.set(displayPercent);

                    // If the progress level is never going to change, cancel watch.
                    if (scope.progressChanges !== "true")
                        deregisterWatch();
                });

                $rootScope.$on('timerPausedChanged', function (event, args) {
                    if (scope.displayGlyph === "true") {
                        // don't update the static checkmark icon
                        return;
                    }

                    if (args.isPaused) {
                        statusIcon.className = "progressbar-glyph zmdi zmdi-play";
                    } else {
                        statusIcon.className = "progressbar-glyph zmdi zmdi-pause";
                    }
                });
            }

            return {
                scope: {
                    displayColor: "@",
                    displayPercent: "=",
                    displayGlyph: "@",
                    progressChanges: "@"
                },
                link: link,
                restrict: "E"
            }
        }
        ]);
}());