angular.module('commonsApp').directive('progressBar', [function () {

    return {
      restrict: 'E',
      scope: {
        curVal: '@',
        maxVal: '@',
        showVal: '@',
        valText: '@'
      },
      template: "<div class='angular_progress_bar'>"+
                  "<div class='angular_progress_bar_bar'><span class='progress-value' ng-if='showVal'>{{valText}}</span></div>"+
                "</div>",    

      link: function ($scope, element, attrs) {
        
        function updateProgress() {
          var progress = 0;
          
    	  attrs.$observe('showVal', function(value){
              if(!value){
                  $scope.showVal=false;
              }
    	  });
    	  
    	  attrs.$observe('valText', function(value){
              if(!value){
                  $scope.valText="";
              }
    	  });
          
          if ($scope.maxVal) {
            progress = Math.min($scope.curVal, $scope.maxVal) / $scope.maxVal * element.find('.angular_progress_bar').width();
            if ($scope.curVal > 0 && progress < 1) {
            	progress = 1;
            }
          }
          
          element.find('.angular_progress_bar_bar').css('width', progress);
        }
        
        $scope.$watch('curVal', updateProgress);
        $scope.$watch('maxVal', updateProgress);        
      }
    };  
 }]);

angular.module('commonsApp').directive('loadingSpinner', function() {
    return {
        restrict: 'A',
        replace: true,
        transclude: true,
        scope: {
          loading: '=loadingSpinner'
        },
        template: '<div><div ng-show="loading" class="my-loading-spinner-container"></div><div ng-hide="loading" ng-transclude></div></div>',
        link: function(scope, element, attrs) {
          var spinner = new Spinner().spin();
          var loadingContainer = element.find('.my-loading-spinner-container')[0];
          loadingContainer.appendChild(spinner.el);
        }
      };
    });